@progress/kendo-angular-treelist 4.0.6-dev.202203090952 → 5.0.0-next.202204130954

package/esm2015/dragdrop/drag-hint.service.js

@@ -0,0 +1,94 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, SecurityContext } from '@angular/core';
+import { append, offset } from './common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+const updateClass = (element, valid) => {
+    const icon = element.querySelector('.k-icon');
+    icon.className = icon.className
+        .replace(/(plus|cancel)/, valid ? 'plus' : 'cancel');
+};
+const updateLock = (element, locked = null) => {
+    const icon = element.querySelectorAll('.k-icon')[1];
+    const value = locked === null ? '' : (locked ? 'k-i-lock' : 'k-i-unlock');
+    icon.className = icon.className
+        .replace(/(k-i-unlock|k-i-lock)/, '') + ` ${value}`;
+};
+const decorate = (element, target) => {
+    const targetStyles = getComputedStyle(target);
+    element.className = 'k-header k-drag-clue';
+    element.style.position = 'absolute';
+    element.style.zIndex = '20000';
+    element.style.paddingLeft = targetStyles.paddingLeft;
+    element.style.paddingTop = targetStyles.paddingTop;
+    element.style.paddingBottom = targetStyles.paddingBottom;
+    element.style.paddingRight = targetStyles.paddingRight;
+    element.style.width = targetStyles.width;
+    element.style.height = targetStyles.height;
+};
+/**
+ * @hidden
+ */
+export class DragHintService {
+    constructor(santizer) {
+        this.santizer = santizer;
+    }
+    create(down, target, title) {
+        this.initCoords(down);
+        this.dom = document.createElement("div");
+        decorate(this.dom, target);
+        const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
+        this.dom.innerHTML = `
+            <span class="k-icon k-drag-status k-i-cancel k-icon-with-modifier">
+                <span class="k-icon k-icon-modifier"></span>
+            </span>
+            ${safeTitle}
+        `;
+    }
+    attach() {
+        return append(this.dom);
+    }
+    remove() {
+        if (this.dom && this.dom.parentNode) {
+            (function (el) {
+                setTimeout(() => document.body.removeChild(el));
+            })(this.dom); // hack for IE + pointer events!
+            this.dom = null;
+        }
+    }
+    show() {
+        this.dom.style.display = "";
+    }
+    hide() {
+        this.dom.style.display = "none";
+    }
+    enable() {
+        updateClass(this.dom, true);
+    }
+    disable() {
+        updateClass(this.dom, false);
+    }
+    removeLock() {
+        updateLock(this.dom);
+    }
+    toggleLock(locked) {
+        updateLock(this.dom, locked);
+    }
+    move(move) {
+        this.dom.style.top = this.initialTop + move.pageY + 'px';
+        this.dom.style.left = this.initialLeft + move.pageX + 'px';
+    }
+    initCoords(down) {
+        const { top, left } = offset(down.originalEvent.target);
+        this.initialTop = top - down.pageY;
+        this.initialLeft = left - down.pageX;
+    }
+}
+DragHintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragHintService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
+DragHintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragHintService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragHintService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });

package/esm2015/dragdrop/draggable-column.directive.js

