@progress/kendo-angular-grid 12.0.0-develop.8 → 12.0.0-develop.9

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

@@ -0,0 +1,232 @@
+/**-----------------------------------------------------------------------------------------
+* 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, isDifferentParent, defaultSelectors } from './utils';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class RowReorderService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.hintElement = null;
+        this.defaultSelectors = defaultSelectors;
+        this.hintText = '';
+        this.lastDropPosition = dropPosition.forbidden;
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.rowReorder = new EventEmitter();
+    }
+    press(ev) {
+        this.dragTarget = ev.dragTarget;
+    }
+    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
+        };
+        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;
+    }
+    dragLeave() {
+        this.dropTarget = null;
+        this.hide();
+    }
+    dragEnd() {
+        this.destroyDropIndicator();
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.hintElement = null;
+    }
+    drop(ev) {
+        this.destroyDropIndicator();
+        const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, ev.dragData);
+        this.rowReorder.emit(rowReorderArgs);
+    }
+    reorderRows(ev, collection) {
+        if (this.lastDropPosition === dropPosition.forbidden) {
+            return;
+        }
+        ;
+        const { draggedRows, dropTargetRow } = ev;
+        const draggedDataItem = draggedRows[0].dataItem;
+        const dropTargetDataItem = dropTargetRow.dataItem;
+        const draggedItemIndex = collection.indexOf(draggedDataItem);
+        const dropTargetIndex = collection.indexOf(dropTargetDataItem);
+        const idxToAdd = this.calculateIndexToAdd(draggedItemIndex, dropTargetIndex);
+        collection.splice(draggedItemIndex, 1);
+        collection.splice(idxToAdd, 0, draggedDataItem);
+    }
+    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
+        };
+    }
+    getDragRowPerElement(row, data) {
+        let rowIndex = row?.getAttribute('data-kendo-grid-item-index');
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const skip = this.skip || 0;
+        const dataItem = rowIndex === -1 ? null : data[rowIndex - skip];
+        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();
+    }
+    calculateIndexToAdd(dragIndex, dropIndex) {
+        if (dragIndex > dropIndex && this.lastDropPosition === dropPosition.after) {
+            return dropIndex + 1;
+        }
+        else if (dragIndex > dropIndex && this.lastDropPosition === dropPosition.before) {
+            return dropIndex;
+        }
+        else if (dragIndex < dropIndex && this.lastDropPosition === dropPosition.after) {
+            return dropIndex;
+        }
+        else if (dragIndex < dropIndex && this.lastDropPosition === dropPosition.before) {
+            return dropIndex - 1;
+        }
+    }
+    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;
+        }
+        ;
+        if (isDifferentParent(this.dropTarget, this.dragTarget)) {
+            return dropPosition.forbidden;
+        }
+        ;
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 2;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        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;
+        }
+        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;
+        }
+        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;
+    }
+    hide() {
+        if (isPresent(this.dropIndicator)) {
+            this.dropIndicator.style.display = 'none';
+        }
+    }
+    show() {
+        if (isPresent(this.dropIndicator)) {
+            this.dropIndicator.style.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,87 @@
+/**-----------------------------------------------------------------------------------------
+* 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 } 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 const isDifferentParent = (dropTarget, dragTarget) => dropTarget?.parentElement !== dragTarget?.parentElement;
+/**
+ * @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'
+};
+/**
+ * @hidden
+ */
+export const hintSVGIcons = {
+    forbidden: cancelIcon,
+    before: insertMiddleIcon,
+    after: insertMiddleIcon
+};
+/**
+ * @hidden
+ */
+export const dropPosition = {
+    forbidden: 'forbidden',
+    before: 'before',
+    after: 'after'
+};
+/**
+ * @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-master-row',
+    dropTarget: '.k-master-row'
+};
+const getDocument = element => element?.ownerDocument.documentElement;
+const getWindow = element => element?.ownerDocument.defaultView;

package/esm2020/selection/selectall-checkbox.directive.mjs

@@ -10,7 +10,18 @@ import { hasObservers } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 /**
- * Represents the select-all checkbox feature of the Grid ([see example]({% slug selection_grid %}#toc-select-all-feature)).
+ * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
+ *
+ * @example
+ * ```html
+ * <input
+ *   type="checkbox"
+ *   kendoCheckBox
+ *   kendoGridSelectAllCheckbox
+ *   [state]="selectAllState"
+ *   (selectAllChange)="onSelectAllChange($event)"
+ * />
+ * ```
  */
 export class SelectAllCheckboxDirective {
     constructor(selectionService, el, renderer, ngZone) {

package/esm2020/selection/selection-checkbox.directive.mjs

@@ -9,53 +9,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 /**
  * Represents the row-selection checkbox of the Grid. The directive expects the
- * index of the current row as an input parameter. Inside the
- * [CheckboxColumnComponent]({% slug api_grid_checkboxcolumncomponent %}), apply the
- * directive to an `input` element. When the user clicks the checkbox that is associated
- * with the directive, a [selectionChange]({% slug api_grid_gridcomponent %}#toc-selectionChange)
+ * index of the current row as an input parameter. Inside the [`CellTemplateDirective`](slug:api_grid_celltemplatedirective), apply the
+ * `kendoGridSelectionCheckbox` to an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
+ * with the directive, a [selectionChange](slug:api_grid_gridcomponent#toc-selectionChange)
  * event is triggered.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
- *          <kendo-grid-checkbox-column title="Custom checkbox">
- *            <ng-template kendoGridCellTemplate let-idx="rowIndex">
- *              Select row <input [kendoGridSelectionCheckbox]="idx" />
- *            </ng-template>
- *          </kendo-grid-checkbox-column>
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name">
- *          </kendo-grid-column>
- *        </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *    public gridData: any[];
- *
- *    constructor() {
- *        this.gridData = products;
- *    }
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
- *
+ * ```html
+ * <kendo-grid ... >
+ *   <kendo-grid-column>
+ *     <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
+ *       <input ... [kendoGridSelectionCheckbox]="rowIndex"/>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export class SelectionCheckboxDirective {

package/esm2020/selection/selection-default.mjs

@@ -17,6 +17,7 @@ export class Selection {
         this.cd = cd;
         /**
          * Defines the collection that will store the selected item keys.
+         * @default []
          */
         this.selectedKeys = [];
         /**

package/esm2020/selection/selection.directive.mjs

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 /**
  * A directive which stores the row selection state of the Grid in memory
- * ([see example]({% slug selection_grid %}#toc-during-data-operations)).
+ * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
  */
 export class SelectionDirective extends Selection {
     constructor(ctx, cd) {

package/excel/excel-command.directive.d.ts

@@ -10,13 +10,13 @@ import * as i0 from "@angular/core";
 /**
  * Represents the `export-to-Excel` command of the Grid. You can apply this
  * directive to any `button` element inside a
- * [ToolbarTemplate]({% slug api_grid_commandcolumncomponent %}).
+ * [ToolbarTemplate]({% slug api_grid_toolbartemplatedirective %}).
  * When the user clicks a button associated with the directive, the
  * [excelExport]({% slug api_grid_gridcomponent %}#toc-excelexport) event
  * fires ([see example]({% slug excelexport_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *      <ng-template kendoGridToolbarTemplate>
  *          <button kendoGridExcelCommand>Export to PDF</button>