@progress/kendo-angular-treelist 17.0.0-develop.21 → 17.0.0-develop.23

package/{esm2020 → esm2022}/column-menu/column-menu-template.directive.mjs

@@ -31,13 +31,14 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class ColumnMenuTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuTemplateDirective, isStandalone: true, selector: "[kendoTreeListColumnMenuTemplate]", ngImport: i0 });
 }
-ColumnMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuTemplateDirective, isStandalone: true, selector: "[kendoTreeListColumnMenuTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeListColumnMenuTemplate]',

package/{esm2020 → esm2022}/column-menu/column-menu.component.mjs

@@ -24,32 +24,56 @@ const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
  * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 export class ColumnMenuComponent {
+    popupService;
+    localization;
+    service;
+    cdr;
+    /**
+     * @hidden
+     */
+    standalone = true;
+    /**
+     * The TreeList column instance to control with the menu.
+     */
+    column;
+    /**
+     * The settings for the Column Menu.
+     */
+    settings = {};
+    /**
+     * The descriptors by which the data will be sorted.
+     * Typically bound to the same value as [TreeListComponent.sort]({% slug api_treelist_treelistcomponent %}#toc-sort).
+     */
+    sort;
+    /**
+     * The descriptor by which the data will be filtered.
+     * Typically bound to the same value as [TreeListComponent.filter]({% slug api_treelist_treelistcomponent %}#toc-filter).
+     */
+    filter;
+    /**
+     * @hidden
+     */
+    sortable = true;
+    /**
+     * @hidden
+     */
+    columnMenuTemplate;
+    /**
+     * @hidden
+     */
+    expandedFilter = false;
+    /**
+     * @hidden
+     */
+    expandedColumns = false;
+    moreVerticalIcon = moreVerticalIcon;
+    popupRef;
+    closeSubscription;
     constructor(popupService, localization, service, cdr) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
         this.cdr = cdr;
-        /**
-         * @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.moreVerticalIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     /**
@@ -124,9 +148,8 @@ export class ColumnMenuComponent {
         this.expandedFilter = true;
         this.expandedColumns = false;
     }
-}
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
             class="k-grid-column-menu k-grid-header-menu"
             [ngClass]="{ 'k-active': isActive }"
@@ -156,7 +179,8 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             </kendo-treelist-columnmenu-filter>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [ColumnMenuService],

package/{esm2020 → esm2022}/column-menu/column-menu.service.mjs

@@ -21,21 +21,35 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class ColumnMenuService {
-    constructor() {
-        /**
-         * @hidden
-         */
-        this.closeMenu = new EventEmitter();
-    }
+    /**
+     * @hidden
+     */
+    closeMenu = new EventEmitter();
+    /**
+     * @hidden
+     */
+    column;
+    /**
+     * @hidden
+     */
+    sort;
+    /**
+     * @hidden
+     */
+    filter;
+    /**
+     * @hidden
+     */
+    sortable;
     /**
      * Closes the column menu.
      */
     close() {
         this.closeMenu.emit();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService });
 }
-ColumnMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/column-menu/column-visibility-change-event.mjs

