@progress/kendo-angular-inputs 19.3.0-develop.9 → 19.3.0

package/colorpicker/color-palette.component.d.ts

@@ -175,7 +175,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
     /**
      * @hidden
      */
-    handleKeydown(event: any): void;
+    handleKeydown(event: KeyboardEvent): void;
     /**
      * @hidden
      */

package/colorpicker/colorpicker.component.d.ts

@@ -383,7 +383,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     /**
      * @hidden
      */
-    handleWrapperKeyDown(event: any): void;
+    handleWrapperKeyDown(event: KeyboardEvent): void;
     /**
      * @hidden
      */

package/common/models/gutters.d.ts

@@ -4,19 +4,25 @@
 *-------------------------------------------------------------------------------------------*/
 import { ResponsiveFormBreakPoint } from './responsive-breakpoints';
 /**
- * Represents the gutters configuration for a form layout.
- * It allows defining the spacing between the columns and rows of the form.
- * Each property can be a number or an array of responsive breakpoints.
+ * Represents the gutters configuration for a Form layout. Defines the spacing between the columns and rows of the Form.
+ * Set any property to a number or a string to apply that value as a fixed gutter size. Set it to an array of responsive breakpoints to allow different gutter sizes in relation to the current Form width.
+ * Numeric values are interpreted as pixels. String values can include units like `px`, `rem`, `em`, etc.
+ *
+ * @example
+ * ```ts
+ * const formGutters: Gutters = {
+ *   cols: 16,
+ *   rows: '1rem'
+ * };
+ * ```
  */
 export interface Gutters {
     /**
-     * Defines the gutters for the columns in the form.
-     * Can be a number or an array of responsive breakpoints.
+     * Defines the gutters for the columns in the Form.
      */
-    cols?: number | ResponsiveFormBreakPoint[];
+    cols?: number | string | ResponsiveFormBreakPoint[];
     /**
-     * Defines the gutters for the rows in the form.
-     * Can be a number or an array of responsive breakpoints.
+     * Defines the gutters for the rows in the Form.
      */
-    rows?: number | ResponsiveFormBreakPoint[];
+    rows?: number | string | ResponsiveFormBreakPoint[];
 }

package/common/models/responsive-breakpoints.d.ts

@@ -3,22 +3,32 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Allows to define responsive breakpoints for form controls.
+ * Defines responsive breakpoints for form controls in relation to the width of the Form component.
  * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
  * or the colspan/gutters for that breakpoint.
+ *
+ * @example
+ * ```ts
+ * const breakpoints: ResponsiveFormBreakPoint[] = [
+ *   { minWidth: 768, value: 2 },
+ *   { maxWidth: 767, value: 1 }
+ * ];
+ * ```
  */
 export interface ResponsiveFormBreakPoint {
     /**
-     * The minimum width for this breakpoint in pixels.
+     * Specifies the minimum Form width for this breakpoint in pixels.
      */
     minWidth?: number;
     /**
-     * The maximum width for this breakpoint in pixels.
+     * Specifies the maximum Form width for this breakpoint in pixels.
      */
     maxWidth?: number;
     /**
-     * The value associated with this breakpoint.
-     * It can represent the number of columns or the colspan/gutters for the form control.
+     * Specifies the value associated with this breakpoint.
+     * Can represent the number of columns or the colspan/gutters for the form control.
+     * For gutters configurations, numeric values are interpreted as pixels, while string values can include units like `px`, `em`, etc.
+     * For columns number and colspan, numeric values are typically used and strings are parsed to numbers.
      */
-    value: number;
+    value: number | string;
 }

package/esm2022/colorpicker/color-palette.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, Input, EventEmitter, Output, HostBinding, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, guid, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
@@ -282,8 +282,9 @@ export class ColorPaletteComponent {
      * @hidden
      */
     handleKeydown(event) {
+        const code = normalizeNumpadKeys(event);
         const isRTL = this.direction === 'rtl';
-        switch (event.keyCode) {
+        switch (code) {
             case Keys.ArrowDown:
                 this.handleCellNavigation(0, 1);
                 break;

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -12,7 +12,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput, isChanged, closest, guid, ResizeSensorComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, isChanged, closest, guid, ResizeSensorComponent, isDocumentAvailable, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
@@ -665,7 +665,8 @@ export class ColorPickerComponent {
      * @hidden
      */
     handleWrapperKeyDown(event) {
-        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
+        const code = normalizeNumpadKeys(event);
+        if (code === Keys.ArrowDown || code === Keys.Enter) {
             event.preventDefault();
             this.ngZone.run(() => {
                 this.toggleWithEvents(true);
@@ -701,11 +702,11 @@ export class ColorPickerComponent {
      * @hidden
      */
     handlePopupKeyDown(event) {
-        if (event.keyCode === Keys.Escape) {
+        if (event.code === Keys.Escape) {
             this.toggleWithEvents(false);
             this.host.nativeElement.focus();
         }
-        if (event.keyCode === Keys.Tab) {
+        if (event.code === Keys.Tab) {
             const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             const nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {

package/esm2022/form/form.component.mjs

@@ -2,10 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass, NgIf, NgStyle } from '@angular/common';
 import { Component, ElementRef, HostBinding, Input, ChangeDetectorRef } from '@angular/core';
-import { ResizeSensorComponent, shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
-import { calculateColumns, calculateGutters, generateColumnClass, generateGutterClasses, innerWidth } from './utils';
+import { ResizeSensorComponent, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { calculateColumns, calculateGutters, DEFAULT_FORM_GUTTERS, generateColumnClass, generateGuttersStyling, innerWidth } from './utils';
 import { FormService } from '../common/formservice.service';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -36,7 +36,7 @@ export class FormComponent {
      * Defines the gutters for the form.
      * You can specify gutters for rows and columns.
      */
-    gutters;
+    gutters = { ...DEFAULT_FORM_GUTTERS };
     /**
      * @hidden
      */
@@ -44,26 +44,29 @@ export class FormComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
+    guttersStyle = '';
     /**
      * @hidden
      */
-    colsGutterClass = '';
+    showLicenseWatermark = false;
     /**
      * @hidden
      */
-    showLicenseWatermark = false;
-    formClass = true;
+    licenseMessage;
+    get formClass() {
+        return 'k-form k-form-md';
+    }
     get horizontalClass() {
         return this.orientation === 'horizontal';
     }
     _formColumnsNumber;
-    _formGutters;
+    _formGutters = { ...DEFAULT_FORM_GUTTERS };
     constructor(element, cdr, formService) {
         this.element = element;
         this.cdr = cdr;
         this.formService = formService;
         const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
     }
     ngAfterContentInit() {
@@ -75,7 +78,7 @@ export class FormComponent {
         if (changes['cols']) {
             this.applyColumns();
         }
-        else if (changes['gutters']) {
+        if (changes['gutters']) {
             this.applyGutters();
         }
     }
@@ -109,18 +112,16 @@ export class FormComponent {
         this.columnsClass = generateColumnClass(this._formColumnsNumber);
     }
     updateGutterClasses() {
-        const gutterClasses = generateGutterClasses(this._formGutters);
-        this.rowsGutterClass = gutterClasses.rows;
-        this.colsGutterClass = gutterClasses.cols;
+        this.guttersStyle = generateGuttersStyling(this._formGutters, { ...DEFAULT_FORM_GUTTERS });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class.k-form": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{ gap: guttersStyle }">
             <ng-content></ng-content>
         </div>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -128,14 +129,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoForm',
                     selector: 'form[kendoForm]',
                     template: `
-        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{ gap: guttersStyle }">
             <ng-content></ng-content>
         </div>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
     `,
                     standalone: true,
-                    imports: [NgClass, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
+                    imports: [NgClass, NgStyle, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FormService }]; }, propDecorators: { orientation: [{
                 type: Input
@@ -145,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], formClass: [{
                 type: HostBinding,
-                args: ['class.k-form']
+                args: ['class']
             }], horizontalClass: [{
                 type: HostBinding,
                 args: ['class.k-form-horizontal']

package/esm2022/form/utils.mjs

@@ -2,6 +2,15 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { processCssValue } from '@progress/kendo-angular-common';
+/**
+ * @hidden
+ */
+export const DEFAULT_FORM_GUTTERS = { rows: '0px', cols: '32px' };
+/**
+ * @hidden
+ */
+export const DEFAULT_FORMFIELDSET_GUTTERS = { rows: '0px', cols: '16px' };
 /**
  * @hidden
  */
@@ -17,7 +26,7 @@ export function innerWidth(element) {
  */
 export function processBreakpoints(breakpoints, containerWidth) {
     if (!breakpoints?.length || containerWidth === null) {
-        return null;
+        return '';
     }
     for (const [index, breakpoint] of breakpoints.entries()) {
         const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
@@ -26,7 +35,7 @@ export function processBreakpoints(breakpoints, containerWidth) {
             return breakpoint.value;
         }
     }
-    return null;
+    return '';
 }
 /**
  * @hidden
@@ -36,7 +45,8 @@ export const calculateColumns = (cols, containerWidth) => {
         return null;
     }
     if (Array.isArray(cols) && cols.length > 0) {
-        return processBreakpoints(cols, containerWidth);
+        const processedCols = processBreakpoints(cols, containerWidth) || null;
+        return typeof processedCols === 'string' ? parseInt(processedCols, 10) : processedCols;
     }
     else if (typeof cols === 'number') {
         return cols;
@@ -52,18 +62,18 @@ export const calculateGutters = (gutters, containerWidth) => {
     if (!gutters) {
         return null;
     }
-    if (typeof gutters === 'number') {
+    if (typeof gutters === 'number' || typeof gutters === 'string') {
         return { cols: gutters, rows: gutters };
     }
     else if (Array.isArray(gutters)) {
-        const processedGutters = processBreakpoints(gutters, containerWidth);
+        const processedGutters = processBreakpoints(gutters, containerWidth) || null;
         return processedGutters !== null ? { cols: processedGutters, rows: processedGutters } : null;
     }
     else if (typeof gutters === 'object') {
         const gutterObject = gutters;
         const result = { rows: null, cols: null };
         if (gutterObject.cols !== undefined && gutterObject.cols !== null) {
-            if (typeof gutterObject.cols === 'number') {
+            if (typeof gutterObject.cols === 'number' || typeof gutterObject.cols === 'string') {
                 result.cols = gutterObject.cols;
             }
             else if (Array.isArray(gutterObject.cols)) {
@@ -74,7 +84,7 @@ export const calculateGutters = (gutters, containerWidth) => {
             result.cols = null;
         }
         if (gutterObject.rows !== undefined) {
-            if (typeof gutterObject.rows === 'number') {
+            if (typeof gutterObject.rows === 'number' || typeof gutterObject.rows === 'string') {
                 result.rows = gutterObject.rows;
             }
             else if (Array.isArray(gutterObject.rows)) {
@@ -101,7 +111,8 @@ export const calculateColSpan = (colSpan, containerWidth) => {
         return colSpan;
     }
     else if (Array.isArray(colSpan) && colSpan.length > 0) {
-        return processBreakpoints(colSpan, containerWidth);
+        const processedColSpan = processBreakpoints(colSpan, containerWidth) || null;
+        return typeof processedColSpan === 'string' ? parseInt(processedColSpan, 10) : processedColSpan;
     }
     return null;
 };
@@ -116,13 +127,12 @@ export const generateColumnClass = (columnsNumber) => {
 /**
  * @hidden
  *
- * Generates CSS class names for gutters
+ * Generates CSS styles for gutters based on the provided gutters object.
  */
-export const generateGutterClasses = (gutters) => {
-    return {
-        rows: gutters?.rows ? `k-gap-y-${gutters.rows}` : '',
-        cols: gutters?.cols ? `k-gap-x-${gutters.cols}` : ''
-    };
+export const generateGuttersStyling = (gutters, defaultGutters = DEFAULT_FORM_GUTTERS) => {
+    const rows = processCssValue(gutters?.rows);
+    const cols = processCssValue(gutters?.cols);
+    return `${rows ?? defaultGutters.rows} ${cols ?? defaultGutters.cols}`;
 };
 /**
  * @hidden

package/esm2022/formfieldset/formfieldset.component.mjs

@@ -2,11 +2,11 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass, NgIf, NgStyle } from '@angular/common';
 import { Component, HostBinding, Input, ElementRef, Renderer2, ChangeDetectorRef, } from '@angular/core';
 import { FormService } from '../common/formservice.service';
 import { filter } from 'rxjs/operators';
-import { calculateColSpan, calculateColumns, calculateGutters, generateColSpanClass, generateColumnClass, generateGutterClasses } from '../form/utils';
+import { calculateColSpan, calculateColumns, calculateGutters, DEFAULT_FORMFIELDSET_GUTTERS, generateColSpanClass, generateColumnClass, generateGuttersStyling } from '../form/utils';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -29,7 +29,7 @@ export class FormFieldSetComponent {
      */
     legend;
     /**
-     * Defines the number of columns the fieldset.
+     * Defines the number of columns of the fieldset.
      * Can be a number or an array of responsive breakpoints.
      */
     cols;
@@ -37,7 +37,7 @@ export class FormFieldSetComponent {
      * Defines the gutters for the fieldset.
      * You can specify gutters for rows and columns.
      */
-    gutters;
+    gutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
     /**
      * Defines the colspan for the fieldset related to the parent Form component columns.
      * Can be a number or an array of responsive breakpoints.
@@ -50,18 +50,14 @@ export class FormFieldSetComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
-    /**
-     * @hidden
-     */
-    colsGutterClass = '';
+    guttersStyle = '';
     _formColumnsNumber;
     _colSpanClass = null;
     _formWidth = null;
-    _formGutters = null;
+    _formGutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
     _previousColSpan = null;
     _previousCols = null;
-    _previousGutters = null;
+    _previousGutters;
     subs = new Subscription();
     constructor(elementRef, renderer, formService, cdr) {
         this.elementRef = elementRef;
@@ -115,9 +111,8 @@ export class FormFieldSetComponent {
         this.cdr.detectChanges();
     }
     updateGutterClasses() {
-        const gutterClasses = generateGutterClasses(this._formGutters);
-        this.rowsGutterClass = gutterClasses.rows;
-        this.colsGutterClass = gutterClasses.cols;
+        this.guttersStyle = generateGuttersStyling(this._formGutters, { ...DEFAULT_FORMFIELDSET_GUTTERS });
+        this.cdr.detectChanges();
     }
     updateColSpanClass() {
         const hostElement = this.elementRef.nativeElement;
@@ -140,10 +135,10 @@ export class FormFieldSetComponent {
         <legend *ngIf="legend" class="k-form-legend">
             {{ legend }}
         </legend>
-        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
             <ng-content></ng-content>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSetComponent, decorators: [{
             type: Component,
@@ -154,12 +149,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <legend *ngIf="legend" class="k-form-legend">
             {{ legend }}
         </legend>
-        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
             <ng-content></ng-content>
         </div>
     `,
                     standalone: true,
-                    imports: [NgIf, NgClass],
+                    imports: [NgIf, NgClass, NgStyle],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formFieldSetClass: [{
                 type: HostBinding,

package/esm2022/numerictextbox/numerictextbox.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild, forwardRef, isDevMode, NgZone, ChangeDetectorRef, Injector, ContentChild } from '@angular/core';
-import { anyChanged, hasObservers, Keys, guid, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { anyChanged, hasObservers, Keys, guid, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes, EventsOutsideAngularDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { areSame, getStylingClasses, requiresZoneOnBlur } from '../common/utils';
 import { invokeElementMethod } from '../common/dom-utils';
 import { add, toFixedPrecision, limitPrecision } from '../common/math';
@@ -616,10 +616,11 @@ export class NumericTextBoxComponent {
             return;
         }
         let step;
-        if (e.keyCode === Keys.ArrowDown) {
+        const code = normalizeNumpadKeys(e);
+        if (code === Keys.ArrowDown) {
             step = -1;
         }
-        else if (e.keyCode === Keys.ArrowUp) {
+        else if (code === Keys.ArrowUp) {
             step = 1;
         }
         if (step && this.step) {
@@ -631,7 +632,7 @@ export class NumericTextBoxComponent {
             end: input.selectionEnd,
             start: input.selectionStart
         };
-        this.pressedKey = e.keyCode;
+        this.pressedKey = code;
     };
     /**
      * @hidden

package/esm2022/otpinput/otpinput.component.mjs

@@ -5,7 +5,7 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Injector, Input, NgZone, Output, QueryList, Renderer2, ViewChildren, forwardRef } from "@angular/core";
 import { SharedInputEventsDirective } from "../shared/shared-events.directive";
 import { NgFor, NgIf } from "@angular/common";
-import { KendoInput, Keys, hasObservers, isPresent, replaceMessagePlaceholder } from "@progress/kendo-angular-common";
+import { KendoInput, Keys, hasObservers, isPresent, normalizeNumpadKeys, replaceMessagePlaceholder } from "@progress/kendo-angular-common";
 import { TextBoxComponent } from "../textbox/textbox.component";
 import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
 import { SIZE_MAP, areSame } from "../common/utils";
@@ -574,14 +574,15 @@ export class OTPInputComponent {
         this.inputFields.get(this.focusedInput).focus();
     }
     handleKeydown(event) {
+        const code = normalizeNumpadKeys(event);
         if (this.readonly) {
-            const isCopyCommand = (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyC;
-            if (!(event.keyCode === Keys.Tab || isCopyCommand)) {
+            const isCopyCommand = (event.ctrlKey || event.metaKey) && code === Keys.KeyC;
+            if (!(code === Keys.Tab || isCopyCommand)) {
                 event.preventDefault();
                 return;
             }
         }
-        switch (event.keyCode) {
+        switch (code) {
             case Keys.ArrowRight:
                 event.preventDefault();
                 this.direction === 'ltr' ? this.focusNext() : this.focusPrevious();

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752672139,
-    version: '19.3.0-develop.9',
+    publishDate: 1755030422,
+    version: '19.3.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rangeslider/rangeslider.component.mjs

@@ -10,7 +10,7 @@ import { RangeSliderModel } from './rangeslider-model';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { eventValue, isStartHandle } from '../sliders-common/sliders-util';
 import { invokeElementMethod } from '../common/dom-utils';
-import { guid, isDocumentAvailable, Keys, KendoInput, anyChanged, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { guid, isDocumentAvailable, Keys, KendoInput, anyChanged, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { requiresZoneOnBlur } from '../common/utils';
 import { SliderBase } from '../sliders-common/slider-base';
 import { SliderTicksComponent } from '../sliders-common/slider-ticks.component';
@@ -230,7 +230,9 @@ export class RangeSliderComponent extends SliderBase {
         this.value = this.value || [this.min, this.min];
         const options = this.getProps();
         const { max, min } = options;
-        const handler = this.keyBinding[e.keyCode];
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const code = normalizeNumpadKeys(e);
+        const handler = this.keyBinding[code];
         if (this.isDisabled || !handler) {
             return;
         }
@@ -422,7 +424,7 @@ export class RangeSliderComponent extends SliderBase {
                 cursorInsideWrapper = false;
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
-                if (args.keyCode === Keys.Tab) {
+                if (args.code === Keys.Tab) {
                     tabbing = true;
                 }
                 else {

package/esm2022/rating/rating.component.mjs

@@ -5,7 +5,7 @@
 import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, Input, NgZone, Output, Renderer2 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, KendoInput, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
@@ -335,33 +335,38 @@ export class RatingComponent {
                 this.cdr.markForCheck();
             }
         };
-        if (event.keyCode === Keys.ArrowDown) {
-            decreaseValue();
-        }
-        if (event.keyCode === Keys.ArrowLeft) {
-            if (this.direction === 'ltr') {
+        const code = normalizeNumpadKeys(event);
+        switch (code) {
+            case Keys.ArrowDown:
                 decreaseValue();
-            }
-            else {
-                increaseValue();
-            }
-        }
-        if (event.keyCode === Keys.ArrowUp) {
-            increaseValue();
-        }
-        if (event.keyCode === Keys.ArrowRight) {
-            if (this.direction === 'ltr') {
+                break;
+            case Keys.ArrowLeft:
+                if (this.direction === 'ltr') {
+                    decreaseValue();
+                }
+                else {
+                    increaseValue();
+                }
+                break;
+            case Keys.ArrowUp:
                 increaseValue();
-            }
-            else {
-                decreaseValue();
-            }
-        }
-        if (event.keyCode === Keys.Home) {
-            setMinValue();
-        }
-        if (event.keyCode === Keys.End) {
-            setMaxValue();
+                break;
+            case Keys.ArrowRight:
+                if (this.direction === 'ltr') {
+                    increaseValue();
+                }
+                else {
+                    decreaseValue();
+                }
+                break;
+            case Keys.Home:
+                setMinValue();
+                break;
+            case Keys.End:
+                setMaxValue();
+                break;
+            default:
+                break;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });