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

package/esm2022/form/utils.mjs

@@ -0,0 +1,144 @@
+/**-----------------------------------------------------------------------------------------
+* 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
+ */
+export function innerWidth(element) {
+    let width = element.clientWidth;
+    const style = getComputedStyle(element);
+    width -= (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.borderLeftWidth) || 0);
+    width -= (parseFloat(style.paddingRight) || 0) + (parseFloat(style.borderRightWidth) || 0);
+    return width;
+}
+/**
+ * @hidden
+ */
+export function processBreakpoints(breakpoints, containerWidth) {
+    if (!breakpoints?.length || containerWidth === null) {
+        return '';
+    }
+    for (const [index, breakpoint] of breakpoints.entries()) {
+        const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
+        const maxBreakpointWidth = breakpoint.maxWidth || breakpoints[index + 1]?.minWidth - 1 || Infinity;
+        if (containerWidth >= minBreakpointWidth && containerWidth <= maxBreakpointWidth) {
+            return breakpoint.value;
+        }
+    }
+    return '';
+}
+/**
+ * @hidden
+ */
+export const calculateColumns = (cols, containerWidth) => {
+    if (!cols) {
+        return null;
+    }
+    if (Array.isArray(cols) && cols.length > 0) {
+        const processedCols = processBreakpoints(cols, containerWidth) || null;
+        return typeof processedCols === 'string' ? parseInt(processedCols, 10) : processedCols;
+    }
+    else if (typeof cols === 'number') {
+        return cols;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
+ */
+export const calculateGutters = (gutters, containerWidth) => {
+    if (!gutters) {
+        return null;
+    }
+    if (typeof gutters === 'number' || typeof gutters === 'string') {
+        return { cols: gutters, rows: gutters };
+    }
+    else if (Array.isArray(gutters)) {
+        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' || typeof gutterObject.cols === 'string') {
+                result.cols = gutterObject.cols;
+            }
+            else if (Array.isArray(gutterObject.cols)) {
+                result.cols = processBreakpoints(gutterObject.cols, containerWidth) || null;
+            }
+        }
+        else {
+            result.cols = null;
+        }
+        if (gutterObject.rows !== undefined) {
+            if (typeof gutterObject.rows === 'number' || typeof gutterObject.rows === 'string') {
+                result.rows = gutterObject.rows;
+            }
+            else if (Array.isArray(gutterObject.rows)) {
+                result.rows = processBreakpoints(gutterObject.rows, containerWidth) || null;
+            }
+        }
+        else {
+            result.rows = null;
+        }
+        return result;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Calculates column span value based on responsive breakpoints or fixed number
+ */
+export const calculateColSpan = (colSpan, containerWidth) => {
+    if (!colSpan) {
+        return null;
+    }
+    if (typeof colSpan === 'number') {
+        return colSpan;
+    }
+    else if (Array.isArray(colSpan) && colSpan.length > 0) {
+        const processedColSpan = processBreakpoints(colSpan, containerWidth) || null;
+        return typeof processedColSpan === 'string' ? parseInt(processedColSpan, 10) : processedColSpan;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class names for columns
+ */
+export const generateColumnClass = (columnsNumber) => {
+    return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
+};
+/**
+ * @hidden
+ *
+ * Generates CSS styles for gutters based on the provided gutters object.
+ */
+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
+ *
+ * Generates CSS class name for column span
+ */
+export const generateColSpanClass = (colSpan) => {
+    return colSpan ? `k-col-span-${colSpan}` : '';
+};

package/esm2022/form.module.mjs

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { KENDO_FORM } from './directives';
+import * as i0 from "@angular/core";
+import * as i1 from "./form/form.component";
+import * as i2 from "./form/formseparator.component";
+import * as i3 from "./formfieldset/formfieldset.component";
+import * as i4 from "./formfield/formfield.component";
+import * as i5 from "./formfield/hint.component";
+import * as i6 from "./formfield/error.component";
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the FormField, Error, and Hint components.
+ *
+ * Use this module to add Form features to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { FormModule } from '@progress/kendo-angular-inputs';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, FormModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export class FormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormModule, imports: [i1.FormComponent, i2.FormSeparatorComponent, i3.FormFieldSetComponent, i4.FormFieldComponent, i5.HintComponent, i6.ErrorComponent], exports: [i1.FormComponent, i2.FormSeparatorComponent, i3.FormFieldSetComponent, i4.FormFieldComponent, i5.HintComponent, i6.ErrorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, imports: [i1.FormComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...KENDO_FORM],
+                    exports: [...KENDO_FORM]
+                }]
+        }] });

package/esm2022/formfield/formfield.component.mjs

@@ -12,8 +12,12 @@ import { packageMetadata } from '../package-metadata';
 import { ErrorComponent } from './error.component';
 import { HintComponent } from './hint.component';
 import { NgIf } from '@angular/common';
+import { FormService } from '../common/formservice.service';
+import { filter } from 'rxjs/operators';
+import { calculateColSpan, generateColSpanClass } from '../form/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/formservice.service";
 /**
  * Represents the Kendo UI FormField component for Angular.
  * Use this component to group form-bound controls (Kendo Angular components or native HTML controls).
@@ -36,6 +40,7 @@ export class FormFieldComponent {
     renderer;
     localizationService;
     hostElement;
+    formService;
     hostClass = true;
     /**
      * @hidden
@@ -78,6 +83,8 @@ export class FormFieldComponent {
     /**
      * Specifies the layout orientation of the form field.
      *
+     * @hidden
+     *
      * @default 'vertical'
      */
     orientation = 'vertical';
@@ -89,6 +96,11 @@ export class FormFieldComponent {
      * @default 'initial'
      */
     showErrors = 'initial';
+    /**
+     * Defines the colspan for the form field.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    colSpan;
     /**
      * @hidden
      */
@@ -110,15 +122,23 @@ export class FormFieldComponent {
     control;
     subscriptions = new Subscription();
     rtl = false;
-    constructor(renderer, localizationService, hostElement) {
+    _formWidth = null;
+    _colSpanClass = null;
+    _previousColSpan = null;
+    constructor(renderer, localizationService, hostElement, formService) {
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.hostElement = hostElement;
+        this.formService = formService;
         validatePackage(packageMetadata);
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
         }));
+        this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
+            this._formWidth = width;
+            this.updateColSpanClass();
+        }));
     }
     ngAfterViewInit() {
         this.setDescription();
@@ -126,6 +146,11 @@ export class FormFieldComponent {
     ngAfterViewChecked() {
         this.updateDescription();
     }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -230,14 +255,29 @@ export class FormFieldComponent {
         this.subscriptions.add(this.errorChildren.changes.subscribe(() => this.updateDescription()));
         this.subscriptions.add(this.hintChildren.changes.subscribe(() => this.updateDescription()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
+    updateColSpanClass() {
+        const hostElement = this.hostElement.nativeElement;
+        const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
+        if (newColSpan !== this._previousColSpan) {
+            const newClass = generateColSpanClass(newColSpan);
+            if (this._colSpanClass) {
+                this.renderer.removeClass(hostElement, this._colSpanClass);
+            }
+            if (newClass) {
+                this.renderer.addClass(hostElement, newClass);
+            }
+            this._colSpanClass = newClass;
+            this._previousColSpan = newColSpan;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i2.FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors", colSpan: "colSpan" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.formfield'
             }
-        ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="label, kendo-label"></ng-content>
         <div class="k-form-field-wrap">
             <ng-content></ng-content>
@@ -268,7 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.FormService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-form-field']
             }], direction: [{
@@ -301,4 +341,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showErrors: [{
                 type: Input
+            }], colSpan: [{
+                type: Input
             }] } });

package/esm2022/formfieldset/formfieldset.component.mjs

@@ -0,0 +1,170 @@
+/**-----------------------------------------------------------------------------------------
+* 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, 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, DEFAULT_FORMFIELDSET_GUTTERS, generateColSpanClass, generateColumnClass, generateGuttersStyling } from '../form/utils';
+import { Subscription } from 'rxjs';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/formservice.service";
+/**
+ *  Represents the Kendo UI FormFieldSet component for Angular.
+ *
+ * @remarks
+ * Supported children components are: {@link FormFieldComponent} and {@link FormSeparatorComponent}.
+ */
+export class FormFieldSetComponent {
+    elementRef;
+    renderer;
+    formService;
+    cdr;
+    formFieldSetClass = true;
+    /**
+     * Defines the legend for the fieldset.
+     */
+    legend;
+    /**
+     * Defines the number of columns of the fieldset.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols;
+    /**
+     * Defines the gutters for the fieldset.
+     * You can specify gutters for rows and columns.
+     */
+    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.
+     */
+    colSpan;
+    /**
+     * @hidden
+     */
+    columnsClass = '';
+    /**
+     * @hidden
+     */
+    guttersStyle = '';
+    _formColumnsNumber;
+    _colSpanClass = null;
+    _formWidth = null;
+    _formGutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
+    _previousColSpan = null;
+    _previousCols = null;
+    _previousGutters;
+    subs = new Subscription();
+    constructor(elementRef, renderer, formService, cdr) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.formService = formService;
+        this.cdr = cdr;
+        validatePackage(packageMetadata);
+    }
+    ngOnInit() {
+        this.subs.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
+            this._formWidth = width;
+            this.applyColumns();
+            this.applyGutters();
+            this.updateColSpanClass();
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+        if (changes['cols']) {
+            this.applyColumns();
+        }
+        if (changes['gutters']) {
+            this.applyGutters();
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    applyColumns() {
+        const containerWidth = this._formWidth;
+        const newColumnsNumber = calculateColumns(this.cols, containerWidth);
+        if (newColumnsNumber !== this._previousCols) {
+            this._formColumnsNumber = newColumnsNumber;
+            this.updateColumnClasses();
+            this._previousCols = newColumnsNumber;
+        }
+    }
+    applyGutters() {
+        const containerWidth = this._formWidth;
+        const newGutters = calculateGutters(this.gutters, containerWidth);
+        if (newGutters && (newGutters.cols !== this._previousGutters?.cols || newGutters.rows !== this._previousGutters?.rows)) {
+            this._formGutters = newGutters;
+            this.updateGutterClasses();
+            this._previousGutters = newGutters;
+        }
+    }
+    updateColumnClasses() {
+        this.columnsClass = generateColumnClass(this._formColumnsNumber);
+        this.cdr.detectChanges();
+    }
+    updateGutterClasses() {
+        this.guttersStyle = generateGuttersStyling(this._formGutters, { ...DEFAULT_FORMFIELDSET_GUTTERS });
+        this.cdr.detectChanges();
+    }
+    updateColSpanClass() {
+        const hostElement = this.elementRef.nativeElement;
+        const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
+        if (newColSpan !== this._previousColSpan) {
+            const newClass = generateColSpanClass(newColSpan);
+            if (this._colSpanClass) {
+                this.renderer.removeClass(hostElement, this._colSpanClass);
+            }
+            if (newClass) {
+                this.renderer.addClass(hostElement, newClass);
+            }
+            this._colSpanClass = newClass;
+            this._previousColSpan = newColSpan;
+            this.cdr.detectChanges();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.FormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldSetComponent, isStandalone: true, selector: "fieldset[kendoFormFieldSet]", inputs: { legend: "legend", cols: "cols", gutters: "gutters", colSpan: "colSpan" }, host: { properties: { "class.k-form-fieldset": "this.formFieldSetClass" } }, exportAs: ["kendoFormFieldSet"], usesOnChanges: true, ngImport: i0, template: `
+        <legend *ngIf="legend" class="k-form-legend">
+            {{ legend }}
+        </legend>
+        <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"] }, { 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,
+            args: [{
+                    exportAs: 'kendoFormFieldSet',
+                    selector: 'fieldset[kendoFormFieldSet]',
+                    template: `
+        <legend *ngIf="legend" class="k-form-legend">
+            {{ legend }}
+        </legend>
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
+            <ng-content></ng-content>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgStyle],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formFieldSetClass: [{
+                type: HostBinding,
+                args: ['class.k-form-fieldset']
+            }], legend: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], gutters: [{
+                type: Input
+            }], colSpan: [{
+                type: Input
+            }] } });

package/esm2022/index.mjs

@@ -35,10 +35,15 @@ export * from './colorpicker/events';
 export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
+// Form Components
+export { FormComponent } from './form/form.component';
+export { FormSeparatorComponent } from './form/formseparator.component';
+export { FormFieldSetComponent } from './formfieldset/formfieldset.component';
 export { HintComponent } from './formfield/hint.component';
 export { ErrorComponent } from './formfield/error.component';
 export { FormFieldComponent } from './formfield/formfield.component';
 export { FormFieldModule } from './formfield.module';
+export { FormModule } from './form.module';
 //TextBox Component
 export { TextBoxComponent } from './textbox/textbox.component';
 export { TextBoxPrefixTemplateDirective } from './textbox/textbox-prefix.directive';

package/esm2022/inputs.module.mjs

@@ -30,27 +30,30 @@ import * as i17 from "./radiobutton/radiobutton.component";
 import * as i18 from "./radiobutton/radiobutton.directive";
 import * as i19 from "./switch/switch.component";
 import * as i20 from "./switch/localization/custom-messages.component";
-import * as i21 from "./formfield/formfield.component";
-import * as i22 from "./formfield/hint.component";
-import * as i23 from "./formfield/error.component";
-import * as i24 from "./slider/slider.component";
-import * as i25 from "./slider/localization/custom-messages.component";
-import * as i26 from "./sliders-common/label-template.directive";
-import * as i27 from "./rangeslider/rangeslider.component";
-import * as i28 from "./rangeslider/localization/custom-messages.component";
-import * as i29 from "./rating/rating.component";
-import * as i30 from "./rating/directives/rating-item.directive";
-import * as i31 from "./rating/directives/rating-hovered-item.directive";
-import * as i32 from "./rating/directives/rating-selected-item.directive";
-import * as i33 from "./signature/signature.component";
-import * as i34 from "./signature/localization/custom-messages.component";
-import * as i35 from "./colorpicker/colorpicker.component";
-import * as i36 from "./colorpicker/localization/custom-messages.component";
-import * as i37 from "./colorpicker/flatcolorpicker.component";
-import * as i38 from "./colorpicker/color-gradient.component";
-import * as i39 from "./colorpicker/color-palette.component";
-import * as i40 from "./otpinput/otpinput.component";
-import * as i41 from "./otpinput/localization/custom-messages.component";
+import * as i21 from "./form/form.component";
+import * as i22 from "./form/formseparator.component";
+import * as i23 from "./formfieldset/formfieldset.component";
+import * as i24 from "./formfield/formfield.component";
+import * as i25 from "./formfield/hint.component";
+import * as i26 from "./formfield/error.component";
+import * as i27 from "./slider/slider.component";
+import * as i28 from "./slider/localization/custom-messages.component";
+import * as i29 from "./sliders-common/label-template.directive";
+import * as i30 from "./rangeslider/rangeslider.component";
+import * as i31 from "./rangeslider/localization/custom-messages.component";
+import * as i32 from "./rating/rating.component";
+import * as i33 from "./rating/directives/rating-item.directive";
+import * as i34 from "./rating/directives/rating-hovered-item.directive";
+import * as i35 from "./rating/directives/rating-selected-item.directive";
+import * as i36 from "./signature/signature.component";
+import * as i37 from "./signature/localization/custom-messages.component";
+import * as i38 from "./colorpicker/colorpicker.component";
+import * as i39 from "./colorpicker/localization/custom-messages.component";
+import * as i40 from "./colorpicker/flatcolorpicker.component";
+import * as i41 from "./colorpicker/color-gradient.component";
+import * as i42 from "./colorpicker/color-palette.component";
+import * as i43 from "./otpinput/otpinput.component";
+import * as i44 from "./otpinput/localization/custom-messages.component";
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Inputs components.
@@ -74,8 +77,8 @@ import * as i41 from "./otpinput/localization/custom-messages.component";
  */
 export class InputsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, i40.OTPInputComponent, i41.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, i40.OTPInputComponent, i41.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i24.SliderComponent, i27.RangeSliderComponent, i29.RatingComponent, i33.SignatureComponent, i35.ColorPickerComponent, i37.FlatColorPickerComponent, i38.ColorGradientComponent, i40.OTPInputComponent, i7.SeparatorComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormComponent, i22.FormSeparatorComponent, i23.FormFieldSetComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i27.SliderComponent, i28.SliderCustomMessagesComponent, i29.LabelTemplateDirective, i30.RangeSliderComponent, i31.RangeSliderCustomMessagesComponent, i29.LabelTemplateDirective, i32.RatingComponent, i33.RatingItemTemplateDirective, i34.RatingHoveredItemTemplateDirective, i35.RatingSelectedItemTemplateDirective, i36.SignatureComponent, i37.SignatureCustomMessagesComponent, i38.ColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i40.FlatColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i41.ColorGradientComponent, i39.ColorPickerCustomMessagesComponent, i42.ColorPaletteComponent, i39.ColorPickerCustomMessagesComponent, i43.OTPInputComponent, i44.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormComponent, i22.FormSeparatorComponent, i23.FormFieldSetComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i27.SliderComponent, i28.SliderCustomMessagesComponent, i29.LabelTemplateDirective, i30.RangeSliderComponent, i31.RangeSliderCustomMessagesComponent, i29.LabelTemplateDirective, i32.RatingComponent, i33.RatingItemTemplateDirective, i34.RatingHoveredItemTemplateDirective, i35.RatingSelectedItemTemplateDirective, i36.SignatureComponent, i37.SignatureCustomMessagesComponent, i38.ColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i40.FlatColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i41.ColorGradientComponent, i39.ColorPickerCustomMessagesComponent, i42.ColorPaletteComponent, i39.ColorPickerCustomMessagesComponent, i43.OTPInputComponent, i44.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i21.FormComponent, i27.SliderComponent, i30.RangeSliderComponent, i32.RatingComponent, i36.SignatureComponent, i38.ColorPickerComponent, i40.FlatColorPickerComponent, i41.ColorGradientComponent, i43.OTPInputComponent, i7.SeparatorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,

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,10 +5,10 @@
 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 } 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, replaceMessagePlaceholder } from "../common/utils";
+import { SIZE_MAP, areSame } from "../common/utils";
 import { L10N_PREFIX, LocalizationService } from "@progress/kendo-angular-l10n";
 import { OTPInputSeparatorComponent } from "./otpinput-separator.component";
 import { take } from "rxjs/operators";
@@ -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();