@progress/kendo-angular-treelist 3.1.3-dev.202110041229

package/dist/es2015/selection/marquee.directive.js

@@ -0,0 +1,171 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, HostBinding, ChangeDetectorRef } from '@angular/core';
+import { DraggableDirective } from '@progress/kendo-angular-common';
+import { SelectionService } from './selection.service';
+import { createState } from './selection-state';
+const createElement = () => {
+    const marquee = document.createElement("div");
+    marquee.className = "k-marquee";
+    const marqueeColor = document.createElement("div");
+    marqueeColor.className = "k-marquee-color";
+    marquee.appendChild(marqueeColor);
+    return marquee;
+};
+const ɵ0 = createElement;
+const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
+const ɵ1 = elementUnderCursor;
+/**
+ * @hidden
+ */
+let MarqueeDirective = class MarqueeDirective {
+    constructor(draggable, selection, changeDetector) {
+        this.draggable = draggable;
+        this.selection = selection;
+        this.changeDetector = changeDetector;
+        this.cellSelected = this.cellSelected.bind(this);
+        this.rowSelected = this.rowSelected.bind(this);
+    }
+    get userSelection() {
+        return this.selection.enableMarquee ? 'none' : null;
+    }
+    ngOnInit() {
+        // handle esc
+        // trigger cancel
+        this.subscriptions = this.draggable.kendoPress.subscribe(this.start.bind(this));
+        this.subscriptions.add(this.draggable.kendoDrag.subscribe(this.moveMarquee.bind(this)));
+        this.subscriptions.add(this.draggable.kendoRelease.subscribe(this.endSelection.bind(this)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.clean();
+    }
+    cellSelected(dataItem, column) {
+        return this.state.has(dataItem, column);
+    }
+    rowSelected(dataItem) {
+        return this.state.has(dataItem);
+    }
+    start(args) {
+        const pressTarget = this.targetArgs(args, true);
+        if (!pressTarget) {
+            return;
+        }
+        this.pressTarget = pressTarget;
+        this.pressArgs = args;
+    }
+    moveMarquee(args) {
+        if (this.pressTarget && !this.state) {
+            this.initMarquee();
+        }
+        if (this.marqueeElement) {
+            const element = this.marqueeElement;
+            const press = this.pressArgs;
+            const left = Math.min(args.pageX, press.pageX);
+            const top = Math.min(args.pageY, press.pageY);
+            const width = Math.abs(args.pageX - press.pageX);
+            const height = Math.abs(args.pageY - press.pageY);
+            element.style.left = `${left}px`;
+            element.style.top = `${top}px`;
+            element.style.width = `${width}px`;
+            element.style.height = `${height}px`;
+        }
+        else if (this.state) {
+            const currentTarget = this.targetArgs(args);
+            if (currentTarget && (!this.currentTarget || this.currentTarget.item.data !== currentTarget.item.data ||
+                (this.selection.settings.mode === 'cell' && this.currentTarget.column !== currentTarget.column))) {
+                this.currentTarget = currentTarget;
+                this.state.fromArray(this.selection.rangeItems(this.pressTarget, currentTarget).map(item => ({ itemKey: item.dataItem, columnKey: item.column })));
+                this.selection.updateSelectedState();
+                this.changeDetector.detectChanges();
+            }
+        }
+    }
+    endSelection(args) {
+        if (!this.state) {
+            return;
+        }
+        if ((this.pressArgs.pageX !== args.pageX || this.pressArgs.pageY !== args.pageY)) {
+            const pressTarget = this.pressTarget;
+            const releaseTarget = this.targetArgs(args);
+            this.clean();
+            // if one is missing select first / last viewItem depending on the position
+            // select column based on coordinates
+            if (pressTarget && releaseTarget) {
+                this.selection.selectRange(pressTarget, releaseTarget);
+            }
+            else {
+                this.changeDetector.detectChanges();
+            }
+        }
+        else {
+            this.clean();
+            this.changeDetector.detectChanges();
+        }
+    }
+    clean() {
+        if (this.marqueeElement) {
+            document.body.removeChild(this.marqueeElement);
+            this.marqueeElement = null;
+        }
+        if (this.selectionSelected) {
+            if (this.selection.settings.mode === 'cell') {
+                this.selection.isCellSelected = this.selectionSelected;
+            }
+            else {
+                this.selection.isRowSelected = this.selectionSelected;
+            }
+            this.selectionSelected = null;
+        }
+        if (this.state) {
+            this.state.clear();
+            this.state = null;
+        }
+        this.pressTarget = null;
+        this.pressArgs = null;
+    }
+    targetArgs(args, skipFocusable) {
+        let target = args.originalEvent.target;
+        if (this.marqueeElement) {
+            this.marqueeElement.style.display = 'none';
+            target = elementUnderCursor(args);
+            this.marqueeElement.style.display = 'block';
+        }
+        return this.selection.targetArgs(target, skipFocusable);
+    }
+    initMarquee() {
+        this.state = createState(this.selection.settings);
+        if (this.selection.settings.mode === 'cell') {
+            this.selectionSelected = this.selection.isCellSelected;
+            this.selection.isCellSelected = this.cellSelected;
+        }
+        else {
+            this.selectionSelected = this.selection.isRowSelected;
+            this.selection.isRowSelected = this.rowSelected;
+        }
+        this.changeDetector.detectChanges();
+        const drag = this.selection.settings.drag;
+        if (!(drag && drag.snap)) {
+            this.marqueeElement = createElement();
+            document.body.appendChild(this.marqueeElement);
+        }
+    }
+};
+tslib_1.__decorate([
+    HostBinding('style.user-select'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], MarqueeDirective.prototype, "userSelection", null);
+MarqueeDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoTreeListSelectionMarquee]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [DraggableDirective,
+        SelectionService,
+        ChangeDetectorRef])
+], MarqueeDirective);
+export { MarqueeDirective };
+export { ɵ0, ɵ1 };

package/dist/es2015/selection/selectable-settings.d.ts

@@ -0,0 +1,48 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The settings for the selection functionality of the TreeList.
+ */
+export interface SelectableSettings {
+    /**
+     * Specifies the selection mode.
+     *
+     * @default "row"
+     */
+    mode: 'cell' | 'row';
+    /**
+     * Specifies if multiple selection is enabled.
+     *
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * Specifies the drag selection options.
+     *
+     * @default true
+     */
+    drag: boolean | {
+        snap: boolean;
+    };
+    /**
+     * Specifies if the selection functionality is enabled.
+     * > Setting this option to `false` will stop all selection-related functionality. This means that:
+     * > * The end user will not be able to select and deselect rows or cells.
+     * > * Items in the [selectedItems]({% slug api_treelist_selectabledirective %}#toc-selecteditems) collection will not be rendered as selected.
+     * > * The [isSelected]({% slug api_treelist_treelistcomponent %}#toc-isselected) callback will be ignored.
+     *
+     * @default true
+     */
+    enabled: boolean;
+    /**
+     * Setting this option to `true` prevents the end user from selecting and deselecting items.
+     * When the selection functionality is enabled and `readonly` is set to `true`,
+     * programmatic selection is still possible by using the [selectedItems]({% slug api_treelist_selectabledirective %}#toc-selecteditems) collection
+     * or the [isSelected]({% slug api_treelist_treelistcomponent %}#toc-isselected) callback.
+     *
+     * @default false
+     */
+    readonly: boolean;
+}

package/dist/es2015/selection/selectable-settings.js

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

package/dist/es2015/selection/selectable.directive.d.ts

@@ -0,0 +1,70 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnDestroy, EventEmitter } from '@angular/core';
+import { TreeListComponent } from '../treelist.component';
+/**
+ * The `kendoTreeListSelectable` state items.
+ */
+export interface SelectionItem {
+    /**
+     * The key that identifies the selected item.
+     */
+    itemKey: any;
+    /**
+     * The key that identifies the selected item column. Available in `cell` selection mode.
+     */
+    columnKey?: any;
+}
+/**
+ * A directive which controls the selection state
+ */
+export declare class SelectableDirective implements OnDestroy {
+    private treelist;
+    /**
+     * @hidden
+     */
+    selectable: any;
+    /**
+     * Specifies the selected items.
+     */
+    selectedItems: SelectionItem[];
+    /**
+     * Fires when the selected items are changed.
+     */
+    selectedItemsChange: EventEmitter<SelectionItem[]>;
+    /**
+     * The field name or a function that specify the dataItems key.
+     */
+    itemKey: string | ((dataItem: any) => any);
+    /**
+     * The field name or a function that specify the columns key.
+     */
+    columnKey: string | ((column: any, columnIndex: number) => any);
+    protected readonly keyGetter: any;
+    protected readonly columnKeyGetter: any;
+    protected subscriptions: any;
+    protected state: any;
+    protected _settings: any;
+    protected lastChange: any[];
+    protected _columnKeyGetter: any;
+    protected _keyGetter: any;
+    private _selectedItems;
+    constructor(treelist: TreeListComponent);
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    protected cellSelected(dataItem: any, column: any, columnIndex: number): boolean;
+    /**
+     * @hidden
+     */
+    protected rowSelected(dataItem: any): boolean;
+    protected selectionChange({ action, items }: any): void;
+    protected emitSelectedItemsChange(): void;
+    private subscribeSelection;
+    private unsubscribeSelection;
+    private updateColumnIndices;
+    private readonly leafColumns;
+}

package/dist/es2015/selection/selectable.directive.js

@@ -0,0 +1,200 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, Input, Output, EventEmitter } from '@angular/core';
+import { TreeListComponent } from '../treelist.component';
+import { getter } from '@progress/kendo-common';
+import { isString } from '../utils';
+import { createState, RowSelectionState } from './selection-state';
+const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
+const ɵ0 = defaultColumnKeyGetter;
+/**
+ * A directive which controls the selection state
+ */
+let SelectableDirective = class SelectableDirective {
+    constructor(treelist) {
+        this.treelist = treelist;
+        /**
+         * Fires when the selected items are changed.
+         */
+        this.selectedItemsChange = new EventEmitter();
+        this.state = new RowSelectionState();
+        this._selectedItems = [];
+        this.cellSelected = this.cellSelected.bind(this);
+        this.rowSelected = this.rowSelected.bind(this);
+        this.selectionChange = this.selectionChange.bind(this);
+        this.updateColumnIndices = this.updateColumnIndices.bind(this);
+        this.treelist.selectable = this.selectable = true;
+    }
+    /**
+     * @hidden
+     */
+    set selectable(value) {
+        if (typeof value === 'object') { // add method to normalize this
+            this._settings = value;
+        }
+        else {
+            this._settings = {
+                enabled: value
+            };
+        }
+        this.state = createState(this._settings);
+        this.state.fromArray(this._selectedItems || []);
+        if (this._settings.enabled !== false) {
+            this.treelist.isSelected = this._settings.mode === 'cell' ? this.cellSelected : this.rowSelected;
+            this.subscribeSelection();
+        }
+        else {
+            this.treelist.isSelected = () => false;
+            this.unsubscribeSelection();
+        }
+        this.treelist.updateView();
+    }
+    /**
+     * Specifies the selected items.
+     */
+    set selectedItems(value) {
+        if (!value) {
+            this.state.clear();
+        }
+        else if (value !== this.lastChange) {
+            this.state.fromArray(value);
+            this.treelist.updateView();
+        }
+        this._selectedItems = value;
+    }
+    /**
+     * The field name or a function that specify the dataItems key.
+     */
+    set itemKey(value) {
+        if (isString(value)) {
+            this._keyGetter = getter(String(value));
+        }
+        else {
+            this._keyGetter = value;
+        }
+    }
+    /**
+     * The field name or a function that specify the columns key.
+     */
+    set columnKey(value) {
+        if (isString(value)) {
+            this._columnKeyGetter = getter(String(value));
+        }
+        else if (value) {
+            this._columnKeyGetter = value;
+        }
+    }
+    get keyGetter() {
+        return this._keyGetter || this.treelist.idGetter;
+    }
+    get columnKeyGetter() {
+        return this._columnKeyGetter || defaultColumnKeyGetter;
+    }
+    ngOnDestroy() {
+        this.unsubscribeSelection();
+    }
+    /**
+     * @hidden
+     */
+    cellSelected(dataItem, column, columnIndex) {
+        return this.state.has(this.keyGetter(dataItem), this.columnKeyGetter(column, columnIndex));
+    }
+    /**
+     * @hidden
+     */
+    rowSelected(dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    }
+    selectionChange({ action, items }) {
+        if (action === 'select' || action === 'add') {
+            if (action === 'select') {
+                this.state.clear();
+            }
+            items.forEach(item => {
+                this.state.add(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
+            });
+        }
+        else {
+            items.forEach(item => {
+                this.state.remove(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
+            });
+        }
+        this.emitSelectedItemsChange();
+    }
+    emitSelectedItemsChange() {
+        this.lastChange = this.state.toArray();
+        this.selectedItemsChange.emit(this.lastChange);
+    }
+    subscribeSelection() {
+        this.unsubscribeSelection();
+        this.subscriptions = this.treelist.selectionChange.subscribe(this.selectionChange);
+        if (this._settings.mode === 'cell') {
+            this.subscriptions.add(this.treelist.columnOrderChange.subscribe(this.updateColumnIndices));
+            this.subscriptions.add(this.treelist.columnLockedChange.subscribe(this.updateColumnIndices));
+        }
+    }
+    unsubscribeSelection() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+            this.subscriptions = null;
+        }
+    }
+    updateColumnIndices() {
+        if (!this._columnKeyGetter) {
+            const changes = new Map();
+            const currentIndices = [];
+            this.leafColumns.forEach((column) => {
+                currentIndices.push(column);
+            });
+            this.treelist.columnsContainer.refresh();
+            const leafColumns = this.leafColumns;
+            currentIndices.forEach((column, index) => {
+                if (column !== leafColumns[index]) {
+                    changes.set(index, leafColumns.indexOf(column));
+                }
+            });
+            if (changes.size && this.state.updateColumKeys(changes)) {
+                this.emitSelectedItemsChange();
+            }
+        }
+    }
+    get leafColumns() {
+        return this.treelist.lockedLeafColumns.toArray().concat(this.treelist.nonLockedLeafColumns.toArray());
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], SelectableDirective.prototype, "selectable", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array),
+    tslib_1.__metadata("design:paramtypes", [Array])
+], SelectableDirective.prototype, "selectedItems", null);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], SelectableDirective.prototype, "selectedItemsChange", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], SelectableDirective.prototype, "itemKey", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], SelectableDirective.prototype, "columnKey", null);
+SelectableDirective = tslib_1.__decorate([
+    Directive({
+        exportAs: 'kendoTreeListSelectable',
+        selector: '[kendoTreeListSelectable]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [TreeListComponent])
+], SelectableDirective);
+export { SelectableDirective };
+export { ɵ0 };

package/dist/es2015/selection/selection-change-event.d.ts

@@ -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 { TreeListComponent } from '../treelist.component';
+import { ColumnBase } from '../columns/column-base';
+/**
+ * The items specified with the `SelectionChangeEvent`.
+ */
+export interface SelectionChangeItem {
+    /**
+     * The changed selection dataItem
+     */
+    dataItem: any;
+    /**
+     * The changed selection column. Available only in `cell` selection mode.
+     */
+    column?: ColumnBase;
+    /**
+     * The changed selection column index. Available only in `cell` selection mode.
+     */
+    columnIndex?: number;
+}
+/**
+ * Arguments for the TreeList `selectionChange` event.
+ */
+export declare class SelectionChangeEvent {
+    /**
+     * Specifies how was the selection changed
+     */
+    action: 'select' | 'add' | 'remove';
+    /**
+     * Specifies which items were changed.
+     */
+    items: SelectionChangeItem[];
+    /**
+     * The TreeList component that triggered the event.
+     */
+    sender: TreeListComponent;
+    /**
+     * @hidden
+     */
+    constructor(action: any, items: SelectionChangeItem[]);
+}

package/dist/es2015/selection/selection-change-event.js

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Arguments for the TreeList `selectionChange` event.
+ */
+export class SelectionChangeEvent {
+    /**
+     * @hidden
+     */
+    constructor(action, items) {
+        this.action = action;
+        this.items = items;
+    }
+}

package/dist/es2015/selection/selection-state.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
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare class RowSelectionState {
+    private keys;
+    clear(): void;
+    has(key: any): boolean;
+    add(key: any): void;
+    remove(key: any): void;
+    toArray(): any[];
+    fromArray(arr: any[]): void;
+}
+/**
+ * @hidden
+ */
+export declare class CellSelectionState {
+    private keys;
+    clear(): void;
+    has(key: any, columnKey: any): boolean;
+    add(key: any, columnKey: any): void;
+    remove(key: any, columnKey: any): void;
+    toArray(): any[];
+    fromArray(state: any[]): void;
+    updateColumKeys(changes: any): boolean;
+    forEach(callback: any): void;
+}
+/**
+ * @hidden
+ */
+export declare const createState: (settings: any) => RowSelectionState | CellSelectionState;