@progress/kendo-angular-inputs 19.3.0-develop.3 → 19.3.0-develop.31

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, 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, 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';
@@ -111,10 +111,6 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  * Used to differentiate between the Radio and CheckBox components in their base class.
  */
 const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');
-/**
- * @hidden
- */
-const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
 
 /**
  * @hidden
@@ -554,8 +550,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1751984862,
-    version: '19.3.0-develop.3',
+    publishDate: 1754576545,
+    version: '19.3.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1872,6 +1868,7 @@ class RangeSliderComponent extends SliderBase {
         this.ngZone = ngZone;
         this.changeDetector = changeDetector;
         this.hostElement = hostElement;
+        validatePackage(packageMetadata);
     }
     /**
      * Focuses the RangeSlider.
@@ -14203,6 +14200,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.id']
             }] } });
 
+/**
+ * @hidden
+ */
+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',
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+const DEFAULT_FORM_GUTTERS = { rows: '0px', cols: '32px' };
+/**
+ * @hidden
+ */
+const DEFAULT_FORMFIELDSET_GUTTERS = { rows: '0px', cols: '16px' };
+/**
+ * @hidden
+ */
+function innerWidth(element) {
+    let width = element.clientWidth;
+    const style = getComputedStyle(element);
+    width -= (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.borderLeftWidth) || 0);
+    width -= (parseFloat(style.paddingRight) || 0) + (parseFloat(style.borderRightWidth) || 0);
+    return width;
+}
+/**
+ * @hidden
+ */
+function processBreakpoints(breakpoints, containerWidth) {
+    if (!breakpoints?.length || containerWidth === null) {
+        return '';
+    }
+    for (const [index, breakpoint] of breakpoints.entries()) {
+        const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
+        const maxBreakpointWidth = breakpoint.maxWidth || breakpoints[index + 1]?.minWidth - 1 || Infinity;
+        if (containerWidth >= minBreakpointWidth && containerWidth <= maxBreakpointWidth) {
+            return breakpoint.value;
+        }
+    }
+    return '';
+}
+/**
+ * @hidden
+ */
+const calculateColumns = (cols, containerWidth) => {
+    if (!cols) {
+        return null;
+    }
+    if (Array.isArray(cols) && cols.length > 0) {
+        const processedCols = processBreakpoints(cols, containerWidth) || null;
+        return typeof processedCols === 'string' ? parseInt(processedCols, 10) : processedCols;
+    }
+    else if (typeof cols === 'number') {
+        return cols;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
+ */
+const calculateGutters = (gutters, containerWidth) => {
+    if (!gutters) {
+        return null;
+    }
+    if (typeof gutters === 'number' || typeof gutters === 'string') {
+        return { cols: gutters, rows: gutters };
+    }
+    else if (Array.isArray(gutters)) {
+        const processedGutters = processBreakpoints(gutters, containerWidth) || null;
+        return processedGutters !== null ? { cols: processedGutters, rows: processedGutters } : null;
+    }
+    else if (typeof gutters === 'object') {
+        const gutterObject = gutters;
+        const result = { rows: null, cols: null };
+        if (gutterObject.cols !== undefined && gutterObject.cols !== null) {
+            if (typeof gutterObject.cols === 'number' || typeof gutterObject.cols === 'string') {
+                result.cols = gutterObject.cols;
+            }
+            else if (Array.isArray(gutterObject.cols)) {
+                result.cols = processBreakpoints(gutterObject.cols, containerWidth) || null;
+            }
+        }
+        else {
+            result.cols = null;
+        }
+        if (gutterObject.rows !== undefined) {
+            if (typeof gutterObject.rows === 'number' || typeof gutterObject.rows === 'string') {
+                result.rows = gutterObject.rows;
+            }
+            else if (Array.isArray(gutterObject.rows)) {
+                result.rows = processBreakpoints(gutterObject.rows, containerWidth) || null;
+            }
+        }
+        else {
+            result.rows = null;
+        }
+        return result;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Calculates column span value based on responsive breakpoints or fixed number
+ */
+const calculateColSpan = (colSpan, containerWidth) => {
+    if (!colSpan) {
+        return null;
+    }
+    if (typeof colSpan === 'number') {
+        return colSpan;
+    }
+    else if (Array.isArray(colSpan) && colSpan.length > 0) {
+        const processedColSpan = processBreakpoints(colSpan, containerWidth) || null;
+        return typeof processedColSpan === 'string' ? parseInt(processedColSpan, 10) : processedColSpan;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class names for columns
+ */
+const generateColumnClass = (columnsNumber) => {
+    return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
+};
+/**
+ * @hidden
+ *
+ * Generates CSS styles for gutters based on the provided gutters object.
+ */
+const generateGuttersStyling = (gutters, defaultGutters = DEFAULT_FORM_GUTTERS) => {
+    const rows = processCssValue(gutters?.rows);
+    const cols = processCssValue(gutters?.cols);
+    return `${rows ?? defaultGutters.rows} ${cols ?? defaultGutters.cols}`;
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class name for column span
+ */
+const generateColSpanClass = (colSpan) => {
+    return colSpan ? `k-col-span-${colSpan}` : '';
+};
+
 /**
  * Represents the Kendo UI FormField component for Angular.
  * Use this component to group form-bound controls (Kendo Angular components or native HTML controls).
@@ -14225,6 +14377,7 @@ class FormFieldComponent {
     renderer;
     localizationService;
     hostElement;
+    formService;
     hostClass = true;
     /**
      * @hidden
@@ -14267,6 +14420,8 @@ class FormFieldComponent {
     /**
      * Specifies the layout orientation of the form field.
      *
+     * @hidden
+     *
      * @default 'vertical'
      */
     orientation = 'vertical';
@@ -14278,6 +14433,11 @@ class FormFieldComponent {
      * @default 'initial'
      */
     showErrors = 'initial';
+    /**
+     * Defines the colspan for the form field.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    colSpan;
     /**
      * @hidden
      */
@@ -14299,15 +14459,23 @@ class FormFieldComponent {
     control;
     subscriptions = new Subscription();
     rtl = false;
-    constructor(renderer, localizationService, hostElement) {
+    _formWidth = null;
+    _colSpanClass = null;
+    _previousColSpan = null;
+    constructor(renderer, localizationService, hostElement, formService) {
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.hostElement = hostElement;
+        this.formService = formService;
         validatePackage(packageMetadata);
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
         }));
+        this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
+            this._formWidth = width;
+            this.updateColSpanClass();
+        }));
     }
     ngAfterViewInit() {
         this.setDescription();
@@ -14315,6 +14483,11 @@ class FormFieldComponent {
     ngAfterViewChecked() {
         this.updateDescription();
     }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -14419,14 +14592,29 @@ class FormFieldComponent {
         this.subscriptions.add(this.errorChildren.changes.subscribe(() => this.updateDescription()));
         this.subscriptions.add(this.hintChildren.changes.subscribe(() => this.updateDescription()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
+    updateColSpanClass() {
+        const hostElement = this.hostElement.nativeElement;
+        const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
+        if (newColSpan !== this._previousColSpan) {
+            const newClass = generateColSpanClass(newColSpan);
+            if (this._colSpanClass) {
+                this.renderer.removeClass(hostElement, this._colSpanClass);
+            }
+            if (newClass) {
+                this.renderer.addClass(hostElement, newClass);
+            }
+            this._colSpanClass = newClass;
+            this._previousColSpan = newColSpan;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors", colSpan: "colSpan" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.formfield'
             }
-        ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="label, kendo-label"></ng-content>
         <div class="k-form-field-wrap">
             <ng-content></ng-content>
@@ -14457,7 +14645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: FormService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-form-field']
             }], direction: [{
@@ -14490,6 +14678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showErrors: [{
                 type: Input
+            }], colSpan: [{
+                type: Input
             }] } });
 
 /**
@@ -16894,7 +17084,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).
      *
@@ -17123,6 +17313,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
@@ -17213,6 +17407,7 @@ class TextAreaComponent extends TextFieldsBase {
      */
     valueChange = new EventEmitter();
     initialHeight;
+    maxResizableHeight;
     resizeSubscription;
     _size = 'medium';
     _rounded = 'medium';
@@ -17253,10 +17448,24 @@ class TextAreaComponent extends TextFieldsBase {
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    ngAfterContentInit() {
+        this.ngZone.onStable.pipe((take(1))).subscribe(() => {
+            this.prefix && (this.prefix.orientation = this.adornmentsOrientation);
+            this.suffix && (this.suffix.orientation = this.adornmentsOrientation);
+        });
+    }
     ngAfterViewInit() {
         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);
@@ -17284,8 +17493,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');
@@ -17449,6 +17664,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`);
@@ -17519,7 +17738,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' },
             {
@@ -17661,6 +17880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], maxlength: [{
                 type: Input
+            }], maxResizableRows: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], tabIndex: [{
@@ -18810,6 +19031,372 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/**
+ *  Represents the Kendo UI Form component for Angular.
+ *
+ * @remarks
+ * Supported children components are: {@link FormFieldComponent}, {@link FormSeparatorComponent}, and {@link FormFieldSetComponent}.
+ */
+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: 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: FormService }]; }, propDecorators: { orientation: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], gutters: [{
+                type: Input
+            }], formClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], horizontalClass: [{
+                type: HostBinding,
+                args: ['class.k-form-horizontal']
+            }] } });
+
+/**
+ *  Represents the Kendo UI Form Separator component for Angular.
+ */
+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: 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: FormService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-form-separator']
+            }], colSpan: [{
+                type: Input
+            }] } });
+
+/**
+ *  Represents the Kendo UI FormFieldSet component for Angular.
+ *
+ * @remarks
+ * Supported children components are: {@link FormFieldComponent} and {@link FormSeparatorComponent}.
+ */
+class FormFieldSetComponent {
+    elementRef;
+    renderer;
+    formService;
+    cdr;
+    formFieldSetClass = true;
+    /**
+     * Defines the legend for the fieldset.
+     */
+    legend;
+    /**
+     * Defines the number of columns of the fieldset.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols;
+    /**
+     * Defines the gutters for the fieldset.
+     * You can specify gutters for rows and columns.
+     */
+    gutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
+    /**
+     * Defines the colspan for the fieldset related to the parent Form component columns.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    colSpan;
+    /**
+     * @hidden
+     */
+    columnsClass = '';
+    /**
+     * @hidden
+     */
+    guttersStyle = '';
+    _formColumnsNumber;
+    _colSpanClass = null;
+    _formWidth = null;
+    _formGutters = { ...DEFAULT_FORMFIELDSET_GUTTERS };
+    _previousColSpan = null;
+    _previousCols = null;
+    _previousGutters;
+    subs = new Subscription();
+    constructor(elementRef, renderer, formService, cdr) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.formService = formService;
+        this.cdr = cdr;
+        validatePackage(packageMetadata);
+    }
+    ngOnInit() {
+        this.subs.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
+            this._formWidth = width;
+            this.applyColumns();
+            this.applyGutters();
+            this.updateColSpanClass();
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+        if (changes['cols']) {
+            this.applyColumns();
+        }
+        if (changes['gutters']) {
+            this.applyGutters();
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    applyColumns() {
+        const containerWidth = this._formWidth;
+        const newColumnsNumber = calculateColumns(this.cols, containerWidth);
+        if (newColumnsNumber !== this._previousCols) {
+            this._formColumnsNumber = newColumnsNumber;
+            this.updateColumnClasses();
+            this._previousCols = newColumnsNumber;
+        }
+    }
+    applyGutters() {
+        const containerWidth = this._formWidth;
+        const newGutters = calculateGutters(this.gutters, containerWidth);
+        if (newGutters && (newGutters.cols !== this._previousGutters?.cols || newGutters.rows !== this._previousGutters?.rows)) {
+            this._formGutters = newGutters;
+            this.updateGutterClasses();
+            this._previousGutters = newGutters;
+        }
+    }
+    updateColumnClasses() {
+        this.columnsClass = generateColumnClass(this._formColumnsNumber);
+        this.cdr.detectChanges();
+    }
+    updateGutterClasses() {
+        this.guttersStyle = generateGuttersStyling(this._formGutters, { ...DEFAULT_FORMFIELDSET_GUTTERS });
+        this.cdr.detectChanges();
+    }
+    updateColSpanClass() {
+        const hostElement = this.elementRef.nativeElement;
+        const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
+        if (newColSpan !== this._previousColSpan) {
+            const newClass = generateColSpanClass(newColSpan);
+            if (this._colSpanClass) {
+                this.renderer.removeClass(hostElement, this._colSpanClass);
+            }
+            if (newClass) {
+                this.renderer.addClass(hostElement, newClass);
+            }
+            this._colSpanClass = newClass;
+            this._previousColSpan = newColSpan;
+            this.cdr.detectChanges();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldSetComponent, isStandalone: true, selector: "fieldset[kendoFormFieldSet]", inputs: { legend: "legend", cols: "cols", gutters: "gutters", colSpan: "colSpan" }, host: { properties: { "class.k-form-fieldset": "this.formFieldSetClass" } }, exportAs: ["kendoFormFieldSet"], usesOnChanges: true, ngImport: i0, template: `
+        <legend *ngIf="legend" class="k-form-legend">
+            {{ legend }}
+        </legend>
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
+            <ng-content></ng-content>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoFormFieldSet',
+                    selector: 'fieldset[kendoFormFieldSet]',
+                    template: `
+        <legend *ngIf="legend" class="k-form-legend">
+            {{ legend }}
+        </legend>
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
+            <ng-content></ng-content>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgStyle],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formFieldSetClass: [{
+                type: HostBinding,
+                args: ['class.k-form-fieldset']
+            }], legend: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], gutters: [{
+                type: Input
+            }], colSpan: [{
+                type: Input
+            }] } });
+
 /**
  * Use the `KENDO_TEXTBOX` utility array to add all TextBox-related components and directives to a standalone Angular component.
  *
@@ -18988,6 +19575,26 @@ 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 {}
+ * ```
+ */
+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.
  *
@@ -19158,6 +19765,7 @@ const KENDO_INPUTS = [
     ...KENDO_CHECKBOX,
     ...KENDO_RADIOBUTTON,
     ...KENDO_SWITCH,
+    ...KENDO_FORM,
     ...KENDO_FORMFIELD,
     ...KENDO_SLIDER,
     ...KENDO_RANGESLIDER,
@@ -19193,8 +19801,8 @@ const KENDO_INPUTS = [
  */
 class InputsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [TextBoxComponent, i7.SeparatorComponent, NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i7.SeparatorComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [TextBoxComponent, i7.SeparatorComponent, NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, FormComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i7.SeparatorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
@@ -19643,6 +20251,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the FormField, Error, and Hint components.
+ *
+ * Use this module to add Form features to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { FormModule } from '@progress/kendo-angular-inputs';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, FormModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
+ */
+class FormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormModule, imports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent], exports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, imports: [FormComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...KENDO_FORM],
+                    exports: [...KENDO_FORM]
+                }]
+        }] });
+
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Signature component.
@@ -19717,5 +20359,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, OTPInputModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormComponent, FormFieldComponent, FormFieldModule, FormFieldSetComponent, FormModule, FormSeparatorComponent, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORM, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, OTPInputModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };