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

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

@@ -0,0 +1,194 @@
+/**-----------------------------------------------------------------------------------------
+* 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, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter } from '@angular/core';
+import { hasClasses } from '../rendering/common/dom-queries';
+/**
+ * @hidden
+ */
+var ColumnListComponent = /** @class */ (function () {
+    function ColumnListComponent(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;
+    }
+    Object.defineProperty(ColumnListComponent.prototype, "className", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnListComponent.prototype, "columns", {
+        get: function () {
+            return this._columns;
+        },
+        set: function (value) {
+            this._columns = value.filter(function (column) { return column.includeInChooser !== false; });
+            this.allColumns = value;
+            this.updateColumnState();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColumnListComponent.prototype.isDisabled = function (column) {
+        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(function (current) { return current !== column && !current.hidden; })) ||
+            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
+    };
+    ColumnListComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(function () {
+            _this.domSubscriptions = _this.renderer.listen(_this.element.nativeElement, 'click', function (e) {
+                if (hasClasses(e.target, 'k-checkbox')) {
+                    if (_this.autoSync) {
+                        var index = parseInt(e.target.getAttribute('data-index'), 10);
+                        var column_1 = _this.columns[index];
+                        var hidden_1 = !e.target.checked;
+                        if (Boolean(column_1.hidden) !== hidden_1) {
+                            _this.ngZone.run(function () {
+                                column_1.hidden = hidden_1;
+                                _this.columnChange.emit([column_1]);
+                            });
+                        }
+                    }
+                    else {
+                        _this.updateDisabled();
+                    }
+                }
+            });
+        });
+    };
+    ColumnListComponent.prototype.ngOnDestroy = function () {
+        if (this.domSubscriptions) {
+            this.domSubscriptions();
+        }
+    };
+    ColumnListComponent.prototype.cancelChanges = function () {
+        var _this = this;
+        this.forEachCheckBox(function (element, index) {
+            element.checked = !_this.columns[index].hidden;
+        });
+        this.updateDisabled();
+        this.reset.emit();
+    };
+    ColumnListComponent.prototype.applyChanges = function () {
+        var _this = this;
+        var changed = [];
+        this.forEachCheckBox(function (element, index) {
+            var column = _this.columns[index];
+            var hidden = !element.checked;
+            if (Boolean(column.hidden) !== hidden) {
+                column.hidden = hidden;
+                changed.push(column);
+            }
+        });
+        this.updateDisabled();
+        this.apply.emit(changed);
+    };
+    ColumnListComponent.prototype.forEachCheckBox = function (callback) {
+        var checkboxes = this.element.nativeElement.getElementsByClassName('k-checkbox');
+        var length = checkboxes.length;
+        for (var idx = 0; idx < length; idx++) {
+            callback(checkboxes[idx], idx);
+        }
+    };
+    ColumnListComponent.prototype.updateDisabled = function () {
+        if (this.allowHideAll && !this.hasLocked) {
+            return;
+        }
+        var checkedItems = [];
+        this.forEachCheckBox(function (checkbox, index) {
+            if (checkbox.checked) {
+                checkedItems.push({ checkbox: checkbox, index: index });
+            }
+            checkbox.disabled = false;
+        });
+        if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
+            checkedItems[0].checkbox.disabled = true;
+        }
+        else if (this.hasLocked && !this.hasUnlockedFiltered) {
+            var columns_1 = this.columns;
+            var checkedUnlocked = checkedItems.filter(function (item) { return !columns_1[item.index].locked; });
+            if (checkedUnlocked.length === 1) {
+                checkedUnlocked[0].checkbox.disabled = true;
+            }
+        }
+    };
+    ColumnListComponent.prototype.updateColumnState = function () {
+        this.hasLocked = this.allColumns.filter(function (column) { return column.locked && (!column.hidden || column.includeInChooser !== false); }).length > 0;
+        this.hasVisibleLocked = this.allColumns.filter(function (column) { return column.locked && !column.hidden; }).length > 0;
+        this.unlockedCount = this.columns.filter(function (column) { return !column.locked && !column.hidden; }).length;
+        var filteredColumns = this.allColumns.filter(function (column) { return column.includeInChooser === false && !column.hidden; });
+        if (filteredColumns.length) {
+            this.hasFiltered = filteredColumns.length > 0;
+            this.hasUnlockedFiltered = filteredColumns.filter(function (column) { return !column.locked; }).length > 0;
+        }
+        else {
+            this.hasFiltered = false;
+            this.hasUnlockedFiltered = false;
+        }
+    };
+    tslib_1.__decorate([
+        HostBinding("class.k-column-list-wrapper"),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColumnListComponent.prototype, "className", null);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnListComponent.prototype, "reset", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnListComponent.prototype, "apply", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnListComponent.prototype, "columnChange", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array),
+        tslib_1.__metadata("design:paramtypes", [Array])
+    ], ColumnListComponent.prototype, "columns", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnListComponent.prototype, "autoSync", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnListComponent.prototype, "allowHideAll", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColumnListComponent.prototype, "applyText", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColumnListComponent.prototype, "resetText", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColumnListComponent.prototype, "actionsClass", void 0);
+    ColumnListComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-treelist-columnlist',
+            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <input class=\"k-checkbox\" type=\"checkbox\" [attr.data-index]=\"index\" [checked]=\"!column.hidden\" [disabled]=\"isDisabled(column)\" /><span class=\"k-checkbox-label\">{{ column.displayTitle }}</span>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <button type=\"button\" class=\"k-button\" (click)=\"cancelChanges()\">{{ resetText }}</button>\n            <button type=\"button\" class=\"k-button k-primary\" (click)=\"applyChanges()\">{{ applyText }}</button>\n        </div>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [ElementRef, NgZone, Renderer2])
+    ], ColumnListComponent);
+    return ColumnListComponent;
+}());
+export { ColumnListComponent };

package/dist/es/column-menu/column-locked-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 `columnLockedChange` event.
+ */
+var ColumnLockedChangeEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function ColumnLockedChangeEvent(columns) {
+        this.columns = columns;
+    }
+    return ColumnLockedChangeEvent;
+}());
+export { ColumnLockedChangeEvent };

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

@@ -0,0 +1,90 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ColumnInfoService } from '../common/column-info.service';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { ColumnMenuItemBase } from './column-menu-item-base';
+/* tslint:disable:max-line-length */
+/**
+ * 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 %}
+ */
+var ColumnMenuChooserComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColumnMenuChooserComponent, _super);
+    function ColumnMenuChooserComponent(localization, columnInfoService, changeDetector) {
+        var _this = _super.call(this) || this;
+        _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';
+        return _this;
+    }
+    Object.defineProperty(ColumnMenuChooserComponent.prototype, "columns", {
+        get: function () {
+            return this.columnInfoService.leafNamedColumns;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    ColumnMenuChooserComponent.prototype.onApply = function (changed) {
+        this.close();
+        if (changed.length) {
+            this.changeDetector.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    };
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuChooserComponent.prototype, "expand", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuChooserComponent.prototype, "collapse", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuChooserComponent.prototype, "expanded", void 0);
+    ColumnMenuChooserComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-treelist-columnmenu-chooser',
+            template: "\n        <kendo-treelist-columnmenu-item [text]=\"localization.get('columns')\"\n            icon=\"columns\" [expanded]=\"expanded\" (collapse)=\"collapse.emit()\" (expand)=\"expand.emit()\">\n            <ng-template kendoTreeListColumnMenuItemContentTemplate>\n                <kendo-treelist-columnlist\n                    [applyText]=\"localization.get('columnsApply')\"\n                    [resetText]=\"localization.get('columnsReset')\"\n                    [columns]=\"columns\"\n                    [autoSync]=\"false\"\n                    [allowHideAll]=\"false\"\n                    [actionsClass]=\"actionsClass\"\n                    (apply)=\"onApply($event)\">\n                </kendo-treelist-columnlist>\n            </ng-template>\n        </kendo-treelist-columnmenu-item>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService,
+            ColumnInfoService,
+            ChangeDetectorRef])
+    ], ColumnMenuChooserComponent);
+    return ColumnMenuChooserComponent;
+}(ColumnMenuItemBase));
+export { ColumnMenuChooserComponent };

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

@@ -0,0 +1,68 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Output, EventEmitter } from '@angular/core';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { ColumnMenuItemBase } from './column-menu-item-base';
+/* tslint:disable:max-line-length */
+/**
+ * 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 %}
+ */
+var ColumnMenuFilterComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColumnMenuFilterComponent, _super);
+    function ColumnMenuFilterComponent(localization) {
+        var _this = _super.call(this) || this;
+        _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';
+        return _this;
+    }
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuFilterComponent.prototype, "expand", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuFilterComponent.prototype, "collapse", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuFilterComponent.prototype, "expanded", void 0);
+    ColumnMenuFilterComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-treelist-columnmenu-filter',
+            template: "\n        <kendo-treelist-columnmenu-item [text]=\"localization.get('filter')\" icon=\"filter\"\n            [expanded]=\"expanded\" (collapse)=\"collapse.emit()\" (expand)=\"expand.emit()\">\n            <ng-template kendoTreeListColumnMenuItemContentTemplate>\n                    <kendo-treelist-filter-menu-container\n                        [column]=\"service.column\"\n                        [filter]=\"service.filter\"\n                        [actionsClass]=\"actionsClass\"\n                        (close)=\"close()\">\n                    </kendo-treelist-filter-menu-container>\n                </ng-template>\n        </kendo-treelist-columnmenu-item>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService])
+    ], ColumnMenuFilterComponent);
+    return ColumnMenuFilterComponent;
+}(ColumnMenuItemBase));
+export { ColumnMenuFilterComponent };

package/dist/es/column-menu/column-menu-item-base.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 { Input, isDevMode, HostBinding } from '@angular/core';
+import { ColumnMenuService } from './column-menu.service';
+/**
+ * @hidden
+ */
+var ColumnMenuItemBase = /** @class */ (function () {
+    function ColumnMenuItemBase() {
+        this.hostClass = true;
+    }
+    ColumnMenuItemBase.prototype.ngOnInit = function () {
+        if (isDevMode() && !this.service) {
+            throw new Error('The service input of the predefined column menu components is mandatory.');
+        }
+    };
+    /**
+     * @hidden
+     */
+    ColumnMenuItemBase.prototype.close = function () {
+        this.service.close();
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", ColumnMenuService)
+    ], ColumnMenuItemBase.prototype, "service", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-columnmenu-item-wrapper'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuItemBase.prototype, "hostClass", void 0);
+    return ColumnMenuItemBase;
+}());
+export { ColumnMenuItemBase };

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

@@ -0,0 +1,35 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, Optional, TemplateRef } from '@angular/core';
+/* tslint:disable:max-line-length */
+/**
+ * Represents the content template of the
+ * [`kendo-treelist-columnmenu-item`]({% slug api_treelist_columnmenuitemcomponent %}) component.
+ * Provides an option for specifying the content of a column item.
+ * To define the content template, nest an `<ng-template>` tag with the
+ * `kendoTreeListColumnMenuItemContentTemplate` directive inside a `<kendo-treelist-columnmenu-item>`.
+ *
+ * {% meta height:500 %}
+ * {% embed_file column-menu/template-item-content/app.component.ts preview %}
+ * {% embed_file column-menu/template-item-content/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var ColumnMenuItemContentTemplateDirective = /** @class */ (function () {
+    function ColumnMenuItemContentTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    ColumnMenuItemContentTemplateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListColumnMenuItemContentTemplate]'
+        }),
+        tslib_1.__param(0, Optional()),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef])
+    ], ColumnMenuItemContentTemplateDirective);
+    return ColumnMenuItemContentTemplateDirective;
+}());
+export { ColumnMenuItemContentTemplateDirective };

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

@@ -0,0 +1,134 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Output, EventEmitter, ContentChild } from '@angular/core';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+/**
+ * Represents an item that can be placed inside a
+ * [`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 ColumnMenuItemComponent = /** @class */ (function () {
+    function ColumnMenuItemComponent() {
+        /**
+         * Fires when the item is clicked.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        this.contentState = 'collapsed';
+    }
+    Object.defineProperty(ColumnMenuItemComponent.prototype, "iconClass", {
+        get: function () {
+            return "k-i-" + this.icon;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColumnMenuItemComponent.prototype.ngOnChanges = function (changes) {
+        if (changes.expanded) {
+            this.updateContentState();
+        }
+    };
+    /**
+     * @hidden
+     */
+    ColumnMenuItemComponent.prototype.onClick = function (e) {
+        this.itemClick.emit(e);
+        if (this.contentTemplate) {
+            this.expanded = !this.expanded;
+            this.updateContentState();
+            if (this.expanded) {
+                this.expand.emit();
+            }
+            else {
+                this.collapse.emit();
+            }
+        }
+    };
+    ColumnMenuItemComponent.prototype.updateContentState = function () {
+        this.contentState = this.expanded ? 'expanded' : 'collapsed';
+    };
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuItemComponent.prototype, "itemClick", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuItemComponent.prototype, "expand", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColumnMenuItemComponent.prototype, "collapse", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColumnMenuItemComponent.prototype, "icon", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColumnMenuItemComponent.prototype, "text", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuItemComponent.prototype, "selected", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuItemComponent.prototype, "disabled", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColumnMenuItemComponent.prototype, "expanded", void 0);
+    tslib_1.__decorate([
+        ContentChild(ColumnMenuItemContentTemplateDirective, { static: false }),
+        tslib_1.__metadata("design:type", ColumnMenuItemContentTemplateDirective)
+    ], ColumnMenuItemComponent.prototype, "contentTemplate", void 0);
+    ColumnMenuItemComponent = tslib_1.__decorate([
+        Component({
+            animations: [
+                trigger('state', [
+                    state('collapsed', style({ display: 'none' })),
+                    state('expanded', style({ display: 'block' })),
+                    transition('collapsed => expanded', [
+                        style({
+                            height: '0px',
+                            display: 'block'
+                        }),
+                        animate('100ms ease-in', style({
+                            height: '*'
+                        }))
+                    ]),
+                    transition('expanded => collapsed', [
+                        style({
+                            height: '*'
+                        }),
+                        animate('100ms ease-in', style({
+                            height: '0px'
+                        }))
+                    ])
+                ])
+            ],
+            selector: 'kendo-treelist-columnmenu-item',
+            template: "\n        <div class=\"k-columnmenu-item\" (click)=\"onClick($event)\" [class.k-state-selected]=\"selected\" [class.k-state-disabled]=\"disabled\">\n           <span *ngIf=\"icon\" class=\"k-icon\" [ngClass]=\"iconClass\">\n           </span>\n           {{ text }}\n        </div>\n        <div *ngIf=\"contentTemplate\" [@state]=\"contentState\" style=\"overflow:hidden;\" class=\"k-columnmenu-item-content\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\">\n            </ng-container>\n        <div>\n    "
+        })
+    ], ColumnMenuItemComponent);
+    return ColumnMenuItemComponent;
+}());
+export { ColumnMenuItemComponent };