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

package/common/formservice.service.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class FormService {
+    formWidth: BehaviorSubject<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FormService>;
+}

package/common/models/gutters.d.ts

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+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.
+ */
+export interface Gutters {
+    /**
+     * Defines the gutters for the columns in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the rows in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    rows?: number | ResponsiveFormBreakPoint[];
+}

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

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Allows to define responsive breakpoints for form controls.
+ * 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.
+ */
+export interface ResponsiveFormBreakPoint {
+    /**
+     * The minimum width for this breakpoint in pixels.
+     */
+    minWidth?: number;
+    /**
+     * The maximum 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.
+     */
+    value: number;
+}

package/common/utils.d.ts

@@ -65,7 +65,3 @@ export declare const COMPONENT_TYPE: InjectionToken<ComponentType>;
  * @hidden
  */
 export type ComponentType = 'radio' | 'checkbox';
-/**
- * @hidden
- */
-export declare const replaceMessagePlaceholder: (message: string, name: string, value: string) => string;

package/directives.d.ts

@@ -43,6 +43,9 @@ import { TextBoxComponent } from "./textbox/textbox.component";
 import { TextBoxDirective } from "./textbox/textbox.directive";
 import { OTPInputComponent } from "./otpinput/otpinput.component";
 import { OTPInputCustomMessagesComponent } from "./otpinput/localization/custom-messages.component";
+import { FormComponent } from "./form/form.component";
+import { FormSeparatorComponent } from "./form/formseparator.component";
+import { FormFieldSetComponent } from "./formfieldset/formfieldset.component";
 /**
  * Use the `KENDO_TEXTBOX` utility array to add all TextBox-related components and directives to a standalone Angular component.
  *
@@ -178,6 +181,21 @@ export declare const KENDO_SWITCH: readonly [typeof SwitchComponent, typeof Swit
  * ```
  */
 export declare const KENDO_FORMFIELD: readonly [typeof FormFieldComponent, typeof HintComponent, typeof ErrorComponent];
+/**
+ * Use the `KENDO_FORM` utility array to add all Form-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_FORM } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FORM],
+ *   template: `<form kendoForm>...</form>`
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+export declare const KENDO_FORM: readonly [typeof FormComponent, typeof FormSeparatorComponent, typeof FormFieldSetComponent, typeof FormFieldComponent, typeof HintComponent, typeof ErrorComponent];
 /**
  * Use the `KENDO_SLIDER` utility array to add all Slider-related components and directives to a standalone Angular component.
  *
@@ -312,4 +330,4 @@ export declare const KENDO_COLORGRADIENT: readonly [typeof ColorGradientComponen
  * export class MyComponent {}
  * ```
  */
-export declare const KENDO_INPUTS: readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, typeof TextBoxPrefixTemplateDirective, typeof TextBoxCustomMessagesComponent, typeof PrefixTemplateDirective, typeof SuffixTemplateDirective, typeof SeparatorComponent, typeof NumericTextBoxComponent, typeof NumericTextBoxCustomMessagesComponent, typeof PrefixTemplateDirective, typeof SuffixTemplateDirective, typeof SeparatorComponent, typeof MaskedTextBoxComponent, typeof PrefixTemplateDirective, typeof SuffixTemplateDirective, typeof SeparatorComponent, typeof TextAreaComponent, typeof TextAreaDirective, typeof TextAreaPrefixComponent, typeof TextAreaSuffixComponent, typeof SeparatorComponent, typeof CheckBoxComponent, typeof CheckBoxDirective, typeof RadioButtonComponent, typeof RadioButtonDirective, typeof SwitchComponent, typeof SwitchCustomMessagesComponent, typeof FormFieldComponent, typeof HintComponent, typeof ErrorComponent, typeof SliderComponent, typeof SliderCustomMessagesComponent, typeof LabelTemplateDirective, typeof RangeSliderComponent, typeof RangeSliderCustomMessagesComponent, typeof LabelTemplateDirective, typeof RatingComponent, typeof RatingItemTemplateDirective, typeof RatingHoveredItemTemplateDirective, typeof RatingSelectedItemTemplateDirective, typeof SignatureComponent, typeof SignatureCustomMessagesComponent, typeof ColorPickerComponent, typeof ColorPickerCustomMessagesComponent, typeof FlatColorPickerComponent, typeof ColorPickerCustomMessagesComponent, typeof ColorGradientComponent, typeof ColorPickerCustomMessagesComponent, typeof ColorPaletteComponent, typeof ColorPickerCustomMessagesComponent, typeof OTPInputComponent, typeof OTPInputCustomMessagesComponent];
+export declare const KENDO_INPUTS: readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, typeof TextBoxPrefixTemplateDirective, typeof TextBoxCustomMessagesComponent, typeof PrefixTemplateDirective, typeof SuffixTemplateDirective, typeof SeparatorComponent, typeof NumericTextBoxComponent, typeof NumericTextBoxCustomMessagesComponent, typeof PrefixTemplateDirective, typeof SuffixTemplateDirective, typeof SeparatorComponent, typeof MaskedTextBoxComponent, typeof PrefixTemplateDirective, typeof SuffixTemplateDirective, typeof SeparatorComponent, typeof TextAreaComponent, typeof TextAreaDirective, typeof TextAreaPrefixComponent, typeof TextAreaSuffixComponent, typeof SeparatorComponent, typeof CheckBoxComponent, typeof CheckBoxDirective, typeof RadioButtonComponent, typeof RadioButtonDirective, typeof SwitchComponent, typeof SwitchCustomMessagesComponent, typeof FormComponent, typeof FormSeparatorComponent, typeof FormFieldSetComponent, typeof FormFieldComponent, typeof HintComponent, typeof ErrorComponent, typeof FormFieldComponent, typeof HintComponent, typeof ErrorComponent, typeof SliderComponent, typeof SliderCustomMessagesComponent, typeof LabelTemplateDirective, typeof RangeSliderComponent, typeof RangeSliderCustomMessagesComponent, typeof LabelTemplateDirective, typeof RatingComponent, typeof RatingItemTemplateDirective, typeof RatingHoveredItemTemplateDirective, typeof RatingSelectedItemTemplateDirective, typeof SignatureComponent, typeof SignatureCustomMessagesComponent, typeof ColorPickerComponent, typeof ColorPickerCustomMessagesComponent, typeof FlatColorPickerComponent, typeof ColorPickerCustomMessagesComponent, typeof ColorGradientComponent, typeof ColorPickerCustomMessagesComponent, typeof ColorPaletteComponent, typeof ColorPickerCustomMessagesComponent, typeof OTPInputComponent, typeof OTPInputCustomMessagesComponent];

