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

package/esm2015/excel/excel-command.directive.js

@@ -0,0 +1,62 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostListener, HostBinding } from '@angular/core';
+import { Button } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+import * as i1 from "./excel.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+/**
+ * Represents the `export-to-Excel` command of the TreeList. You can apply this
+ * directive to any `button` element inside a
+ * [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}).
+ * When the user clicks a button associated with the directive, the
+ * [`excelExport`]({% slug api_treelist_treelistcomponent %}#toc-excelexport) event
+ * fires ([see example]({% slug excelexport_treelist %})).
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *      <ng-template kendoTreeListToolbarTemplate>
+ *          <button kendoTreeListExcelCommand>Export to PDF</button>
+ *      </ng-template>
+ *      <kendo-treelist-excel fileName="TreeList.xlsx">
+ *      </kendo-treelist-excel>
+ * </kendo-treelist>
+ * ```
+ */
+export class ExcelCommandDirective extends Button {
+    constructor(excelService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.excelService = excelService;
+        this.ngZone = ngZone;
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        this.excelService.exportClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    get excelClass() {
+        return true;
+    }
+}
+ExcelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelCommandDirective, deps: [{ token: i1.ExcelService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ExcelCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ExcelCommandDirective, selector: "[kendoTreeListExcelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-excel": "this.excelClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListExcelCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], excelClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-excel']
+            }] } });

package/esm2015/excel/excel-export-data.interface.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/excel/excel.component.js

@@ -0,0 +1,219 @@
+/**-----------------------------------------------------------------------------------------
+* 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, ContentChildren, QueryList } from '@angular/core';
+import { isObservable } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { saveAs } from '@progress/kendo-file-saver';
+import { toDataURL, workbookOptions, ColumnBase } from '@progress/kendo-angular-excel-export';
+import { ExcelExportEvent } from './excel-export-event';
+import { orderBy } from '@progress/kendo-data-query';
+import { sortColumns } from '../columns/column-common';
+import { ViewCollection, EXPANDED_STATE } from '../data/data.collection';
+import { hasObservers } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "./excel.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+const hierarchyData = (view) => {
+    const data = view.data;
+    const levels = {};
+    const aggregates = {};
+    const items = [];
+    let depth = 0;
+    for (let idx = 0, dataIndex = 0; idx < data.length; idx++) {
+        const item = data[idx];
+        if (item.type === 'data') {
+            items.push(item.data);
+            levels[dataIndex] = item.level;
+            depth = Math.max(depth, item.level);
+            dataIndex++;
+        }
+        else {
+            aggregates[item.parentIndex] = item.aggregates;
+        }
+    }
+    return {
+        itemId: (_item, idx) => idx,
+        itemLevel: (_item, idx) => levels[idx],
+        depth: depth + 1,
+        aggregates,
+        data: items
+    };
+};
+const toExcelColumn = (column) => {
+    return {
+        title: column.title,
+        field: column.field,
+        locked: Boolean(column.locked),
+        width: column.width,
+        level: column.level,
+        hidden: !column.isVisible,
+        footerTemplate: column.footerTemplate
+    };
+};
+const toExcelColumns = (columns) => {
+    const result = [];
+    sortColumns(columns)
+        .forEach((column) => {
+        if (column.isSpanColumn) {
+            result.push(...toExcelColumns(column.childrenArray));
+        }
+        else {
+            const excelColumn = toExcelColumn(column);
+            if (column.isColumnGroup) {
+                excelColumn.children = [excelColumn].concat(toExcelColumns(column.childrenArray));
+            }
+            result.push(excelColumn);
+        }
+    });
+    return result;
+};
+const componentColumns = (component) => {
+    const columns = toExcelColumns(component.columns.toArray());
+    return orderBy(columns, [{ field: 'locked', dir: 'desc' }]);
+};
+/**
+ * Configures the settings for the export of TreeList in Excel ([see example]({% slug excelexport_treelist %})).
+ */
+export class ExcelComponent {
+    constructor(excelService, localization, zone) {
+        this.excelService = excelService;
+        this.localization = localization;
+        this.zone = zone;
+        /**
+         * Specifies the file name of the exported Excel file.
+         * @default "Export.xlsx"
+         */
+        this.fileName = 'Export.xlsx';
+        /**
+         * Specifies if export should include all pages
+         * @default true
+         */
+        this.allPages = true;
+        /**
+         * Specifies if the export should expand all items or should use the current TreeList state.
+         * @default true
+         */
+        this.expandAll = true;
+        /**
+         * @hidden
+         */
+        this.columns = new QueryList();
+        this.saveSubscription = excelService.saveToExcel.subscribe(this.save.bind(this));
+    }
+    ngOnDestroy() {
+        this.saveSubscription.unsubscribe();
+        if (this.dataSubscription) {
+            this.dataSubscription.unsubscribe();
+        }
+    }
+    save(component) {
+        const result = this.fetchData ? this.fetchData(component) : null;
+        this.excelService.toggleLoading(true);
+        this.zone.runOutsideAngular(() => {
+            if (result && isObservable(result.data)) {
+                this.dataSubscription = result.data.pipe(take(1)).subscribe((data) => {
+                    this.dataSubscription = null;
+                    this.exportData(component, {
+                        data: data,
+                        fetchChildren: result.fetchChildren,
+                        hasChildren: result.hasChildren
+                    });
+                });
+            }
+            else {
+                // allow the loading to be shown
+                setTimeout(() => {
+                    this.exportData(component, result);
+                });
+            }
+        });
+    }
+    exportData(component, result) {
+        const viewOptions = result ? {
+            fields: result,
+            expandState: this.expandAll ? EXPANDED_STATE : component.expandStateService
+        } : this.componentViewOptions(component);
+        ViewCollection.loadView(viewOptions).subscribe((view) => {
+            if (!view) {
+                return;
+            }
+            const hierarchy = hierarchyData(view);
+            const options = workbookOptions({
+                columns: this.columns.length ? this.columns : componentColumns(component),
+                data: hierarchy.data,
+                aggregates: hierarchy.aggregates,
+                filterable: this.filterable,
+                creator: this.creator,
+                date: this.date,
+                rtl: this.localization.rtl,
+                collapsible: this.collapsible,
+                hierarchy: hierarchy,
+                paddingCellOptions: this.paddingCellOptions
+            });
+            const args = new ExcelExportEvent(options);
+            if (hasObservers(component.excelExport)) {
+                this.zone.run(() => {
+                    component.excelExport.emit(args);
+                });
+            }
+            this.excelService.toggleLoading(false);
+            if (!args.isDefaultPrevented()) {
+                this.saveFile(options);
+            }
+        });
+    }
+    saveFile(options) {
+        toDataURL(options).then((dataURL) => {
+            saveAs(dataURL, this.fileName, {
+                forceProxy: this.forceProxy,
+                proxyURL: this.proxyURL
+            });
+        });
+    }
+    componentViewOptions(component) {
+        return {
+            fields: Object.assign(component.viewFieldAccessor(), {
+                pageable: !this.allPages,
+                skip: this.allPages ? 0 : component.skip
+            }),
+            expandState: !this.expandAll || (!this.allPages && component.pageable) ? component.expandStateService : EXPANDED_STATE,
+            loaded: new Map(component.view.loaded)
+        };
+    }
+}
+ExcelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelComponent, deps: [{ token: i1.ExcelService }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ExcelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExcelComponent, selector: "kendo-treelist-excel", inputs: { fileName: "fileName", filterable: "filterable", creator: "creator", date: "date", forceProxy: "forceProxy", proxyURL: "proxyURL", fetchData: "fetchData", collapsible: "collapsible", allPages: "allPages", expandAll: "expandAll", paddingCellOptions: "paddingCellOptions" }, queries: [{ propertyName: "columns", predicate: ColumnBase, descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-excel',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { fileName: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], creator: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], forceProxy: [{
+                type: Input
+            }], proxyURL: [{
+                type: Input
+            }], fetchData: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], allPages: [{
+                type: Input
+            }], expandAll: [{
+                type: Input
+            }], paddingCellOptions: [{
+                type: Input
+            }], columns: [{
+                type: ContentChildren,
+                args: [ColumnBase, { descendants: true }]
+            }] } });

package/esm2015/excel/excel.module.js

@@ -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 { NgModule } from '@angular/core';
+import { ExcelComponent } from './excel.component';
+import { ExcelCommandDirective } from './excel-command.directive';
+import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
+import * as i0 from "@angular/core";
+const declarations = [ExcelComponent, ExcelCommandDirective];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Excel component of the TreeList.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the TreeList and Excel modules
+ * import { TreeListModule, ExcelModule } from '@progress/kendo-angular-treelist';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, TreeListModule, ExcelModule], // import TreeList and Excel modules
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export class ExcelModule {
+}
+ExcelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ExcelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, declarations: [ExcelComponent, ExcelCommandDirective], exports: [ExcelComponent, ExcelCommandDirective, ExcelExportModule] });
+ExcelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, imports: [ExcelExportModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations],
+                    exports: [declarations, ExcelExportModule]
+                }]
+        }] });

package/esm2015/excel/excel.service.js

@@ -0,0 +1,35 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, Injectable, isDevMode } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ExcelService {
+    constructor() {
+        this.saveToExcel = new EventEmitter();
+        this.exportClick = new EventEmitter();
+        this.loadingChange = new EventEmitter();
+    }
+    save(component) {
+        if (this.saveToExcel.observers.length === 0) {
+            if (isDevMode()) {
+                throw new Error('Saving excel requires including the ExcelModule and adding the <kendo-treelist-excel> component.');
+            }
+        }
+        else {
+            this.saveToExcel.emit(component);
+        }
+    }
+    toggleLoading(value) {
+        this.loading = value;
+        this.loadingChange.emit();
+    }
+}
+ExcelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExcelService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/expand-state/expand-state.service.js

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { ExpandEvent } from './expand-event';
+import { Subject } from "rxjs";
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export const defaultExpanded = (_item) => true;
+/**
+ * @hidden
+ */
+export class ExpandStateService {
+    constructor() {
+        this.changes = new Subject();
+        this.isExpanded = defaultExpanded;
+    }
+    toggleState(dataItem) {
+        const isExpanded = this.isExpanded(dataItem);
+        this.changes.next(new ExpandEvent({ dataItem: dataItem, expand: !isExpanded }));
+    }
+    expand(dataItem) {
+        if (!this.isExpanded(dataItem)) {
+            this.changes.next(new ExpandEvent({ dataItem: dataItem, expand: true }));
+        }
+    }
+    collapse(dataItem) {
+        if (this.isExpanded(dataItem)) {
+            this.changes.next(new ExpandEvent({ dataItem: dataItem, expand: false }));
+        }
+    }
+}
+ExpandStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExpandStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandStateService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/expand-state/expandable-tree-component.js

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ *
+ * An injection token used by the expand-directive to interface with the TreeList or the Gantt.
+ */
+export class ExpandableTreeComponent {
+}
+ExpandableTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandableTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExpandableTreeComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandableTreeComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandableTreeComponent, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/expand-state/expandable.directive.js

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input, Output, EventEmitter } from '@angular/core';
+import { getter } from '@progress/kendo-common';
+import { isString } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "./expandable-tree-component";
+/**
+ * A directive which controls the expanded state of the items.
+ */
+export class ExpandableDirective {
+    constructor(component) {
+        this.component = component;
+        /**
+         * Fires when the expandedKeys are changed.
+         */
+        this.expandedKeysChange = new EventEmitter();
+        /**
+         * Specifies if the items should be initially expanded.
+         * @default false
+         */
+        this.initiallyExpanded = false;
+        this.state = new Set();
+        this.component.isExpanded = this.isExpanded.bind(this);
+        this.toggleState = this.toggleState.bind(this);
+        this.subscriptions = this.component.expandStateChange.subscribe(this.toggleState);
+    }
+    /**
+     * Sets the expanded item keys.
+     */
+    set expandedKeys(value) {
+        if (value !== this._expandedKeys) {
+            this._expandedKeys = value;
+            this.component.updateView();
+        }
+    }
+    get expandedKeys() {
+        return Array.from(this.state.keys());
+    }
+    /**
+     * Defines the item key that will be stored in the expandedKeys collection.
+     * Defaults to the component idField.
+     */
+    set expandBy(key) {
+        if (isString(key)) {
+            this._expandBy = getter(key);
+        }
+        else {
+            this._expandBy = key;
+        }
+    }
+    get keyGetter() {
+        return this._expandBy || this.component.idGetter;
+    }
+    /**
+     * @hidden
+     */
+    isExpanded(item) {
+        const key = this.keyGetter(item);
+        return this.state.has(key) ? !this.initiallyExpanded : this.initiallyExpanded;
+    }
+    ngOnChanges(changes) {
+        if (changes.expandedKeys) {
+            this.state = new Set(this._expandedKeys);
+        }
+        else if (changes.initiallyExpanded) {
+            this.state.clear();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    toggleState(args) {
+        const key = this.keyGetter(args.dataItem);
+        if (Boolean(this.initiallyExpanded) !== args.expand) {
+            this.state.add(key);
+        }
+        else {
+            this.state.delete(key);
+        }
+        this.expandedKeysChange.emit(this.expandedKeys);
+    }
+}
+ExpandableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandableDirective, deps: [{ token: i1.ExpandableTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ExpandableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: { expandedKeys: "expandedKeys", initiallyExpanded: "initiallyExpanded", expandBy: "expandBy" }, outputs: { expandedKeysChange: "expandedKeysChange" }, exportAs: ["kendoTreeListExpandable"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListExpandable',
+                    selector: '[kendoTreeListExpandable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ExpandableTreeComponent }]; }, propDecorators: { expandedKeysChange: [{
+                type: Output
+            }], expandedKeys: [{
+                type: Input
+            }], initiallyExpanded: [{
+                type: Input
+            }], expandBy: [{
+                type: Input
+            }] } });