@@ -0,0 +1,128 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, EventEmitter, Host, Input, Output, HostBinding } from '@angular/core';
+import { Subscription, of } from 'rxjs';
+import { and, not, or } from '../utils';
+import { takeUntil, delay, filter, tap, switchMap, switchMapTo, map } from 'rxjs/operators';
+import { isFocusableWithTabKey, matchesNodeName } from '../rendering/common/dom-queries';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-common";
+import * as i2 from "./drag-and-drop.service";
+import * as i3 from "./drag-hint.service";
+import * as i4 from "./drop-cue.service";
+import * as i5 from "../navigation/navigation.service";
+/**
+ * @hidden
+ */
+const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
+const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
+const isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
+const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
+const hideThenShow = (element, cont) => {
+    element.style.display = 'none';
+    const result = cont();
+    element.style.display = 'block';
+    return result;
+};
+/**
+ * @hidden
+ */
+export class DraggableColumnDirective {
+    constructor(draggable, element, zone, service, hint, cue, nav, renderer) {
+        this.draggable = draggable;
+        this.element = element;
+        this.zone = zone;
+        this.service = service;
+        this.hint = hint;
+        this.cue = cue;
+        this.nav = nav;
+        this.renderer = renderer;
+        this.context = {};
+        this.drag = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    set enableDrag(enabled) {
+        this.enabled = enabled;
+        this.updateTouchAction();
+    }
+    get hostClass() {
+        return this.enabled;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(filter(_ => this.enabled), filter(({ originalEvent: { target } }) => target === this.element.nativeElement || skipButtons(target)), tap((e) => {
+            const originalEvent = e.originalEvent;
+            if (!e.isTouch) {
+                originalEvent.preventDefault();
+            }
+            this.nav.navigateTo(originalEvent.target);
+        }), switchMap(preventOnDblClick(this.draggable.kendoRelease)), tap(down => {
+            this.hint.create(down, this.element.nativeElement, this.context.hint);
+            this.cue.create();
+        }), switchMap(down => this.draggable.kendoDrag.pipe(tap((e) => {
+            if (e.isTouch) {
+                e.originalEvent.preventDefault();
+            }
+        }), tap(this.hint.attach()), tap(this.cue.attach()), 
+        // eslint-disable-next-line rxjs/no-unsafe-takeuntil
+        takeUntil(this.draggable.kendoRelease), map(move => ({ move, down })))), tap(this.performDrag.bind(this)), switchMapTo(this.draggable.kendoRelease)).subscribe(this.drop.bind(this))));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    drop(upEvent) {
+        this.hint.remove();
+        this.cue.remove();
+        this.service.notifyDrop(this, upEvent);
+    }
+    performDrag({ move }) {
+        this.hint.move(move);
+        const cursorElement = this.elementUnderCursor(move);
+        if (cursorElement) {
+            this.service.notifyDrag(this, cursorElement, move);
+        }
+        this.drag.emit({
+            draggable: this,
+            mouseEvent: move
+        });
+    }
+    elementUnderCursor(mouseEvent) {
+        this.hint.hide();
+        let target = elementUnderCursor(mouseEvent);
+        if (target && /k-grouping-dropclue/.test(target.className)) {
+            target = hideThenShow(target, elementUnderCursor.bind(this, mouseEvent));
+        }
+        this.hint.show();
+        return target;
+    }
+    updateTouchAction() {
+        if (!this.element) {
+            return;
+        }
+        this.renderer.setStyle(this.element.nativeElement, 'touch-action', this.enabled ? 'none' : '');
+    }
+}
+DraggableColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.DragAndDropService }, { token: i3.DragHintService }, { token: i4.DropCueService }, { token: i5.NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, host: { properties: { "class.k-grid-draggable-header": "this.hostClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DraggableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDraggableColumn]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DraggableDirective, decorators: [{
+                    type: Host
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.DragAndDropService }, { type: i3.DragHintService }, { type: i4.DropCueService }, { type: i5.NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { context: [{
+                type: Input
+            }], enableDrag: [{
+                type: Input
+            }], drag: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-draggable-header']
+            }] } });

package/esm2015/dragdrop/drop-cue.service.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { append } from './common';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class DropCueService {
+    create() {
+        this.dom = document.createElement("div");
+        this.dom.className = 'k-grouping-dropclue';
+        this.hide();
+    }
+    attach() {
+        return append(this.dom);
+    }
+    remove() {
+        if (this.dom && this.dom.parentElement) {
+            document.body.removeChild(this.dom);
+            this.dom = null;
+        }
+    }
+    hide() {
+        this.dom.style.display = "none";
+    }
+    position({ left, top, height }) {
+        this.dom.style.display = 'block';
+        this.dom.style.height = height + 'px';
+        this.dom.style.top = top + 'px';
+        const width = this.dom.offsetWidth / 2;
+        this.dom.style.left = left - width + 'px';
+    }
+}
+DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DropCueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/dragdrop/drop-target.directive.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "./drag-and-drop.service";
+/**
+ * @hidden
+ */
+export class DropTargetDirective {
+    constructor(element, service) {
+        this.element = element;
+        this.service = service;
+        this.context = {};
+        this.enter = new EventEmitter();
+        this.leave = new EventEmitter();
+        this.drop = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.service.add(this);
+        const changes = this.service.changes.pipe(filter(({ target }) => target === this));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'leave'))
+            .subscribe(e => {
+            this.leave.next(this.eventArgs(e));
+        }));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'enter'))
+            .subscribe(e => {
+            this.enter.next(this.eventArgs(e));
+        }));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'drop'))
+            .subscribe(e => {
+            this.drop.next(this.eventArgs(e));
+        }));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    eventArgs(e) {
+        return {
+            target: this,
+            mouseEvent: e.mouseEvent,
+            draggable: e.draggable
+        };
+    }
+}
+DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropTargetDirective, deps: [{ token: i0.ElementRef }, { token: i1.DragAndDropService }], target: i0.ɵɵFactoryTarget.Directive });
+DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: { context: "context" }, outputs: { enter: "enter", leave: "leave", drop: "drop" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropTarget]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DragAndDropService }]; }, propDecorators: { context: [{
+                type: Input
+            }], enter: [{
+                type: Output
+            }], leave: [{
+                type: Output
+            }], drop: [{
+                type: Output
+            }] } });

package/esm2015/editing/add-command.directive.js

@@ -0,0 +1,66 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding, Input } from '@angular/core';
+import { BaseCommandDirective } from './base-command.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+/**
+ * Represents the command for adding a new item to the TreeList. You can apply this directive to any
+ * `button` element inside a [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}) or
+ * inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
+ *
+ * When an associated button with the directive is clicked, the
+ * [`add`]({% slug api_treelist_treelistcomponent %}#toc-add) event is triggered
+ * ([see example]({% slug editing_treelist %})).
+ *
+ * > When the row is in the edit mode, the button with `kendoTreeListAddCommand` is automatically hidden.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *    <ng-template kendoTreeListToolbarTemplate>
+ *       <button kendoTreeListAddCommand>Add new</button>
+ *    </ng-template>
+ * </kendo-treelist>
+ * ```
+ *
+ * When added to the command column, the directive takes as input the `cellContext` from the cell template.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
+ *       <button [kendoTreeListAddCommand]="cellContext" class="k-primary">Edit</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ */
+export class AddCommandDirective extends BaseCommandDirective {
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(editService, element, renderer, localization, ngZone);
+        this.commandClass = true;
+        this.readVisible = true;
+    }
+    onClick() {
+        this.editService.beginAdd(this.dataItem);
+    }
+}
+AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AddCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+AddCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AddCommandDirective, selector: "[kendoTreeListAddCommand]", inputs: { cellContext: ["kendoTreeListAddCommand", "cellContext"] }, host: { properties: { "class.k-grid-add-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AddCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListAddCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { cellContext: [{
+                type: Input,
+                args: ['kendoTreeListAddCommand']
+            }], commandClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-add-command']
+            }] } });

package/esm2015/editing/add-event-args.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 {};

package/esm2015/editing/base-command.directive.js

@@ -0,0 +1,55 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { HostListener, HostBinding, Directive } from '@angular/core';
+import { Button } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export class BaseCommandDirective extends Button {
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+    }
+    /**
+     * @hidden
+     */
+    get visible() {
+        if (this.cellContext) {
+            return this.isEdited !== this.readVisible ? '' : 'none';
+        }
+    }
+    get isEdited() {
+        return Boolean(this.cellContext && this.editService.isEdited(this.dataItem) && !this.editService.isEditingCell());
+    }
+    get dataItem() {
+        if (this.cellContext) {
+            return this.cellContext.viewItem.data;
+        }
+    }
+    /**
+     * @hidden
+     */
+    clickHandler(e) {
+        e.preventDefault();
+        this.onClick();
+    }
+}
+BaseCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+BaseCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseCommandDirective, selector: "[kendoTreeListBaseCommand]", host: { listeners: { "click": "clickHandler($event)" }, properties: { "style.display": "this.visible" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListBaseCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });

package/esm2015/editing/cancel-command.directive.js

@@ -0,0 +1,70 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding, Input } from '@angular/core';
+import { BaseCommandDirective } from './base-command.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+/**
+ * Represents the `cancel` command of the TreeList. You can apply this directive to any `button`
+ * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
+ * When an associated button with the directive is clicked, the
+ * [`cancel`]({% slug api_treelist_treelistcomponent %}#toc-cancel) event
+ * is triggered ([see example]({% slug editing_treelist %})).
+ *
+ * > * When the row is not in the edit mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
+ * > * The directive takes as input the `cellContext` from the cell template.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
+ *       <button [kendoTreeListCancelCommand]="cellContext">Cancel changes</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ *
+ * You can control the content of the button based on the state of the row.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
+ *       <button [kendoTreeListCancelCommand]="cellContext">{{isNew ? 'Discard' : 'Cancel changes'}}</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ */
+export class CancelCommandDirective extends BaseCommandDirective {
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(editService, element, renderer, localization, ngZone);
+        this.commandClass = true;
+        this.readVisible = false;
+    }
+    onClick() {
+        if (this.cellContext) {
+            const viewItem = this.cellContext.viewItem;
+            this.editService.endEdit(viewItem.data, viewItem.isNew);
+        }
+    }
+}
+CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CancelCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+CancelCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CancelCommandDirective, selector: "[kendoTreeListCancelCommand]", inputs: { cellContext: ["kendoTreeListCancelCommand", "cellContext"] }, host: { properties: { "class.k-grid-cancel-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CancelCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListCancelCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { cellContext: [{
+                type: Input,
+                args: ['kendoTreeListCancelCommand']
+            }], commandClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-cancel-command']
+            }] } });

package/esm2015/editing/cancel-event-args.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 {};

package/esm2015/editing/edit-command.directive.js

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding, Input } from '@angular/core';
+import { BaseCommandDirective } from './base-command.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+/**
+ * Represents the `edit` command of the TreeList. You can apply this directive to any `button`
+ * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
+ * When an associated button with the directive is clicked, the
+ * [`edit`]({% slug api_treelist_treelistcomponent %}#toc-edit) event
+ * is triggered ([see example]({% slug editing_treelist %})).
+ *
+ * > * When the row is in the edit mode, the button with `kendoTreeListEditCommand` is automatically hidden.
+ * > * The directive takes as input the `cellContext` from the cell template.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
+ *       <button [kendoTreeListEditCommand]="cellContext" class="k-primary">Edit</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ *
+ */
+export class EditCommandDirective extends BaseCommandDirective {
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(editService, element, renderer, localization, ngZone);
+        this.commandClass = true;
+        this.readVisible = true;
+    }
+    onClick() {
+        if (this.cellContext) {
+            this.editService.beginEdit(this.dataItem);
+        }
+    }
+}
+EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+EditCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: { cellContext: ["kendoTreeListEditCommand", "cellContext"] }, host: { properties: { "class.k-grid-edit-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListEditCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { cellContext: [{
+                type: Input,
+                args: ['kendoTreeListEditCommand']
+            }], commandClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-edit-command']
+            }] } });

package/esm2015/editing/edit-event-args.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 {};

package/esm2015/editing/edit-template.directive.js

@@ -0,0 +1,35 @@
+/**-----------------------------------------------------------------------------------------
+* 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 column edit-cell template of the TreeList ([see example]({% slug editing_template_forms_treelist %})).
+ * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
+ * tag with the `kendoTreeListEditTemplate` directive inside a `<kendo-treelist-column>` tag.
+ *
+ * The template context contains the following fields:
+ * - `column`&mdash;The current column instance.
+ * - `dataItem`&mdash;The current data item.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `formGroup`&mdash;The current [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }}).
+ * If you use the TreeList inside [Template-Driven Forms]({{ site.data.urls.angular['forms'] }}), it will be `undefined`.
+ * - `isNew`&mdash;The state of the current item.
+ * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ */
+export class EditTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditTemplateDirective, selector: "[kendoTreeListEditTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListEditTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });