@progress/kendo-angular-grid 17.0.0-develop.4 → 17.0.0-develop.41

package/{esm2020 → esm2022}/rendering/toolbar/toolbar.component.mjs

@@ -12,14 +12,11 @@ import * as i1 from "./../../common/provider.service";
  * @hidden
  */
 export class ToolbarComponent {
-    constructor(ctx, wrapper) {
-        this.ctx = ctx;
-        this.wrapper = wrapper;
-        this.context = {};
-        this.role = 'toolbar';
-        this._size = 'medium';
-        this.navigationService = this.ctx[`${this.wrapper.nativeElement.getAttribute('position')}ToolbarNavigation`];
-    }
+    ctx;
+    wrapper;
+    context = {};
+    role = 'toolbar';
+    hostClasses = true;
     get sizeSmallClass() {
         return this.size === 'small';
     }
@@ -83,18 +80,26 @@ export class ToolbarComponent {
             this.navigationService.updateFocus();
         }
     }
+    navigable;
     get toolbarTemplateRef() {
         return this.ctx.grid.toolbarTemplate ? this.ctx.grid.toolbarTemplate.templateRef : undefined;
     }
-}
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarComponent, isStandalone: true, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
+    _size = 'medium';
+    navigationService;
+    constructor(ctx, wrapper) {
+        this.ctx = ctx;
+        this.wrapper = wrapper;
+        this.navigationService = this.ctx[`${this.wrapper.nativeElement.getAttribute('position')}ToolbarNavigation`];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarComponent, isStandalone: true, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar": "this.hostClasses", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
             [ngTemplateOutletContext]="context"></ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-toolbar',
@@ -110,6 +115,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ElementRef }]; }, propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-grid-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-solid']
             }], sizeSmallClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar-sm']

package/{esm2020 → esm2022}/row-reordering/row-reorder.service.mjs

@@ -10,15 +10,19 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class RowReorderService {
+    renderer;
+    hintElement = null;
+    defaultSelectors = defaultSelectors;
+    hintText = '';
+    skip;
+    dropIndicator;
+    lastDropPosition = dropPosition.forbidden;
+    dragTarget = null;
+    dropTarget = null;
+    offsetY;
+    rowReorder = new EventEmitter();
     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;
@@ -218,10 +222,10 @@ export class RowReorderService {
             this.dropIndicator.style.display = '';
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService });
 }
-RowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-RowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowReorderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowReorderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
                 type: Output

package/{esm2020 → esm2022}/scrolling/row-height.service.mjs

@@ -13,12 +13,15 @@ const update = (arr, idx, value) => ([
  * @hidden
  */
 export class RowHeightService {
+    total;
+    rowHeight;
+    detailRowHeight;
+    offsets = [];
+    heights = [];
     constructor(total = 0, rowHeight, detailRowHeight) {
         this.total = total;
         this.rowHeight = rowHeight;
         this.detailRowHeight = detailRowHeight;
-        this.offsets = [];
-        this.heights = [];
         let agg = 0;
         for (let idx = 0; idx < total; idx++) {
             this.offsets.push(agg);

package/{esm2020 → esm2022}/scrolling/scroll-request.service.mjs

@@ -9,18 +9,16 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ScrollRequestService {
-    constructor() {
-        this.requests = new Subject();
-    }
+    requests = new Subject();
     scrollTo(request, adjustIndex = true) {
         this.requests.next({ request, adjustIndex });
     }
     scrollToItem(request) {
         this.requests.next({ request });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollRequestService });
 }
-ScrollRequestService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollRequestService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollRequestService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollRequestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollRequestService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/scrolling/scroll-sync.service.mjs

@@ -10,13 +10,15 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ScrollSyncService {
+    ngZone;
+    changes = new Subject();
+    elements = [];
+    source;
+    subscriptions = new Subscription();
+    headerSubscription = new Subscription();
+    bodySubscription = new Subscription();
     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) {
@@ -70,9 +72,9 @@ export class ScrollSyncService {
             this.elements.splice(index, 1);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollSyncService });
 }
-ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollSyncService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/scrolling/scroller.service.mjs

@@ -8,6 +8,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
  * @hidden
  */
 export class ScrollAction {
+    offset;
     constructor(offset) {
         this.offset = offset;
     }
@@ -16,6 +17,8 @@ export class ScrollAction {
  * @hidden
  */
 export class PageAction {
+    skip;
+    take;
     constructor(skip, take) {
         this.skip = skip;
         this.take = take;
@@ -31,9 +34,17 @@ const SCROLL_BOTTOM_THRESHOLD = 2;
  * @hidden
  */
 export class ScrollerService {
+    scrollObservable;
+    firstLoaded = 0;
+    lastLoaded;
+    lastScrollTop;
+    take;
+    total;
+    rowHeightService;
+    scrollSubscription;
+    subscription;
     constructor(scrollObservable) {
         this.scrollObservable = scrollObservable;
-        this.firstLoaded = 0;
     }
     create(rowHeightService, skip, take, total) {
         this.rowHeightService = rowHeightService;

package/{esm2020 → esm2022}/scrolling/suspend.service.mjs

@@ -8,12 +8,10 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class SuspendService {
-    constructor() {
-        this.scroll = false;
-    }
+    scroll = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuspendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuspendService });
 }
-SuspendService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuspendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SuspendService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuspendService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuspendService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuspendService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/selection/cell-selection.service.mjs

@@ -18,23 +18,17 @@ import * as i4 from "../navigation/navigation.service";
  * @hidden
  */
 export class CellSelectionService {
-    constructor(domEvents, aggregateService, localDataChangesService, navigationService) {
-        this.domEvents = domEvents;
-        this.aggregateService = aggregateService;
-        this.localDataChangesService = localDataChangesService;
-        this.navigationService = navigationService;
-        this.changes = new EventEmitter();
-        this.mouseUpEvent = new EventEmitter();
-        this.currentSelection = [];
-        this.active = false;
-        this.nonSelectableRows = new Map();
-        this.dragging = false;
-        this.dragSelectDeselect = false;
-        this.lastSelectionItem = { itemKey: 0, columnKey: 0 };
-        this.lastSelectionItemRowIndex = 0;
-        this.lastSelectionItemColIndex = 0;
-        this.addSubscriptions();
-    }
+    domEvents;
+    aggregateService;
+    localDataChangesService;
+    navigationService;
+    changes = new EventEmitter();
+    mouseUpEvent = new EventEmitter();
+    currentSelection = [];
+    settings;
+    active = false;
+    aggregates;
+    nonSelectableRows = new Map();
     get enableMarquee() {
         const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
         if (!this.settings || checkboxOnly) {
@@ -52,6 +46,23 @@ export class CellSelectionService {
     get hasNonSelectable() {
         return this.nonSelectableRows.size > 0;
     }
+    mouseDownEventArgs;
+    mouseUpEventArgs;
+    dragging = false;
+    dragSelectDeselect = false;
+    lastSelectionItem = { itemKey: 0, columnKey: 0 };
+    lastSelectionItemRowIndex = 0;
+    lastSelectionItemColIndex = 0;
+    cellClickSubscription;
+    dataChangedSubscription;
+    mousedownSubscription;
+    constructor(domEvents, aggregateService, localDataChangesService, navigationService) {
+        this.domEvents = domEvents;
+        this.aggregateService = aggregateService;
+        this.localDataChangesService = localDataChangesService;
+        this.navigationService = navigationService;
+        this.addSubscriptions();
+    }
     init(settings) {
         this.settings = settings;
         this.currentSelection = [];
@@ -319,9 +330,9 @@ export class CellSelectionService {
             this.dataChangedSubscription = null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionService, deps: [{ token: i1.DomEventsService }, { token: i2.CellSelectionAggregateService }, { token: i3.LocalDataChangesService }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionService });
 }
-CellSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService, deps: [{ token: i1.DomEventsService }, { token: i2.CellSelectionAggregateService }, { token: i3.LocalDataChangesService }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
-CellSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.DomEventsService }, { type: i2.CellSelectionAggregateService }, { type: i3.LocalDataChangesService }, { type: i4.NavigationService }]; } });

package/{esm2020 → esm2022}/selection/marquee.directive.mjs

@@ -37,6 +37,19 @@ const offsets = {
  * @hidden
  */
 export class GridMarqueeDirective {
+    draggable;
+    selection;
+    cellSelection;
+    domEvents;
+    host;
+    renderer;
+    // possibly add snap
+    pressArgs;
+    marqueeElement;
+    pressTarget;
+    subscriptions;
+    selectionStarted = false;
+    dragEndSubscription;
     constructor(draggable, selection, cellSelection, domEvents, host, renderer) {
         this.draggable = draggable;
         this.selection = selection;
@@ -44,7 +57,6 @@ export class GridMarqueeDirective {
         this.domEvents = domEvents;
         this.host = host;
         this.renderer = renderer;
-        this.selectionStarted = false;
     }
     ngOnInit() {
         this.subscriptions = (this.draggable.kendoPress.subscribe(this.start.bind(this)));
@@ -159,10 +171,10 @@ export class GridMarqueeDirective {
         }
         return null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1.DraggableDirective }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i4.DomEventsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMarqueeDirective, isStandalone: true, selector: "[kendoGridSelectionMarquee]", ngImport: i0 });
 }
-GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1.DraggableDirective }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i4.DomEventsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-GridMarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GridMarqueeDirective, isStandalone: true, selector: "[kendoGridSelectionMarquee]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridMarqueeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMarqueeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridSelectionMarquee]',

package/{esm2020 → esm2022}/selection/pair-set.mjs

@@ -10,28 +10,28 @@
  * Supports both primitive keys and object keys (compared by reference).
  */
 export class PairSet {
-    constructor(items, keyXField, keyYField) {
-        /**
-         * Holds a set of Y keys for each defined X key.
-         * Each X key creates a map which holds a set of Y keys.
-         *
-         * Map { 1 => Set { 1, 2, 3 } } // pairs: [1, 1], [1, 2], [1, 3]
-         */
-        this.keysX = new Map();
-        /**
-         * Count the each added or deleted key manually to avoid iterating over all items when calling `this.size`.
-         */
-        this.totalKeysCount = 0;
-        if (items && keyXField && keyYField) {
-            items.forEach(item => this.add(item[keyXField], item[keyYField]));
-        }
-    }
     /**
      * Gets the total number of X/Y key pairs.
      */
     get size() {
         return this.totalKeysCount;
     }
+    /**
+     * Holds a set of Y keys for each defined X key.
+     * Each X key creates a map which holds a set of Y keys.
+     *
+     * Map { 1 => Set { 1, 2, 3 } } // pairs: [1, 1], [1, 2], [1, 3]
+     */
+    keysX = new Map();
+    /**
+     * Count the each added or deleted key manually to avoid iterating over all items when calling `this.size`.
+     */
+    totalKeysCount = 0;
+    constructor(items, keyXField, keyYField) {
+        if (items && keyXField && keyYField) {
+            items.forEach(item => this.add(item[keyXField], item[keyYField]));
+        }
+    }
     /**
      * Adds a couple of items identified as a combination.
      */

package/{esm2020 → esm2022}/selection/selectall-checkbox.directive.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, HostBinding, Renderer2, ElementRef, Input, Output, EventEmitter, NgZone } from '@angular/core';
+import { Directive, Input, Output, EventEmitter, NgZone, Host, Optional } from '@angular/core';
 import { SelectionService } from './selection.service';
 import { isPresent } from '../utils';
 import { hasObservers } from '@progress/kendo-angular-common';
 import { CellSelectionService } from './cell-selection.service';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 import * as i2 from "./cell-selection.service";
+import * as i3 from "@progress/kendo-angular-inputs";
 /**
  * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
  *
@@ -25,41 +27,48 @@ import * as i2 from "./cell-selection.service";
  * ```
  */
 export class SelectAllCheckboxDirective {
-    constructor(selectionService, cellSelectionService, el, renderer, ngZone) {
-        this.selectionService = selectionService;
-        this.cellSelectionService = cellSelectionService;
-        this.el = el;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        /**
-         * Fires when the user clicks the `kendoGridSelectAllCheckbox` select-all checkbox
-         * ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
-         */
-        this.selectAllChange = new EventEmitter();
-        this.type = 'checkbox';
-        this.stateSet = false;
-        this.ngZone.runOutsideAngular(() => {
-            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
-        });
-    }
+    selectionService;
+    cellSelectionService;
+    ngZone;
+    checkbox;
+    /**
+     * Explicitly overrides the state of the select-all checkbox.
+     */
+    state;
+    /**
+     * Fires when the user clicks the `kendoGridSelectAllCheckbox` select-all checkbox
+     * ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
+     */
+    selectAllChange = new EventEmitter();
+    destroyClick;
+    stateSet = false;
     ngAfterContentChecked() {
         this.setState();
     }
     ngOnChanges() {
         this.stateSet = true;
     }
+    constructor(selectionService, cellSelectionService, ngZone, checkbox) {
+        this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
+        this.ngZone = ngZone;
+        this.checkbox = checkbox;
+        this.ngZone.runOutsideAngular(() => {
+            this.destroyClick = this.checkbox.checkedStateChange.subscribe(this.onClick.bind(this));
+        });
+    }
     ngOnDestroy() {
         if (this.destroyClick) {
-            this.destroyClick();
+            this.destroyClick.unsubscribe();
         }
     }
     /**
      * @hidden
      */
     onClick() {
-        const uncheckedState = this.el.nativeElement.indeterminate ? 'indeterminate' : 'unchecked';
-        const checkboxState = this.el.nativeElement.checked ? 'checked' : uncheckedState;
-        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.el.nativeElement.checked;
+        const uncheckedState = this.checkbox.checkedState === 'indeterminate' ? 'indeterminate' : 'unchecked';
+        const checkboxState = this.checkbox.checkedState ? 'checked' : uncheckedState;
+        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.checkbox.checkedState === true;
         const options = this.selectionService.options;
         const enabledAndMultiple = options.enabled && options.mode === 'multiple' && !this.cellSelectionService.active;
         const shouldEmitSelectAll = hasObservers(this.selectAllChange);
@@ -79,9 +88,7 @@ export class SelectAllCheckboxDirective {
      */
     setState() {
         const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
-        const elem = this.el.nativeElement;
-        this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
-        this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
+        this.checkbox.checkedState = isPresent(state) ? state : 'indeterminate';
     }
     /**
      * @hidden
@@ -96,20 +103,21 @@ export class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
 }
-SelectAllCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SelectAllCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, host: { properties: { "attr.type": "this.type" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { state: [{
                 type: Input
             }], selectAllChange: [{
                 type: Output
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
             }] } });

package/{esm2020 → esm2022}/selection/selection-checkbox.directive.mjs

@@ -2,15 +2,17 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, HostBinding, ElementRef, Input, Renderer2, NgZone } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer2, NgZone, Host, Optional } from '@angular/core';
 import { SelectionService } from './selection.service';
 import { Keys } from '@progress/kendo-angular-common';
 import { CellSelectionAggregateService } from '../aggregates/selection-aggregate.service';
 import { CellSelectionService } from './cell-selection.service';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 import * as i2 from "./cell-selection.service";
 import * as i3 from "../aggregates/selection-aggregate.service";
+import * as i4 from "@progress/kendo-angular-inputs";
 /**
  * Represents the row-selection checkbox of the Grid. The directive expects the
  * index of the current row as an input parameter. Inside the [`CellTemplateDirective`](slug:api_grid_celltemplatedirective), apply the
@@ -30,22 +32,35 @@ import * as i3 from "../aggregates/selection-aggregate.service";
  * ```
  */
 export class SelectionCheckboxDirective {
-    constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone) {
+    selectionService;
+    cellSelectionService;
+    aggregateService;
+    el;
+    renderer;
+    ngZone;
+    checkbox;
+    /**
+     * The current index of the `dataItem` that will be selected.
+     */
+    itemIndex;
+    destroyClick;
+    destroyKeyDown;
+    ngAfterContentChecked() {
+        this.setCheckedState();
+    }
+    constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone, checkbox) {
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
         this.aggregateService = aggregateService;
         this.el = el;
         this.renderer = renderer;
         this.ngZone = ngZone;
-        this.type = 'checkbox';
+        this.checkbox = checkbox;
         this.ngZone.runOutsideAngular(() => {
             this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
             this.destroyKeyDown = this.renderer.listen(this.el.nativeElement, 'keydown', this.onKeyDown.bind(this));
         });
     }
-    ngAfterContentChecked() {
-        this.setCheckedState();
-    }
     ngOnDestroy() {
         if (this.destroyClick) {
             this.destroyClick();
@@ -90,21 +105,22 @@ export class SelectionCheckboxDirective {
      */
     setCheckedState() {
         const isSelected = this.selectionService.nonSelectableRows.has(this.itemIndex) ? false : this.selectionService.isSelected(this.itemIndex);
-        this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
+        this.checkbox.checkedState = isSelected;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i3.CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i4.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
 }
-SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i3.CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SelectionCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, host: { properties: { "attr.type": "this.type" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridSelectionCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i3.CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i3.CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i4.CheckBoxComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { itemIndex: [{
                 type: Input,
                 args: ['kendoGridSelectionCheckbox']
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
             }] } });