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

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

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

package/colorpicker/colorpicker.component.d.ts

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

package/common/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,28 @@
+/**-----------------------------------------------------------------------------------------
+* 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. 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.
+     */
+    cols?: number | string | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the rows in the Form.
+     */
+    rows?: number | string | ResponsiveFormBreakPoint[];
+}

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

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * 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 {
+    /**
+     * Specifies the minimum Form width for this breakpoint in pixels.
+     */
+    minWidth?: number;
+    /**
+     * Specifies the maximum Form width for this breakpoint in pixels.
+     */
+    maxWidth?: number;
+    /**
+     * 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 | string;
+}

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/colorpicker/color-palette.component.mjs

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

package/esm2022/colorpicker/colorpicker.component.mjs

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

package/esm2022/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,153 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgClass, NgIf, NgStyle } from '@angular/common';
+import { Component, ElementRef, HostBinding, Input, ChangeDetectorRef } from '@angular/core';
+import { ResizeSensorComponent, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { calculateColumns, calculateGutters, DEFAULT_FORM_GUTTERS, generateColumnClass, generateGuttersStyling, innerWidth } from './utils';
+import { FormService } from '../common/formservice.service';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+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 = { ...DEFAULT_FORM_GUTTERS };
+    /**
+     * @hidden
+     */
+    columnsClass = '';
+    /**
+     * @hidden
+     */
+    guttersStyle = '';
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
+    get formClass() {
+        return 'k-form k-form-md';
+    }
+    get horizontalClass() {
+        return this.orientation === 'horizontal';
+    }
+    _formColumnsNumber;
+    _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() {
+        this.applyColumns();
+        this.applyGutters();
+        this.formService.formWidth.next(innerWidth(this.element.nativeElement));
+    }
+    ngOnChanges(changes) {
+        if (changes['cols']) {
+            this.applyColumns();
+        }
+        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() {
+        this.guttersStyle = generateGuttersStyling(this._formGutters, { ...DEFAULT_FORM_GUTTERS });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "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" [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,
+            args: [{
+                    exportAs: 'kendoForm',
+                    selector: 'form[kendoForm]',
+                    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" [licenseMessage]="licenseMessage"></div>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgStyle, 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']
+            }], 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
+            }] } });