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

package/dist/es/column-menu/column-menu-lock.component.js

@@ -0,0 +1,99 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component, ChangeDetectorRef } from '@angular/core';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { ColumnInfoService } from '../common/column-info.service';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+/* tslint:disable:max-line-length */
+/**
+ * Represents a column-menu item that can be placed inside a
+ * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ * Allows the user to lock or unlock the columns.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
+ * > the template to the service input of the `kendo-treelist-columnmenu-lock` component.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template-lock/app.component.ts preview %}
+ * {% embed_file column-menu/template-lock/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var ColumnMenuLockComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColumnMenuLockComponent, _super);
+    function ColumnMenuLockComponent(localization, columnInfoService, changeDetector) {
+        var _this = _super.call(this) || this;
+        _this.localization = localization;
+        _this.columnInfoService = columnInfoService;
+        _this.changeDetector = changeDetector;
+        return _this;
+    }
+    Object.defineProperty(ColumnMenuLockComponent.prototype, "text", {
+        get: function () {
+            return this.localization.get(this.locked ? 'unlock' : 'lock');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuLockComponent.prototype, "icon", {
+        get: function () {
+            return this.locked ? 'unlock' : 'lock';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuLockComponent.prototype, "disabled", {
+        get: function () {
+            return !this.locked && this.columnInfoService.unlockedRootCount < 2;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    ColumnMenuLockComponent.prototype.toggleColumn = function () {
+        this.toggleHierarchy(!this.locked);
+        this.close();
+        this.changeDetector.markForCheck();
+    };
+    ColumnMenuLockComponent.prototype.toggleHierarchy = function (locked) {
+        var root = this.service.column;
+        while (root.parent) {
+            root = root.parent;
+        }
+        var columns = [root];
+        var allChanged = [];
+        while (columns.length) {
+            var column = columns.shift();
+            column.locked = locked;
+            allChanged.push(column);
+            if (column.hasChildren) {
+                columns.push.apply(columns, column.childrenArray);
+            }
+        }
+        this.columnInfoService.changeLocked(allChanged);
+    };
+    Object.defineProperty(ColumnMenuLockComponent.prototype, "locked", {
+        get: function () {
+            return this.service.column.locked;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColumnMenuLockComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-treelist-columnmenu-lock',
+            template: "\n       <kendo-treelist-columnmenu-item [text]=\"text\" [icon]=\"icon\" (itemClick)=\"toggleColumn()\" [disabled]=\"disabled\">\n       </kendo-treelist-columnmenu-item>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService,
+            ColumnInfoService,
+            ChangeDetectorRef])
+    ], ColumnMenuLockComponent);
+    return ColumnMenuLockComponent;
+}(ColumnMenuItemBase));
+export { ColumnMenuLockComponent };

package/dist/es/column-menu/column-menu-settings.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/column-menu/column-menu-sort.component.js

@@ -0,0 +1,87 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component } from '@angular/core';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SortService } from '../common/sort.service';
+import { normalize } from '../columns/sort-settings';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+/* tslint:disable:max-line-length */
+/**
+ * Represents a column-menu item for sorting TreeList columns that can be placed inside a
+ * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ * Allows the user to sort the column.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
+ * > the template to the service input of the `kendo-treelist-columnmenu-sort` component.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template-sort/app.component.ts preview %}
+ * {% embed_file column-menu/template-sort/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var ColumnMenuSortComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColumnMenuSortComponent, _super);
+    function ColumnMenuSortComponent(localization, sortService) {
+        var _this = _super.call(this) || this;
+        _this.localization = localization;
+        _this.sortService = sortService;
+        return _this;
+    }
+    Object.defineProperty(ColumnMenuSortComponent.prototype, "sortedAsc", {
+        get: function () {
+            var descriptor = this.descriptor;
+            return descriptor && (!descriptor.dir || descriptor.dir === 'asc');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuSortComponent.prototype, "sortedDesc", {
+        get: function () {
+            var descriptor = this.descriptor;
+            return descriptor && descriptor.dir === 'desc';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    ColumnMenuSortComponent.prototype.toggleSort = function (dir) {
+        var field = this.service.column.field;
+        var _a = normalize(this.service.sortable), mode = _a.mode, allowUnsort = _a.allowUnsort;
+        var descriptor = this.descriptor;
+        var sort = mode === 'multiple' ? this.service.sort.filter(function (s) { return s.field !== field; }) : [];
+        if (descriptor && descriptor.dir === dir) {
+            if (!allowUnsort) {
+                return;
+            }
+        }
+        else {
+            sort.push({ field: field, dir: dir });
+        }
+        this.sortService.sort(sort);
+        this.close();
+    };
+    Object.defineProperty(ColumnMenuSortComponent.prototype, "descriptor", {
+        get: function () {
+            var _this = this;
+            return [].concat(this.service.sort || []).find(function (s) { return s.field === _this.service.column.field; });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColumnMenuSortComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-treelist-columnmenu-sort',
+            template: "\n        <kendo-treelist-columnmenu-item [text]=\"localization.get('sortAscending')\"\n            icon=\"sort-asc-sm\" (itemClick)=\"toggleSort('asc')\" [selected]=\"sortedAsc\">\n        </kendo-treelist-columnmenu-item>\n        <kendo-treelist-columnmenu-item [text]=\"localization.get('sortDescending')\"\n            icon=\"sort-desc-sm\" (itemClick)=\"toggleSort('desc')\" [selected]=\"sortedDesc\">\n        </kendo-treelist-columnmenu-item>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService, SortService])
+    ], ColumnMenuSortComponent);
+    return ColumnMenuSortComponent;
+}(ColumnMenuItemBase));
+export { ColumnMenuSortComponent };

package/dist/es/column-menu/column-menu-template.directive.js

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Optional, TemplateRef } from '@angular/core';
+/* tslint:disable:max-line-length */
+/**
+ * Represents the template for the column menu in the TreeList. Provides an option for
+ * customizing the content of the column menu for all or for specific columns.
+ * To define the content template, nest an `<ng-template>` tag with the
+ * `kendoTreeListColumnMenuTemplate` directive inside the `kendo-treelist` or the `<kendo-treelist-column>` component.
+ *
+ * The template context is passes through the following fields:
+ * - `service`&mdash;Represents the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}).
+ * - `column`&mdash;Represents the TreeList column.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template/app.component.ts preview %}
+ * {% embed_file column-menu/template/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var ColumnMenuTemplateDirective = /** @class */ (function () {
+    function ColumnMenuTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    ColumnMenuTemplateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListColumnMenuTemplate]'
+        }),
+        tslib_1.__param(0, Optional()),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef])
+    ], ColumnMenuTemplateDirective);
+    return ColumnMenuTemplateDirective;
+}());
+export { ColumnMenuTemplateDirective };

package/dist/es/column-menu/column-menu.component.js

@@ -0,0 +1,176 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component, Input, TemplateRef, HostBinding } from '@angular/core';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SinglePopupService } from '../common/single-popup.service';
+import { ColumnMenuService } from './column-menu.service';
+import { filtersByField } from '../filtering/base-filter-cell.component';
+import { hasFilter, hasSort, hasLock, hasColumnChooser } from './utils';
+var POPUP_CLASS = 'k-grid-columnmenu-popup';
+/**
+ * Represents the [column menu]({% slug columnmenu_treelist %}) component.
+ */
+var ColumnMenuComponent = /** @class */ (function () {
+    function ColumnMenuComponent(popupService, localization, service) {
+        this.popupService = popupService;
+        this.localization = localization;
+        this.service = service;
+        /**
+         * @hidden
+         */
+        this.standalone = true;
+        /**
+         * The settings for the Column Menu.
+         */
+        this.settings = {};
+        /**
+         * @hidden
+         */
+        this.sortable = true;
+        /**
+         * @hidden
+         */
+        this.expandedFilter = false;
+        /**
+         * @hidden
+         */
+        this.expandedColumns = false;
+        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
+    }
+    Object.defineProperty(ColumnMenuComponent.prototype, "isActive", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            var _this = this;
+            return (this.hasFilter && filtersByField(this.filter, this.column.field).length > 0) ||
+                (!this.sortable && this.hasSort && this.sort.find(function (descriptor) { return descriptor.field === _this.column.field; }));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuComponent.prototype, "hasFilter", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return hasFilter(this.settings, this.column);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuComponent.prototype, "hasSort", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return hasSort(this.settings, this.column);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuComponent.prototype, "hasColumnChooser", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return hasColumnChooser(this.settings);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuComponent.prototype, "hasLock", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return hasLock(this.settings, this.column);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColumnMenuComponent.prototype.ngOnChanges = function () {
+        this.service.column = this.column;
+        this.service.sort = this.sort;
+        this.service.filter = this.filter;
+        this.service.sortable = this.sortable;
+    };
+    ColumnMenuComponent.prototype.ngOnDestroy = function () {
+        this.close();
+        this.closeSubscription.unsubscribe();
+    };
+    /**
+     * @hidden
+     */
+    ColumnMenuComponent.prototype.toggle = function (e, anchor, template) {
+        e.preventDefault();
+        this.expandedFilter = !this.hasColumnChooser;
+        this.expandedColumns = !this.hasFilter;
+        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+    };
+    /**
+     * @hidden
+     */
+    ColumnMenuComponent.prototype.close = function () {
+        this.popupService.destroy();
+        this.popupRef = null;
+    };
+    /**
+     * @hidden
+     */
+    ColumnMenuComponent.prototype.onColumnsExpand = function () {
+        this.expandedColumns = true;
+        this.expandedFilter = false;
+    };
+    /**
+     * @hidden
+     */
+    ColumnMenuComponent.prototype.onFilterExpand = function () {
+        this.expandedFilter = true;
+        this.expandedColumns = false;
+    };
+    tslib_1.__decorate([
+        HostBinding('class.k-grid-column-menu-standalone'),
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuComponent.prototype, "standalone", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ColumnMenuComponent.prototype, "column", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ColumnMenuComponent.prototype, "settings", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ColumnMenuComponent.prototype, "sort", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ColumnMenuComponent.prototype, "filter", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ColumnMenuComponent.prototype, "sortable", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", TemplateRef)
+    ], ColumnMenuComponent.prototype, "columnMenuTemplate", void 0);
+    ColumnMenuComponent = tslib_1.__decorate([
+        Component({
+            providers: [ColumnMenuService],
+            selector: 'kendo-treelist-column-menu',
+            template: "\n        <a #anchor\n            class=\"k-grid-column-menu k-grid-filter\"\n            [ngClass]=\"{ 'k-state-active': isActive }\"\n            (click)=\"toggle($event, anchor, template)\"\n            href=\"#\"\n            tabindex=\"-1\"\n            [attr.title]=\"localization.get('columnMenu')\">\n            <span class=\"k-icon k-i-more-vertical\"></span>\n        </a>\n        <ng-template #template>\n            <ng-container [ngTemplateOutlet]=\"column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{ service: service, column: column }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #defaultTemplate>\n            <kendo-treelist-columnmenu-sort *ngIf=\"hasSort\" [service]=\"service\">\n            </kendo-treelist-columnmenu-sort>\n            <kendo-treelist-columnmenu-lock *ngIf=\"hasLock\" [service]=\"service\">\n            </kendo-treelist-columnmenu-lock>\n            <kendo-treelist-columnmenu-chooser *ngIf=\"hasColumnChooser\" [service]=\"service\"\n                [expanded]=\"expandedColumns\" (expand)=\"onColumnsExpand()\">\n            </kendo-treelist-columnmenu-chooser>\n            <kendo-treelist-columnmenu-filter *ngIf=\"hasFilter\" [service]=\"service\"\n                [expanded]=\"expandedFilter\" (expand)=\"onFilterExpand()\">\n            </kendo-treelist-columnmenu-filter>\n        </ng-template>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [SinglePopupService,
+            LocalizationService,
+            ColumnMenuService])
+    ], ColumnMenuComponent);
+    return ColumnMenuComponent;
+}());
+export { ColumnMenuComponent };

package/dist/es/column-menu/column-menu.module.js

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ColumnListComponent } from './column-list.component';
+import { ColumnChooserComponent } from './column-chooser.component';
+import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
+import { ColumnMenuFilterComponent } from './column-menu-filter.component';
+import { ColumnMenuItemComponent } from './column-menu-item.component';
+import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import { ColumnMenuSortComponent } from './column-menu-sort.component';
+import { ColumnMenuComponent } from './column-menu.component';
+import { ColumnMenuLockComponent } from './column-menu-lock.component';
+import { FilterMenuModule } from '../filtering/menu/filter-menu.module';
+import { ColumnMenuTemplateDirective } from './column-menu-template.directive';
+var COMPONENTS = [
+    ColumnListComponent,
+    ColumnChooserComponent,
+    ColumnMenuChooserComponent,
+    ColumnMenuFilterComponent,
+    ColumnMenuItemComponent,
+    ColumnMenuItemContentTemplateDirective,
+    ColumnMenuSortComponent,
+    ColumnMenuComponent,
+    ColumnMenuLockComponent,
+    ColumnMenuTemplateDirective
+];
+/**
+ * @hidden
+ */
+var ColumnMenuModule = /** @class */ (function () {
+    function ColumnMenuModule() {
+    }
+    ColumnMenuModule.exports = function () {
+        return [
+            ColumnChooserComponent,
+            ColumnMenuFilterComponent,
+            ColumnMenuItemComponent,
+            ColumnMenuItemContentTemplateDirective,
+            ColumnMenuSortComponent,
+            ColumnMenuLockComponent,
+            ColumnMenuChooserComponent,
+            ColumnMenuTemplateDirective,
+            ColumnMenuComponent
+        ];
+    };
+    ColumnMenuModule = tslib_1.__decorate([
+        NgModule({
+            declarations: [COMPONENTS],
+            imports: [CommonModule, FilterMenuModule],
+            exports: [COMPONENTS]
+        })
+    ], ColumnMenuModule);
+    return ColumnMenuModule;
+}());
+export { ColumnMenuModule };

package/dist/es/column-menu/column-menu.service.js

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* 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 } from '@angular/core';
+/**
+ * Represents the service that is passed to the
+ * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template-item/app.component.ts preview %}
+ * {% embed_file column-menu/template-item/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var ColumnMenuService = /** @class */ (function () {
+    function ColumnMenuService() {
+        /**
+         * @hidden
+         */
+        this.closeMenu = new EventEmitter();
+    }
+    /**
+     * Closes the column menu.
+     */
+    ColumnMenuService.prototype.close = function () {
+        this.closeMenu.emit();
+    };
+    ColumnMenuService = tslib_1.__decorate([
+        Injectable()
+    ], ColumnMenuService);
+    return ColumnMenuService;
+}());
+export { ColumnMenuService };

package/dist/es/column-menu/column-visibility-change-event.js

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Arguments for the `columnVisibilityChange` event.
+ */
+var ColumnVisibilityChangeEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function ColumnVisibilityChangeEvent(columns) {
+        this.columns = columns;
+    }
+    return ColumnVisibilityChangeEvent;
+}());
+export { ColumnVisibilityChangeEvent };

package/dist/es/column-menu/utils.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export var hasFilter = function (settings, column) { return settings.filter !== false && column.field && column.filterable; };
+/**
+ * @hidden
+ */
+export var hasSort = function (settings, column) { return settings.sort !== false && column.field && column.sortable; };
+/**
+ * @hidden
+ */
+export var hasLock = function (settings, column) {
+    return settings.lock && column.lockable && !(column.parent && !column.parent.isSpanColumn);
+};
+/**
+ * @hidden
+ */
+export var hasColumnChooser = function (settings) { return settings.columnChooser !== false; };
+/**
+ * @hidden
+ */
+export var hasItems = function (settings, column) {
+    return hasColumnChooser(settings) || hasLock(settings, column) || hasSort(settings, column) || hasFilter(settings, column);
+};