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

package/esm2022/rendering/toolbar/tools/group-toolbar-tool.component.mjs

@@ -8,7 +8,7 @@ import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { chevronUpIcon, chevronDownIcon, xCircleIcon, plusCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import { take } from 'rxjs/operators';
-import { isPresent } from '@progress/kendo-angular-common';
+import { isPresent, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 /**
@@ -172,30 +172,32 @@ export class GroupToolbarToolComponent {
         this.currentFocusedItemIndex = currentIndex;
     }
     handleGroupedKeydown(column, index, ev) {
-        if (ev.code === 'Enter' || ev.code === 'Backspace' || ev.code === 'Delete') {
+        const code = normalizeNumpadKeys(ev);
+        if (code === Keys.Enter || code === Keys.Backspace || code === Keys.Delete) {
             this.removeGroup(column, ev);
         }
-        else if (ev.code === 'ArrowUp' && ev.shiftKey) {
+        else if (code === Keys.ArrowUp && ev.shiftKey) {
             this.moveGroupUp(column, ev);
         }
-        else if (ev.code === 'ArrowDown' && ev.shiftKey) {
+        else if (code === Keys.ArrowDown && ev.shiftKey) {
             this.moveGroupDown(column, ev);
         }
-        else if (ev.code === 'ArrowUp') {
+        else if (code === Keys.ArrowUp) {
             this.navigateToPreviousItem();
         }
-        else if (ev.code === 'ArrowDown') {
+        else if (code === Keys.ArrowDown) {
             this.navigateToNextItem();
         }
     }
     handleUngroupedKeydown(column, index, ev) {
-        if (ev.code === 'Enter') {
+        const code = normalizeNumpadKeys(ev);
+        if (code === Keys.Enter) {
             this.addGroup(column, ev);
         }
-        else if (ev.code === 'ArrowUp') {
+        else if (code === Keys.ArrowUp) {
             this.navigateToPreviousItem();
         }
-        else if (ev.code === 'ArrowDown') {
+        else if (code === Keys.ArrowDown) {
             this.navigateToNextItem();
         }
     }

package/esm2022/rendering/toolbar/tools/select-all-command-tool.directive.mjs

@@ -0,0 +1,93 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef } from '@angular/core';
+import { ContextService } from '../../../common/provider.service';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { IdService } from '../../../common/id.service';
+import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { SelectAllCheckboxDirective } from '../../../selection/selectall-checkbox.directive';
+import { FocusableDirective } from '../../../navigation/focusable.directive';
+import { LabelDirective } from '@progress/kendo-angular-label';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../common/id.service";
+import * as i2 from "../../../common/provider.service";
+/**
+ * Represents the toolbar tool for showing a select-all `kendoGridSelectAllCheckbox` checkbox.
+ * Use this component inside a ToolbarComponent in the Grid.
+ *
+ * @example
+ * ```html
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-grid-select-all-tool text="Select All"></kendo-grid-select-all-tool>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class SelectAllToolbarToolComponent extends ToolBarToolComponent {
+    idService;
+    ctx;
+    constructor(idService, ctx) {
+        super();
+        this.idService = idService;
+        this.ctx = ctx;
+    }
+    /**
+     * @hidden
+     */
+    selectAllCheckboxId() {
+        return this.idService.selectAllCheckboxId();
+    }
+    /**
+     * @hidden
+     */
+    get selectAllCheckboxLabel() {
+        return this.ctx.localization.get('selectAllCheckboxLabel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllToolbarToolComponent, deps: [{ token: i1.IdService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllToolbarToolComponent, isStandalone: true, selector: "kendo-grid-select-all-tool", providers: [
+            {
+                provide: ToolBarToolComponent,
+                useExisting: forwardRef(() => SelectAllToolbarToolComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate #sectionTemplate #popupTemplate>
+            <kendo-checkbox #checkbox
+                [attr.id]="selectAllCheckboxId()"
+                size="large"
+                [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                kendoGridSelectAllCheckbox
+                kendoGridFocusable
+            ></kendo-checkbox>
+            <label class="k-checkbox-label" [for]="checkbox.focusableId">{{selectAllCheckboxLabel}}</label>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ToolBarToolComponent,
+                            useExisting: forwardRef(() => SelectAllToolbarToolComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-select-all-tool',
+                    template: `
+        <ng-template #toolbarTemplate #sectionTemplate #popupTemplate>
+            <kendo-checkbox #checkbox
+                [attr.id]="selectAllCheckboxId()"
+                size="large"
+                [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                kendoGridSelectAllCheckbox
+                kendoGridFocusable
+            ></kendo-checkbox>
+            <label class="k-checkbox-label" [for]="checkbox.focusableId">{{selectAllCheckboxLabel}}</label>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [CheckBoxComponent, SelectAllCheckboxDirective, FocusableDirective, LabelDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.IdService }, { type: i2.ContextService }]; } });

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 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 { getOffset, isNextSibling, isPreviousSibling, dropPosition, hintIcons, hintSVGIcons, hintClasses, hintStyles, dropIndicatorClasses, dropIndicatorStyles, isDifferentParent, getDefaultSelectors } from './utils';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
 export class RowReorderService {
     renderer;
     hintElement = null;
-    defaultSelectors = defaultSelectors;
+    defaultSelectors = getDefaultSelectors;
     hintText = '';
     skip;
     dropIndicator;

package/esm2022/row-reordering/utils.mjs

@@ -77,10 +77,12 @@ 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'
+export const getDefaultSelectors = (isStacked) => {
+    return {
+        handle: isStacked ? '.k-grid-stack-cell.k-drag-cell' : '.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/esm2022/selection/cell-selection.service.mjs

@@ -31,7 +31,7 @@ export class CellSelectionService {
     nonSelectableRows = new Map();
     get enableMarquee() {
         const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
-        if (!this.settings || checkboxOnly) {
+        if (!this.settings || checkboxOnly || this.settings.isStacked) {
             return false;
         }
         const selectableSettings = this.settings.selectable;
@@ -67,7 +67,7 @@ export class CellSelectionService {
         this.settings = settings;
         this.currentSelection = [];
         this.nonSelectableRows = new Map();
-        if (settings.selectable && settings.selectable.enabled !== false) {
+        if (settings.selectable && settings.selectable.enabled !== false && !settings.isStacked) {
             const iterator = this.getIterator();
             let item = iterator.next();
             while (!item.done) {
@@ -91,7 +91,7 @@ export class CellSelectionService {
         }
     }
     isCellSelected(item, col) {
-        if (this.settings && this.active) {
+        if (this.settings && this.active && !this.settings.isStacked) {
             const selectedCellArgs = this.settings.cellSelected({ dataItem: item.data, index: item.index }, col, col.leafIndex);
             return this.options.enabled && selectedCellArgs.selected && !this.nonSelectableRows.has(item.index);
         }
@@ -102,6 +102,9 @@ export class CellSelectionService {
             this.dragging = false;
             return;
         }
+        if (this.settings.isStacked) {
+            return;
+        }
         let ev;
         const ctrlKey = event.ctrlKey || event.metaKey;
         if (this.options.mode === "single" && ctrlKey && this.isCellSelected(item, item.column)) {

package/esm2022/selection/pair-set.mjs

@@ -5,13 +5,17 @@
 /**
  * @hidden
  *
- * Quick look-up structure for combinations of keys.
- * Similar to the native JS Set, however, working with a couple of keys instead of with a single key.
+ * Quick look-up structure for combinations of keys or single keys.
+ * Similar to the native JS Set, however, working with single keys or a couple of keys.
  * Supports both primitive keys and object keys (compared by reference).
  */
 export class PairSet {
     /**
-     * Gets the total number of X/Y key pairs.
+     * Symbol used internally to represent "no Y key" when storing single X keys.
+     */
+    static SINGLE_KEY_SYMBOL = Symbol('SINGLE_KEY');
+    /**
+     * Gets the total number of key entries (both single keys and key pairs).
      */
     get size() {
         return this.totalKeysCount;
@@ -19,17 +23,38 @@ export class PairSet {
     /**
      * Holds a set of Y keys for each defined X key.
      * Each X key creates a map which holds a set of Y keys.
+     * For single keys, the Y value is the SINGLE_KEY_SYMBOL.
      *
-     * Map { 1 => Set { 1, 2, 3 } } // pairs: [1, 1], [1, 2], [1, 3]
+     * Map { 'foo' => Set { Symbol(SINGLE_KEY) } } // single key: {x: 'foo'}
+     * Map { 'foo2' => Set { 'bar', 'baz' } } // pairs: {x: 'foo2', y: 'bar'}, {x: 'foo2', y: 'baz'}
      */
     keysX = new Map();
     /**
-     * Count the each added or deleted key manually to avoid iterating over all items when calling `this.size`.
+     * Count 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]));
+        if (items && keyXField) {
+            items.forEach(item => {
+                if (keyYField && item[keyYField] !== undefined) {
+                    this.add(item[keyXField], item[keyYField]);
+                }
+                else {
+                    this.addSingle(item[keyXField]);
+                }
+            });
+        }
+    }
+    /**
+     * Adds a single key entry.
+     */
+    addSingle(keyX) {
+        if (!this.keysX.has(keyX)) {
+            this.keysX.set(keyX, new Set());
+        }
+        if (!this.hasSingle(keyX)) {
+            this.keysX.get(keyX).add(PairSet.SINGLE_KEY_SYMBOL);
+            this.totalKeysCount += 1;
         }
     }
     /**
@@ -45,14 +70,35 @@ export class PairSet {
         }
     }
     /**
-     * Adds a combination of a couple of items identified together.
+     * Deletes a single key entry.
+     */
+    deleteSingle(keyX) {
+        if (this.hasSingle(keyX)) {
+            this.keysX.get(keyX).delete(PairSet.SINGLE_KEY_SYMBOL);
+            this.totalKeysCount -= 1;
+            if (this.keysX.get(keyX).size === 0) {
+                this.keysX.delete(keyX);
+            }
+        }
+    }
+    /**
+     * Deletes a combination of a couple of items identified together.
      */
     delete(keyX, keyY) {
         if (this.has(keyX, keyY)) {
             this.keysX.get(keyX).delete(keyY);
             this.totalKeysCount -= 1;
+            if (this.keysX.get(keyX).size === 0) {
+                this.keysX.delete(keyX);
+            }
         }
     }
+    /**
+     * Checks whether a single key is stored.
+     */
+    hasSingle(keyX) {
+        return this.keysX.has(keyX) && this.keysX.get(keyX).has(PairSet.SINGLE_KEY_SYMBOL);
+    }
     /**
      * Checks whether the defined combination is stored.
      */
@@ -60,7 +106,23 @@ export class PairSet {
         return this.keysX.has(keyX) && this.keysX.get(keyX).has(keyY);
     }
     /**
-     * Clears all key combinations.
+     * Checks whether any entry exists for the given X key (single or paired).
+     */
+    hasX(keyX) {
+        return this.keysX.has(keyX) && this.keysX.get(keyX).size > 0;
+    }
+    /**
+     * Gets all Y keys for a given X key, excluding single key entries.
+     */
+    getYKeys(keyX) {
+        if (!this.keysX.has(keyX)) {
+            return [];
+        }
+        const yKeys = Array.from(this.keysX.get(keyX));
+        return yKeys.filter(yKey => yKey !== PairSet.SINGLE_KEY_SYMBOL);
+    }
+    /**
+     * Clears all key combinations and single keys.
      */
     clear() {
         this.keysX.clear();
@@ -69,12 +131,27 @@ export class PairSet {
     /**
      * Converts the persisted data structure to an array of objects,
      * using the provided field names for the object props.
+     * Single keys will only have the keyXField property.
+     * Pair keys will have both keyXField and keyYField properties.
      */
     toArray(keyXField, keyYField) {
         return Array.from(this.keysX).reduce((pairs, pair) => {
             // Array.from(mapInstance) returns an array of arrays [[itemKey1, columnKeysSet1], [itemKey2, columnKeysSet2]]
             const [keyX, keysY] = pair;
-            Array.from(keysY).forEach(keyY => pairs.push({ [keyXField]: keyX, [keyYField]: keyY }));
+            Array.from(keysY).forEach(keyY => {
+                if (keyY === PairSet.SINGLE_KEY_SYMBOL) {
+                    // Single key entry
+                    pairs.push({ [keyXField]: keyX });
+                }
+                else {
+                    // Pair key entry
+                    const entry = { [keyXField]: keyX };
+                    if (keyYField) {
+                        entry[keyYField] = keyY;
+                    }
+                    pairs.push(entry);
+                }
+            });
             return pairs;
         }, []);
     }

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

@@ -97,7 +97,7 @@ export class SelectionCheckboxDirective {
         }
     }
     onKeyDown(e) {
-        if (e.keyCode === Keys.Enter) {
+        if (e.code === Keys.Enter || e.code === Keys.NumpadEnter) {
             this.onClick(e);
         }
     }

package/esm2022/selection/selection.directive.mjs

@@ -12,7 +12,7 @@ import * as i1 from "../common/provider.service";
  * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid kendoGridSelectBy="ProductID"></kendo-grid>
  *
  * <kendo-grid [kendoGridSelectBy]="myKey"></kendo-grid>

package/esm2022/utils.mjs

@@ -113,10 +113,6 @@ export const cancelAnimationFrame = wnd.cancelAnimationFrame || wnd.msCancelRequ
  * @hidden
  */
 export const nodesToArray = (nodes) => [].slice.call(nodes);
-/**
- * @hidden
- */
-export const replaceMessagePlaceholder = (message, name, value) => (message ?? '').replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
 /**
  * @hidden
  */