@progress/kendo-angular-grid 6.1.3 → 7.0.0-next.202203311511

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

@@ -0,0 +1,142 @@
+/**-----------------------------------------------------------------------------------------
+* 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 "./column-menu-item.component";
+import * as i3 from "../filtering/menu/filter-menu-container.component";
+import * as i4 from "./column-menu-item-content-template.directive";
+/**
+ * Represents the component for editing column filters 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-filter` component.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [kendoGridBinding]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *              <kendo-grid-columnmenu-filter [service]="service">
+ *              </kendo-grid-columnmenu-filter>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
+    constructor(localization, hostElement) {
+        super();
+        this.localization = localization;
+        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';
+    }
+    /**
+     * @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();
+    }
+}
+ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-columnmenu-item
+            [text]="localization.get('filter')"
+            icon="filter"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoGridColumnMenuItemContentTemplate>
+                <kendo-grid-filter-menu-container
+                    [column]="service.column"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [filter]="service.filter"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-grid-filter-menu-container>
+            </ng-template>
+        </kendo-grid-columnmenu-item>
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnmenu-filter',
+                    template: `
+        <kendo-grid-columnmenu-item
+            [text]="localization.get('filter')"
+            icon="filter"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoGridColumnMenuItemContentTemplate>
+                <kendo-grid-filter-menu-container
+                    [column]="service.column"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [filter]="service.filter"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-grid-filter-menu-container>
+            </ng-template>
+        </kendo-grid-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], expanded: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }] } });

package/esm2015/column-menu/column-menu-item-base.js

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, isDevMode, HostBinding, Component } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ColumnMenuItemBase {
+    constructor() {
+        this.hostClass = true;
+    }
+    ngOnInit() {
+        if (isDevMode() && !this.service) {
+            throw new Error('The service input of the predefined column menu components is mandatory.');
+        }
+    }
+    /**
+     * @hidden
+     */
+    close() {
+        this.service.close();
+    }
+}
+ColumnMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuItemBase, selector: "kendo-grid-column-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-column-menu-item-base',
+                    template: ``
+                }]
+        }], propDecorators: { service: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-columnmenu-item-wrapper']
+            }] } });

package/esm2015/column-menu/column-menu-item-content-template.directive.js

@@ -0,0 +1,54 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the content template of the
+ * [kendo-grid-columnmenu-item]({% slug api_grid_columnmenuitemcomponent %}) component.
+ * Provides an option for specifying the content of a column item.
+ * To define the content template, nest an `<ng-template>` tag with the
+ * `kendoGridColumnMenuItemContentTemplate` directive inside a `<kendo-grid-columnmenu-item>`.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate>
+ *              <kendo-grid-columnmenu-item text="Item Text" [expanded]="true">
+ *                  <ng-template kendoGridColumnMenuItemContentTemplate>
+ *                      Item Content
+ *                  </ng-template>
+ *              </kendo-grid-columnmenu-item>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuItemContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ColumnMenuItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnMenuItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridColumnMenuItemContentTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

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

@@ -0,0 +1,188 @@
+/**-----------------------------------------------------------------------------------------
+* 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, ContentChild } from '@angular/core';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * Represents an item that can be placed inside a
+ * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true" [resizable]="true" #grid>
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
+ *              <kendo-grid-columnmenu-item icon="arrows-resizing" text="Fit column"
+ *                  (itemClick)="grid.autoFitColumn(column); service.close()">
+ *              </kendo-grid-columnmenu-item>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuItemComponent {
+    constructor() {
+        /**
+         * Fires when the item is clicked.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        this.contentState = 'collapsed';
+    }
+    get iconClass() {
+        return `k-i-${this.icon}`;
+    }
+    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';
+    }
+}
+ColumnMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-state-selected]="selected"
+            [class.k-state-disabled]="disabled"
+            role="button"
+            [attr.aria-expanded]="expanded">
+           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
+           </span>
+           {{ text }}
+        </div>
+        <div *ngIf="contentTemplate" [@state]="contentState" style="overflow:hidden;" class="k-columnmenu-item-content">
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+            </ng-container>
+        <div>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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: "12.2.16", 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-grid-columnmenu-item',
+                    template: `
+        <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-state-selected]="selected"
+            [class.k-state-disabled]="disabled"
+            role="button"
+            [attr.aria-expanded]="expanded">
+           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
+           </span>
+           {{ text }}
+        </div>
+        <div *ngIf="contentTemplate" [@state]="contentState" style="overflow:hidden;" class="k-columnmenu-item-content">
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+            </ng-container>
+        <div>
+    `
+                }]
+        }], propDecorators: { itemClick: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ColumnMenuItemContentTemplateDirective, { static: false }]
+            }] } });

package/esm2015/column-menu/column-menu-item.directive.js

@@ -0,0 +1,104 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Keys } from '@progress/kendo-angular-common';
+import { ColumnMenuPositionComponent } from './column-menu-position.component';
+import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
+import { ColumnMenuFilterComponent } from './column-menu-filter.component';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ColumnMenuItemDirective {
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this._isFirst = false;
+        this._isLast = false;
+        this.subs = new Subscription();
+        this.onTab = (e) => {
+            if (e.keyCode !== 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();
+                }
+            }
+        };
+    }
+    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;
+    }
+    get isFirst() {
+        return this._isFirst;
+    }
+    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;
+    }
+    get isLast() {
+        return this._isLast;
+    }
+    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;
+        }
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    getLastColumnMenuItem() {
+        return (this.columnMenuItems.length === 1 ? this.columnMenuItems[0] : this.columnMenuItems[1]);
+    }
+    isExpandableItem() {
+        return this.menuItemComponent instanceof ColumnMenuFilterComponent ||
+            this.menuItemComponent instanceof ColumnMenuChooserComponent ||
+            this.menuItemComponent instanceof ColumnMenuPositionComponent;
+    }
+}
+ColumnMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: { menuItemComponent: ["kendoGridColumnMenuItem", "menuItemComponent"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoGridColumnMenuItem]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { menuItemComponent: [{
+                type: Input,
+                args: ['kendoGridColumnMenuItem']
+            }] } });

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

@@ -0,0 +1,109 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component } 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";
+/**
+ * Represents a column-menu item that can be placed inside a
+ * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * Allows the user to lock or unlock the columns.
+ *
+ * > 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-lock` component.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *              <kendo-grid-columnmenu-lock [service]="service">
+ *              </kendo-grid-columnmenu-lock>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1" [width]="100"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2" [width]="100"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuLockComponent extends ColumnMenuItemBase {
+    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 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;
+    }
+}
+ColumnMenuLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
+       <kendo-grid-columnmenu-item
+            [text]="text"
+            [icon]="icon"
+            (itemClick)="toggleColumn()"
+            [disabled]="disabled">
+       </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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnmenu-lock',
+                    template: `
+       <kendo-grid-columnmenu-item
+            [text]="text"
+            [icon]="icon"
+            (itemClick)="toggleColumn()"
+            [disabled]="disabled">
+       </kendo-grid-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });