@progress/kendo-angular-grid 12.0.0-develop.1 → 12.0.0-develop.10

package/rendering/no-records-template.directive.d.ts

@@ -6,66 +6,19 @@ import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the no-records template of the Grid. Provides an option to customize the
- * appearance of the item that is displayed when no data is present. To define the no-records template,
- * nest an `<ng-template>` tag with the `kendoGridNoRecordsTemplate` directive inside `<kendo-grid>`.
- *
- * > When the locked columns of the Grid are in use, the template is displayed in the non-locked part of the content.
+ * appearance of the item that is displayed when no data is present.
+ * To define the no-records template, nest an `<ng-template>` tag with the `kendoGridNoRecordsTemplate`
+ * directive inside `<kendo-grid>` [see example](slug:norecordtemplate_grid).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *       <kendo-grid [data]="data">
- *         <kendo-grid-column field="ProductID"></kendo-grid-column>
- *         <kendo-grid-column field="ProductName"></kendo-grid-column>
- *         <kendo-grid-column field="UnitPrice"></kendo-grid-column>
- *         <ng-template kendoGridNoRecordsTemplate>
- *            There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
- *         </ng-template>
- *       </kendo-grid>
- *   `
- * })
- *
- * class AppComponent {
- *     public data = [];
- *     public refresh() {
- *       this.data = [{
- *            "ProductID": 1,
- *            "ProductName": "Chai",
- *            "UnitPrice": 18.0000,
- *            "Discontinued": false,
- *            "Category": {
- *                "CategoryID": 1,
- *                "CategoryName": "Beverages",
- *                "Description": "Soft drinks, coffees, teas, beers, and ales"
- *            }
- *          }, {
- *            "ProductID": 2,
- *            "ProductName": "Chang",
- *            "UnitPrice": 19.0000,
- *            "Discontinued": false,
- *            "Category": {
- *                "CategoryID": 1,
- *                "CategoryName": "Beverages",
- *                "Description": "Soft drinks, coffees, teas, beers, and ales"
- *            }
- *          }, {
- *            "ProductID": 3,
- *            "ProductName": "Aniseed Syrup",
- *            "UnitPrice": 10.0000,
- *            "Discontinued": false,
- *            "Category": {
- *                "CategoryID": 2,
- *                "CategoryName": "Condiments",
- *                "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
- *            }
- *        }];
- *
- *     }
- * }
- *
+ * ```html
+ * <kendo-grid [data]="data">
+ *   <ng-template kendoGridNoRecordsTemplate>
+ *     There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
+ *   </ng-template>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *   <kendo-grid-column field="ProductName"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class NoRecordsTemplateDirective {

package/rendering/toolbar/toolbar-template.directive.d.ts

@@ -11,69 +11,23 @@ import * as i0 from "@angular/core";
  * - `position`—The position at which the toolbar template is rendered. The possible values are "top" and "bottom".
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <div class="example-config">
- *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="both">Both</label><br/>
- *       </div>
- *       <kendo-grid [data]="gridData" style="height: 200px">
- *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()">Custom action</button>
- *            </ng-template>
- *            <kendo-grid-column field="ProductName">
- *            </kendo-grid-column>
- *            <kendo-grid-column field="UnitPrice">
- *            </kendo-grid-column>
- *        </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public position: 'top' | 'bottom' | 'both' = 'top';
- *
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ];
- *
- *     public onClick(): void {
- *         console.log("button was clicked");
- *     }
- *
- *     public positionChange({ target }): void {
- *        this.position = target.value;
- *     }
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData" style="height: 200px">
+ *    <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
+ *       <button (click)="onClick()">Custom action</button>
+ *    </ng-template>
+ *    <kendo-grid-column field="ProductName">
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class ToolbarTemplateDirective {
     templateRef: TemplateRef<any>;
     _position: 'top' | 'bottom' | 'both';
     /**
-     * The position of the toolbar ([see example]({% slug toolbartemplate_grid %})).
+     * The position of the toolbar ([see example]({% slug toolbartemplate_grid %}#toc-setting-the-toolbar-position)).
      *
-     * The possible values are:
-     * - `top`&mdash;Positions the toolbar above the group panel or header.
-     * - `bottom`&mdash;Positions the toolbar below the pager.
-     * - `both`&mdash;Displays two toolbar instances. Positions the first one above
-     * the group panel or header and the second one below the pager.
+     * @default 'top'
      */
     set position(position: 'top' | 'bottom' | 'both');
     get position(): 'top' | 'bottom' | 'both';

package/row-reordering/row-reorder.service.d.ts

@@ -0,0 +1,56 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { DragTargetPressEvent, DragTargetDragEvent, DropTargetEvent } from '@progress/kendo-angular-utils';
+import { EventEmitter, Renderer2 } from '@angular/core';
+import { RowReorderEvent } from './types';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ColumnList } from '../columns/column-list';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class RowReorderService {
+    private renderer;
+    hintElement: HTMLElement;
+    defaultSelectors: {
+        handle: string;
+        dragTarget: string;
+        dropTarget: string;
+    };
+    hintText: string;
+    skip: number;
+    private dropIndicator;
+    private lastDropPosition;
+    private dragTarget;
+    private dropTarget;
+    rowReorder: EventEmitter<RowReorderEvent>;
+    constructor(renderer: Renderer2);
+    press(ev: DragTargetPressEvent): void;
+    dragStart(): void;
+    drag(ev: DragTargetDragEvent): void;
+    dragEnter(ev: DropTargetEvent): void;
+    dragLeave(): void;
+    dragEnd(): void;
+    drop(ev: DropTargetEvent): void;
+    reorderRows(ev: RowReorderEvent, collection: Array<any>): void;
+    get hintIcon(): string;
+    get hintSVGIcon(): SVGIcon;
+    getDefaultHintText(columns: ColumnList, data: any[]): string;
+    private rowReorderArgs;
+    private getDragRowPerElement;
+    private createDropIndicator;
+    private destroyDropIndicator;
+    private decorateHint;
+    private positionDropIndicator;
+    private calculateIndexToAdd;
+    private decorateDropIndicator;
+    private getDropPosition;
+    private updateDropIndicatorPosition;
+    private shouldHideDropIndicator;
+    private hide;
+    private show;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RowReorderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RowReorderService>;
+}

package/row-reordering/types.d.ts

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The returned type of the `rowReorder` event
+ * ([see example](ToDo).
+ */
+export interface RowReorderEvent {
+    /**
+     * The rows that are currently dragged and the data associated with them.
+     */
+    draggedRows: DragRow[];
+    /**
+     * The row over which the dragged rows are dropped.
+     */
+    dropTargetRow?: DragRow;
+    /**
+     * The drop position of the dragged row.
+     */
+    dropPosition: DropPosition;
+}
+/**
+ * Represents a reorderable data row with an associated data item.
+ */
+export interface DragRow {
+    /**
+     * The row data item.
+     */
+    dataItem: any;
+    /**
+     * The data row index.
+     */
+    rowIndex: number;
+    /**
+     * The row HTML element.
+     */
+    element: HTMLElement;
+}
+export declare type DropPosition = 'before' | 'after' | 'forbidden';

package/row-reordering/utils.d.ts

@@ -0,0 +1,78 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare const isNextSibling: (dropTarget: HTMLElement, dragTarget: HTMLElement) => boolean;
+/**
+ * @hidden
+ */
+export declare const isPreviousSibling: (dropTarget: HTMLElement, dragTarget: HTMLElement) => boolean;
+/**
+ * @hidden
+ */
+export declare const isDifferentParent: (dropTarget: HTMLElement, dragTarget: HTMLElement) => boolean;
+/**
+ * @hidden
+ */
+export declare function getOffset(element: any): {
+    top: number;
+    left: number;
+};
+/**
+ * @hidden
+ */
+export declare const hintIcons: {
+    forbidden: string;
+    before: string;
+    after: string;
+};
+/**
+ * @hidden
+ */
+export declare const hintSVGIcons: {
+    forbidden: import("@progress/kendo-svg-icons").SVGIcon;
+    before: import("@progress/kendo-svg-icons").SVGIcon;
+    after: import("@progress/kendo-svg-icons").SVGIcon;
+};
+/**
+ * @hidden
+ */
+export declare const dropPosition: {
+    forbidden: string;
+    before: string;
+    after: string;
+};
+/**
+ * @hidden
+ */
+export declare const hintStyles: {
+    zIndex: string;
+    display: string;
+    position: string;
+};
+/**
+ * @hidden
+ */
+export declare const hintClasses: string[];
+/**
+ * @hidden
+ */
+export declare const dropIndicatorStyles: {
+    zIndex: string;
+    position: string;
+};
+/**
+ * @hidden
+ */
+export declare const dropIndicatorClasses: string[];
+/**
+ * @hidden
+ */
+export declare const defaultSelectors: {
+    handle: string;
+    dragTarget: string;
+    dropTarget: string;
+};

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'GridModule', package: 'grid', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '12.0.0-develop.1',
+            '@progress/kendo-angular-treeview': '12.0.0-develop.10',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '12.0.0-develop.1',
+            '@progress/kendo-angular-dialog': '12.0.0-develop.10',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^1.0.0'
         } });

package/selection/selectall-checkbox.directive.d.ts

@@ -7,7 +7,18 @@ import { SelectionService } from './selection.service';
 import { SelectAllCheckboxState } from './types';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class SelectAllCheckboxDirective implements AfterContentChecked, OnDestroy, OnChanges {
     private selectionService;

package/selection/selection-checkbox.directive.d.ts

@@ -7,53 +7,20 @@ import { SelectionService } from './selection.service';
 import * as i0 from "@angular/core";
 /**
  * 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 declare class SelectionCheckboxDirective implements AfterContentChecked, OnDestroy {

package/selection/selection-default.d.ts

@@ -18,6 +18,7 @@ export declare class Selection {
     protected cd: ChangeDetectorRef;
     /**
      * Defines the collection that will store the selected item keys.
+     * @default []
      */
     selectedKeys: any[];
     /**

package/selection/selection.directive.d.ts

@@ -8,7 +8,7 @@ import { Selection } from "./selection-default";
 import * as i0 from "@angular/core";
 /**
  * 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 declare class SelectionDirective extends Selection implements OnInit, OnDestroy {
     protected ctx: ContextService;