@progress/kendo-angular-treelist 4.0.6 → 5.0.0-dev.202204150741

package/esm2015/scrolling/content-scroll-event.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/scrolling/scroll-bottom-event.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/scrolling/scroll-request.service.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ScrollRequestService {
+    constructor() {
+        this.requests = new Subject();
+    }
+    scrollTo(request) {
+        this.requests.next(request);
+    }
+}
+ScrollRequestService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollRequestService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollRequestService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollRequestService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/scrolling/scroll-sync.service.js

@@ -0,0 +1,78 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Subscription, Subject, fromEvent } from 'rxjs';
+import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ScrollSyncService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.headerSubscription = new Subscription();
+        this.bodySubscription = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(args => this.scrollLeft(args)));
+    }
+    registerEmitter(el, sourceType) {
+        this.unregister(sourceType);
+        this.elements.push({ element: el, sourceType });
+        if (sourceType === "body" || sourceType === "header") {
+            this.ngZone.runOutsideAngular(() => {
+                const obs = fromEvent(el, "scroll").pipe(map(({ target: { scrollLeft } }) => ({
+                    scrollLeft,
+                    sourceType
+                })));
+                const subscription = obs.pipe(distinctUntilChanged((x, y) => (x.scrollLeft === y.scrollLeft)), filter(x => !this.source || this.source === x.sourceType), tap(x => this.source = x.sourceType))
+                    .subscribe((x) => this.changes.next(x));
+                subscription.add(obs.pipe(filter(x => this.source && this.source !== x.sourceType))
+                    .subscribe(() => this.source = undefined));
+                if (sourceType === "body") {
+                    this.bodySubscription.add(subscription);
+                }
+                else {
+                    this.headerSubscription.add(subscription);
+                }
+            });
+        }
+    }
+    /**
+     * destroy
+     */
+    destroy() {
+        this.subscriptions.unsubscribe();
+        this.headerSubscription.unsubscribe();
+        this.bodySubscription.unsubscribe();
+    }
+    scrollLeft({ scrollLeft, sourceType }) {
+        this.ngZone.runOutsideAngular(() => {
+            this.elements
+                .filter(x => sourceType !== x.sourceType)
+                .forEach(({ element }) => element.scrollLeft = scrollLeft);
+        });
+    }
+    unregister(sourceType) {
+        const index = this.elements.findIndex(x => x.sourceType === sourceType);
+        if (index > -1) {
+            if (sourceType === "header") {
+                this.headerSubscription.unsubscribe();
+                this.headerSubscription = new Subscription();
+            }
+            else if (sourceType === "body") {
+                this.bodySubscription.unsubscribe();
+                this.bodySubscription = new Subscription();
+            }
+            this.elements.splice(index, 1);
+        }
+    }
+}
+ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/esm2015/scrolling/scrollmode.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/scrolling/suspend.service.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* 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
+ */
+export class SuspendService {
+    constructor() {
+        this.scroll = false;
+    }
+}
+SuspendService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SuspendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SuspendService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SuspendService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SuspendService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/selection/is-selected.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/selection/marquee.directive.js

@@ -0,0 +1,165 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding } from '@angular/core';
+import { createState } from './selection-state';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-common";
+import * as i2 from "./selection.service";
+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 elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
+/**
+ * @hidden
+ */
+export 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);
+        }
+    }
+}
+MarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MarqueeDirective, deps: [{ token: i1.DraggableDirective }, { token: i2.SelectionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+MarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]", host: { properties: { "style.user-select": "this.userSelection" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MarqueeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListSelectionMarquee]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DraggableDirective }, { type: i2.SelectionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { userSelection: [{
+                type: HostBinding,
+                args: ['style.user-select']
+            }] } });

package/esm2015/selection/selectable-settings.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/selection/selectable.directive.js

@@ -0,0 +1,185 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { createState, RowSelectionState } from './selection-state';
+import * as i0 from "@angular/core";
+import * as i1 from "../treelist.component";
+const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
+/**
+ * A directive which controls the selection state
+ */
+export 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());
+    }
+}
+SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectableDirective, selector: "[kendoTreeListSelectable]", inputs: { selectable: "selectable", selectedItems: "selectedItems", itemKey: "itemKey", columnKey: "columnKey" }, outputs: { selectedItemsChange: "selectedItemsChange" }, exportAs: ["kendoTreeListSelectable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListSelectable',
+                    selector: '[kendoTreeListSelectable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { selectable: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], selectedItemsChange: [{
+                type: Output
+            }], itemKey: [{
+                type: Input
+            }], columnKey: [{
+                type: Input
+            }] } });