package/esm2022/common/formservice.service.mjs

@@ -0,0 +1,21 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class FormService {
+    formWidth = new BehaviorSubject(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });

package/esm2022/common/models/gutters.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/common/models/responsive-breakpoints.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/common/utils.mjs

@@ -86,7 +86,3 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
  * Used to differentiate between the Radio and CheckBox components in their base class.
  */
 export const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');
-/**
- * @hidden
- */
-export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);

package/esm2022/directives.mjs

@@ -43,6 +43,9 @@ import { TextBoxComponent } from "./textbox/textbox.component";
 import { TextBoxDirective } from "./textbox/textbox.directive";
 import { OTPInputComponent } from "./otpinput/otpinput.component";
 import { OTPInputCustomMessagesComponent } from "./otpinput/localization/custom-messages.component";
+import { FormComponent } from "./form/form.component";
+import { FormSeparatorComponent } from "./form/formseparator.component";
+import { FormFieldSetComponent } from "./formfieldset/formfieldset.component";
 /**
  * Use the `KENDO_TEXTBOX` utility array to add all TextBox-related components and directives to a standalone Angular component.
  *
@@ -221,6 +224,26 @@ export const KENDO_FORMFIELD = [
     HintComponent,
     ErrorComponent
 ];
+/**
+ * Use the `KENDO_FORM` utility array to add all Form-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_FORM } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FORM],
+ *   template: `<form kendoForm>...</form>`
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+export const KENDO_FORM = [
+    FormComponent,
+    FormSeparatorComponent,
+    FormFieldSetComponent,
+    ...KENDO_FORMFIELD
+];
 /**
  * Use the `KENDO_SLIDER` utility array to add all Slider-related components and directives to a standalone Angular component.
  *
@@ -391,6 +414,7 @@ export const KENDO_INPUTS = [
     ...KENDO_CHECKBOX,
     ...KENDO_RADIOBUTTON,
     ...KENDO_SWITCH,
+    ...KENDO_FORM,
     ...KENDO_FORMFIELD,
     ...KENDO_SLIDER,
     ...KENDO_RANGESLIDER,

package/esm2022/form/form.component.mjs

@@ -0,0 +1,152 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { 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 { FormService } from '../common/formservice.service';
+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 Form component for Angular.
+ *
+ * @remarks
+ * Supported children components are: {@link FormFieldComponent}, {@link FormSeparatorComponent}, and {@link FormFieldSetComponent}.
+ */
+export class FormComponent {
+    element;
+    cdr;
+    formService;
+    /**
+     * Defines the orientation of the form.
+     *
+     * @default 'vertical'
+     */
+    orientation = 'vertical';
+    /**
+     * Defines the number of columns in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols;
+    /**
+     * Defines the gutters for the form.
+     * You can specify gutters for rows and columns.
+     */
+    gutters;
+    /**
+     * @hidden
+     */
+    columnsClass = '';
+    /**
+     * @hidden
+     */
+    rowsGutterClass = '';
+    /**
+     * @hidden
+     */
+    colsGutterClass = '';
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    formClass = true;
+    get horizontalClass() {
+        return this.orientation === 'horizontal';
+    }
+    _formColumnsNumber;
+    _formGutters;
+    constructor(element, cdr, formService) {
+        this.element = element;
+        this.cdr = cdr;
+        this.formService = formService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+    }
+    ngAfterContentInit() {
+        this.applyColumns();
+        this.applyGutters();
+        this.formService.formWidth.next(innerWidth(this.element.nativeElement));
+    }
+    ngOnChanges(changes) {
+        if (changes['cols']) {
+            this.applyColumns();
+        }
+        else if (changes['gutters']) {
+            this.applyGutters();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        this.formService.formWidth.next(innerWidth(this.element.nativeElement));
+        const previousColumnsNumber = this._formColumnsNumber;
+        const previousGutters = this._formGutters;
+        this.applyColumns();
+        this.applyGutters();
+        if (previousColumnsNumber !== this._formColumnsNumber) {
+            this.cdr.detectChanges();
+        }
+        if (previousGutters?.cols !== this._formGutters?.cols || previousGutters?.rows !== this._formGutters?.rows) {
+            this.cdr.detectChanges();
+        }
+    }
+    applyColumns() {
+        const containerWidth = innerWidth(this.element.nativeElement);
+        this._formColumnsNumber = calculateColumns(this.cols, containerWidth);
+        this.updateColumnClasses();
+    }
+    applyGutters() {
+        const containerWidth = innerWidth(this.element.nativeElement);
+        this._formGutters = calculateGutters(this.gutters, containerWidth);
+        this.updateGutterClasses();
+    }
+    updateColumnClasses() {
+        this.columnsClass = generateColumnClass(this._formColumnsNumber);
+    }
+    updateGutterClasses() {
+        const gutterClasses = generateGutterClasses(this._formGutters);
+        this.rowsGutterClass = gutterClasses.rows;
+        this.colsGutterClass = gutterClasses.cols;
+    }
+    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]">
+            <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]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoForm',
+                    selector: 'form[kendoForm]',
+                    template: `
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+            <ng-content></ng-content>
+        </div>
+        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FormService }]; }, propDecorators: { orientation: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], gutters: [{
+                type: Input
+            }], formClass: [{
+                type: HostBinding,
+                args: ['class.k-form']
+            }], horizontalClass: [{
+                type: HostBinding,
+                args: ['class.k-form-horizontal']
+            }] } });

package/esm2022/form/formseparator.component.mjs

@@ -0,0 +1,80 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { calculateColSpan, generateColSpanClass } from './utils';
+import { Subscription } from 'rxjs';
+import { FormService } from '../common/formservice.service';
+import { filter } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/formservice.service";
+/**
+ *  Represents the Kendo UI Form Separator component for Angular.
+ */
+export class FormSeparatorComponent {
+    renderer;
+    hostElement;
+    formService;
+    hostClass = true;
+    /**
+     * Defines the colspan for the separator element related to the parent Form component columns.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    colSpan;
+    _formWidth = null;
+    _colSpanClass = null;
+    _previousColSpan = null;
+    subscriptions = new Subscription();
+    constructor(renderer, hostElement, formService) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.formService = formService;
+        validatePackage(packageMetadata);
+        this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
+            this._formWidth = width;
+            this.updateColSpanClass();
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    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: FormSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSeparatorComponent, isStandalone: true, selector: "kendo-form-separator", inputs: { colSpan: "colSpan" }, host: { properties: { "class.k-form-separator": "this.hostClass" } }, exportAs: ["kendoFormSeparator"], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoFormSeparator',
+                    selector: 'kendo-form-separator',
+                    template: ``,
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.FormService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-form-separator']
+            }], colSpan: [{
+                type: Input
+            }] } });

package/esm2022/form/utils.mjs

@@ -0,0 +1,134 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @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 null;
+    }
+    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 null;
+}
+/**
+ * @hidden
+ */
+export const calculateColumns = (cols, containerWidth) => {
+    if (!cols) {
+        return null;
+    }
+    if (Array.isArray(cols) && cols.length > 0) {
+        return processBreakpoints(cols, containerWidth);
+    }
+    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') {
+        return { cols: gutters, rows: gutters };
+    }
+    else if (Array.isArray(gutters)) {
+        const processedGutters = processBreakpoints(gutters, containerWidth);
+        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') {
+                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') {
+                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) {
+        return processBreakpoints(colSpan, containerWidth);
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class names for columns
+ */
+export const generateColumnClass = (columnsNumber) => {
+    return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class names for gutters
+ */
+export const generateGutterClasses = (gutters) => {
+    return {
+        rows: gutters?.rows ? `k-gap-y-${gutters.rows}` : '',
+        cols: gutters?.cols ? `k-gap-x-${gutters.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]
+                }]
+        }] });