@progress/kendo-angular-inputs 19.3.0-develop.11 → 19.3.0-develop.12

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/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 { calculateColumns, calculateGutters, DEFAULT_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_GUTTERS };
     /**
      * @hidden
      */
@@ -44,21 +44,19 @@ export class FormComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
-    /**
-     * @hidden
-     */
-    colsGutterClass = '';
+    guttersStyle = '';
     /**
      * @hidden
      */
     showLicenseWatermark = false;
-    formClass = true;
+    get formClass() {
+        return 'k-form k-form-md';
+    }
     get horizontalClass() {
         return this.orientation === 'horizontal';
     }
     _formColumnsNumber;
-    _formGutters;
+    _formGutters = { ...DEFAULT_GUTTERS };
     constructor(element, cdr, formService) {
         this.element = element;
         this.cdr = cdr;
@@ -75,7 +73,7 @@ export class FormComponent {
         if (changes['cols']) {
             this.applyColumns();
         }
-        else if (changes['gutters']) {
+        if (changes['gutters']) {
             this.applyGutters();
         }
     }
@@ -109,18 +107,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);
     }
     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]" }] });
+    `, 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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -128,14 +124,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>
     `,
                     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 +141,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,11 @@
 * 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_GUTTERS = { rows: '0px', cols: '32px' };
 /**
  * @hidden
  */
@@ -17,7 +22,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 +31,7 @@ export function processBreakpoints(breakpoints, containerWidth) {
             return breakpoint.value;
         }
     }
-    return null;
+    return '';
 }
 /**
  * @hidden
@@ -36,7 +41,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 +58,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 +80,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 +107,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 +123,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) => {
+    const rows = processCssValue(gutters?.rows);
+    const cols = processCssValue(gutters?.cols);
+    return `${rows ?? DEFAULT_GUTTERS.rows} ${cols ?? DEFAULT_GUTTERS.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_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;
@@ -50,18 +50,14 @@ export class FormFieldSetComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
-    /**
-     * @hidden
-     */
-    colsGutterClass = '';
+    guttersStyle = '';
     _formColumnsNumber;
     _colSpanClass = null;
     _formWidth = null;
-    _formGutters = null;
+    _formGutters = { ...DEFAULT_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);
+        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/package-metadata.mjs

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

package/fesm2022/progress-kendo-angular-inputs.mjs

@@ -10,7 +10,7 @@ import { take, tap, filter, concatMap, startWith, takeUntil, skip, debounceTime,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import * as i7 from '@progress/kendo-angular-common';
-import { Keys, guid, anyChanged, isDocumentAvailable, hasObservers, KendoInput, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, replaceMessagePlaceholder, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
+import { Keys, guid, anyChanged, isDocumentAvailable, hasObservers, KendoInput, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, processCssValue, replaceMessagePlaceholder, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, starIcon, starOutlineIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
@@ -550,8 +550,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752746728,
-    version: '19.3.0-develop.11',
+    publishDate: 1753180917,
+    version: '19.3.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -14215,6 +14215,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * @hidden
+ */
+const DEFAULT_GUTTERS = { rows: '0px', cols: '32px' };
 /**
  * @hidden
  */
@@ -14230,7 +14234,7 @@ function innerWidth(element) {
  */
 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;
@@ -14239,7 +14243,7 @@ function processBreakpoints(breakpoints, containerWidth) {
             return breakpoint.value;
         }
     }
-    return null;
+    return '';
 }
 /**
  * @hidden
@@ -14249,7 +14253,8 @@ 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;
@@ -14265,18 +14270,18 @@ 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)) {
@@ -14287,7 +14292,7 @@ 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)) {
@@ -14314,7 +14319,8 @@ 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;
 };
@@ -14329,13 +14335,12 @@ const generateColumnClass = (columnsNumber) => {
 /**
  * @hidden
  *
- * Generates CSS class names for gutters
+ * Generates CSS styles for gutters based on the provided gutters object.
  */
-const generateGutterClasses = (gutters) => {
-    return {
-        rows: gutters?.rows ? `k-gap-y-${gutters.rows}` : '',
-        cols: gutters?.cols ? `k-gap-x-${gutters.cols}` : ''
-    };
+const generateGuttersStyling = (gutters) => {
+    const rows = processCssValue(gutters?.rows);
+    const cols = processCssValue(gutters?.cols);
+    return `${rows ?? DEFAULT_GUTTERS.rows} ${cols ?? DEFAULT_GUTTERS.cols}`;
 };
 /**
  * @hidden
@@ -19022,7 +19027,7 @@ class FormComponent {
      * Defines the gutters for the form.
      * You can specify gutters for rows and columns.
      */
-    gutters;
+    gutters = { ...DEFAULT_GUTTERS };
     /**
      * @hidden
      */
@@ -19030,21 +19035,19 @@ class FormComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
-    /**
-     * @hidden
-     */
-    colsGutterClass = '';
+    guttersStyle = '';
     /**
      * @hidden
      */
     showLicenseWatermark = false;
-    formClass = true;
+    get formClass() {
+        return 'k-form k-form-md';
+    }
     get horizontalClass() {
         return this.orientation === 'horizontal';
     }
     _formColumnsNumber;
-    _formGutters;
+    _formGutters = { ...DEFAULT_GUTTERS };
     constructor(element, cdr, formService) {
         this.element = element;
         this.cdr = cdr;
@@ -19061,7 +19064,7 @@ class FormComponent {
         if (changes['cols']) {
             this.applyColumns();
         }
-        else if (changes['gutters']) {
+        if (changes['gutters']) {
             this.applyGutters();
         }
     }
@@ -19095,18 +19098,16 @@ 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);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 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]" }] });
+    `, 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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -19114,14 +19115,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>
     `,
                     standalone: true,
-                    imports: [NgClass, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
+                    imports: [NgClass, NgStyle, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: FormService }]; }, propDecorators: { orientation: [{
                 type: Input
@@ -19131,7 +19132,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']
@@ -19222,7 +19223,7 @@ 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;
@@ -19243,18 +19244,14 @@ class FormFieldSetComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
-    /**
-     * @hidden
-     */
-    colsGutterClass = '';
+    guttersStyle = '';
     _formColumnsNumber;
     _colSpanClass = null;
     _formWidth = null;
-    _formGutters = null;
+    _formGutters = { ...DEFAULT_GUTTERS };
     _previousColSpan = null;
     _previousCols = null;
-    _previousGutters = null;
+    _previousGutters;
     subs = new Subscription();
     constructor(elementRef, renderer, formService, cdr) {
         this.elementRef = elementRef;
@@ -19308,9 +19305,8 @@ class FormFieldSetComponent {
         this.cdr.detectChanges();
     }
     updateGutterClasses() {
-        const gutterClasses = generateGutterClasses(this._formGutters);
-        this.rowsGutterClass = gutterClasses.rows;
-        this.colsGutterClass = gutterClasses.cols;
+        this.guttersStyle = generateGuttersStyling(this._formGutters);
+        this.cdr.detectChanges();
     }
     updateColSpanClass() {
         const hostElement = this.elementRef.nativeElement;
@@ -19333,10 +19329,10 @@ 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,
@@ -19347,12 +19343,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: FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formFieldSetClass: [{
                 type: HostBinding,

package/form/form.component.d.ts

@@ -33,7 +33,7 @@ export declare class FormComponent implements AfterContentInit, OnChanges {
      * Defines the gutters for the form.
      * You can specify gutters for rows and columns.
      */
-    gutters: number | ResponsiveFormBreakPoint[] | Gutters;
+    gutters: number | string | ResponsiveFormBreakPoint[] | Gutters;
     /**
      * @hidden
      */
@@ -41,16 +41,12 @@ export declare class FormComponent implements AfterContentInit, OnChanges {
     /**
      * @hidden
      */
-    rowsGutterClass: string;
-    /**
-     * @hidden
-     */
-    colsGutterClass: string;
+    guttersStyle: string;
     /**
      * @hidden
      */
     showLicenseWatermark: boolean;
-    formClass: boolean;
+    get formClass(): string;
     get horizontalClass(): boolean;
     private _formColumnsNumber;
     private _formGutters;

package/form/utils.d.ts

@@ -4,6 +4,10 @@
 *-------------------------------------------------------------------------------------------*/
 import { Gutters } from '../common/models/gutters';
 import { ResponsiveFormBreakPoint } from '../common/models/responsive-breakpoints';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_GUTTERS: Gutters;
 /**
  * @hidden
  */
@@ -11,7 +15,7 @@ export declare function innerWidth(element: HTMLElement): number;
 /**
  * @hidden
  */
-export declare function processBreakpoints(breakpoints: ResponsiveFormBreakPoint[], containerWidth: number): number | null;
+export declare function processBreakpoints(breakpoints: ResponsiveFormBreakPoint[], containerWidth: number): number | string;
 /**
  * @hidden
  */
@@ -21,16 +25,16 @@ export declare const calculateColumns: (cols: number | ResponsiveFormBreakPoint[
  *
  * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
  */
-export declare const calculateGutters: (gutters: number | ResponsiveFormBreakPoint[] | Gutters | undefined, containerWidth: number) => {
-    cols: number;
-    rows: number;
+export declare const calculateGutters: (gutters: number | string | ResponsiveFormBreakPoint[] | Gutters | undefined, containerWidth: number) => {
+    cols: number | string;
+    rows: number | string;
 } | null;
 /**
  * @hidden
  *
  * Calculates column span value based on responsive breakpoints or fixed number
  */
-export declare const calculateColSpan: (colSpan: number | ResponsiveFormBreakPoint[] | undefined, containerWidth: number) => number | null;
+export declare const calculateColSpan: (colSpan: number | ResponsiveFormBreakPoint[], containerWidth: number) => number | null;
 /**
  * @hidden
  *
@@ -40,15 +44,12 @@ export declare const generateColumnClass: (columnsNumber: number | null) => stri
 /**
  * @hidden
  *
- * Generates CSS class names for gutters
- */
-export declare const generateGutterClasses: (gutters: {
-    cols: number;
-    rows: number;
-} | null) => {
-    rows: string;
-    cols: string;
-};
+ * Generates CSS styles for gutters based on the provided gutters object.
+ */
+export declare const generateGuttersStyling: (gutters: {
+    cols?: number | string;
+    rows?: number | string;
+} | null) => string;
 /**
  * @hidden
  *

package/formfieldset/formfieldset.component.d.ts

@@ -24,7 +24,7 @@ export declare class FormFieldSetComponent implements OnInit, OnChanges {
      */
     legend: string;
     /**
-     * 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: number | ResponsiveFormBreakPoint[];
@@ -32,7 +32,7 @@ export declare class FormFieldSetComponent implements OnInit, OnChanges {
      * Defines the gutters for the fieldset.
      * You can specify gutters for rows and columns.
      */
-    gutters: number | ResponsiveFormBreakPoint[] | Gutters;
+    gutters: number | string | ResponsiveFormBreakPoint[] | Gutters;
     /**
      * Defines the colspan for the fieldset related to the parent Form component columns.
      * Can be a number or an array of responsive breakpoints.
@@ -45,11 +45,7 @@ export declare class FormFieldSetComponent implements OnInit, OnChanges {
     /**
      * @hidden
      */
-    rowsGutterClass: string;
-    /**
-     * @hidden
-     */
-    colsGutterClass: string;
+    guttersStyle: string;
     private _formColumnsNumber;
     private _colSpanClass;
     private _formWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "19.3.0-develop.11",
+  "version": "19.3.0-develop.12",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -28,7 +28,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1752746728,
+      "publishDate": 1753180917,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -40,20 +40,20 @@
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.11",
-    "@progress/kendo-angular-common": "19.3.0-develop.11",
-    "@progress/kendo-angular-utils": "19.3.0-develop.11",
-    "@progress/kendo-angular-navigation": "19.3.0-develop.11",
-    "@progress/kendo-angular-dialog": "19.3.0-develop.11",
-    "@progress/kendo-angular-intl": "19.3.0-develop.11",
-    "@progress/kendo-angular-l10n": "19.3.0-develop.11",
-    "@progress/kendo-angular-popup": "19.3.0-develop.11",
-    "@progress/kendo-angular-icons": "19.3.0-develop.11",
+    "@progress/kendo-angular-buttons": "19.3.0-develop.12",
+    "@progress/kendo-angular-common": "19.3.0-develop.12",
+    "@progress/kendo-angular-utils": "19.3.0-develop.12",
+    "@progress/kendo-angular-navigation": "19.3.0-develop.12",
+    "@progress/kendo-angular-dialog": "19.3.0-develop.12",
+    "@progress/kendo-angular-intl": "19.3.0-develop.12",
+    "@progress/kendo-angular-l10n": "19.3.0-develop.12",
+    "@progress/kendo-angular-popup": "19.3.0-develop.12",
+    "@progress/kendo-angular-icons": "19.3.0-develop.12",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.11",
+    "@progress/kendo-angular-schematics": "19.3.0-develop.12",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"