@progress/kendo-angular-treelist 13.0.0-develop.2 → 13.0.0-develop.21

package/esm2020/row-reordering/row-reorder.service.mjs

@@ -0,0 +1,220 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, Injectable, Output, Renderer2 } from '@angular/core';
+import { isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { getOffset, isNextSibling, isPreviousSibling, dropPosition, hintIcons, hintSVGIcons, hintClasses, hintStyles, dropIndicatorClasses, dropIndicatorStyles, defaultSelectors, rowIndexAttr } from './utils';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class RowReorderService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.defaultSelectors = defaultSelectors;
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.lastDropPosition = dropPosition.forbidden;
+        this.hintElement = null;
+        this.rowReorder = new EventEmitter();
+    }
+    press(ev) {
+        this.dragTarget = ev.dragTarget;
+        this.offsetY = ev.dragEvent.offsetY;
+    }
+    dragStart() {
+        this.createDropIndicator();
+    }
+    drag(ev) {
+        if (isPresent(ev.hintElement) && !isPresent(this.hintElement)) {
+            this.hintElement = ev.hintElement;
+            this.decorateHint();
+        }
+        const position = {
+            x: ev.dragEvent.clientX,
+            y: ev.dragEvent.clientY - this.offsetY
+        };
+        if (isPresent(this.hintElement)) {
+            this.renderer.setStyle(this.hintElement, 'left', `${position.x}px`);
+            this.renderer.setStyle(this.hintElement, 'top', `${position.y}px`);
+        }
+        this.positionDropIndicator(ev);
+    }
+    dragEnter(ev) {
+        this.dropTarget = ev.dropTarget;
+        this.view = ev.dragData;
+    }
+    dragLeave() {
+        this.dropTarget = null;
+        this.lastDropPosition === dropPosition.forbidden && this.hide();
+    }
+    dragEnd() {
+        this.destroyDropIndicator();
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.hintElement = null;
+    }
+    drop() {
+        this.destroyDropIndicator();
+        const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        this.rowReorder.emit(rowReorderArgs);
+    }
+    get hintIcon() {
+        return hintIcons[this.lastDropPosition];
+    }
+    get hintSVGIcon() {
+        return hintSVGIcons[this.lastDropPosition];
+    }
+    getDefaultHintText(columns, data) {
+        let hintText = '';
+        const columnFieldsArray = columns
+            .toArray()
+            .filter(column => !column.hidden && isPresent(column.field))
+            .map(column => column.field);
+        const draggedDragRow = this.getDragRowPerElement(this.dragTarget, data);
+        const draggedDataItem = draggedDragRow?.dataItem;
+        isPresent(draggedDataItem) && columnFieldsArray.forEach(column => {
+            const columnValue = draggedDataItem[column];
+            isPresent(columnValue) ? hintText += `${columnValue} ` : null;
+        });
+        return hintText.trim();
+    }
+    rowReorderArgs(dragRow, dropRow, data) {
+        const dragRowData = this.getDragRowPerElement(dragRow, data);
+        const dropRowData = this.getDragRowPerElement(dropRow, data);
+        return {
+            draggedRows: [dragRowData],
+            dropTargetRow: dropRowData,
+            dropPosition: this.lastDropPosition
+        };
+    }
+    isOverChild(_item) { return false; }
+    reorderRows(_ev, _collection, _field) { }
+    get parentIdField() {
+        return this.bindingDirective.parentIdField;
+    }
+    get idField() {
+        return this.bindingDirective.idField;
+    }
+    get childrenField() {
+        return this.bindingDirective.childrenField;
+    }
+    get data() {
+        return this.bindingDirective.data;
+    }
+    getDragRowPerElement(row, data) {
+        let rowIndex = row?.getAttribute(rowIndexAttr);
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const dataItem = rowIndex === -1 ? null : data?.at(rowIndex)?.data;
+        return {
+            dataItem,
+            rowIndex,
+            element: row
+        };
+    }
+    createDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.dropIndicator = document.createElement('div');
+        this.decorateDropIndicator();
+        this.dropIndicator.innerHTML = `
+            <div class="k-drop-hint-start"></div>
+            <div class="k-drop-hint-line"></div>
+        `;
+        document.body.appendChild(this.dropIndicator);
+        this.hide();
+    }
+    destroyDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        ;
+        if (this.dropIndicator && this.dropIndicator.parentElement) {
+            document.body.removeChild(this.dropIndicator);
+            this.dropIndicator = null;
+        }
+    }
+    decorateHint() {
+        hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
+        Object.keys(hintStyles)
+            .forEach(style => this.renderer.setStyle(this.hintElement, style, hintStyles[style]));
+    }
+    positionDropIndicator(ev) {
+        this.lastDropPosition = this.getDropPosition(ev.dragEvent);
+        this.updateDropIndicatorPosition();
+    }
+    decorateDropIndicator() {
+        dropIndicatorClasses.forEach(className => this.renderer.addClass(this.dropIndicator, className));
+        Object.keys(dropIndicatorStyles)
+            .forEach(style => this.renderer.setStyle(this.dropIndicator, style, dropIndicatorStyles[style]));
+    }
+    getDropPosition(e) {
+        if (this.dropTarget === this.dragTarget || !isPresent(this.dropTarget)) {
+            return dropPosition.forbidden;
+        }
+        ;
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 3;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        const { dropTargetRow } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const pointerPosition = e.clientY;
+        const itemTop = itemViewPortCoords.top;
+        let currentDropPosition = null;
+        if (pointerPosition <= itemTop + itemDivisionHeight) {
+            currentDropPosition = dropPosition.before;
+        }
+        else if (pointerPosition >= itemTop + itemViewPortCoords.height - itemDivisionHeight) {
+            currentDropPosition = dropPosition.after;
+        }
+        else {
+            currentDropPosition = dropPosition.over;
+        }
+        if (currentDropPosition === dropPosition.before && isNextSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        if (this.isOverChild(dropTargetRow.dataItem)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        return currentDropPosition;
+    }
+    updateDropIndicatorPosition() {
+        if (this.shouldHideDropIndicator() || !this.dropTarget) {
+            this.hide();
+            return;
+        }
+        this.show();
+        const destinationItemOffset = getOffset(this.dropTarget);
+        let indicatorOffsetTop = destinationItemOffset.top;
+        const indicatorOffsetLeft = destinationItemOffset.left + this.dropIndicator.offsetWidth / 2;
+        if (this.lastDropPosition === dropPosition.after) {
+            indicatorOffsetTop += this.dropTarget.offsetHeight;
+        }
+        this.renderer.setStyle(this.dropIndicator, 'left', `${indicatorOffsetLeft}px`);
+        this.renderer.setStyle(this.dropIndicator, 'top', `${indicatorOffsetTop}px`);
+    }
+    shouldHideDropIndicator() {
+        return this.lastDropPosition === dropPosition.forbidden || this.lastDropPosition === dropPosition.over;
+    }
+    hide() {
+        if (isPresent(this.dropIndicator)) {
+            this.renderer.setStyle(this.dropIndicator, 'display', 'none');
+        }
+    }
+    show() {
+        if (isPresent(this.dropIndicator)) {
+            this.renderer.removeStyle(this.dropIndicator, 'display');
+        }
+    }
+}
+RowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+RowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
+                type: Output
+            }] } });

package/esm2020/row-reordering/types.mjs

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

package/esm2020/row-reordering/utils.mjs

@@ -0,0 +1,129 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { cancelIcon, insertMiddleIcon, plusIcon } from '@progress/kendo-svg-icons';
+/**
+ * @hidden
+ */
+export const isNextSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.nextElementSibling;
+/**
+ * @hidden
+ */
+export const isPreviousSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.previousElementSibling;
+/**
+ * @hidden
+ */
+export function getOffset(element) {
+    const { clientTop, clientLeft } = getDocument(element);
+    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { top, left } = element.getBoundingClientRect();
+    return {
+        top: top + pageYOffset - clientTop,
+        left: left + pageXOffset - clientLeft
+    };
+}
+;
+/**
+ * @hidden
+ */
+export const hintIcons = {
+    forbidden: 'cancel',
+    before: 'insert-middle',
+    after: 'insert-middle',
+    over: 'plus'
+};
+/**
+ * @hidden
+ */
+export const hintSVGIcons = {
+    forbidden: cancelIcon,
+    before: insertMiddleIcon,
+    after: insertMiddleIcon,
+    over: plusIcon
+};
+/**
+ * @hidden
+ */
+export const dropPosition = {
+    forbidden: 'forbidden',
+    before: 'before',
+    after: 'after',
+    over: 'over'
+};
+/**
+ * @hidden
+ */
+export const hintStyles = {
+    zIndex: '20000',
+    display: 'flex',
+    position: 'fixed'
+};
+/**
+ * @hidden
+ */
+export const hintClasses = ['k-drag-clue', 'k-reorder-clue'];
+/**
+ * @hidden
+ */
+export const dropIndicatorStyles = {
+    zIndex: '19000',
+    position: 'absolute'
+};
+/**
+ * @hidden
+ */
+export const dropIndicatorClasses = ['k-drop-hint', 'k-drop-hint-h'];
+/**
+ * @hidden
+ */
+export const defaultSelectors = {
+    handle: '.k-table-td.k-drag-cell',
+    dragTarget: '.k-table-row[data-treelist-view-index]',
+    dropTarget: '.k-table-row[data-treelist-view-index]'
+};
+/**
+ * @hidden
+ */
+export const rowIndexAttr = 'data-treelist-view-index';
+/**
+ * @hidden
+ */
+export const findParent = (collection, searchItem, field) => {
+    let parent = null;
+    for (const item of collection) {
+        if (searchItem === item) {
+            return null;
+        }
+        const checked = [];
+        const queue = [];
+        queue.push(item);
+        while (queue.length !== 0) {
+            const current = queue.shift();
+            if (!current) {
+                continue;
+            }
+            checked.push(current);
+            if (current === searchItem) {
+                return item;
+            }
+            if (current.hasOwnProperty(field)) {
+                current[field].forEach(node => {
+                    if (checked.indexOf(node) === -1) {
+                        checked.push(node);
+                        queue.push(node);
+                        if (node === searchItem) {
+                            parent = current;
+                            return;
+                        }
+                    }
+                });
+            }
+            if (parent) {
+                return parent;
+            }
+        }
+    }
+};
+const getDocument = element => element?.ownerDocument.documentElement;
+const getWindow = element => element?.ownerDocument.defaultView;

package/esm2020/shared.module.mjs

@@ -19,6 +19,7 @@ import { FieldAccessorPipe } from "./rendering/common/field-accessor.pipe";
 import { TableDirective } from "./column-resizing/table.directive";
 import { FocusableDirective } from "./navigation/focusable.directive";
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { RowReorderColumnComponent } from './columns/rowreorder-column.component';
 import * as i0 from "@angular/core";
 const exportedModules = [
     ColumnComponent,
@@ -33,7 +34,8 @@ const exportedModules = [
     SpanColumnComponent,
     TableDirective,
     LoadingComponent,
-    CheckboxColumnComponent
+    CheckboxColumnComponent,
+    RowReorderColumnComponent
 ];
 /**
  * @hidden
@@ -44,6 +46,7 @@ export class SharedModule {
             ColumnComponent,
             SpanColumnComponent,
             CheckboxColumnComponent,
+            RowReorderColumnComponent,
             ColumnGroupComponent,
             FocusableDirective
         ];
@@ -62,7 +65,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SpanColumnComponent,
         TableDirective,
         LoadingComponent,
-        CheckboxColumnComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
+        CheckboxColumnComponent,
+        RowReorderColumnComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
         ColumnGroupComponent,
         LogicalCellDirective,
         LogicalRowDirective,
@@ -74,7 +78,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SpanColumnComponent,
         TableDirective,
         LoadingComponent,
-        CheckboxColumnComponent, DraggableModule, IconsModule] });
+        CheckboxColumnComponent,
+        RowReorderColumnComponent, DraggableModule, IconsModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, IconsModule], DraggableModule, IconsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,