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

package/column-resizing/column-resizing.service.d.ts

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter } from '@angular/core';
+import { ColumnBase } from '../columns/column-base';
+import { ColumnResizeAction, ColumnResizeArgs, AutoFitFn } from './column-resize.interface';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class ColumnResizingService {
+    changes: EventEmitter<ColumnResizeAction>;
+    private column;
+    private resizedColumns;
+    private tables;
+    private batch;
+    start(column: ColumnBase): void;
+    resizeColumns(deltaPercent: number): void;
+    resizeTable(column: ColumnBase, delta: number): void;
+    resizedColumn(state: ColumnResizeArgs): void;
+    end(): void;
+    registerTable(tableMetadata: {
+        autoFit: AutoFitFn;
+        locked: boolean;
+    }): () => void;
+    measureColumns(info: Array<any>): void;
+    autoFit(...columns: ColumnBase[]): void;
+    private trackColumns;
+    private autoFitStart;
+    private autoFitBatch;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizingService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizingService>;
+}

package/column-resizing/table.directive.d.ts

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ColumnResizingService } from './column-resizing.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class TableDirective implements OnInit, OnDestroy {
+    private element;
+    private renderer;
+    private service;
+    private zone;
+    private cdr;
+    locked: boolean;
+    virtualColumns: boolean;
+    get minWidth(): number | null;
+    private originalWidth;
+    private firstResize;
+    private subscription;
+    private autoFitSubscription;
+    constructor(element: ElementRef, renderer: Renderer2, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private initState;
+    private resize;
+    private autoFitObservable;
+    private measureColumn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableDirective, "table", never, { "locked": "locked"; "virtualColumns": "virtualColumns"; }, {}, never>;
+}

package/columns/checkbox-column.component.d.ts

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import { ColumnBase } from './column-base';
+import { CellTemplateDirective } from '../rendering/cell-template.directive';
+import * as i0 from "@angular/core";
+/**
+ * Represents the checkbox for selecting rows in the TreeList.
+ */
+export declare class CheckboxColumnComponent extends ColumnBase {
+    parent?: ColumnBase;
+    /**
+     * Determines whether a select-all checkbox will be displayed in the header.
+     */
+    showSelectAll: boolean;
+    /**
+     * Determines whether checkbox click should select / unselect all children
+     */
+    checkChildren: boolean;
+    /**
+     * Defines whether the expanded indicator should be rendered in the column.
+     * @default false
+     */
+    expandable: boolean;
+    readonly isCheckboxColumn: boolean;
+    template: CellTemplateDirective;
+    constructor(parent?: ColumnBase);
+    get templateRef(): TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxColumnComponent, [{ optional: true; host: true; skipSelf: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxColumnComponent, "kendo-treelist-checkbox-column", never, { "showSelectAll": "showSelectAll"; "checkChildren": "checkChildren"; "expandable": "expandable"; }, {}, ["template"], never>;
+}

package/columns/column-base.d.ts

@@ -0,0 +1,520 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnChanges, QueryList, TemplateRef } 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";
+/**
+ * @hidden
+ */
+export declare const isSpanColumn: (column: any) => any;
+/**
+ * @hidden
+ */
+export declare const isCheckboxColumn: (column: any) => any;
+/**
+ * The base class for the column components of the TreeList.
+ */
+export declare class ColumnBase implements OnChanges {
+    parent?: ColumnBase;
+    protected optionChanges?: OptionChangesService;
+    /**
+     * @hidden
+     */
+    matchesMedia: boolean;
+    /**
+     * The column index after reordering.
+     *
+     * > `orderIndex` is a read-only property. Setting this field does not affect column order.
+     */
+    orderIndex: number;
+    /**
+     * @hidden
+     */
+    set leafIndex(value: number);
+    /**
+     * @hidden
+     */
+    get leafIndex(): number;
+    protected _leafIndex: number;
+    /**
+     * @hidden
+     */
+    isColumnGroup: boolean;
+    /**
+     * @hidden
+     */
+    isSpanColumn: boolean;
+    /**
+     * Indicates whether the column is resizable.
+     * @default true
+     */
+    resizable: boolean;
+    /**
+     * Indicates whether the column is reorderable.
+     * @default true
+     */
+    reorderable: boolean;
+    /**
+     * The width (in pixels) below which the user is not able to resize the column by using the UI.
+     */
+    minResizableWidth: number;
+    /**
+     * The title of the column.
+     */
+    title: string;
+    /**
+     * The width of the column (in pixels).
+     */
+    set width(value: number);
+    get width(): number;
+    /**
+     * Indicates whether the column will be resized during initialization so that it fits its header and row content.
+     */
+    autoSize: boolean;
+    /**
+     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_treelist %})).
+     *
+     * @default false
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" [scrollable]="scrollable" style="height: 200px">
+     *          <kendo-treelist-column field="ProductID" title="Product ID" width="120" [locked]="true">
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200">
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = products;
+     *    }
+     * }
+     *
+     * const products = [{
+     *    "ProductID": 1,
+     *    "ProductName": "Chai",
+     *    "UnitPrice": 18.0000,
+     *    "Discontinued": true
+     *  }, {
+     *    "ProductID": 2,
+     *    "ProductName": "Chang",
+     *    "UnitPrice": 19.0000,
+     *    "Discontinued": false
+     *  }
+     * ];
+     *
+     * ```
+     */
+    set locked(value: boolean);
+    get locked(): boolean;
+    protected _locked: boolean;
+    /**
+     * Sets the visibility of the column ([see example]({% slug hidden_columns_treelist %}#toc-using-built-in-options)).
+     *
+     * @default false
+     */
+    hidden: boolean;
+    /**
+     * 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.
+     *
+     * @example
+     * ```ts-no-run
+     * <kendo-treelist>
+     *    <kendo-treelist-column field="UnitPrice" media="(min-width: 320px)">
+     *    </kendo-treelist-column>
+     * </kendo-treelist>
+     * ```
+     *
+     * Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/treelist/#treelist-options)
+     * ([see example]({% slug responsive_treelist %}#toc-bootstrap-4-compatibility)):
+     * * `"xs"`&mdash;Equivalent to `"(max-width: 576px)"`.
+     * * `"sm"`&mdash;Equivalent to `"(min-width: 576px)"`.
+     * * `"md"`&mdash;Equivalent to `"(min-width: 768px)"`.
+     * * `"lg"`&mdash;Equivalent to `"(min-width: 992px)"`.
+     * * `"xl"`&mdash;Equivalent to `"(min-width: 1200px)"`.
+     *
+     * @example
+     * ```ts-no-run
+     * <kendo-treelist>
+     *    <kendo-treelist-column field="UnitPrice" media="md">
+     *    </kendo-treelist-column>
+     * </kendo-treelist>
+     * ```
+     */
+    media: string;
+    /**
+     * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+     */
+    lockable: boolean;
+    /**
+     * Specifies if the column menu will be shown for the column.
+     */
+    columnMenu: boolean;
+    /**
+     * Specifies if the column will be included in the column-chooser list.
+     */
+    includeInChooser: boolean;
+    /**
+     * 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]({{ site.data.urls.angular['ngstyleapi'] }}) directive.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" style="height: 200px">
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200" [style]="{'text-align': 'right'}">
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = [{
+     *            "ProductID": 1,
+     *            "ProductName": "Chai",
+     *            "UnitPrice": 18.0000,
+     *            "Discontinued": true
+     *          }, {
+     *            "ProductID": 2,
+     *            "ProductName": "Chang",
+     *            "UnitPrice": 19.0000,
+     *            "Discontinued": false
+     *          }];
+     *    }
+     * }
+     *
+     * ```
+     */
+    style: {
+        [key: string]: string;
+    };
+    /**
+     * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
+     * the `headerStyle` option uses the
+     * [NgStyle]({{ site.data.urls.angular['ngstyleapi'] }}) directive.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" style="height: 200px">
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200" [headerStyle]="{'text-align': 'right'}">
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = [{
+     *            "ProductID": 1,
+     *            "ProductName": "Chai",
+     *            "UnitPrice": 18.0000,
+     *            "Discontinued": true
+     *          }, {
+     *            "ProductID": 2,
+     *            "ProductName": "Chang",
+     *            "UnitPrice": 19.0000,
+     *            "Discontinued": false
+     *          }];
+     *    }
+     * }
+     *
+     * ```
+     */
+    headerStyle: {
+        [key: string]: string;
+    };
+    /**
+     * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
+     * the `footerStyle` option uses the
+     * [NgStyle]({{ site.data.urls.angular['ngstyleapi'] }}) directive.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" style="height: 200px">
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200" [footerStyle]="{'text-align': 'right'}">
+     *              <ng-template kendoTreeListFooterTemplate>
+     *                  footer text
+     *              </ng-template>
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = [{
+     *            "ProductID": 1,
+     *            "ProductName": "Chai",
+     *            "UnitPrice": 18.0000,
+     *            "Discontinued": true
+     *          }, {
+     *            "ProductID": 2,
+     *            "ProductName": "Chang",
+     *            "UnitPrice": 19.0000,
+     *            "Discontinued": false
+     *          }];
+     *    }
+     * }
+     *
+     * ```
+     */
+    footerStyle: {
+        [key: string]: string;
+    };
+    /**
+     * Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option uses the
+     * [NgClass]({{ 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.
+     *
+     * @example
+     * ```ts
+     * import { Component, ViewEncapsulation } from '@angular/core';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    encapsulation: ViewEncapsulation.None,
+     *    styles: [`
+     *        tr .myClass {
+     *            text-align: right
+     *       }
+     *    `],
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" style="height: 200px">
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200" [class]="{'myClass': true}">
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = [{
+     *            "ProductID": 1,
+     *            "ProductName": "Chai",
+     *            "UnitPrice": 18.0000,
+     *            "Discontinued": true
+     *          }, {
+     *            "ProductID": 2,
+     *            "ProductName": "Chang",
+     *            "UnitPrice": 19.0000,
+     *            "Discontinued": false
+     *          }];
+     *    }
+     * }
+     *
+     * ```
+     */
+    cssClass: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+    /**
+     * Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
+     * the `headerClass` option uses the
+     * [NgClass]({{ site.data.urls.angular['ngclassapi'] }}) directive.
+     *
+     * @example
+     * ```ts
+     * import { Component, ViewEncapsulation } from '@angular/core';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    encapsulation: ViewEncapsulation.None,
+     *    styles: [`
+     *        tr .myClass {
+     *            text-align: right
+     *       }
+     *    `],
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" style="height: 200px">
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200" [headerClass]="{'myClass': true}">
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = [{
+     *            "ProductID": 1,
+     *            "ProductName": "Chai",
+     *            "UnitPrice": 18.0000,
+     *            "Discontinued": true
+     *          }, {
+     *            "ProductID": 2,
+     *            "ProductName": "Chang",
+     *            "UnitPrice": 19.0000,
+     *            "Discontinued": false
+     *          }];
+     *    }
+     * }
+     *
+     * ```
+     */
+    headerClass: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+    /**
+     * Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
+     * the `footerClass` option uses the
+     * [NgClass]({{ site.data.urls.angular['ngclassapi'] }}) directive.
+     *
+     * @example
+     * ```ts
+     * import { Component, ViewEncapsulation } from '@angular/core';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    encapsulation: ViewEncapsulation.None,
+     *    styles: [`
+     *        tr .myClass {
+     *            text-align: right
+     *       }
+     *    `],
+     *    template: `
+     *        <kendo-treelist [data]="treelistData" style="height: 200px">
+     *          <kendo-treelist-column field="ProductName" title="Product Name" width="200" [footerClass]="{'myClass': true}">
+     *              <ng-template kendoTreeListFooterTemplate>
+     *                  footer text
+     *              </ng-template>
+     *          </kendo-treelist-column>
+     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" width="230">
+     *          </kendo-treelist-column>
+     *        </kendo-treelist>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public treelistData: any[];
+     *
+     *    constructor() {
+     *        this.treelistData = [{
+     *            "ProductID": 1,
+     *            "ProductName": "Chai",
+     *            "UnitPrice": 18.0000,
+     *            "Discontinued": true
+     *          }, {
+     *            "ProductID": 2,
+     *            "ProductName": "Chang",
+     *            "UnitPrice": 19.0000,
+     *            "Discontinued": false
+     *          }];
+     *    }
+     * }
+     *
+     * ```
+     */
+    footerClass: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+    /**
+     * @hidden
+     */
+    headerTemplates: QueryList<HeaderTemplateDirective>;
+    /**
+     * @hidden
+     */
+    footerTemplate: FooterTemplateDirective;
+    /**
+     * @hidden
+     */
+    columnMenuTemplates: QueryList<ColumnMenuTemplateDirective>;
+    /**
+     * @hidden
+     */
+    resizeStartWidth: number;
+    /**
+     * @hidden
+     */
+    get level(): number;
+    /**
+     * @hidden
+     */
+    get isLocked(): boolean;
+    protected _width: number;
+    /**
+     * @hidden
+     */
+    get colspan(): number;
+    /**
+     * @hidden
+     */
+    rowspan(totalColumnLevels: number): number;
+    /**
+     * @hidden
+     */
+    get headerTemplateRef(): TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    get footerTemplateRef(): TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    get columnMenuTemplateRef(): TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    get displayTitle(): string;
+    /**
+     * @hidden
+     */
+    get isVisible(): boolean;
+    /**
+     * @hidden
+     */
+    get isEditable(): boolean;
+    /**
+     * @hidden
+     */
+    constructor(parent?: ColumnBase, optionChanges?: OptionChangesService);
+    ngOnChanges(_changes: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnBase, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnBase, "ng-component", never, { "resizable": "resizable"; "reorderable": "reorderable"; "minResizableWidth": "minResizableWidth"; "title": "title"; "width": "width"; "autoSize": "autoSize"; "locked": "locked"; "hidden": "hidden"; "media": "media"; "lockable": "lockable"; "columnMenu": "columnMenu"; "includeInChooser": "includeInChooser"; "style": "style"; "headerStyle": "headerStyle"; "footerStyle": "footerStyle"; "cssClass": "class"; "headerClass": "headerClass"; "footerClass": "footerClass"; }, {}, ["footerTemplate", "headerTemplates", "columnMenuTemplates"], never>;
+}

package/columns/column-common.d.ts

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ColumnBase } from "./column-base";
+/**
+ * @hidden
+ */
+export declare const expandColumns: (columns: Array<ColumnBase>) => Array<ColumnBase>;
+/**
+ * @hidden
+ */
+export declare const expandColumnsWithSpan: (columns: Array<ColumnBase>) => Array<ColumnBase>;
+/**
+ * @hidden
+ */
+export declare const columnsToRender: (columns: Array<ColumnBase>) => Array<ColumnBase>;
+/**
+ * @hidden
+ */
+export declare const sumColumnWidths: (array: Array<any>) => number;
+/**
+ * @hidden
+ */
+export declare const columnsSpan: (array: Array<any>) => number;
+/**
+ * @hidden
+ */
+export declare const isValidFieldName: (fieldName: string) => boolean;
+/**
+ * @hidden
+ */
+export declare const children: (column: any) => any;
+/**
+ * @hidden
+ */
+export declare const leafColumns: (columns: any) => any;
+/**
+ * @hidden
+ */
+export declare const someLeafColumn: (callback: any, ...columns: any[]) => boolean;
+/**
+ * @hidden
+ */
+export declare const resizableColumns: (columns: any) => any;
+/**
+ * @hidden
+ */
+export declare const sortColumns: (columns: Array<ColumnBase>) => Array<ColumnBase>;
+/**
+ * @hidden
+ */
+export declare const isInSpanColumn: (column: ColumnBase) => boolean;