@progress/kendo-angular-treelist 4.0.6 → 5.0.0-next.202204131014

package/esm2015/editing/edit.service.js

@@ -0,0 +1,169 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, EventEmitter } from '@angular/core';
+import { isPresent, isColumnEditable } from '../utils';
+import { CellCloseEvent } from './cell-close-event';
+import { Subject } from 'rxjs';
+import { switchMap, take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+const identity = item => item;
+/**
+ * @hidden
+ */
+export class EditService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new EventEmitter();
+        this.idGetter = identity;
+        // Maps IDs to edited rows
+        this.edited = new Map();
+        this.keepEditCell = false;
+        this.closingCell = false;
+        this.changedSource = new Subject();
+        this.changed = this.changedSource.asObservable().pipe(switchMap(() => this.ngZone.onStable.asObservable().pipe(take(1))));
+    }
+    get newItemGroup() {
+        return this.newItem ? this.newItem.group : null;
+    }
+    editRow(dataItem, group = undefined) {
+        this.edited.set(this.idGetter(dataItem), {
+            group,
+            item: dataItem
+        });
+        this.onChanged();
+    }
+    addRow(parent, group) {
+        this.newItem = { parent, group, dataItem: group ? group.value : null };
+        this.onChanged();
+    }
+    editCell(item, column, group) {
+        if (!isColumnEditable(column, group)) {
+            return;
+        }
+        this.preventCellClose();
+        if (!this.closeCell()) {
+            this.editRow(item, group);
+            this.column = column;
+            this.onChanged();
+        }
+    }
+    isEditing() {
+        return this.edited.size > 0;
+    }
+    isEdited(dataItem) {
+        return (this.newItem && this.newItem.dataItem === dataItem) ||
+            this.edited.has(this.idGetter(dataItem));
+    }
+    isEditingCell() {
+        return isPresent(this.column);
+    }
+    isEditingColumn(column) {
+        return this.column === column;
+    }
+    isEditedColumn(column) {
+        return !this.column || this.column === column;
+    }
+    hasNew(parent) {
+        return Boolean(this.newItem && ((!this.newItem.parent && !parent) ||
+            this.idGetter(this.newItem.parent) === this.idGetter(parent)));
+    }
+    get newDataItem() {
+        if (this.newItem) {
+            return this.newItem.group.value;
+        }
+    }
+    close(item, isNew) {
+        if (isNew) { // parent
+            this.newItem = undefined;
+            return;
+        }
+        this.edited.delete(this.idGetter(item));
+        delete this.column;
+        this.onChanged();
+    }
+    closeCell(originalEvent) {
+        if (this.column && !this.closingCell) {
+            return this.ngZone.run(() => {
+                const { item, group } = this.first;
+                const args = new CellCloseEvent({
+                    column: this.column,
+                    formGroup: group,
+                    originalEvent: originalEvent,
+                    dataItem: item
+                });
+                this.closingCell = true;
+                this.changes.emit(args);
+                this.closingCell = false;
+                if (!args.isDefaultPrevented()) {
+                    this.cancelCell();
+                }
+                return args.isDefaultPrevented();
+            });
+        }
+    }
+    cancelCell() {
+        if (this.column) {
+            this.edited.clear();
+            this.column = null;
+            this.onChanged();
+        }
+    }
+    shouldCloseCell() {
+        return this.column && !this.keepEditCell;
+    }
+    preventCellClose() {
+        this.ngZone.runOutsideAngular(() => {
+            window.clearTimeout(this.keepCellTimeout);
+            this.keepEditCell = true;
+            this.keepCellTimeout = window.setTimeout(() => {
+                this.keepEditCell = false;
+            }, 0);
+        });
+    }
+    context(dataItem) {
+        return this.edited.get(this.idGetter(dataItem));
+    }
+    beginEdit(item) {
+        this.changes.emit({ action: 'edit', dataItem: item });
+    }
+    beginAdd(parent) {
+        this.changes.emit({ action: 'add', parent });
+    }
+    endEdit(dataItem, isNew) {
+        const formGroup = isNew ? this.newItemGroup : this.context(dataItem).group;
+        this.changes.emit({ action: 'cancel', dataItem, formGroup, isNew });
+    }
+    save(item, isNew) {
+        const args = { action: 'save', isNew: isNew };
+        if (isNew) {
+            args.parent = this.newItem.parent;
+            args.formGroup = this.newItem.group;
+            args.dataItem = item;
+        }
+        else {
+            args.dataItem = item;
+            args.formGroup = this.context(item).group;
+        }
+        this.changes.emit(args);
+    }
+    remove(dataItem, parent) {
+        this.changes.emit({ action: 'remove', dataItem, parent });
+    }
+    onChanged() {
+        this.ngZone.runOutsideAngular(() => {
+            this.changedSource.next();
+        });
+    }
+    get first() {
+        if (this.isEditing()) {
+            return this.edited.values().next().value;
+        }
+    }
+}
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

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

@@ -0,0 +1,56 @@
+/**-----------------------------------------------------------------------------------------
+* 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 `remove` 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
+ * [`remove` event]({% slug api_treelist_treelistcomponent %}#toc-remove)
+ * is triggered ([see example]({% slug editing_reactive_forms_treelist %})).
+ *
+ * > * When the row is in the edit mode, the button with the `kendoTreeListRemoveCommand` 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 [kendoTreeListRemoveCommand]="cellContext">Remove row</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ */
+export class RemoveCommandDirective 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.remove(this.dataItem, (this.cellContext.viewItem.parent || {}).data);
+        }
+    }
+}
+RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+RemoveCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RemoveCommandDirective, selector: "[kendoTreeListRemoveCommand]", inputs: { cellContext: ["kendoTreeListRemoveCommand", "cellContext"] }, host: { properties: { "class.k-grid-remove-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoveCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListRemoveCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { cellContext: [{
+                type: Input,
+                args: ['kendoTreeListRemoveCommand']
+            }], commandClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-remove-command']
+            }] } });

package/esm2015/editing/remove-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/save-command.directive.js

@@ -0,0 +1,69 @@
+/**-----------------------------------------------------------------------------------------
+* 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 `save` 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
+ * [`save`]({% slug api_treelist_treelistcomponent %}#toc-save) event
+ * is triggered ([see example]({% slug editing_treelist %})).
+ *
+ * > * When the row is not in the edit mode, the button with `kendoTreeListSaveCommand` 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 [kendoTreeListSaveCommand]="cellContext">Save 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 [kendoTreeListSaveCommand]="cellContext">{{isNew ? 'Add' : 'Update'}}</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ */
+export class SaveCommandDirective extends BaseCommandDirective {
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(editService, element, renderer, localization, ngZone);
+        this.commandClass = true;
+        this.readVisible = false;
+    }
+    onClick() {
+        if (this.cellContext) {
+            this.editService.save(this.dataItem, this.cellContext.viewItem.isNew);
+        }
+    }
+}
+SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SaveCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SaveCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SaveCommandDirective, selector: "[kendoTreeListSaveCommand]", inputs: { cellContext: ["kendoTreeListSaveCommand", "cellContext"] }, host: { properties: { "class.k-grid-save-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SaveCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListSaveCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { cellContext: [{
+                type: Input,
+                args: ['kendoTreeListSaveCommand']
+            }], commandClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-save-command']
+            }] } });

package/esm2015/editing/save-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-directives/create-form-group-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-directives/edit-service.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-directives/editing-directive-base.js

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, Directive } from '@angular/core';
+import { Observable, merge } from 'rxjs';
+import { take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../treelist.component";
+/**
+ * @hidden
+ */
+export class EditingDirectiveBase {
+    constructor(treelist) {
+        this.treelist = treelist;
+    }
+    /**
+     * The edit service that will handle the operations.
+     */
+    set editService(value) {
+        this.userEditService = value;
+    }
+    get editService() {
+        return this.userEditService || this.defaultEditService;
+    }
+    /**
+     * Gets or sets a function that will be called to determine the unique identifier
+     * for new items. The function receives the `item` and its `parent` as parameters
+     * and must return an ID.
+     */
+    set newItemId(callback) {
+        this.idCallback = callback;
+    }
+    get newItemId() {
+        return this.idCallback;
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.subscriptions = this.treelist.add.subscribe(this.addHandler.bind(this));
+        this.subscriptions.add(this.treelist.remove.subscribe(this.removeHandler.bind(this)));
+        this.subscriptions.add(this.treelist.cancel.subscribe(this.cancelHandler.bind(this)));
+        this.subscriptions.add(this.treelist.save.subscribe(this.saveHandler.bind(this)));
+        this.subscriptions.add(merge(this.treelist.dataStateChange, this.treelist.pageChange).subscribe(this.onStateChange.bind(this)));
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    get defaultEditService() {
+        return this.treelist.localEditService;
+    }
+    addHandler({ parent }) {
+        this.parent = parent;
+        this.isNew = true;
+        if (parent) {
+            this.treelist.expand(parent);
+        }
+        this.treelist.addRow(this.createModel({ isNew: true }), parent);
+    }
+    saveHandler(args) {
+        const item = this.saveModel(args);
+        if (item) {
+            if (args.isNew) {
+                this.editService.create(item, args.parent, this.idCallback ? this.idCallback(item, args.parent) : null);
+            }
+            else {
+                this.editService.update(item);
+            }
+        }
+        this.treelist.closeRow(args.dataItem, args.isNew);
+    }
+    cancelHandler(args) {
+        this.closeEditor(args);
+    }
+    removeHandler({ dataItem, parent }) {
+        const removeItem = (shouldRemove) => {
+            if (shouldRemove) {
+                this.editService.remove(dataItem, parent);
+            }
+        };
+        if (this.removeConfirmation) {
+            const result = this.removeConfirmation(dataItem, parent);
+            if (result instanceof Promise) {
+                result.then(removeItem);
+            }
+            else if (result instanceof Observable) {
+                result.pipe(take(1)).subscribe(removeItem);
+            }
+            else {
+                removeItem(result);
+            }
+        }
+        else {
+            removeItem(true);
+        }
+    }
+    closeEditor(args = { dataItem: this.dataItem, isNew: this.isNew }) {
+        this.treelist.closeRow(args.dataItem, args.isNew);
+        this.clean();
+    }
+    clean() {
+        this.isNew = false;
+        this.dataItem = null;
+        this.parent = null;
+    }
+    onStateChange() {
+        this.closeEditor();
+    }
+}
+EditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+EditingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditingDirectiveBase, inputs: { editService: "editService", newItemId: "newItemId", removeConfirmation: "removeConfirmation" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { editService: [{
+                type: Input
+            }], newItemId: [{
+                type: Input
+            }], removeConfirmation: [{
+                type: Input
+            }] } });

package/esm2015/editing-directives/in-cell-editing.directive.js

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { EditingDirectiveBase } from './editing-directive-base';
+import { markAllAsTouched } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../treelist.component";
+/**
+ * A directive which encapsulates the editing operations of the TreeList when using the in-cell
+ * editing with Reactive Forms ([see example]({% slug editing_directives_treelist %}#toc-the-incell-directive)).
+ */
+export class InCellEditingDirective extends EditingDirectiveBase {
+    constructor(treelist) {
+        super(treelist);
+        this.treelist = treelist;
+    }
+    // Need mixin
+    createModel(args) {
+        return this.createFormGroup(args);
+    }
+    saveModel({ dataItem, formGroup, isNew }) {
+        if (!formGroup.dirty && !isNew) {
+            return;
+        }
+        if (formGroup.valid) {
+            this.editService.assignValues(dataItem, formGroup.value);
+            return dataItem;
+        }
+        markAllAsTouched(formGroup);
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscriptions.add(this.treelist.cellClick.subscribe(this.cellClickHandler.bind(this)));
+        this.subscriptions.add(this.treelist.cellClose.subscribe(this.cellCloseHandler.bind(this)));
+    }
+    removeHandler(args) {
+        super.removeHandler(args);
+        this.treelist.cancelCell();
+    }
+    cellClickHandler(args) {
+        if (!args.isEdited && args.type === 'click') {
+            this.treelist.editCell(args.dataItem, args.columnIndex, this.createFormGroup(args));
+        }
+    }
+    cellCloseHandler(args) {
+        const { formGroup, dataItem } = args;
+        if (!formGroup.valid) {
+            args.preventDefault();
+        }
+        else if (formGroup.dirty) {
+            this.editService.assignValues(dataItem, formGroup.value);
+            this.editService.update(dataItem);
+        }
+    }
+}
+InCellEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InCellEditingDirective, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+InCellEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: InCellEditingDirective, selector: "[kendoTreeListInCellEditing]", inputs: { createFormGroup: ["kendoTreeListInCellEditing", "createFormGroup"] }, exportAs: ["kendoTreeListInCellEditing"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InCellEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListInCellEditing',
+                    selector: '[kendoTreeListInCellEditing]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { createFormGroup: [{
+                type: Input,
+                args: ['kendoTreeListInCellEditing']
+            }] } });

package/esm2015/editing-directives/reactive-editing.directive.js

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { RowEditingDirectiveBase } from './row-editing-directive-base';
+import { markAllAsTouched } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../treelist.component";
+/**
+ * A directive which encapsulates the editing operations of the TreeList when using the
+ * Reactive Forms ([see example]({% slug editing_directives_treelist %}#toc-the-reactive-directive)).
+ */
+export class ReactiveEditingDirective extends RowEditingDirectiveBase {
+    constructor(treelist) {
+        super(treelist);
+        this.treelist = treelist;
+    }
+    createModel(args) {
+        return this.createFormGroup(args);
+    }
+    saveModel({ dataItem, formGroup, isNew }) {
+        if (!formGroup.dirty && !isNew) {
+            return;
+        }
+        if (formGroup.valid) {
+            this.editService.assignValues(dataItem, formGroup.value);
+            return dataItem;
+        }
+        markAllAsTouched(formGroup);
+    }
+}
+ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ReactiveEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ReactiveEditingDirective, selector: "[kendoTreeListReactiveEditing]", inputs: { createFormGroup: ["kendoTreeListReactiveEditing", "createFormGroup"] }, exportAs: ["kendoTreeListReactiveEditing"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListReactiveEditing',
+                    selector: '[kendoTreeListReactiveEditing]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { createFormGroup: [{
+                type: Input,
+                args: ['kendoTreeListReactiveEditing']
+            }] } });

package/esm2015/editing-directives/row-editing-directive-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 { Directive } from '@angular/core';
+import { EditingDirectiveBase } from './editing-directive-base';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class RowEditingDirectiveBase extends EditingDirectiveBase {
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscriptions
+            .add(this.treelist.edit.subscribe(this.editHandler.bind(this)));
+    }
+    addHandler(args) {
+        this.closeEditor();
+        super.addHandler(args);
+    }
+    editHandler(args) {
+        this.closeEditor();
+        this.dataItem = args.dataItem;
+        this.treelist.editRow(args.dataItem, this.createModel(args));
+    }
+    saveHandler(args) {
+        super.saveHandler(args);
+        this.clean();
+    }
+}
+RowEditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RowEditingDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+RowEditingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RowEditingDirectiveBase, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RowEditingDirectiveBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });

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

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { RowEditingDirectiveBase } from './row-editing-directive-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../treelist.component";
+/**
+ * A directive which encapsulates the editing operations of the TreeList when using
+ * the Template-Driven Angular Forms ([see example]({% slug editing_directives_treelist %}#toc-the-template-directive)).
+ */
+export class TemplateEditingDirective extends RowEditingDirectiveBase {
+    constructor(treelist) {
+        super(treelist);
+        this.treelist = treelist;
+    }
+    editHandler(args) {
+        super.editHandler(args);
+        this.dataItem = args.dataItem;
+        this.originalValues = {};
+        this.editService.assignValues(this.originalValues, this.dataItem);
+    }
+    closeEditor(args) {
+        if (this.dataItem) {
+            this.editService.assignValues(this.dataItem, this.originalValues);
+        }
+        super.closeEditor(args);
+    }
+    createModel(args) {
+        if (args.isNew) {
+            return this.createNewItem();
+        }
+    }
+    saveModel(args) {
+        return args.dataItem;
+    }
+}
+TemplateEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateEditingDirective, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateEditingDirective, selector: "[kendoTreeListTemplateEditing]", inputs: { createNewItem: ["kendoTreeListTemplateEditing", "createNewItem"] }, exportAs: ["kendoTreeListTemplateEditing"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListTemplateEditing',
+                    selector: '[kendoTreeListTemplateEditing]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { createNewItem: [{
+                type: Input,
+                args: ['kendoTreeListTemplateEditing']
+            }] } });