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

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, normalizeNumpadKeys, 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, getLicenseMessage, 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: 1752672139,
-    version: '19.3.0-develop.9',
+    publishDate: 1755030422,
+    version: '19.3.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1263,7 +1263,9 @@ class SliderComponent extends SliderBase {
     onKeyDown = (e) => {
         const options = this.getProps();
         const { max, min } = options;
-        const handler = this.keyBinding[e.keyCode];
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const code = normalizeNumpadKeys(e);
+        const handler = this.keyBinding[code];
         if (this.isDisabled || !handler) {
             return;
         }
@@ -1448,7 +1450,7 @@ class SliderComponent extends SliderBase {
                 cursorInsideWrapper = false;
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
-                if (args.keyCode === Keys.Tab) {
+                if (args.code === Keys.Tab) {
                     tabbing = true;
                 }
                 else {
@@ -2026,7 +2028,9 @@ class RangeSliderComponent extends SliderBase {
         this.value = this.value || [this.min, this.min];
         const options = this.getProps();
         const { max, min } = options;
-        const handler = this.keyBinding[e.keyCode];
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const code = normalizeNumpadKeys(e);
+        const handler = this.keyBinding[code];
         if (this.isDisabled || !handler) {
             return;
         }
@@ -2218,7 +2222,7 @@ class RangeSliderComponent extends SliderBase {
                 cursorInsideWrapper = false;
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
-                if (args.keyCode === Keys.Tab) {
+                if (args.code === Keys.Tab) {
                     tabbing = true;
                 }
                 else {
@@ -2797,8 +2801,8 @@ class SwitchComponent {
      * @hidden
      */
     keyDownHandler(e) {
-        const keyCode = e.keyCode;
-        if (this.isEnabled && (keyCode === Keys.Space || keyCode === Keys.Enter)) {
+        const keyCode = e.code;
+        if (this.isEnabled && (keyCode === Keys.Space || keyCode === Keys.Enter || keyCode === Keys.NumpadEnter)) {
             this.changeValue(!this.checked);
             e.preventDefault();
         }
@@ -3693,7 +3697,7 @@ class SharedInputEventsDirective {
                 cursorInsideWrapper = false;
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
-                if (args.keyCode === Keys.Tab) {
+                if (args.code === Keys.Tab) {
                     tabbing = true;
                 }
                 else {
@@ -4375,10 +4379,11 @@ 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) {
@@ -4390,7 +4395,7 @@ class NumericTextBoxComponent {
             end: input.selectionEnd,
             start: input.selectionStart
         };
-        this.pressedKey = e.keyCode;
+        this.pressedKey = code;
     };
     /**
      * @hidden
@@ -10854,8 +10859,9 @@ class ColorPaletteComponent {
      * @hidden
      */
     handleKeydown(event) {
+        const code = normalizeNumpadKeys(event);
         const isRTL = this.direction === 'rtl';
-        switch (event.keyCode) {
+        switch (code) {
             case Keys.ArrowDown:
                 this.handleCellNavigation(0, 1);
                 break;
@@ -13403,7 +13409,8 @@ class ColorPickerComponent {
      * @hidden
      */
     handleWrapperKeyDown(event) {
-        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
+        const code = normalizeNumpadKeys(event);
+        if (code === Keys.ArrowDown || code === Keys.Enter) {
             event.preventDefault();
             this.ngZone.run(() => {
                 this.toggleWithEvents(true);
@@ -13439,11 +13446,11 @@ class ColorPickerComponent {
      * @hidden
      */
     handlePopupKeyDown(event) {
-        if (event.keyCode === Keys.Escape) {
+        if (event.code === Keys.Escape) {
             this.toggleWithEvents(false);
             this.host.nativeElement.focus();
         }
-        if (event.keyCode === Keys.Tab) {
+        if (event.code === Keys.Tab) {
             const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             const nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {
@@ -14215,6 +14222,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * @hidden
+ */
+const DEFAULT_FORM_GUTTERS = { rows: '0px', cols: '32px' };
+/**
+ * @hidden
+ */
+const DEFAULT_FORMFIELDSET_GUTTERS = { rows: '0px', cols: '16px' };
 /**
  * @hidden
  */
@@ -14230,7 +14245,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 +14254,7 @@ function processBreakpoints(breakpoints, containerWidth) {
             return breakpoint.value;
         }
     }
-    return null;
+    return '';
 }
 /**
  * @hidden
@@ -14249,7 +14264,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 +14281,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 +14303,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 +14330,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 +14346,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, defaultGutters = DEFAULT_FORM_GUTTERS) => {
+    const rows = processCssValue(gutters?.rows);
+    const cols = processCssValue(gutters?.cols);
+    return `${rows ?? defaultGutters.rows} ${cols ?? defaultGutters.cols}`;
 };
 /**
  * @hidden
@@ -15389,33 +15405,38 @@ class RatingComponent {
                 this.cdr.markForCheck();
             }
         };
-        if (event.keyCode === Keys.ArrowDown) {
-            decreaseValue();
-        }
-        if (event.keyCode === Keys.ArrowLeft) {
-            if (this.direction === 'ltr') {
+        const code = normalizeNumpadKeys(event);
+        switch (code) {
+            case Keys.ArrowDown:
                 decreaseValue();
-            }
-            else {
-                increaseValue();
-            }
-        }
-        if (event.keyCode === Keys.ArrowUp) {
-            increaseValue();
-        }
-        if (event.keyCode === Keys.ArrowRight) {
-            if (this.direction === 'ltr') {
+                break;
+            case Keys.ArrowLeft:
+                if (this.direction === 'ltr') {
+                    decreaseValue();
+                }
+                else {
+                    increaseValue();
+                }
+                break;
+            case Keys.ArrowUp:
                 increaseValue();
-            }
-            else {
-                decreaseValue();
-            }
-        }
-        if (event.keyCode === Keys.Home) {
-            setMinValue();
-        }
-        if (event.keyCode === Keys.End) {
-            setMaxValue();
+                break;
+            case Keys.ArrowRight:
+                if (this.direction === 'ltr') {
+                    increaseValue();
+                }
+                else {
+                    decreaseValue();
+                }
+                break;
+            case Keys.Home:
+                setMinValue();
+                break;
+            case Keys.End:
+                setMaxValue();
+                break;
+            default:
+                break;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -16364,7 +16385,7 @@ class SignatureComponent {
      * @hidden
      */
     onDialogKeydown(e) {
-        if (e.keyCode === Keys.Escape) {
+        if (e.code === Keys.Escape) {
             this.isOpen = false;
             this.cd.detectChanges();
             this.maximizeButton?.nativeElement.focus();
@@ -17075,7 +17096,7 @@ class TextFieldsBase {
     /**
      * Sets the `title` attribute of the internal textarea input element of the component.
      */
-    title = '';
+    title;
     /**
      * Sets the disabled state of the TextArea component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_textarea#toc-managing-the-textarea-disabled-state-in-reactive-forms).
      *
@@ -17304,6 +17325,10 @@ class TextAreaComponent extends TextFieldsBase {
      * Sets the maximum number of characters allowed in the text area.
      */
     maxlength;
+    /**
+     * @hidden
+     */
+    maxResizableRows;
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      * @default 0
@@ -17394,6 +17419,7 @@ class TextAreaComponent extends TextFieldsBase {
      */
     valueChange = new EventEmitter();
     initialHeight;
+    maxResizableHeight;
     resizeSubscription;
     _size = 'medium';
     _rounded = 'medium';
@@ -17444,6 +17470,14 @@ class TextAreaComponent extends TextFieldsBase {
         this.ngZone.runOutsideAngular(() => {
             this.handleFlow();
         });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.prefix) {
+                this.prefix.flow = this.flow;
+            }
+            if (this.suffix) {
+                this.suffix.flow = this.flow;
+            }
+        });
         const stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(input => {
             this.handleClasses(this[input], input);
@@ -17471,8 +17505,14 @@ class TextAreaComponent extends TextFieldsBase {
         }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
-                this.renderer.removeClass(element, '\!k-overflow-y-auto');
-                this.initialHeight = element.offsetHeight;
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    this.renderer.removeClass(element, '\!k-overflow-y-auto');
+                    this.initialHeight = element.offsetHeight;
+                    if (this.maxResizableRows && this.rows) {
+                        const heightValue = parseFloat(getComputedStyle(element).getPropertyValue('height')) - 2 * parseFloat(getComputedStyle(element).getPropertyValue('padding'));
+                        this.maxResizableHeight = this.initialHeight + (heightValue * (this.maxResizableRows - this.rows));
+                    }
+                });
             }
             else if (this.resizable !== 'both') {
                 this.renderer.addClass(element, '\!k-overflow-y-auto');
@@ -17636,6 +17676,10 @@ class TextAreaComponent extends TextFieldsBase {
                 const element = this.input.nativeElement;
                 this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
                 const scrollHeight = element.scrollHeight;
+                if (scrollHeight > this.maxResizableHeight) {
+                    this.renderer.setStyle(element, 'height', `${this.maxResizableHeight}px`);
+                    return;
+                }
                 this.renderer.setStyle(hostElement, 'min-height', `${scrollHeight}px`);
                 if (scrollHeight > this.initialHeight) {
                     this.renderer.setStyle(element, 'height', `${scrollHeight}px`);
@@ -17706,7 +17750,7 @@ class TextAreaComponent extends TextFieldsBase {
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", maxResizableRows: "maxResizableRows", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.textarea' },
             {
@@ -17848,6 +17892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], maxlength: [{
                 type: Input
+            }], maxResizableRows: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], tabIndex: [{
@@ -18608,14 +18654,15 @@ 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();
@@ -19022,7 +19069,7 @@ class FormComponent {
      * Defines the gutters for the form.
      * You can specify gutters for rows and columns.
      */
-    gutters;
+    gutters = { ...DEFAULT_FORM_GUTTERS };
     /**
      * @hidden
      */
@@ -19030,26 +19077,29 @@ class FormComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
+    guttersStyle = '';
     /**
      * @hidden
      */
-    colsGutterClass = '';
+    showLicenseWatermark = false;
     /**
      * @hidden
      */
-    showLicenseWatermark = false;
-    formClass = true;
+    licenseMessage;
+    get formClass() {
+        return 'k-form k-form-md';
+    }
     get horizontalClass() {
         return this.orientation === 'horizontal';
     }
     _formColumnsNumber;
-    _formGutters;
+    _formGutters = { ...DEFAULT_FORM_GUTTERS };
     constructor(element, cdr, formService) {
         this.element = element;
         this.cdr = cdr;
         this.formService = formService;
         const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
     }
     ngAfterContentInit() {
@@ -19061,7 +19111,7 @@ class FormComponent {
         if (changes['cols']) {
             this.applyColumns();
         }
-        else if (changes['gutters']) {
+        if (changes['gutters']) {
             this.applyGutters();
         }
     }
@@ -19095,18 +19145,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, { ...DEFAULT_FORM_GUTTERS });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class.k-form": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{ gap: guttersStyle }">
             <ng-content></ng-content>
         </div>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -19114,14 +19162,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoForm',
                     selector: 'form[kendoForm]',
                     template: `
-        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{ gap: guttersStyle }">
             <ng-content></ng-content>
         </div>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
     `,
                     standalone: true,
-                    imports: [NgClass, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
+                    imports: [NgClass, NgStyle, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: FormService }]; }, propDecorators: { orientation: [{
                 type: Input
@@ -19131,7 +19179,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 +19270,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;
@@ -19230,7 +19278,7 @@ class FormFieldSetComponent {
      * Defines the gutters for the fieldset.
      * You can specify gutters for rows and columns.
      */
-    gutters;
+    gutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
     /**
      * Defines the colspan for the fieldset related to the parent Form component columns.
      * Can be a number or an array of responsive breakpoints.
@@ -19243,18 +19291,14 @@ class FormFieldSetComponent {
     /**
      * @hidden
      */
-    rowsGutterClass = '';
-    /**
-     * @hidden
-     */
-    colsGutterClass = '';
+    guttersStyle = '';
     _formColumnsNumber;
     _colSpanClass = null;
     _formWidth = null;
-    _formGutters = null;
+    _formGutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
     _previousColSpan = null;
     _previousCols = null;
-    _previousGutters = null;
+    _previousGutters;
     subs = new Subscription();
     constructor(elementRef, renderer, formService, cdr) {
         this.elementRef = elementRef;
@@ -19308,9 +19352,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, { ...DEFAULT_FORMFIELDSET_GUTTERS });
+        this.cdr.detectChanges();
     }
     updateColSpanClass() {
         const hostElement = this.elementRef.nativeElement;
@@ -19333,10 +19376,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 +19390,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,16 @@ export declare class FormComponent implements AfterContentInit, OnChanges {
     /**
      * @hidden
      */
-    rowsGutterClass: string;
+    guttersStyle: string;
     /**
      * @hidden
      */
-    colsGutterClass: string;
+    showLicenseWatermark: boolean;
     /**
      * @hidden
      */
-    showLicenseWatermark: boolean;
-    formClass: boolean;
+    licenseMessage?: string;
+    get formClass(): string;
     get horizontalClass(): boolean;
     private _formColumnsNumber;
     private _formGutters;