@progress/kendo-angular-treelist 3.1.3-dev.202110041229

package/dist/es/editing/cancel-command.directive.js

@@ -0,0 +1,78 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Renderer2, NgZone, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+import { BaseCommandDirective } from './base-command.directive';
+/**
+ * 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>
+ * ```
+ */
+var CancelCommandDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(CancelCommandDirective, _super);
+    function CancelCommandDirective(editService, element, renderer, localization, ngZone) {
+        var _this = _super.call(this, editService, element, renderer, localization, ngZone) || this;
+        _this.commandClass = true;
+        _this.readVisible = false;
+        return _this;
+    }
+    CancelCommandDirective.prototype.onClick = function () {
+        if (this.cellContext) {
+            var viewItem = this.cellContext.viewItem;
+            this.editService.endEdit(viewItem.data, viewItem.isNew);
+        }
+    };
+    tslib_1.__decorate([
+        Input('kendoTreeListCancelCommand'),
+        tslib_1.__metadata("design:type", Object)
+    ], CancelCommandDirective.prototype, "cellContext", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-grid-cancel-command'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], CancelCommandDirective.prototype, "commandClass", void 0);
+    CancelCommandDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListCancelCommand]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [EditService,
+            ElementRef,
+            Renderer2,
+            LocalizationService,
+            NgZone])
+    ], CancelCommandDirective);
+    return CancelCommandDirective;
+}(BaseCommandDirective));
+export { CancelCommandDirective };

package/dist/es/editing/cancel-event-args.interface.js

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

package/dist/es/editing/cell-close-event.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { PreventableEvent } from '../common/preventable-event';
+/**
+ * Arguments for the `cellClose` event.
+ */
+var CellCloseEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(CellCloseEvent, _super);
+    function CellCloseEvent(options) {
+        var _this = _super.call(this) || this;
+        /**
+         * @hidden
+         */
+        _this.action = 'cellClose';
+        Object.assign(_this, options);
+        return _this;
+    }
+    return CellCloseEvent;
+}(PreventableEvent));
+export { CellCloseEvent };

package/dist/es/editing/edit-command.directive.js

@@ -0,0 +1,65 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Renderer2, NgZone, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+import { BaseCommandDirective } from './base-command.directive';
+/**
+ * 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>
+ * ```
+ *
+ */
+var EditCommandDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(EditCommandDirective, _super);
+    function EditCommandDirective(editService, element, renderer, localization, ngZone) {
+        var _this = _super.call(this, editService, element, renderer, localization, ngZone) || this;
+        _this.commandClass = true;
+        _this.readVisible = true;
+        return _this;
+    }
+    EditCommandDirective.prototype.onClick = function () {
+        if (this.cellContext) {
+            this.editService.beginEdit(this.dataItem);
+        }
+    };
+    tslib_1.__decorate([
+        Input('kendoTreeListEditCommand'),
+        tslib_1.__metadata("design:type", Object)
+    ], EditCommandDirective.prototype, "cellContext", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-grid-edit-command'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], EditCommandDirective.prototype, "commandClass", void 0);
+    EditCommandDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListEditCommand]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [EditService,
+            ElementRef,
+            Renderer2,
+            LocalizationService,
+            NgZone])
+    ], EditCommandDirective);
+    return EditCommandDirective;
+}(BaseCommandDirective));
+export { EditCommandDirective };

package/dist/es/editing/edit-event-args.interface.js

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

