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

package/esm2015/binding-directives/hierarchy-binding.directive.js

@@ -0,0 +1,60 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { getter, setter } from '@progress/kendo-common';
+import { BaseBindingDirective } from './base-binding.directive';
+import { HierarchyEditService } from '../editing-directives/hierarchy-edit.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./data-bound-tree-component";
+/**
+ * A directive which binds the TreeList to a tree of objects.
+ *
+ * The directive encapsulates the in-memory handling of data operations such as
+ * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
+ * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
+ */
+export class HierarchyBindingDirective extends BaseBindingDirective {
+    constructor(component) {
+        super(component);
+        this.component = component;
+        this.childrenGetter = getter('items');
+        this.childrenSetter = setter('items');
+        component.localEditService = new HierarchyEditService(this);
+    }
+    /**
+     *  The name of the field which holds the child data items of the node.
+     */
+    set childrenField(value) {
+        this.childrenGetter = getter(value);
+        this.childrenSetter = setter(value);
+    }
+    /**
+     * The array of data which will be used to populate the TreeList.
+     */
+    set data(value) {
+        this.originalData = value || [];
+        this.dataChanged = true;
+    }
+    getChildren(item) {
+        return item ? this.childrenGetter(item) || [] : this.originalData;
+    }
+    itemKey(item) {
+        return item;
+    }
+}
+HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: i1.DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HierarchyBindingDirective, selector: "[kendoTreeListHierarchyBinding]", inputs: { childrenField: "childrenField", data: ["kendoTreeListHierarchyBinding", "data"] }, exportAs: ["kendoTreeListHierarchyBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListHierarchyBinding',
+                    selector: '[kendoTreeListHierarchyBinding]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DataBoundTreeComponent }]; }, propDecorators: { childrenField: [{
+                type: Input
+            }], data: [{
+                type: Input,
+                args: ["kendoTreeListHierarchyBinding"]
+            }] } });

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

@@ -0,0 +1,153 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { closest } from '../rendering/common/dom-queries';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/column-info.service";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "./column-list.component";
+/**
+ * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
+ * add the component inside a [`ToolbarTemplate`]({% slug api_treelist_toolbartemplatedirective %}) directive.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/chooser-toolbar/app.component.ts preview %}
+ * {% embed_file column-menu/chooser-toolbar/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+export class ColumnChooserComponent {
+    constructor(localization, columnInfoService, popupService, ngZone, renderer, changeDetector) {
+        this.localization = localization;
+        this.columnInfoService = columnInfoService;
+        this.popupService = popupService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.changeDetector = changeDetector;
+        /**
+         * Specifies if the changes in the visibility of the column will be immediately applied.
+         */
+        this.autoSync = false;
+        /**
+         * Specifies if all columns can be hidden.
+         */
+        this.allowHideAll = true;
+    }
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    /**
+     * @hidden
+     */
+    toggle(anchor, template) {
+        if (!this.popupRef) {
+            const direction = this.localization.rtl ? 'right' : 'left';
+            this.popupRef = this.popupService.open({
+                anchor: anchor,
+                content: template,
+                positionMode: 'absolute',
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction }
+            });
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen("document", "click", ({ target }) => {
+                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor)) {
+                    this.close();
+                }
+            }));
+        }
+        else {
+            this.close();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onApply(changed) {
+        this.close();
+        if (changed.length) {
+            this.changeDetector.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onChange(changed) {
+        this.changeDetector.markForCheck();
+        this.columnInfoService.changeVisibility(changed);
+    }
+    close() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        this.detachClose();
+    }
+    detachClose() {
+        if (this.closeClick) {
+            this.closeClick();
+            this.closeClick = null;
+        }
+    }
+}
+ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i3.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnChooserComponent, selector: "kendo-treelist-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
+        <button #anchor
+            type="button"
+            (click)="toggle(anchor, template)"
+            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            [attr.title]="localization.get('columns')">
+            <span class="k-button-icon k-icon k-i-columns"></span>
+        </button>
+        <ng-template #template>
+            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
+            <kendo-treelist-columnlist
+                [columns]="columns"
+                [applyText]="localization.get('columnsApply')"
+                [resetText]="localization.get('columnsReset')"
+                [autoSync]="autoSync"
+                [allowHideAll]="allowHideAll"
+                (apply)="onApply($event)"
+                (columnChange)="onChange($event)">
+            </kendo-treelist-columnlist>
+        </ng-template>
+    `, isInline: true, components: [{ type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnChooserComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-column-chooser',
+                    template: `
+        <button #anchor
+            type="button"
+            (click)="toggle(anchor, template)"
+            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            [attr.title]="localization.get('columns')">
+            <span class="k-button-icon k-icon k-i-columns"></span>
+        </button>
+        <ng-template #template>
+            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
+            <kendo-treelist-columnlist
+                [columns]="columns"
+                [applyText]="localization.get('columnsApply')"
+                [resetText]="localization.get('columnsReset')"
+                [autoSync]="autoSync"
+                [allowHideAll]="allowHideAll"
+                (apply)="onApply($event)"
+                (columnChange)="onChange($event)">
+            </kendo-treelist-columnlist>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i3.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }] } });

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

@@ -0,0 +1,215 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, EventEmitter } from '@angular/core';
+import { hasClasses } from '../rendering/common/dom-queries';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ColumnListComponent {
+    constructor(element, ngZone, renderer) {
+        this.element = element;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.reset = new EventEmitter();
+        this.apply = new EventEmitter();
+        this.columnChange = new EventEmitter();
+        this.autoSync = true;
+        this.allowHideAll = false;
+        this.actionsClass = 'k-action-buttons';
+        this.unlockedCount = 0;
+    }
+    get className() {
+        return true;
+    }
+    set columns(value) {
+        this._columns = value.filter(column => column.includeInChooser !== false);
+        this.allColumns = value;
+        this.updateColumnState();
+    }
+    get columns() {
+        return this._columns;
+    }
+    isDisabled(column) {
+        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
+            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
+    }
+    ngOnInit() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+                if (hasClasses(e.target, 'k-checkbox')) {
+                    if (this.autoSync) {
+                        const index = parseInt(e.target.getAttribute('data-index'), 10);
+                        const column = this.columns[index];
+                        const hidden = !e.target.checked;
+                        if (Boolean(column.hidden) !== hidden) {
+                            this.ngZone.run(() => {
+                                column.hidden = hidden;
+                                this.columnChange.emit([column]);
+                            });
+                        }
+                    }
+                    else {
+                        this.updateDisabled();
+                    }
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        if (this.domSubscriptions) {
+            this.domSubscriptions();
+        }
+    }
+    cancelChanges() {
+        this.forEachCheckBox((element, index) => {
+            element.checked = !this.columns[index].hidden;
+        });
+        this.updateDisabled();
+        this.reset.emit();
+    }
+    applyChanges() {
+        const changed = [];
+        this.forEachCheckBox((element, index) => {
+            const column = this.columns[index];
+            const hidden = !element.checked;
+            if (Boolean(column.hidden) !== hidden) {
+                column.hidden = hidden;
+                changed.push(column);
+            }
+        });
+        this.updateDisabled();
+        this.apply.emit(changed);
+    }
+    forEachCheckBox(callback) {
+        const checkboxes = this.element.nativeElement.getElementsByClassName('k-checkbox');
+        const length = checkboxes.length;
+        for (let idx = 0; idx < length; idx++) {
+            callback(checkboxes[idx], idx);
+        }
+    }
+    updateDisabled() {
+        if (this.allowHideAll && !this.hasLocked) {
+            return;
+        }
+        const checkedItems = [];
+        this.forEachCheckBox((checkbox, index) => {
+            if (checkbox.checked) {
+                checkedItems.push({ checkbox, index });
+            }
+            checkbox.disabled = false;
+        });
+        if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
+            checkedItems[0].checkbox.disabled = true;
+        }
+        else if (this.hasLocked && !this.hasUnlockedFiltered) {
+            const columns = this.columns;
+            const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
+            if (checkedUnlocked.length === 1) {
+                checkedUnlocked[0].checkbox.disabled = true;
+            }
+        }
+    }
+    updateColumnState() {
+        this.hasLocked = this.allColumns.filter(column => column.locked && (!column.hidden || column.includeInChooser !== false)).length > 0;
+        this.hasVisibleLocked = this.allColumns.filter(column => column.locked && !column.hidden).length > 0;
+        this.unlockedCount = this.columns.filter(column => !column.locked && !column.hidden).length;
+        const filteredColumns = this.allColumns.filter(column => column.includeInChooser === false && !column.hidden);
+        if (filteredColumns.length) {
+            this.hasFiltered = filteredColumns.length > 0;
+            this.hasUnlockedFiltered = filteredColumns.filter(column => !column.locked).length > 0;
+        }
+        else {
+            this.hasFiltered = false;
+            this.hasUnlockedFiltered = false;
+        }
+    }
+}
+ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, ngImport: i0, template: `
+        <div class="k-column-list">
+            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
+                <input
+                    class="k-checkbox k-checkbox-md k-rounded-md"
+                    type="checkbox"
+                    [attr.data-index]="index"
+                    [checked]="!column.hidden"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
+            </label>
+        </div>
+        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+            <button
+                type="button"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()">
+                {{ resetText }}
+            </button>
+            <button
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()">
+                {{ applyText }}
+            </button>
+        </div>
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-columnlist',
+                    template: `
+        <div class="k-column-list">
+            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
+                <input
+                    class="k-checkbox k-checkbox-md k-rounded-md"
+                    type="checkbox"
+                    [attr.data-index]="index"
+                    [checked]="!column.hidden"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
+            </label>
+        </div>
+        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+            <button
+                type="button"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()">
+                {{ resetText }}
+            </button>
+            <button
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()">
+                {{ applyText }}
+            </button>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ["class.k-column-list-wrapper"]
+            }], reset: [{
+                type: Output
+            }], apply: [{
+                type: Output
+            }], columnChange: [{
+                type: Output
+            }], columns: [{
+                type: Input
+            }], autoSync: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }], applyText: [{
+                type: Input
+            }], resetText: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }] } });

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

@@ -0,0 +1,108 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/column-info.service";
+import * as i3 from "./column-menu-item.component";
+import * as i4 from "./column-list.component";
+import * as i5 from "./column-menu-item-content-template.directive";
+/**
+ * Represents the component for selecting columns in the TreeList that can be placed
+ * inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+ * > 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-chooser` component.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template-chooser/app.component.ts preview %}
+ * {% embed_file column-menu/template-chooser/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
+    constructor(localization, columnInfoService, changeDetector) {
+        super();
+        this.localization = localization;
+        this.columnInfoService = columnInfoService;
+        this.changeDetector = changeDetector;
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Specifies if the content is expanded.
+         */
+        this.expanded = false;
+        /**
+         * @hidden
+         */
+        this.actionsClass = 'k-columnmenu-actions';
+    }
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    /**
+     * @hidden
+     */
+    onApply(changed) {
+        this.close();
+        if (changed.length) {
+            this.changeDetector.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    }
+}
+ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-treelist-columnmenu-item [text]="localization.get('columns')"
+            icon="columns" [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+            <ng-template kendoTreeListColumnMenuItemContentTemplate>
+                <kendo-treelist-columnlist
+                    [applyText]="localization.get('columnsApply')"
+                    [resetText]="localization.get('columnsReset')"
+                    [columns]="columns"
+                    [autoSync]="false"
+                    [allowHideAll]="false"
+                    [actionsClass]="actionsClass"
+                    (apply)="onApply($event)">
+                </kendo-treelist-columnlist>
+            </ng-template>
+        </kendo-treelist-columnmenu-item>
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-columnmenu-chooser',
+                    template: `
+        <kendo-treelist-columnmenu-item [text]="localization.get('columns')"
+            icon="columns" [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+            <ng-template kendoTreeListColumnMenuItemContentTemplate>
+                <kendo-treelist-columnlist
+                    [applyText]="localization.get('columnsApply')"
+                    [resetText]="localization.get('columnsReset')"
+                    [columns]="columns"
+                    [autoSync]="false"
+                    [allowHideAll]="false"
+                    [actionsClass]="actionsClass"
+                    (apply)="onApply($event)">
+                </kendo-treelist-columnlist>
+            </ng-template>
+        </kendo-treelist-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], expanded: [{
+                type: Input
+            }] } });

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

@@ -0,0 +1,86 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./column-menu-item.component";
+import * as i3 from "../filtering/menu/filter-menu-container.component";
+import * as i4 from "./column-menu-item-content-template.directive";
+/**
+ * Represents the component for editing column filters in the TreeList that can be placed
+ * inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+ * > 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-filter` component.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template-filter/app.component.ts preview %}
+ * {% embed_file column-menu/template-filter/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
+    constructor(localization) {
+        super();
+        this.localization = localization;
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Specifies if the content is expanded.
+         */
+        this.expanded = false;
+        /**
+         * @hidden
+         */
+        this.actionsClass = 'k-columnmenu-actions';
+    }
+}
+ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-treelist-columnmenu-item [text]="localization.get('filter')" icon="filter"
+            [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+            <ng-template kendoTreeListColumnMenuItemContentTemplate>
+                    <kendo-treelist-filter-menu-container
+                        [column]="service.column"
+                        [filter]="service.filter"
+                        [actionsClass]="actionsClass"
+                        (close)="close()">
+                    </kendo-treelist-filter-menu-container>
+                </ng-template>
+        </kendo-treelist-columnmenu-item>
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-columnmenu-filter',
+                    template: `
+        <kendo-treelist-columnmenu-item [text]="localization.get('filter')" icon="filter"
+            [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+            <ng-template kendoTreeListColumnMenuItemContentTemplate>
+                    <kendo-treelist-filter-menu-container
+                        [column]="service.column"
+                        [filter]="service.filter"
+                        [actionsClass]="actionsClass"
+                        (close)="close()">
+                    </kendo-treelist-filter-menu-container>
+                </ng-template>
+        </kendo-treelist-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], expanded: [{
+                type: Input
+            }] } });

package/esm2015/column-menu/column-menu-item-base.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 { Component, HostBinding, Input, isDevMode } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ColumnMenuItemBase {
+    constructor() {
+        this.hostClass = true;
+    }
+    ngOnInit() {
+        if (isDevMode() && !this.service) {
+            throw new Error('The service input of the predefined column menu components is mandatory.');
+        }
+    }
+    /**
+     * @hidden
+     */
+    close() {
+        this.service.close();
+    }
+}
+ColumnMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuItemBase, selector: "ng-component", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuItemBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { service: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-columnmenu-item-wrapper']
+            }] } });