@progress/kendo-angular-inputs 19.3.0-develop.5 → 19.3.0-develop.7

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, 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, replaceMessagePlaceholder, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, starIcon, starOutlineIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
@@ -550,8 +550,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752072250,
-    version: '19.3.0-develop.5',
+    publishDate: 1752220205,
+    version: '19.3.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1868,6 +1868,7 @@ class RangeSliderComponent extends SliderBase {
         this.ngZone = ngZone;
         this.changeDetector = changeDetector;
         this.hostElement = hostElement;
+        validatePackage(packageMetadata);
     }
     /**
      * Focuses the RangeSlider.
@@ -14199,6 +14200,152 @@ 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
+ */
+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 null;
+    }
+    for (const [index, breakpoint] of breakpoints.entries()) {
+        const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
+        const maxBreakpointWidth = breakpoint.maxWidth || breakpoints[index + 1]?.minWidth - 1 || Infinity;
+        if (containerWidth >= minBreakpointWidth && containerWidth <= maxBreakpointWidth) {
+            return breakpoint.value;
+        }
+    }
+    return null;
+}
+/**
+ * @hidden
+ */
+const calculateColumns = (cols, containerWidth) => {
+    if (!cols) {
+        return null;
+    }
+    if (Array.isArray(cols) && cols.length > 0) {
+        return processBreakpoints(cols, containerWidth);
+    }
+    else if (typeof cols === 'number') {
+        return cols;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
+ */
+const calculateGutters = (gutters, containerWidth) => {
+    if (!gutters) {
+        return null;
+    }
+    if (typeof gutters === 'number') {
+        return { cols: gutters, rows: gutters };
+    }
+    else if (Array.isArray(gutters)) {
+        const processedGutters = processBreakpoints(gutters, containerWidth);
+        return processedGutters !== null ? { cols: processedGutters, rows: processedGutters } : null;
+    }
+    else if (typeof gutters === 'object') {
+        const gutterObject = gutters;
+        const result = { rows: null, cols: null };
+        if (gutterObject.cols !== undefined && gutterObject.cols !== null) {
+            if (typeof gutterObject.cols === 'number') {
+                result.cols = gutterObject.cols;
+            }
+            else if (Array.isArray(gutterObject.cols)) {
+                result.cols = processBreakpoints(gutterObject.cols, containerWidth) || null;
+            }
+        }
+        else {
+            result.cols = null;
+        }
+        if (gutterObject.rows !== undefined) {
+            if (typeof gutterObject.rows === 'number') {
+                result.rows = gutterObject.rows;
+            }
+            else if (Array.isArray(gutterObject.rows)) {
+                result.rows = processBreakpoints(gutterObject.rows, containerWidth) || null;
+            }
+        }
+        else {
+            result.rows = null;
+        }
+        return result;
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Calculates column span value based on responsive breakpoints or fixed number
+ */
+const calculateColSpan = (colSpan, containerWidth) => {
+    if (!colSpan) {
+        return null;
+    }
+    if (typeof colSpan === 'number') {
+        return colSpan;
+    }
+    else if (Array.isArray(colSpan) && colSpan.length > 0) {
+        return processBreakpoints(colSpan, containerWidth);
+    }
+    return null;
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class names for columns
+ */
+const generateColumnClass = (columnsNumber) => {
+    return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class names for gutters
+ */
+const generateGutterClasses = (gutters) => {
+    return {
+        rows: gutters?.rows ? `k-gap-y-${gutters.rows}` : '',
+        cols: gutters?.cols ? `k-gap-x-${gutters.cols}` : ''
+    };
+};
+/**
+ * @hidden
+ *
+ * Generates CSS class name for column span
+ */
+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).
@@ -14221,6 +14368,7 @@ class FormFieldComponent {
     renderer;
     localizationService;
     hostElement;
+    formService;
     hostClass = true;
     /**
      * @hidden
@@ -14263,6 +14411,8 @@ class FormFieldComponent {
     /**
      * Specifies the layout orientation of the form field.
      *
+     * @hidden
+     *
      * @default 'vertical'
      */
     orientation = 'vertical';
@@ -14274,6 +14424,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
      */
@@ -14295,15 +14450,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();
@@ -14311,6 +14474,11 @@ class FormFieldComponent {
     ngAfterViewChecked() {
         this.updateDescription();
     }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -14415,14 +14583,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>
@@ -14453,7 +14636,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: [{
@@ -14486,6 +14669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showErrors: [{
                 type: Input
+            }], colSpan: [{
+                type: Input
             }] } });
 
 /**
@@ -18806,6 +18991,376 @@ 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;
+    /**
+     * @hidden
+     */
+    columnsClass = '';
+    /**
+     * @hidden
+     */
+    rowsGutterClass = '';
+    /**
+     * @hidden
+     */
+    colsGutterClass = '';
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    formClass = true;
+    get horizontalClass() {
+        return this.orientation === 'horizontal';
+    }
+    _formColumnsNumber;
+    _formGutters;
+    constructor(element, cdr, formService) {
+        this.element = element;
+        this.cdr = cdr;
+        this.formService = formService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+    }
+    ngAfterContentInit() {
+        this.applyColumns();
+        this.applyGutters();
+        this.formService.formWidth.next(innerWidth(this.element.nativeElement));
+    }
+    ngOnChanges(changes) {
+        if (changes['cols']) {
+            this.applyColumns();
+        }
+        else if (changes['gutters']) {
+            this.applyGutters();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        this.formService.formWidth.next(innerWidth(this.element.nativeElement));
+        const previousColumnsNumber = this._formColumnsNumber;
+        const previousGutters = this._formGutters;
+        this.applyColumns();
+        this.applyGutters();
+        if (previousColumnsNumber !== this._formColumnsNumber) {
+            this.cdr.detectChanges();
+        }
+        if (previousGutters?.cols !== this._formGutters?.cols || previousGutters?.rows !== this._formGutters?.rows) {
+            this.cdr.detectChanges();
+        }
+    }
+    applyColumns() {
+        const containerWidth = innerWidth(this.element.nativeElement);
+        this._formColumnsNumber = calculateColumns(this.cols, containerWidth);
+        this.updateColumnClasses();
+    }
+    applyGutters() {
+        const containerWidth = innerWidth(this.element.nativeElement);
+        this._formGutters = calculateGutters(this.gutters, containerWidth);
+        this.updateGutterClasses();
+    }
+    updateColumnClasses() {
+        this.columnsClass = generateColumnClass(this._formColumnsNumber);
+    }
+    updateGutterClasses() {
+        const gutterClasses = generateGutterClasses(this._formGutters);
+        this.rowsGutterClass = gutterClasses.rows;
+        this.colsGutterClass = gutterClasses.cols;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class.k-form": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+            <ng-content></ng-content>
+        </div>
+        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoForm',
+                    selector: 'form[kendoForm]',
+                    template: `
+        <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
+            <ng-content></ng-content>
+        </div>
+        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: FormService }]; }, propDecorators: { orientation: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], gutters: [{
+                type: Input
+            }], formClass: [{
+                type: HostBinding,
+                args: ['class.k-form']
+            }], horizontalClass: [{
+                type: HostBinding,
+                args: ['class.k-form-horizontal']
+            }] } });
+
+/**
+ *  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 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;
+    /**
+     * 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
+     */
+    rowsGutterClass = '';
+    /**
+     * @hidden
+     */
+    colsGutterClass = '';
+    _formColumnsNumber;
+    _colSpanClass = null;
+    _formWidth = null;
+    _formGutters = null;
+    _previousColSpan = null;
+    _previousCols = null;
+    _previousGutters = null;
+    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() {
+        const gutterClasses = generateGutterClasses(this._formGutters);
+        this.rowsGutterClass = gutterClasses.rows;
+        this.colsGutterClass = gutterClasses.cols;
+    }
+    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, rowsGutterClass, colsGutterClass]">
+            <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"] }] });
+}
+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, rowsGutterClass, colsGutterClass]">
+            <ng-content></ng-content>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass],
+                }]
+        }], 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.
  *
@@ -18984,6 +19539,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.
  *
@@ -19154,6 +19729,7 @@ const KENDO_INPUTS = [
     ...KENDO_CHECKBOX,
     ...KENDO_RADIOBUTTON,
     ...KENDO_SWITCH,
+    ...KENDO_FORM,
     ...KENDO_FORMFIELD,
     ...KENDO_SLIDER,
     ...KENDO_RANGESLIDER,
@@ -19189,8 +19765,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,
@@ -19639,6 +20215,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.
@@ -19713,5 +20323,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 };