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

package/esm2015/rendering/body.module.js

@@ -0,0 +1,110 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommandColumnComponent } from '../columns/command-column.component';
+import { CellTemplateDirective } from './cell-template.directive';
+import { NoRecordsTemplateDirective } from './no-records-template.directive';
+import { EditTemplateDirective } from '../editing/edit-template.directive';
+import { TableBodyComponent } from './table-body.component';
+import { CellComponent } from './cell.component';
+import { BaseCommandDirective } from '../editing/base-command.directive';
+import { EditCommandDirective } from '../editing/edit-command.directive';
+import { CancelCommandDirective } from '../editing/cancel-command.directive';
+import { SaveCommandDirective } from '../editing/save-command.directive';
+import { RemoveCommandDirective } from '../editing/remove-command.directive';
+import { AddCommandDirective } from '../editing/add-command.directive';
+import { SharedModule } from "../shared.module";
+import { NumericTextBoxModule } from "@progress/kendo-angular-inputs";
+import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
+import { LevelItemsPipe } from './common/level-items.pipe';
+import { FooterTemplateDirective } from './footer-template.directive';
+import * as i0 from "@angular/core";
+const exported = [
+    CommandColumnComponent,
+    CellTemplateDirective,
+    EditTemplateDirective,
+    TableBodyComponent,
+    NoRecordsTemplateDirective,
+    CellComponent,
+    BaseCommandDirective,
+    EditCommandDirective,
+    CancelCommandDirective,
+    SaveCommandDirective,
+    RemoveCommandDirective,
+    AddCommandDirective,
+    LevelItemsPipe,
+    FooterTemplateDirective
+];
+const importedModules = [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    SharedModule,
+    NumericTextBoxModule,
+    DatePickerModule
+];
+/**
+ * @hidden
+ */
+export class BodyModule {
+    static exports() {
+        return [
+            CommandColumnComponent,
+            CellTemplateDirective,
+            NoRecordsTemplateDirective,
+            EditTemplateDirective,
+            EditCommandDirective,
+            CancelCommandDirective,
+            SaveCommandDirective,
+            RemoveCommandDirective,
+            AddCommandDirective,
+            FooterTemplateDirective
+        ];
+    }
+}
+BodyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, declarations: [CommandColumnComponent,
+        CellTemplateDirective,
+        EditTemplateDirective,
+        TableBodyComponent,
+        NoRecordsTemplateDirective,
+        CellComponent,
+        BaseCommandDirective,
+        EditCommandDirective,
+        CancelCommandDirective,
+        SaveCommandDirective,
+        RemoveCommandDirective,
+        AddCommandDirective,
+        LevelItemsPipe,
+        FooterTemplateDirective], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        SharedModule,
+        NumericTextBoxModule,
+        DatePickerModule], exports: [CommandColumnComponent,
+        CellTemplateDirective,
+        EditTemplateDirective,
+        TableBodyComponent,
+        NoRecordsTemplateDirective,
+        CellComponent,
+        BaseCommandDirective,
+        EditCommandDirective,
+        CancelCommandDirective,
+        SaveCommandDirective,
+        RemoveCommandDirective,
+        AddCommandDirective,
+        LevelItemsPipe,
+        FooterTemplateDirective] });
+BodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, imports: [[...importedModules]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [exported],
+                    exports: [exported],
+                    imports: [...importedModules]
+                }]
+        }] });

package/esm2015/rendering/cell-template.directive.js

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the column cell template of the TreeList ([more information and example]({% slug templates_columns_treelist %}#toc-cell-template)).
+ * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag
+ * with the `kendoTreeListCellTemplate` directive inside a `<kendo-treelist-column>` tag.
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `dataItem`&mdash;The current data item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-dataItem`.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `hasChildren`&mdash;Specifies if the item has children.
+ * - `isExpanded`&mdash;Specifies if the item is expanded.
+ * - `level`&mdash;The hierarchy level of the item.
+ * - `loading`&mdash;Specifies if the item children are currently loading.
+ * - `rowIndex`&mdash;The current row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ *
+ * {% meta height:470 %}
+ * {% embed_file data-binding/hierarchy/app.component.ts preview %}
+ * {% embed_file data-binding/hierarchy/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/filesystem.ts %}
+ * {% endmeta %}
+ */
+export class CellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CellTemplateDirective, selector: "[kendoTreeListCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/rendering/cell.component.js

@@ -0,0 +1,282 @@
+/**-----------------------------------------------------------------------------------------
+* 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 } from '@angular/core';
+import { isSpanColumn, isCheckboxColumn } from '../columns/column-base';
+import { isColumnComponent } from '../columns/column.component';
+import { columnsToRender } from "../columns/column-common";
+import { isNullOrEmptyString, extractFormat, isColumnEditable } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../editing/edit.service";
+import * as i2 from "../navigation/focus-group";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@progress/kendo-angular-dateinputs";
+import * as i5 from "@angular/common";
+import * as i6 from "../navigation/focusable.directive";
+import * as i7 from "@angular/forms";
+import * as i8 from "./common/level-items.pipe";
+import * as i9 from "./common/field-accessor.pipe";
+/**
+ * @hidden
+ */
+export class CellComponent {
+    constructor(editService, focusGroup) {
+        this.editService = editService;
+        this.focusGroup = focusGroup;
+        this.isNew = false;
+        this.level = 0;
+        this.cellContext = {};
+        this._templateContext = {};
+        this._editTemplateContext = {};
+        this.templateContext.cellContext = this.cellContext;
+        this.cellContext.focusGroup = focusGroup;
+    }
+    get commandCellClass() {
+        return this.column.isCommand;
+    }
+    get isCheckboxColumn() {
+        return isCheckboxColumn(this.column);
+    }
+    get textNoWrapClass() {
+        return this.column.expandable;
+    }
+    set viewItem(value) {
+        this._viewItem = value;
+        this.cellContext.viewItem = this.viewItem;
+    }
+    get viewItem() {
+        return this._viewItem;
+    }
+    get formGroup() {
+        return this.viewItem.isNew ? this.editService.newItemGroup :
+            this.viewItem.editContext ? this.viewItem.editContext.group : null;
+    }
+    get isEdited() {
+        return Boolean((this.viewItem.isNew && isColumnEditable(this.column, this.editService.newItemGroup)) ||
+            (isColumnEditable(this.column, this.formGroup) &&
+                this.viewItem.editContext &&
+                this.editService.isEditedColumn(this.column)));
+    }
+    get templateContext() {
+        return this._templateContext;
+    }
+    get editTemplateContext() {
+        this._editTemplateContext.$implicit = this.formGroup;
+        this._editTemplateContext.cellContext = this.cellContext;
+        this._editTemplateContext.column = this.column;
+        this._editTemplateContext.dataItem = this.dataItem;
+        this._editTemplateContext.formGroup = this.formGroup;
+        this._editTemplateContext.isNew = this.isNew;
+        return this._editTemplateContext;
+    }
+    get format() {
+        if (isColumnComponent(this.column) && !isNullOrEmptyString(this.column.format)) {
+            return extractFormat(this.column.format);
+        }
+        return undefined;
+    }
+    get isBoundColumn() {
+        return this.column.field && !this.column.templateRef;
+    }
+    get isSpanColumn() {
+        return isSpanColumn(this.column) && !this.column.templateRef;
+    }
+    get childColumns() {
+        return columnsToRender([this.column]);
+    }
+    ngDoCheck() {
+        this.updateTemplateContext();
+    }
+    ngAfterContentChecked() {
+        this.updateTemplateContext();
+    }
+    updateTemplateContext() {
+        if (!this.column.templateRef) {
+            return;
+        }
+        const context = this._templateContext;
+        context.$implicit = this.dataItem;
+        context.column = this.column;
+        context.columnIndex = this.columnIndex;
+        context.dataItem = this.dataItem;
+        context.hasChildren = this.hasChildren;
+        context.isExpanded = this.isExpanded;
+        context.isNew = this.isNew;
+        context.level = this.level;
+        context.loading = this.loading;
+        context.rowIndex = this.viewItem.rowIndex;
+    }
+}
+CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
+CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass" } }, ngImport: i0, template: `
+        <ng-container [ngSwitch]="isEdited">
+            <ng-container *ngSwitchCase="false">
+                <ng-container *ngIf="column.expandable">
+                    <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
+                    <span class="k-icon" *ngIf="hasChildren && expandIcons"
+                        [ngClass]="{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }">
+                    </span>
+                </ng-container>
+                <ng-container *ngIf="column.templateRef"
+                    [ngTemplateOutlet]="column.templateRef"
+                    [ngTemplateOutletContext]="templateContext">
+                </ng-container>
+                <ng-container *ngIf="isSpanColumn">
+                    <ng-container *ngFor="let childColumn of childColumns">
+                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
+                <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
+                    <input
+                        type="checkbox"
+                        kendoTreeListFocusable
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [checked]="selected" />
+                </ng-template>
+            </ng-container>
+            <ng-container *ngSwitchCase="true">
+                <ng-container
+                    *ngIf="column.editTemplateRef"
+                    [ngTemplateOutlet]="column.editTemplateRef"
+                    [ngTemplateOutletContext]="editTemplateContext">
+                </ng-container>
+                <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
+                    <kendo-numerictextbox
+                        *ngSwitchCase="'numeric'"
+                        [format]="format"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    ></kendo-numerictextbox>
+
+                    <kendo-datepicker
+                        *ngSwitchCase="'date'"
+                        [format]="format"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    ></kendo-datepicker>
+
+                    <input
+                        *ngSwitchCase="'boolean'"
+                        type="checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    />
+
+                    <input
+                        *ngSwitchDefault
+                        type="text"
+                        class="k-textbox k-input k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    />
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    `, isInline: true, components: [{ type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i8.LevelItemsPipe, "valueOf": i9.FieldAccessorPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoTreeListCell]',
+                    template: `
+        <ng-container [ngSwitch]="isEdited">
+            <ng-container *ngSwitchCase="false">
+                <ng-container *ngIf="column.expandable">
+                    <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
+                    <span class="k-icon" *ngIf="hasChildren && expandIcons"
+                        [ngClass]="{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }">
+                    </span>
+                </ng-container>
+                <ng-container *ngIf="column.templateRef"
+                    [ngTemplateOutlet]="column.templateRef"
+                    [ngTemplateOutletContext]="templateContext">
+                </ng-container>
+                <ng-container *ngIf="isSpanColumn">
+                    <ng-container *ngFor="let childColumn of childColumns">
+                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
+                <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
+                    <input
+                        type="checkbox"
+                        kendoTreeListFocusable
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [checked]="selected" />
+                </ng-template>
+            </ng-container>
+            <ng-container *ngSwitchCase="true">
+                <ng-container
+                    *ngIf="column.editTemplateRef"
+                    [ngTemplateOutlet]="column.editTemplateRef"
+                    [ngTemplateOutletContext]="editTemplateContext">
+                </ng-container>
+                <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
+                    <kendo-numerictextbox
+                        *ngSwitchCase="'numeric'"
+                        [format]="format"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    ></kendo-numerictextbox>
+
+                    <kendo-datepicker
+                        *ngSwitchCase="'date'"
+                        [format]="format"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    ></kendo-datepicker>
+
+                    <input
+                        *ngSwitchCase="'boolean'"
+                        type="checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    />
+
+                    <input
+                        *ngSwitchDefault
+                        type="text"
+                        class="k-textbox k-input k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoTreeListFocusable
+                    />
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.FocusGroup }]; }, propDecorators: { commandCellClass: [{
+                type: HostBinding,
+                args: ['class.k-command-cell']
+            }], isCheckboxColumn: [{
+                type: HostBinding,
+                args: ['class.k-checkbox-cell']
+            }], textNoWrapClass: [{
+                type: HostBinding,
+                args: ['class.k-text-nowrap']
+            }], column: [{
+                type: Input
+            }], columnIndex: [{
+                type: Input
+            }], isNew: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], hasChildren: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], expandIcons: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], dataItem: [{
+                type: Input
+            }], viewItem: [{
+                type: Input
+            }] } });

package/esm2015/rendering/common/col-group.component.js

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { columnsToRender } from '../../columns/column-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ColGroupComponent {
+    constructor() {
+        this.columns = [];
+    }
+    get columnsToRender() {
+        return columnsToRender(this.columns);
+    }
+    trackBy(index, _item) {
+        return index;
+    }
+}
+ColGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: { columns: "columns" }, ngImport: i0, template: `
+        <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoTreeListColGroup]',
+                    template: `
+        <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
+    `
+                }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }] } });

package/esm2015/rendering/common/dom-queries.js

@@ -0,0 +1,138 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
+const NODE_NAME_PREDICATES = {};
+const toClassList = (classNames) => String(classNames).trim().split(' ');
+/**
+ * @hidden
+ */
+export const hasClasses = (element, classNames) => {
+    const namesList = toClassList(classNames);
+    return Boolean(toClassList(element.className).find((className) => namesList.indexOf(className) >= 0));
+};
+/**
+ * @hidden
+ */
+export const matchesClasses = (classNames) => (element) => hasClasses(element, classNames);
+/**
+ * @hidden
+ */
+export const matchesNodeName = (nodeName) => {
+    if (!NODE_NAME_PREDICATES[nodeName]) {
+        NODE_NAME_PREDICATES[nodeName] = (element) => String(element.nodeName).toLowerCase() === nodeName.toLowerCase();
+    }
+    return NODE_NAME_PREDICATES[nodeName];
+};
+/**
+ * @hidden
+ */
+export const closest = (node, predicate) => {
+    while (node && !predicate(node)) {
+        node = node.parentNode;
+    }
+    return node;
+};
+/**
+ * @hidden
+ */
+export const closestInScope = (node, predicate, scope) => {
+    while (node && node !== scope && !predicate(node)) {
+        node = node.parentNode;
+    }
+    if (node !== scope) {
+        return node;
+    }
+};
+/**
+ * @hidden
+ */
+export const contains = (parent, node, matchSelf = false) => {
+    const outside = !closest(node, (child) => child === parent);
+    if (outside) {
+        return false;
+    }
+    const el = closest(node, (child) => child === node);
+    return el && (matchSelf || el !== parent);
+};
+/**
+ * @hidden
+ */
+export const isVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    const hasSize = rect.width > 0 && rect.height > 0;
+    const hasPosition = rect.x !== 0 && rect.y !== 0;
+    // Elements can have zero size due to styling, but they will still count as visible.
+    // For example, the selection checkbox has no size, but is made visible through styling.
+    return (hasSize || hasPosition) && window.getComputedStyle(element).visibility !== 'hidden';
+};
+/**
+ * @hidden
+ */
+export const isFocusable = (element) => {
+    if (!element.tagName) {
+        return false;
+    }
+    const tagName = element.tagName.toLowerCase();
+    const hasTabIndex = Boolean(element.getAttribute('tabIndex'));
+    const focusable = !element.disabled && focusableRegex.test(tagName);
+    return focusable || hasTabIndex;
+};
+/**
+ * @hidden
+ */
+export const isFocusableWithTabKey = (element, checkVisibility = true) => {
+    if (!isFocusable(element)) {
+        return false;
+    }
+    const tabIndex = element.getAttribute('tabIndex');
+    const visible = !checkVisibility || isVisible(element);
+    return visible && tabIndex !== '-1';
+};
+/**
+ * @hidden
+ */
+export const findElement = (node, predicate, matchSelf = true) => {
+    if (!node) {
+        return;
+    }
+    if (matchSelf && predicate(node)) {
+        return node;
+    }
+    node = node.firstChild;
+    while (node) {
+        if (node.nodeType === 1) {
+            const element = findElement(node, predicate);
+            if (element) {
+                return element;
+            }
+        }
+        node = node.nextSibling;
+    }
+};
+/**
+ * @hidden
+ */
+export const findFocusable = (element, checkVisibility = true) => {
+    return findElement(element, (node) => isFocusableWithTabKey(node, checkVisibility));
+};
+/**
+ * @hidden
+ */
+export const findFocusableChild = (element, checkVisibility = true) => {
+    return findElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
+};
+/**
+ * @hidden
+ */
+export function rtlScrollPosition(position, element, initial) {
+    let result = position;
+    if (initial < 0) {
+        result = -position;
+    }
+    else if (initial > 0) {
+        result = element.scrollWidth - element.offsetWidth - position;
+    }
+    return result;
+}

package/esm2015/rendering/common/field-accessor.pipe.js

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Pipe } from '@angular/core';
+import { getter } from '@progress/kendo-common';
+import { isString, isNullOrEmptyString } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+const FORMAT_REGEX = /\{\d+:?/;
+/**
+ * @hidden
+ */
+export class FieldAccessorPipe {
+    constructor(intlService) {
+        this.intlService = intlService;
+    }
+    transform(dataItem, fieldName, format) {
+        if (!isNullOrEmptyString(fieldName)) {
+            const value = getter(fieldName)(dataItem);
+            if (!isNullOrEmptyString(format)) {
+                return this.formatValue(format, value);
+            }
+            return value;
+        }
+        return dataItem;
+    }
+    formatValue(format, value) {
+        const intl = this.intlService;
+        if (isString(format) && format.match(FORMAT_REGEX)) {
+            return intl.format(format, value);
+        }
+        return intl.toString(value, format);
+    }
+}
+FieldAccessorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FieldAccessorPipe, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Pipe });
+FieldAccessorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FieldAccessorPipe, name: "valueOf", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FieldAccessorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/pipe-prefix
+                    name: 'valueOf',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });