@progress/kendo-angular-grid 7.0.0-dev.202201251337 → 7.0.0-next.202204010834

package/editing-directives/row-editing-directive-base.d.ts

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EditingDirectiveBase } from './editing-directive-base';
+import { EditService } from './edit-service.interface';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare abstract class RowEditingDirectiveBase extends EditingDirectiveBase {
+    protected rowIndex: number;
+    /**
+     * @hidden
+     */
+    ngOnInit(): void;
+    protected createDefaultService(): EditService;
+    protected addHandler(): void;
+    protected editHandler(args: any): void;
+    protected saveHandler(args: any): void;
+    protected closeEditor(rowIndex?: number): void;
+    protected clean(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RowEditingDirectiveBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RowEditingDirectiveBase, "[kendoGridRowEditingDirectiveBase]", never, {}, {}, never>;
+}

package/editing-directives/template-editing.directive.d.ts

@@ -0,0 +1,30 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { RowEditingDirectiveBase } from './row-editing-directive-base';
+import { GridComponent } from '../grid.component';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
+import * as i0 from "@angular/core";
+/**
+ * A directive which encapsulates the editing operations of the Grid when using
+ * the Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-the-template-directive)).
+ */
+export declare class TemplateEditingDirective extends RowEditingDirectiveBase {
+    protected grid: GridComponent;
+    protected localDataChangesService: LocalDataChangesService;
+    /**
+     * The function that creates the `dataItem` for the new rows.
+     */
+    createNewItem: Function;
+    protected dataItem: any;
+    protected originalValues: any;
+    constructor(grid: GridComponent, localDataChangesService: LocalDataChangesService);
+    protected editHandler(args: any): void;
+    protected closeEditor(rowIndex: number): void;
+    protected createModel(args: any): any;
+    protected saveModel(args: any): any;
+    protected clean(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TemplateEditingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TemplateEditingDirective, "[kendoGridTemplateEditing]", never, { "createNewItem": "kendoGridTemplateEditing"; }, {}, never>;
+}

package/esm2015/column-menu/column-chooser.component.js

@@ -0,0 +1,166 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { closest } from '../rendering/common/dom-queries';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/column-info.service";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "./column-list.component";
+/**
+ * Represents the component for selecting columns in the Grid. To enable the user to show or hide columns,
+ * add the component inside a [ToolbarTemplate]({% slug api_grid_toolbartemplatedirective %}) directive.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data">
+ *          <ng-template kendoGridToolbarTemplate>
+ *             <kendo-grid-column-chooser></kendo-grid-column-chooser>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ * ```
+ */
+export class ColumnChooserComponent {
+    constructor(localization, columnInfoService, popupService, ngZone, renderer, changeDetector) {
+        this.localization = localization;
+        this.columnInfoService = columnInfoService;
+        this.popupService = popupService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.changeDetector = changeDetector;
+        /**
+         * Specifies if the changes in the visibility of the column will be immediately applied.
+         */
+        this.autoSync = false;
+        /**
+         * Specifies if all columns can be hidden.
+         */
+        this.allowHideAll = true;
+    }
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    /**
+     * @hidden
+     */
+    toggle(anchor, template) {
+        if (!this.popupRef) {
+            const direction = this.localization.rtl ? 'right' : 'left';
+            this.popupRef = this.popupService.open({
+                anchor: anchor,
+                content: template,
+                positionMode: 'absolute',
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction }
+            });
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen("document", "click", ({ target }) => {
+                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor)) {
+                    this.close();
+                }
+            }));
+        }
+        else {
+            this.close();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onApply(changed) {
+        this.close();
+        if (changed.length) {
+            this.changeDetector.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onChange(changed) {
+        this.changeDetector.markForCheck();
+        this.columnInfoService.changeVisibility(changed);
+    }
+    close() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        this.detachClose();
+    }
+    detachClose() {
+        if (this.closeClick) {
+            this.closeClick();
+            this.closeClick = null;
+        }
+    }
+}
+ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnChooserComponent, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
+        <button #anchor
+            type="button"
+            (click)="toggle(anchor, template)"
+            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            [attr.title]="localization.get('columns')">
+            <span class="k-button-icon k-icon k-i-columns"></span>
+        </button>
+        <ng-template #template>
+            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
+            <kendo-grid-columnlist
+                [columns]="columns"
+                [applyText]="localization.get('columnsApply')"
+                [resetText]="localization.get('columnsReset')"
+                [autoSync]="autoSync"
+                [allowHideAll]="allowHideAll"
+                (apply)="onApply($event)"
+                (columnChange)="onChange($event)">
+            </kendo-grid-columnlist>
+        </ng-template>
+    `, isInline: true, components: [{ type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnChooserComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-column-chooser',
+                    template: `
+        <button #anchor
+            type="button"
+            (click)="toggle(anchor, template)"
+            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            [attr.title]="localization.get('columns')">
+            <span class="k-button-icon k-icon k-i-columns"></span>
+        </button>
+        <ng-template #template>
+            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
+            <kendo-grid-columnlist
+                [columns]="columns"
+                [applyText]="localization.get('columnsApply')"
+                [resetText]="localization.get('columnsReset')"
+                [autoSync]="autoSync"
+                [allowHideAll]="allowHideAll"
+                (apply)="onApply($event)"
+                (columnChange)="onChange($event)">
+            </kendo-grid-columnlist>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i3.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }] } });

package/esm2015/column-menu/column-list.component.js

@@ -0,0 +1,211 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { hasClasses } from '../rendering/common/dom-queries';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ColumnListComponent {
+    constructor(element, ngZone, renderer) {
+        this.element = element;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.reset = new EventEmitter();
+        this.apply = new EventEmitter();
+        this.columnChange = new EventEmitter();
+        this.autoSync = true;
+        this.allowHideAll = false;
+        this.actionsClass = 'k-action-buttons';
+        this.unlockedCount = 0;
+    }
+    get className() {
+        return true;
+    }
+    set columns(value) {
+        this._columns = value.filter(column => column.includeInChooser !== false);
+        this.allColumns = value;
+        this.updateColumnState();
+    }
+    get columns() {
+        return this._columns;
+    }
+    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);
+    }
+    ngOnInit() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+                if (hasClasses(e.target, 'k-checkbox')) {
+                    if (this.autoSync) {
+                        const index = parseInt(e.target.getAttribute('data-index'), 10);
+                        const column = this.columns[index];
+                        const hidden = !e.target.checked;
+                        if (Boolean(column.hidden) !== hidden) {
+                            this.ngZone.run(() => {
+                                column.hidden = hidden;
+                                this.columnChange.emit([column]);
+                            });
+                        }
+                    }
+                    else {
+                        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() {
+        if (this.domSubscriptions) {
+            this.domSubscriptions();
+        }
+    }
+    cancelChanges() {
+        this.forEachCheckBox((element, index) => {
+            element.checked = !this.columns[index].hidden;
+        });
+        this.updateDisabled();
+        this.reset.emit();
+    }
+    applyChanges() {
+        const changed = [];
+        this.forEachCheckBox((element, index) => {
+            const column = this.columns[index];
+            const hidden = !element.checked;
+            if (Boolean(column.hidden) !== hidden) {
+                column.hidden = hidden;
+                changed.push(column);
+            }
+        });
+        this.updateDisabled();
+        this.apply.emit(changed);
+    }
+    onTab(e) {
+        if (this.isLast) {
+            e.preventDefault();
+            if (this.service) {
+                this.service.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    }
+    forEachCheckBox(callback) {
+        const checkboxes = this.element.nativeElement.getElementsByClassName('k-checkbox');
+        const length = checkboxes.length;
+        for (let idx = 0; idx < length; idx++) {
+            callback(checkboxes[idx], idx);
+        }
+    }
+    updateDisabled() {
+        if (this.allowHideAll && !this.hasLocked) {
+            return;
+        }
+        const checkedItems = [];
+        this.forEachCheckBox((checkbox, index) => {
+            if (checkbox.checked) {
+                checkedItems.push({ checkbox, index });
+            }
+            checkbox.disabled = false;
+        });
+        if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
+            checkedItems[0].checkbox.disabled = 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;
+            }
+        }
+    }
+    updateColumnState() {
+        this.hasLocked = this.allColumns.filter(column => column.locked && (!column.hidden || column.includeInChooser !== false)).length > 0;
+        this.hasVisibleLocked = this.allColumns.filter(column => column.locked && !column.hidden).length > 0;
+        this.unlockedCount = this.columns.filter(column => !column.locked && !column.hidden).length;
+        const filteredColumns = this.allColumns.filter(column => column.includeInChooser === false && !column.hidden);
+        if (filteredColumns.length) {
+            this.hasFiltered = filteredColumns.length > 0;
+            this.hasUnlockedFiltered = filteredColumns.filter(column => !column.locked).length > 0;
+        }
+        else {
+            this.hasFiltered = false;
+            this.hasUnlockedFiltered = false;
+        }
+    }
+}
+ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", 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" } }, viewQueries: [{ propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-column-list">
+            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
+                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+            </label>
+        </div>
+        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+            <button 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>
+            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+        </div>
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnlist',
+                    template: `
+        <div class="k-column-list">
+            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
+                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+            </label>
+        </div>
+        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+            <button 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>
+            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ["class.k-column-list-wrapper"]
+            }], reset: [{
+                type: Output
+            }], apply: [{
+                type: Output
+            }], columnChange: [{
+                type: Output
+            }], columns: [{
+                type: Input
+            }], autoSync: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }], applyText: [{
+                type: Input
+            }], resetText: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], applyButton: [{
+                type: ViewChild,
+                args: ['applyButton', { static: false }]
+            }] } });

package/esm2015/column-menu/column-menu-chooser.component.js

@@ -0,0 +1,164 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 } from '@angular/core';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/column-info.service";
+import * as i3 from "./column-menu-item.component";
+import * as i4 from "./column-list.component";
+import * as i5 from "./column-menu-item-content-template.directive";
+/**
+ * Represents the component for selecting columns in the Grid that can be placed
+ * inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * > the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ *
+ * @example
+ * {% meta height:300 %}
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *              <kendo-grid-columnmenu-chooser [service]="service">
+ *              </kendo-grid-columnmenu-chooser>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ * {% endmeta %}
+ */
+export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
+    constructor(localization, columnInfoService, changeDetector, hostElement) {
+        super();
+        this.localization = localization;
+        this.columnInfoService = columnInfoService;
+        this.changeDetector = changeDetector;
+        this.hostElement = hostElement;
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Specifies if the content is expanded.
+         */
+        this.expanded = false;
+        /**
+         * @hidden
+         */
+        this.isLast = false;
+        /**
+         * @hidden
+         */
+        this.actionsClass = 'k-columnmenu-actions';
+    }
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    /**
+     * @hidden
+     */
+    onApply(changed) {
+        this.close();
+        if (changed.length) {
+            this.changeDetector.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.expanded = false;
+        if (this.isLast) {
+            this.service.menuTabbingService.lastFocusable = this.hostElement.nativeElement.querySelector('.k-columnmenu-item');
+        }
+        this.collapse.emit();
+    }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this.expanded = true;
+        this.expand.emit();
+    }
+}
+ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-columnmenu-item
+            [text]="localization.get('columns')"
+            icon="columns"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoGridColumnMenuItemContentTemplate>
+                <kendo-grid-columnlist
+                    [applyText]="localization.get('columnsApply')"
+                    [resetText]="localization.get('columnsReset')"
+                    [columns]="columns"
+                    [autoSync]="false"
+                    [allowHideAll]="false"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    [service]="service"
+                    (apply)="onApply($event)">
+                </kendo-grid-columnlist>
+            </ng-template>
+        </kendo-grid-columnmenu-item>
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnmenu-chooser',
+                    template: `
+        <kendo-grid-columnmenu-item
+            [text]="localization.get('columns')"
+            icon="columns"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoGridColumnMenuItemContentTemplate>
+                <kendo-grid-columnlist
+                    [applyText]="localization.get('columnsApply')"
+                    [resetText]="localization.get('columnsReset')"
+                    [columns]="columns"
+                    [autoSync]="false"
+                    [allowHideAll]="false"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    [service]="service"
+                    (apply)="onApply($event)">
+                </kendo-grid-columnlist>
+            </ng-template>
+        </kendo-grid-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], expanded: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }] } });

package/esm2015/column-menu/column-menu-container.component.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ColumnMenuItemDirective } from './column-menu-item.directive';
+import { Component, ContentChildren } from '@angular/core';
+import { take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "./column-menu.service";
+/**
+ * @hidden
+ */
+export class ColumnMenuContainerComponent {
+    constructor(service, ngZone) {
+        this.service = service;
+        this.ngZone = ngZone;
+    }
+    ngAfterContentInit() {
+        if (!this.columnMenuItems.length) {
+            return;
+        }
+        this.columnMenuItems.first.isFirst = true;
+        this.columnMenuItems.last.isLast = true;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
+    }
+}
+ColumnMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnmenu-container',
+                    template: `
+        <ng-content></ng-content>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ColumnMenuService }, { type: i0.NgZone }]; }, propDecorators: { columnMenuItems: [{
+                type: ContentChildren,
+                args: [ColumnMenuItemDirective, { descendants: true }]
+            }] } });

package/esm2015/column-menu/column-menu-expandable-item.interface.js

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