@progress/kendo-angular-grid 7.2.0-dev.202206151246 → 7.2.1

package/fesm2015/kendo-angular-grid.js

@@ -2835,7 +2835,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1655297119,
+    publishDate: 1657005613,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -3009,7 +3009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }]; } });
 
 /**
- * Represents the column edit-cell template of the Grid ([see example]({% slug editing_template_forms_grid %})).
+ * Represents the column edit-cell template of the Grid ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms)).
  * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
  * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
  *
@@ -3713,7 +3713,7 @@ class ColumnComponent extends ColumnBase {
          */
         this.groupable = true;
         /**
-         * Defines the editor type ([see example]({% slug editing_reactive_forms_grid %}#toc-setup)).
+         * Defines the editor type ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms)).
          * Used when the column enters the edit mode. The default value is `text`.
          *
          * @example
@@ -3864,7 +3864,7 @@ function isSpanColumnComponent(column) {
  * header and footer cells are retained ([see example]({% slug spanned_columns_grid %})).
  * Enables you to achieve more flexible layout while keeping the built-in UI element for
  * [sorting]({% slug sorting_grid %}), [filtering]({% slug filtering_grid %}), and
- * [grouping]({% slug groupingbasics_grid %}). Wrap the columns that will be
+ * [grouping]({% slug grouping_grid %}). Wrap the columns that will be
  * merged inside the `<kendo-grid-span-column>` tag.
  *
  * @example
@@ -5408,7 +5408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 /**
  * Represents a service to set the filter descriptor
- * ([see example]({% slug reusablecustomfilters_grid %})).
+ * ([see example]({% slug filter_row %}#toc-custom-filter-row-components)).
  */
 class FilterService {
     /**
@@ -5986,7 +5986,7 @@ class PopupCloseEvent extends PreventableEvent {
 const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
 /**
  * The service that is used for the popups of the filter and column menus
- * ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-menu-with-popup)).
+ * ([see example]({% slug filter_menu %}#toc-custom-filter-row-components)#toc-filter-menu-with-popup).
  */
 class SinglePopupService {
     constructor(popupService, renderer, ngZone, scrollSyncService, localization) {
@@ -5999,12 +5999,14 @@ class SinglePopupService {
          * Used to prevent the popup from closing.
          */
         this.onClose = new Subject();
+        this.pointerEventsSub = new Subscription();
         this.scrollSubscription = scrollSyncService.changes.subscribe(() => this.destroy());
     }
     /**
      * @hidden
      */
     open(anchor, template, popupRef, popupClass = DEFAULT_POPUP_CLASS) {
+        var _a;
         const toggle = isPresent(popupRef) && this.popupRef === popupRef;
         this.destroy();
         if (!toggle) {
@@ -6020,6 +6022,10 @@ class SinglePopupService {
             this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
             this.attachClose(anchor);
         }
+        const popupEl = (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popupElement;
+        if (popupEl) {
+            this.attachMouseListeners(popupEl);
+        }
         return this.popupRef;
     }
     /**
@@ -6028,6 +6034,8 @@ class SinglePopupService {
     destroy() {
         if (this.popupRef) {
             this.detachClose();
+            this.pointerEventsSub.unsubscribe();
+            this.pointerEventsSub = null;
             this.popupRef.close();
             this.popupRef = null;
         }
@@ -6043,16 +6051,29 @@ class SinglePopupService {
     }
     attachClose(skipElement) {
         this.detachClose();
-        this.ngZone.runOutsideAngular(() => this.removeClick = this.renderer.listen("document", "click", (e) => {
+        this.ngZone.runOutsideAngular(() => this.removeClick = this.renderer.listen('document', 'click', (e) => {
             if (!contains$1(e.target, x => this.popupRef.popupElement === x || x === skipElement)) {
                 const args = new PopupCloseEvent(e);
                 this.onClose.next(args);
-                if (!args.isDefaultPrevented()) {
+                if (!args.isDefaultPrevented() && this.canClosePopup) {
                     this.destroy();
                 }
+                this.canClosePopup = true;
             }
         }));
     }
+    attachMouseListeners(el) {
+        this.pointerEventsSub = new Subscription();
+        this.ngZone.runOutsideAngular(() => {
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerdown', (e) => {
+                e.stopImmediatePropagation();
+                this.canClosePopup = false;
+            }));
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerup', () => {
+                this.canClosePopup = true;
+            }));
+        });
+    }
 }
 SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$2.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
 SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService });
@@ -6528,7 +6549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * Creates a loading template that overrides the default loading indicator of the Grid Component.
  * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
- * [see example]({% slug databinding_grid %}#toc-loading-template).
+ * [see example]({% slug binding_grid %}#toc-loading-template).
  */
 class LoadingTemplateDirective {
     constructor(templateRef) {
@@ -8757,7 +8778,7 @@ const localizeOperators = operators => localization => Object.keys(operators).ma
     value: operators[key]
 }));
 /**
- * An abstract base class for the filter-cell component ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-row)).
+ * An abstract base class for the filter-cell component ([see example]({% slug filter_row %}#toc-custom-filter-row-components)).
  */
 class BaseFilterCellComponent {
     constructor(filterService) {
@@ -15173,7 +15194,7 @@ const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';
  * column inside an `<ng-template>` tag. The template context is set to the current
  * data item. For more information and examples on using the passed fields
  * and the command directives, refer to the article on
- * [editing the Grid in Angular Reactive Forms]({% slug editing_reactive_forms_grid %}).
+ * [editing the Grid in Angular Reactive Forms]({% slug inline_editing_grid %}#toc-using-reactive-forms).
  *
  * The following additional fields are passed:
  * - `columnIndex`&mdash;The current column index.
@@ -18177,7 +18198,7 @@ class GridComponent {
         this.ctx = ctx;
         /**
          * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
-         * ([more information and example]({% slug databinding_grid %})).
+         * ([more information and example]({% slug binding_grid %})).
          */
         this.data = [];
         /**
@@ -18265,7 +18286,7 @@ class GridComponent {
         this.pageable = false;
         /**
          * If set to `true`, the user can group the Grid by dragging the column header cells.
-         * By default, grouping is disabled ([see example]({% slug groupingbasics_grid %})).
+         * By default, grouping is disabled ([see example]({% slug grouping_grid %})).
          */
         this.groupable = false;
         /**
@@ -18291,7 +18312,7 @@ class GridComponent {
          */
         this.reorderable = false;
         /**
-         * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug databinding_grid %})).
+         * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug binding_grid %})).
          *
          * @default false
          */
@@ -18320,7 +18341,7 @@ class GridComponent {
         this.pageChange = new EventEmitter();
         /**
          * Fires when the grouping of the Grid is changed.
-         * You have to handle the event yourself and group the data ([see example]({% slug groupingbasics_grid %})).
+         * You have to handle the event yourself and group the data ([see example]({% slug grouping_grid %})).
          */
         this.groupChange = new ZoneAwareEventEmitter(this.ngZone);
         /**
@@ -18355,27 +18376,27 @@ class GridComponent {
         this.detailCollapse = new EventEmitter();
         /**
          * Fires when the user clicks the **Edit** command button to edit a row
-         * ([see example]({% slug editing_template_forms_grid %}#toc-editing-records)).
+         * ([see example]({% slug inline_editing_grid %}#toc-editing-records-1).
          */
         this.edit = new EventEmitter();
         /**
          * Fires when the user clicks the **Cancel** command button to close a row
-         * ([see example]({% slug editing_template_forms_grid %}#toc-cancelling-editing)).
+         * ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
          */
         this.cancel = new EventEmitter();
         /**
          * Fires when the user clicks the **Save** command button to save changes in a row
-         * ([see example]({% slug editing_template_forms_grid %}#toc-saving-records)).
+         * ([see example]({% slug inline_editing_grid %}#toc-saving-records-1)).
          */
         this.save = new EventEmitter();
         /**
          * Fires when the user clicks the **Remove** command button to remove a row
-         * ([see example]({% slug editing_template_forms_grid %}#toc-removing-records)).
+         * ([see example]({% slug inline_editing_grid %}#toc-removing-records-1)).
          */
         this.remove = new EventEmitter();
         /**
          * Fires when the user clicks the **Add** command button to add a new row
-         * ([see example]({% slug editing_template_forms_grid %}#toc-adding-records)).
+         * ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
          */
         this.add = new EventEmitter();
         /**
@@ -18507,7 +18528,7 @@ class GridComponent {
         return this._sort;
     }
     /**
-     * The descriptors by which the data will be grouped ([see example]({% slug groupingbasics_grid %})).
+     * The descriptors by which the data will be grouped ([see example]({% slug grouping_grid %})).
      */
     set group(value) {
         if (isArray(value)) {
@@ -19142,7 +19163,7 @@ class GridComponent {
         return this.localization.get('gridLabel');
     }
     /**
-     * Switches the specified table row in the edit mode ([see example]({% slug editing_template_forms_grid %}#toc-editing-records)).
+     * Switches the specified table row in the edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
      *
      * @param rowIndex - The data row index that will be switched in the edit mode.
      * @param group - The [FormGroup]({{ site.data.urls.angular['formgroupapi'] }})
@@ -19160,7 +19181,7 @@ class GridComponent {
         this.focusEditElement(target);
     }
     /**
-     * Closes the editor for a given row ([see example]({% slug editing_template_forms_grid %}#toc-cancelling-editing)).
+     * Closes the editor for a given row ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      *
      * @param {number} index - The row index that will be switched out of the edit mode. If no index is provided, it is assumed
      * that the new item editor will be closed.
@@ -19169,7 +19190,7 @@ class GridComponent {
         this.editService.close(index);
     }
     /**
-     * Creates a new row editor ([see example]({% slug editing_template_forms_grid %}#toc-adding-records)).
+     * Creates a new row editor ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
      *
      * @param {FormGroup} group - The [FormGroup]({{ site.data.urls.angular['formgroupapi'] }}) that describes
      * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.
@@ -21272,8 +21293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 /**
  * A directive which encapsulates the in-memory handling of data operations such as [paging]({% slug paging_grid %}),
- * [sorting]({% slug sorting_grid %}), and [grouping]({% slug groupingbasics_grid %})
- * ([more information and examples]({% slug automaticoperations_grid %})).
+ * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %})
+ * ([more information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
  */
 class DataBindingDirective {
     constructor(grid, changeDetector, localDataChangesService) {
@@ -23261,7 +23282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [edit]({% slug api_grid_gridcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_grid %})).
+ * is triggered ([see example]({% slug basics_editing_grid %})).
  *
  * > When the row is in the edit mode, the button with `kendoGridEditCommand` is automatically hidden.
  *
@@ -23333,7 +23354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [cancel]({% slug api_grid_gridcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_grid %})).
+ * is triggered ([see example]({% slug basics_editing_grid %})).
  *
  * > When the row is not in the edit mode, the button with the `kendoGridCancelCommand` is automatically hidden.
  *
@@ -23419,7 +23440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [save]({% slug api_grid_gridcomponent %}#toc-save) event
- * is triggered ([see example]({% slug editing_grid %})).
+ * is triggered ([see example]({% slug basics_editing_grid %})).
  *
  * > When the row is not in the edit mode, the button with `kendoGridSaveCommand` is automatically hidden.
  *
@@ -23505,7 +23526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [remove event]({% slug api_grid_gridcomponent %}#toc-remove)
- * is triggered ([see example]({% slug editing_reactive_forms_grid %})).
+ * is triggered ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms))).
  *
  * > When the row is in the edit mode, the button with the `kendoGridRemoveCommand` is automatically hidden.
  *
@@ -23576,7 +23597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * `button` element inside a [ToolbarTemplate]({% slug api_grid_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [add]({% slug api_grid_gridcomponent %}#toc-add) event is triggered
- * ([see example]({% slug editing_grid %})).
+ * ([see example]({% slug basics_editing_grid %})).
  *
  * @example
  * ```html-no-run

package/filtering/base-filter-cell.component.d.ts

@@ -44,7 +44,7 @@ export declare const localizeOperators: (operators: any) => (localization: any)
     value: any;
 }[];
 /**
- * An abstract base class for the filter-cell component ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-row)).
+ * An abstract base class for the filter-cell component ([see example]({% slug filter_row %}#toc-custom-filter-row-components)).
  */
 export declare abstract class BaseFilterCellComponent implements AfterContentInit, OnDestroy {
     protected filterService: FilterService;

package/filtering/filter.service.d.ts

@@ -8,7 +8,7 @@ import { MenuTabbingService } from './menu/menu-tabbing.service';
 import * as i0 from "@angular/core";
 /**
  * Represents a service to set the filter descriptor
- * ([see example]({% slug reusablecustomfilters_grid %})).
+ * ([see example]({% slug filter_row %}#toc-custom-filter-row-components)).
  */
 export declare class FilterService {
     /**

package/grid.component.d.ts

@@ -134,7 +134,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     private ctx;
     /**
      * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
-     * ([more information and example]({% slug databinding_grid %})).
+     * ([more information and example]({% slug binding_grid %})).
      */
     data: Array<any> | GridDataResult | null;
     /**
@@ -233,7 +233,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      */
     filter: CompositeFilterDescriptor | null | undefined;
     /**
-     * The descriptors by which the data will be grouped ([see example]({% slug groupingbasics_grid %})).
+     * The descriptors by which the data will be grouped ([see example]({% slug grouping_grid %})).
      */
     set group(value: Array<GroupDescriptor> | null | undefined);
     /**
@@ -301,7 +301,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     pageable: PagerSettings | boolean;
     /**
      * If set to `true`, the user can group the Grid by dragging the column header cells.
-     * By default, grouping is disabled ([see example]({% slug groupingbasics_grid %})).
+     * By default, grouping is disabled ([see example]({% slug grouping_grid %})).
      */
     groupable: GroupableSettings | boolean;
     /**
@@ -423,7 +423,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      */
     reorderable: boolean;
     /**
-     * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug databinding_grid %})).
+     * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug binding_grid %})).
      *
      * @default false
      */
@@ -452,7 +452,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     pageChange: EventEmitter<PageChangeEvent>;
     /**
      * Fires when the grouping of the Grid is changed.
-     * You have to handle the event yourself and group the data ([see example]({% slug groupingbasics_grid %})).
+     * You have to handle the event yourself and group the data ([see example]({% slug grouping_grid %})).
      */
     groupChange: EventEmitter<Array<GroupDescriptor>>;
     /**
@@ -487,27 +487,27 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     detailCollapse: EventEmitter<DetailCollapseEvent>;
     /**
      * Fires when the user clicks the **Edit** command button to edit a row
-     * ([see example]({% slug editing_template_forms_grid %}#toc-editing-records)).
+     * ([see example]({% slug inline_editing_grid %}#toc-editing-records-1).
      */
     edit: EventEmitter<EditEvent>;
     /**
      * Fires when the user clicks the **Cancel** command button to close a row
-     * ([see example]({% slug editing_template_forms_grid %}#toc-cancelling-editing)).
+     * ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      */
     cancel: EventEmitter<CancelEvent>;
     /**
      * Fires when the user clicks the **Save** command button to save changes in a row
-     * ([see example]({% slug editing_template_forms_grid %}#toc-saving-records)).
+     * ([see example]({% slug inline_editing_grid %}#toc-saving-records-1)).
      */
     save: EventEmitter<SaveEvent>;
     /**
      * Fires when the user clicks the **Remove** command button to remove a row
-     * ([see example]({% slug editing_template_forms_grid %}#toc-removing-records)).
+     * ([see example]({% slug inline_editing_grid %}#toc-removing-records-1)).
      */
     remove: EventEmitter<RemoveEvent>;
     /**
      * Fires when the user clicks the **Add** command button to add a new row
-     * ([see example]({% slug editing_template_forms_grid %}#toc-adding-records)).
+     * ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
      */
     add: EventEmitter<AddEvent>;
     /**
@@ -745,7 +745,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      */
     get ariaLabel(): string;
     /**
-     * Switches the specified table row in the edit mode ([see example]({% slug editing_template_forms_grid %}#toc-editing-records)).
+     * Switches the specified table row in the edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
      *
      * @param rowIndex - The data row index that will be switched in the edit mode.
      * @param group - The [FormGroup]({{ site.data.urls.angular['formgroupapi'] }})
@@ -754,14 +754,14 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      */
     editRow(rowIndex: number, group?: FormGroup, options?: EditRowOptions): void;
     /**
-     * Closes the editor for a given row ([see example]({% slug editing_template_forms_grid %}#toc-cancelling-editing)).
+     * Closes the editor for a given row ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      *
      * @param {number} index - The row index that will be switched out of the edit mode. If no index is provided, it is assumed
      * that the new item editor will be closed.
      */
     closeRow(index?: number): void;
     /**
-     * Creates a new row editor ([see example]({% slug editing_template_forms_grid %}#toc-adding-records)).
+     * Creates a new row editor ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
      *
      * @param {FormGroup} group - The [FormGroup]({{ site.data.urls.angular['formgroupapi'] }}) that describes
      * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "7.2.0-dev.202206151246",
+  "version": "7.2.1",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

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

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 /**
  * Creates a loading template that overrides the default loading indicator of the Grid Component.
  * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
- * [see example]({% slug databinding_grid %}#toc-loading-template).
+ * [see example]({% slug binding_grid %}#toc-loading-template).
  */
 export declare class LoadingTemplateDirective {
     templateRef: TemplateRef<any>;