@progress/kendo-angular-treelist
Version:
Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.
320 lines (319 loc) • 10.7 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ContentChild, ContentChildren, Directive, Input, QueryList } from '@angular/core';
import { ColumnMenuTemplateDirective } from '../column-menu/column-menu-template.directive';
import { OptionChangesService } from '../common/option-changes.service';
import { FooterTemplateDirective } from '../rendering/footer-template.directive';
import { HeaderTemplateDirective } from '../rendering/header/header-template.directive';
import * as i0 from "@angular/core";
import * as i1 from "../common/option-changes.service";
let columnId = 0;
/**
* @hidden
*/
export const isSpanColumn = column => column.isSpanColumn;
/**
* @hidden
*/
export const isCheckboxColumn = column => column.isCheckboxColumn;
/**
* @hidden
*/
export const isRowReorderColumn = column => column.isRowReorderColumn;
const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
/**
* Serves as the base class for column components in the TreeList.
*/
export class ColumnBase {
parent;
optionChanges;
/**
* @hidden
*/
matchesMedia = true;
/**
* The column index after reordering.
* The orderIndex` is a read-only property. Setting this field does not affect column order.
* @default 0
*/
orderIndex = 0;
/**
* @hidden
*/
set leafIndex(value) {
this._leafIndex = value;
}
/**
* @hidden
*/
get leafIndex() {
return this._leafIndex;
}
_leafIndex;
/**
* @hidden
*/
isColumnGroup = false;
/**
* @hidden
*/
isSpanColumn = false;
/**
* @hidden
*/
get id() {
return this._id;
}
/**
* Indicates whether the column is resizable.
* @default true
*/
resizable = true;
/**
* Indicates whether the column is reorderable.
* @default true
*/
reorderable = true;
/**
* Sets the minimum width (in pixels) for resizing the column using the UI.
* @default 10
*/
minResizableWidth = 10;
/**
* Sets the title of the column.
*/
title;
/**
* Sets the width of the column (in pixels).
*/
set width(value) {
this._width = parseInt(value, 10);
}
get width() { return this._width; }
/**
* Indicates whether the column is automatically resized during initialization to fit its header and row content.
*/
autoSize;
/**
* Toggles the locked (frozen) state of the columns ([more information and example](slug:locked_columns_treelist)).
* @default false
*/
set locked(value) {
this._locked = value;
}
get locked() {
return this._locked;
}
_locked = false;
/**
* Sets the visibility of the column ([see example](slug:hidden_columns_treelist#toc-using-the-built-in-options)).
* @default false
*/
hidden;
/**
* Sets the condition that must be satisfied for a column to remain visible ([see example](slug:responsive_treelist#toc-columns)).
* If you set the `hidden` property, the behavior of `media` is overridden.
*/
media;
/**
* Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
* @default true
*/
lockable = true;
/**
* Specifies if the column menu is shown for the column.
* @default true
*/
columnMenu = true;
/**
* Specifies if the column is included in the column-chooser list.
* @default true
*/
includeInChooser = true;
/**
* Sets the `role` attribute for the table cells (excluding the footer and header) of the column.
* @default "gridcell"
*/
tableCellsRole = 'gridcell';
/**
* Sets custom styles for the table cells (excluding the footer and header) of the column. Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist_columns).
*/
style;
/**
* Sets custom styles for the header cell of the column. Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example.](slug:styling_treelist_columns)
*/
headerStyle;
/**
* Sets custom styles for the footer cell of the column. Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example.](slug:styling_treelist_columns)
*/
footerStyle;
/**
* Sets custom CSS classes to the column cells. Uses the [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. To customize header and footer column cells, use the [`headerClass`]({% slug api_treelist_columncomponent %}#toc-headerclass) and [`footerClass`]({% slug api_treelist_columncomponent %}#toc-footerclass) inputs.
*/
cssClass;
/**
* Sets custom CSS classes to the column header cell. Uses the [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_treelist_columns).
*/
headerClass;
/**
* Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
* the `footerClass` option uses the
* [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_treelist_columns).
*/
footerClass;
/**
* @hidden
*/
headerTemplates = new QueryList();
/**
* @hidden
*/
footerTemplate;
/**
* @hidden
*/
columnMenuTemplates = new QueryList();
/**
* @hidden
*/
resizeStartWidth;
/**
* @hidden
*/
get level() {
if (this.parent && isSpanColumn(this.parent)) {
return this.parent.level;
}
return this.parent ? this.parent.level + 1 : 0;
}
/**
* @hidden
*/
get isLocked() {
return this.parent ? this.parent.isLocked : this.locked;
}
_width;
/**
* @hidden
*/
get colspan() {
return 1;
}
/**
* @hidden
*/
rowspan(totalColumnLevels) {
return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
}
/**
* @hidden
*/
get headerTemplateRef() {
const template = this.headerTemplates.first;
return template ? template.templateRef : undefined;
}
/**
* @hidden
*/
get footerTemplateRef() {
return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
}
/**
* @hidden
*/
get columnMenuTemplateRef() {
const template = this.columnMenuTemplates.first;
return template ? template.templateRef : null;
}
/**
* @hidden
*/
get displayTitle() {
return this.title;
}
/**
* @hidden
*/
get isVisible() {
return !this.hidden && this.matchesMedia;
}
/**
* @hidden
*/
get isEditable() {
return false;
}
_id;
/**
* @hidden
*/
constructor(parent, optionChanges) {
this.parent = parent;
this.optionChanges = optionChanges;
if (parent && !isColumnContainer(parent)) {
throw new Error('Columns can be nested only inside ColumnGroupComponent');
}
this._id = `k-grid-column-${columnId++}`;
}
ngOnChanges(_changes) {
if (this.optionChanges) {
this.optionChanges.columnChanged();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.OptionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", hidden: "hidden", media: "media", lockable: "lockable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, decorators: [{
type: Directive,
args: [{}]
}], ctorParameters: function () { return [{ type: ColumnBase }, { type: i1.OptionChangesService }]; }, propDecorators: { resizable: [{
type: Input
}], reorderable: [{
type: Input
}], minResizableWidth: [{
type: Input
}], title: [{
type: Input
}], width: [{
type: Input
}], autoSize: [{
type: Input
}], locked: [{
type: Input
}], hidden: [{
type: Input
}], media: [{
type: Input
}], lockable: [{
type: Input
}], columnMenu: [{
type: Input
}], includeInChooser: [{
type: Input
}], tableCellsRole: [{
type: Input
}], style: [{
type: Input
}], headerStyle: [{
type: Input
}], footerStyle: [{
type: Input
}], cssClass: [{
type: Input,
args: ['class']
}], headerClass: [{
type: Input
}], footerClass: [{
type: Input
}], headerTemplates: [{
type: ContentChildren,
args: [HeaderTemplateDirective, { descendants: false }]
}], footerTemplate: [{
type: ContentChild,
args: [FooterTemplateDirective, { static: false }]
}], columnMenuTemplates: [{
type: ContentChildren,
args: [ColumnMenuTemplateDirective]
}] } });