package/dist/es/editing/edit-template.directive.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef, Optional } 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`.
+ */
+var EditTemplateDirective = /** @class */ (function () {
+    function EditTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    EditTemplateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListEditTemplate]'
+        }),
+        tslib_1.__param(0, Optional()),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef])
+    ], EditTemplateDirective);
+    return EditTemplateDirective;
+}());
+export { EditTemplateDirective };

package/dist/es/editing/edit.service.js

@@ -0,0 +1,189 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable, EventEmitter, NgZone } from '@angular/core';
+import { isPresent, isColumnEditable } from '../utils';
+import { CellCloseEvent } from './cell-close-event';
+import { Subject } from 'rxjs';
+import { switchMap, take } from 'rxjs/operators';
+var identity = function (item) { return item; };
+var ɵ0 = identity;
+/**
+ * @hidden
+ */
+var EditService = /** @class */ (function () {
+    function EditService(ngZone) {
+        var _this = this;
+        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(function () { return _this.ngZone.onStable.asObservable().pipe(take(1)); }));
+    }
+    Object.defineProperty(EditService.prototype, "newItemGroup", {
+        get: function () {
+            return this.newItem ? this.newItem.group : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    EditService.prototype.editRow = function (dataItem, group) {
+        if (group === void 0) { group = undefined; }
+        this.edited.set(this.idGetter(dataItem), {
+            group: group,
+            item: dataItem
+        });
+        this.onChanged();
+    };
+    EditService.prototype.addRow = function (parent, group) {
+        this.newItem = { parent: parent, group: group, dataItem: group ? group.value : null };
+        this.onChanged();
+    };
+    EditService.prototype.editCell = function (item, column, group) {
+        if (!isColumnEditable(column, group)) {
+            return;
+        }
+        this.preventCellClose();
+        if (!this.closeCell()) {
+            this.editRow(item, group);
+            this.column = column;
+            this.onChanged();
+        }
+    };
+    EditService.prototype.isEditing = function () {
+        return this.edited.size > 0;
+    };
+    EditService.prototype.isEdited = function (dataItem) {
+        return (this.newItem && this.newItem.dataItem === dataItem) ||
+            this.edited.has(this.idGetter(dataItem));
+    };
+    EditService.prototype.isEditingCell = function () {
+        return isPresent(this.column);
+    };
+    EditService.prototype.isEditingColumn = function (column) {
+        return this.column === column;
+    };
+    EditService.prototype.isEditedColumn = function (column) {
+        return !this.column || this.column === column;
+    };
+    EditService.prototype.hasNew = function (parent) {
+        return Boolean(this.newItem && ((!this.newItem.parent && !parent) ||
+            this.idGetter(this.newItem.parent) === this.idGetter(parent)));
+    };
+    Object.defineProperty(EditService.prototype, "newDataItem", {
+        get: function () {
+            if (this.newItem) {
+                return this.newItem.group.value;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    EditService.prototype.close = function (item, isNew) {
+        if (isNew) { // parent
+            this.newItem = undefined;
+            return;
+        }
+        this.edited.delete(this.idGetter(item));
+        delete this.column;
+        this.onChanged();
+    };
+    EditService.prototype.closeCell = function (originalEvent) {
+        var _this = this;
+        if (this.column && !this.closingCell) {
+            return this.ngZone.run(function () {
+                var _a = _this.first, item = _a.item, group = _a.group;
+                var 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();
+            });
+        }
+    };
+    EditService.prototype.cancelCell = function () {
+        if (this.column) {
+            this.edited.clear();
+            this.column = null;
+            this.onChanged();
+        }
+    };
+    EditService.prototype.shouldCloseCell = function () {
+        return this.column && !this.keepEditCell;
+    };
+    EditService.prototype.preventCellClose = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            window.clearTimeout(_this.keepCellTimeout);
+            _this.keepEditCell = true;
+            _this.keepCellTimeout = window.setTimeout(function () {
+                _this.keepEditCell = false;
+            }, 0); // tslint:disable-line:align
+        });
+    };
+    EditService.prototype.context = function (dataItem) {
+        return this.edited.get(this.idGetter(dataItem));
+    };
+    EditService.prototype.beginEdit = function (item) {
+        this.changes.emit({ action: 'edit', dataItem: item });
+    };
+    EditService.prototype.beginAdd = function (parent) {
+        this.changes.emit({ action: 'add', parent: parent });
+    };
+    EditService.prototype.endEdit = function (dataItem, isNew) {
+        var formGroup = isNew ? this.newItemGroup : this.context(dataItem).group;
+        this.changes.emit({ action: 'cancel', dataItem: dataItem, formGroup: formGroup, isNew: isNew });
+    };
+    EditService.prototype.save = function (item, isNew) {
+        var 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);
+    };
+    EditService.prototype.remove = function (dataItem, parent) {
+        this.changes.emit({ action: 'remove', dataItem: dataItem, parent: parent });
+    };
+    EditService.prototype.onChanged = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            _this.changedSource.next();
+        });
+    };
+    Object.defineProperty(EditService.prototype, "first", {
+        get: function () {
+            if (this.isEditing()) {
+                return this.edited.values().next().value;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    EditService = tslib_1.__decorate([
+        Injectable(),
+        tslib_1.__metadata("design:paramtypes", [NgZone])
+    ], EditService);
+    return EditService;
+}());
+export { EditService };
+export { ɵ0 };

package/dist/es/editing/remove-command.directive.js

@@ -0,0 +1,64 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Renderer2, NgZone, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+import { BaseCommandDirective } from './base-command.directive';
+/**
+ * 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>
+ * ```
+ */
+var RemoveCommandDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(RemoveCommandDirective, _super);
+    function RemoveCommandDirective(editService, element, renderer, localization, ngZone) {
+        var _this = _super.call(this, editService, element, renderer, localization, ngZone) || this;
+        _this.commandClass = true;
+        _this.readVisible = true;
+        return _this;
+    }
+    RemoveCommandDirective.prototype.onClick = function () {
+        if (this.cellContext) {
+            this.editService.remove(this.dataItem, (this.cellContext.viewItem.parent || {}).data);
+        }
+    };
+    tslib_1.__decorate([
+        Input('kendoTreeListRemoveCommand'),
+        tslib_1.__metadata("design:type", Object)
+    ], RemoveCommandDirective.prototype, "cellContext", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-grid-remove-command'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], RemoveCommandDirective.prototype, "commandClass", void 0);
+    RemoveCommandDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListRemoveCommand]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [EditService,
+            ElementRef,
+            Renderer2,
+            LocalizationService,
+            NgZone])
+    ], RemoveCommandDirective);
+    return RemoveCommandDirective;
+}(BaseCommandDirective));
+export { RemoveCommandDirective };

package/dist/es/editing/remove-event-args.interface.js

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

package/dist/es/editing/save-command.directive.js

@@ -0,0 +1,77 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Renderer2, NgZone, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+import { BaseCommandDirective } from './base-command.directive';
+/**
+ * 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>
+ * ```
+ */
+var SaveCommandDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(SaveCommandDirective, _super);
+    function SaveCommandDirective(editService, element, renderer, localization, ngZone) {
+        var _this = _super.call(this, editService, element, renderer, localization, ngZone) || this;
+        _this.commandClass = true;
+        _this.readVisible = false;
+        return _this;
+    }
+    SaveCommandDirective.prototype.onClick = function () {
+        if (this.cellContext) {
+            this.editService.save(this.dataItem, this.cellContext.viewItem.isNew);
+        }
+    };
+    tslib_1.__decorate([
+        Input('kendoTreeListSaveCommand'),
+        tslib_1.__metadata("design:type", Object)
+    ], SaveCommandDirective.prototype, "cellContext", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-grid-save-command'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], SaveCommandDirective.prototype, "commandClass", void 0);
+    SaveCommandDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListSaveCommand]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [EditService,
+            ElementRef,
+            Renderer2,
+            LocalizationService,
+            NgZone])
+    ], SaveCommandDirective);
+    return SaveCommandDirective;
+}(BaseCommandDirective));
+export { SaveCommandDirective };

package/dist/es/editing/save-event-args.interface.js

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

package/dist/es/editing-directives/create-form-group-args.interface.js

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

package/dist/es/editing-directives/edit-service.interface.js

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