@@ -6,6 +6,10 @@
  * Arguments for the `columnVisibilityChange` event.
  */
 export class ColumnVisibilityChangeEvent {
+    /**
+     * The columns whose visibility is changed.
+     */
+    columns;
     /**
      * @hidden
      */

package/{esm2020 → esm2022}/column-resizing/column-handle.directive.mjs

@@ -85,17 +85,14 @@ const indexOf = (target, list) => {
  * @hidden
  */
 export class ColumnHandleDirective {
-    constructor(draggable, element, service, zone, cdr, localization) {
-        this.draggable = draggable;
-        this.element = element;
-        this.service = service;
-        this.zone = zone;
-        this.cdr = cdr;
-        this.localization = localization;
-        this.columns = [];
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-    }
+    draggable;
+    element;
+    service;
+    zone;
+    cdr;
+    localization;
+    columns = [];
+    column;
     get visible() {
         return this.column.resizable ? 'block' : 'none';
     }
@@ -105,6 +102,8 @@ export class ColumnHandleDirective {
     get rightStyle() {
         return isTruthy(this.rtl) ? null : 0;
     }
+    subscriptions = new Subscription();
+    rtl = false;
     autoFit() {
         const allLeafs = allLeafColumns(this.columns);
         const currentLeafs = leafColumns([this.column]).filter(column => isTruthy(column.resizable));
@@ -124,6 +123,14 @@ export class ColumnHandleDirective {
         currentLeafs.forEach(column => column.width = 0);
         this.service.measureColumns(columnInfo);
     }
+    constructor(draggable, element, service, zone, cdr, localization) {
+        this.draggable = draggable;
+        this.element = element;
+        this.service = service;
+        this.zone = zone;
+        this.cdr = cdr;
+        this.localization = localization;
+    }
     ngOnInit() {
         const service = this.service.changes.pipe(filter(() => this.column.resizable), filter(e => isPresent(e.columns.find(column => column === this.column))));
         this.subscriptions.add(service.pipe(filter(e => e.type === 'start'))
@@ -189,10 +196,10 @@ export class ColumnHandleDirective {
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoTreeListColumnHandle]", inputs: { columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
 }
-ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoTreeListColumnHandle]", inputs: { columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeListColumnHandle]',

package/{esm2020 → esm2022}/column-resizing/column-resizing.service.mjs

@@ -22,11 +22,11 @@ const resizeArgs = (column, extra) => Object.assign({
  * @hidden
  */
 export class ColumnResizingService {
-    constructor() {
-        this.changes = new EventEmitter();
-        this.tables = [];
-        this.batch = null;
-    }
+    changes = new EventEmitter();
+    column;
+    resizedColumns;
+    tables = [];
+    batch = null;
     start(column) {
         this.trackColumns(column);
         const columns = (this.column.isColumnGroup ? [column] : [])
@@ -132,10 +132,10 @@ export class ColumnResizingService {
         });
         this.batch = null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, providedIn: 'root' });
 }
-ColumnResizingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnResizingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnResizingService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/{esm2020 → esm2022}/column-resizing/table.directive.mjs

@@ -37,17 +37,26 @@ const pipe = (...fns) => data => fns.reduce((state, fn) => state ? fn(state) : 0
  * @hidden
  */
 export class TableDirective {
+    element;
+    renderer;
+    service;
+    zone;
+    cdr;
+    locked = false;
+    virtualColumns;
+    get minWidth() {
+        return this.firstResize ? 0 : null;
+    }
+    originalWidth;
+    firstResize = false;
+    subscription;
+    autoFitSubscription;
     constructor(element, renderer, service, zone, cdr) {
         this.element = element;
         this.renderer = renderer;
         this.service = service;
         this.zone = zone;
         this.cdr = cdr;
-        this.locked = false;
-        this.firstResize = false;
-    }
-    get minWidth() {
-        return this.firstResize ? 0 : null;
     }
     ngOnInit() {
         const obs = this.service
@@ -102,10 +111,10 @@ export class TableDirective {
         }
         return Math.max(header, data);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TableDirective, isStandalone: true, selector: "[kendoTreeListResizableTable]", inputs: { locked: "locked", virtualColumns: "virtualColumns" }, host: { properties: { "style.min-width": "this.minWidth" } }, ngImport: i0 });
 }
-TableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-TableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TableDirective, isStandalone: true, selector: "[kendoTreeListResizableTable]", inputs: { locked: "locked", virtualColumns: "virtualColumns" }, host: { properties: { "style.min-width": "this.minWidth" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeListResizableTable]',

package/{esm2020 → esm2022}/columns/checkbox-column.component.mjs

@@ -11,26 +11,41 @@ import * as i1 from "./column-base";
  * Represents the checkbox for selecting rows in the TreeList. [See example](slug:treelist_row_selection#toc-select-all-checkbox).
  */
 export class CheckboxColumnComponent extends ColumnBase {
+    parent;
+    /**
+     * Determines whether a select-all checkbox will be displayed in the header.
+     */
+    showSelectAll;
+    /**
+     * Determines whether checkbox click should select / unselect all children
+     */
+    checkChildren;
+    /**
+     * Defines whether the expanded indicator should be rendered in the column.
+     * @default false
+     */
+    expandable;
+    /*
+     * @hidden
+     */
+    isCheckboxColumn = true;
+    template;
     constructor(parent) {
         super(parent);
         this.parent = parent;
-        /*
-         * @hidden
-         */
-        this.isCheckboxColumn = true;
     }
     get templateRef() {
         return this.template ? this.template.templateRef : undefined;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxColumnComponent, isStandalone: true, selector: "kendo-treelist-checkbox-column", inputs: { showSelectAll: "showSelectAll", checkChildren: "checkChildren", expandable: "expandable" }, providers: [
+            {
+                provide: ColumnBase,
+                useExisting: forwardRef(() => CheckboxColumnComponent)
+            }
+        ], queries: [{ propertyName: "template", first: true, predicate: CellTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CheckboxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxColumnComponent, isStandalone: true, selector: "kendo-treelist-checkbox-column", inputs: { showSelectAll: "showSelectAll", checkChildren: "checkChildren", expandable: "expandable" }, providers: [
-        {
-            provide: ColumnBase,
-            useExisting: forwardRef(() => CheckboxColumnComponent)
-        }
-    ], queries: [{ propertyName: "template", first: true, predicate: CellTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/columns/column-base.mjs

@@ -26,78 +26,18 @@ const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column)
  * The base class for the column components of the TreeList.
  */
 export class ColumnBase {
+    parent;
+    optionChanges;
     /**
      * @hidden
      */
-    constructor(parent, optionChanges) {
-        this.parent = parent;
-        this.optionChanges = optionChanges;
-        /**
-         * @hidden
-         */
-        this.matchesMedia = true;
-        /**
-         * The column index after reordering.
-         * The orderIndex` is a read-only property. Setting this field does not affect column order.
-         * @default 0
-         */
-        this.orderIndex = 0;
-        /**
-         * @hidden
-         */
-        this.isColumnGroup = false;
-        /**
-         * @hidden
-         */
-        this.isSpanColumn = false;
-        /**
-         * Indicates whether the column is resizable.
-         * @default true
-         */
-        this.resizable = true;
-        /**
-         * Indicates whether the column is reorderable.
-         * @default true
-         */
-        this.reorderable = true;
-        /**
-         * The width (in pixels) below which the user is not able to resize the column by using the UI.
-         * @default 10
-         */
-        this.minResizableWidth = 10;
-        this._locked = false;
-        /**
-         * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
-         * @default true
-         */
-        this.lockable = true;
-        /**
-         * Specifies if the column menu will be shown for the column.
-         * @default true
-         */
-        this.columnMenu = true;
-        /**
-         * Specifies if the column will be included in the column-chooser list.
-         * @default true
-         */
-        this.includeInChooser = true;
-        /**
-         * Allows setting the `role` attribute for the table cells (excluding the footer and header ones) of the column.
-         * @default "gridcell"
-         */
-        this.tableCellsRole = 'gridcell';
-        /**
-         * @hidden
-         */
-        this.headerTemplates = new QueryList();
-        /**
-         * @hidden
-         */
-        this.columnMenuTemplates = new QueryList();
-        if (parent && !isColumnContainer(parent)) {
-            throw new Error('Columns can be nested only inside ColumnGroupComponent');
-        }
-    }
+    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
      */
@@ -110,6 +50,34 @@ export class ColumnBase {
     get leafIndex() {
         return this._leafIndex;
     }
+    _leafIndex;
+    /**
+     * @hidden
+     */
+    isColumnGroup = false;
+    /**
+     * @hidden
+     */
+    isSpanColumn = false;
+    /**
+     * Indicates whether the column is resizable.
+     * @default true
+     */
+    resizable = true;
+    /**
+     * Indicates whether the column is reorderable.
+     * @default true
+     */
+    reorderable = true;
+    /**
+     * The width (in pixels) below which the user is not able to resize the column by using the UI.
+     * @default 10
+     */
+    minResizableWidth = 10;
+    /**
+     * The title of the column.
+     */
+    title;
     /**
      * The width of the column (in pixels).
      */
@@ -117,6 +85,10 @@ export class ColumnBase {
         this._width = parseInt(value, 10);
     }
     get width() { return this._width; }
+    /**
+     * Indicates whether the column will be resized during initialization so that it fits its header and row content.
+     */
+    autoSize;
     /**
      * Toggles the locked (frozen) state of the columns ([more information and example](slug:locked_columns_treelist)).
      *
@@ -128,6 +100,91 @@ export class ColumnBase {
     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 needs to 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 will be shown for the column.
+     * @default true
+     */
+    columnMenu = true;
+    /**
+     * Specifies if the column will be included in the column-chooser list.
+     * @default true
+     */
+    includeInChooser = true;
+    /**
+     * Allows setting the `role` attribute for the table cells (excluding the footer and header ones) of the column.
+     * @default "gridcell"
+     */
+    tableCellsRole = 'gridcell';
+    /**
+     * Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
+     * to apply the property, the `style` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist_columns).
+     */
+    style;
+    /**
+     * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
+     * the `headerStyle` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist_columns).
+     */
+    headerStyle;
+    /**
+     * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
+     * the `footerStyle` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist_columns).
+     */
+    footerStyle;
+    /**
+     * Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option 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 the custom CSS classes to the column header cell. Under the hood, to apply the property,
+     * the `headerClass` option 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
      */
@@ -143,6 +200,7 @@ export class ColumnBase {
     get isLocked() {
         return this.parent ? this.parent.isLocked : this.locked;
     }
+    _width;
     /**
      * @hidden
      */
@@ -193,15 +251,25 @@ export class ColumnBase {
     get isEditable() {
         return false;
     }
+    /**
+     * @hidden
+     */
+    constructor(parent, optionChanges) {
+        this.parent = parent;
+        this.optionChanges = optionChanges;
+        if (parent && !isColumnContainer(parent)) {
+            throw new Error('Columns can be nested only inside ColumnGroupComponent');
+        }
+    }
     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 });
 }
-ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.OptionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ColumnBase, decorators: [{
+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: [{