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

package/esm2022/formfield/formfield.component.mjs

@@ -12,8 +12,12 @@ import { packageMetadata } from '../package-metadata';
 import { ErrorComponent } from './error.component';
 import { HintComponent } from './hint.component';
 import { NgIf } from '@angular/common';
+import { FormService } from '../common/formservice.service';
+import { filter } from 'rxjs/operators';
+import { calculateColSpan, generateColSpanClass } from '../form/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/formservice.service";
 /**
  * Represents the Kendo UI FormField component for Angular.
  * Use this component to group form-bound controls (Kendo Angular components or native HTML controls).
@@ -36,6 +40,7 @@ export class FormFieldComponent {
     renderer;
     localizationService;
     hostElement;
+    formService;
     hostClass = true;
     /**
      * @hidden
@@ -78,6 +83,8 @@ export class FormFieldComponent {
     /**
      * Specifies the layout orientation of the form field.
      *
+     * @hidden
+     *
      * @default 'vertical'
      */
     orientation = 'vertical';
@@ -89,6 +96,11 @@ export 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
      */
@@ -110,15 +122,23 @@ export 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();
@@ -126,6 +146,11 @@ export class FormFieldComponent {
     ngAfterViewChecked() {
         this.updateDescription();
     }
+    ngOnChanges(changes) {
+        if (changes['colSpan']) {
+            this.updateColSpanClass();
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -230,14 +255,29 @@ export 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: i2.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>
@@ -268,7 +308,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: i2.FormService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-form-field']
             }], direction: [{
@@ -301,4 +341,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showErrors: [{
                 type: Input
+            }], colSpan: [{
+                type: Input
             }] } });

package/esm2022/formfieldset/formfieldset.component.mjs

@@ -0,0 +1,170 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgClass, NgIf, NgStyle } from '@angular/common';
+import { Component, HostBinding, Input, ElementRef, Renderer2, ChangeDetectorRef, } from '@angular/core';
+import { FormService } from '../common/formservice.service';
+import { filter } from 'rxjs/operators';
+import { calculateColSpan, calculateColumns, calculateGutters, DEFAULT_FORMFIELDSET_GUTTERS, generateColSpanClass, generateColumnClass, generateGuttersStyling } from '../form/utils';
+import { Subscription } from 'rxjs';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/formservice.service";
+/**
+ *  Represents the Kendo UI FormFieldSet component for Angular.
+ *
+ * @remarks
+ * Supported children components are: {@link FormFieldComponent} and {@link FormSeparatorComponent}.
+ */
+export 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: i1.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: i1.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
+            }] } });

package/esm2022/index.mjs

@@ -35,10 +35,15 @@ export * from './colorpicker/events';
 export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
+// Form Components
+export { FormComponent } from './form/form.component';
+export { FormSeparatorComponent } from './form/formseparator.component';
+export { FormFieldSetComponent } from './formfieldset/formfieldset.component';
 export { HintComponent } from './formfield/hint.component';
 export { ErrorComponent } from './formfield/error.component';
 export { FormFieldComponent } from './formfield/formfield.component';
 export { FormFieldModule } from './formfield.module';
+export { FormModule } from './form.module';
 //TextBox Component
 export { TextBoxComponent } from './textbox/textbox.component';
 export { TextBoxPrefixTemplateDirective } from './textbox/textbox-prefix.directive';

package/esm2022/inputs.module.mjs

@@ -30,27 +30,30 @@ import * as i17 from "./radiobutton/radiobutton.component";
 import * as i18 from "./radiobutton/radiobutton.directive";
 import * as i19 from "./switch/switch.component";
 import * as i20 from "./switch/localization/custom-messages.component";
-import * as i21 from "./formfield/formfield.component";
-import * as i22 from "./formfield/hint.component";
-import * as i23 from "./formfield/error.component";
-import * as i24 from "./slider/slider.component";
-import * as i25 from "./slider/localization/custom-messages.component";
-import * as i26 from "./sliders-common/label-template.directive";
-import * as i27 from "./rangeslider/rangeslider.component";
-import * as i28 from "./rangeslider/localization/custom-messages.component";
-import * as i29 from "./rating/rating.component";
-import * as i30 from "./rating/directives/rating-item.directive";
-import * as i31 from "./rating/directives/rating-hovered-item.directive";
-import * as i32 from "./rating/directives/rating-selected-item.directive";
-import * as i33 from "./signature/signature.component";
-import * as i34 from "./signature/localization/custom-messages.component";
-import * as i35 from "./colorpicker/colorpicker.component";
-import * as i36 from "./colorpicker/localization/custom-messages.component";
-import * as i37 from "./colorpicker/flatcolorpicker.component";
-import * as i38 from "./colorpicker/color-gradient.component";
-import * as i39 from "./colorpicker/color-palette.component";
-import * as i40 from "./otpinput/otpinput.component";
-import * as i41 from "./otpinput/localization/custom-messages.component";
+import * as i21 from "./form/form.component";
+import * as i22 from "./form/formseparator.component";
+import * as i23 from "./formfieldset/formfieldset.component";
+import * as i24 from "./formfield/formfield.component";
+import * as i25 from "./formfield/hint.component";
+import * as i26 from "./formfield/error.component";
+import * as i27 from "./slider/slider.component";
+import * as i28 from "./slider/localization/custom-messages.component";
+import * as i29 from "./sliders-common/label-template.directive";
+import * as i30 from "./rangeslider/rangeslider.component";
+import * as i31 from "./rangeslider/localization/custom-messages.component";
+import * as i32 from "./rating/rating.component";
+import * as i33 from "./rating/directives/rating-item.directive";
+import * as i34 from "./rating/directives/rating-hovered-item.directive";
+import * as i35 from "./rating/directives/rating-selected-item.directive";
+import * as i36 from "./signature/signature.component";
+import * as i37 from "./signature/localization/custom-messages.component";
+import * as i38 from "./colorpicker/colorpicker.component";
+import * as i39 from "./colorpicker/localization/custom-messages.component";
+import * as i40 from "./colorpicker/flatcolorpicker.component";
+import * as i41 from "./colorpicker/color-gradient.component";
+import * as i42 from "./colorpicker/color-palette.component";
+import * as i43 from "./otpinput/otpinput.component";
+import * as i44 from "./otpinput/localization/custom-messages.component";
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Inputs components.
@@ -74,8 +77,8 @@ import * as i41 from "./otpinput/localization/custom-messages.component";
  */
 export 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: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, i40.OTPInputComponent, i41.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, i40.OTPInputComponent, i41.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: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i24.SliderComponent, i27.RangeSliderComponent, i29.RatingComponent, i33.SignatureComponent, i35.ColorPickerComponent, i37.FlatColorPickerComponent, i38.ColorGradientComponent, i40.OTPInputComponent, i7.SeparatorComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormComponent, i22.FormSeparatorComponent, i23.FormFieldSetComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i27.SliderComponent, i28.SliderCustomMessagesComponent, i29.LabelTemplateDirective, i30.RangeSliderComponent, i31.RangeSliderCustomMessagesComponent, i29.LabelTemplateDirective, i32.RatingComponent, i33.RatingItemTemplateDirective, i34.RatingHoveredItemTemplateDirective, i35.RatingSelectedItemTemplateDirective, i36.SignatureComponent, i37.SignatureCustomMessagesComponent, i38.ColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i40.FlatColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i41.ColorGradientComponent, i39.ColorPickerCustomMessagesComponent, i42.ColorPaletteComponent, i39.ColorPickerCustomMessagesComponent, i43.OTPInputComponent, i44.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormComponent, i22.FormSeparatorComponent, i23.FormFieldSetComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i24.FormFieldComponent, i25.HintComponent, i26.ErrorComponent, i27.SliderComponent, i28.SliderCustomMessagesComponent, i29.LabelTemplateDirective, i30.RangeSliderComponent, i31.RangeSliderCustomMessagesComponent, i29.LabelTemplateDirective, i32.RatingComponent, i33.RatingItemTemplateDirective, i34.RatingHoveredItemTemplateDirective, i35.RatingSelectedItemTemplateDirective, i36.SignatureComponent, i37.SignatureCustomMessagesComponent, i38.ColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i40.FlatColorPickerComponent, i39.ColorPickerCustomMessagesComponent, i41.ColorGradientComponent, i39.ColorPickerCustomMessagesComponent, i42.ColorPaletteComponent, i39.ColorPickerCustomMessagesComponent, i43.OTPInputComponent, i44.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: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i21.FormComponent, i27.SliderComponent, i30.RangeSliderComponent, i32.RatingComponent, i36.SignatureComponent, i38.ColorPickerComponent, i40.FlatColorPickerComponent, i41.ColorGradientComponent, i43.OTPInputComponent, i7.SeparatorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,

package/esm2022/otpinput/otpinput.component.mjs

@@ -5,10 +5,10 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Injector, Input, NgZone, Output, QueryList, Renderer2, ViewChildren, forwardRef } from "@angular/core";
 import { SharedInputEventsDirective } from "../shared/shared-events.directive";
 import { NgFor, NgIf } from "@angular/common";
-import { KendoInput, Keys, hasObservers, isPresent } from "@progress/kendo-angular-common";
+import { KendoInput, Keys, hasObservers, isPresent, replaceMessagePlaceholder } from "@progress/kendo-angular-common";
 import { TextBoxComponent } from "../textbox/textbox.component";
 import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
-import { SIZE_MAP, areSame, replaceMessagePlaceholder } from "../common/utils";
+import { SIZE_MAP, areSame } from "../common/utils";
 import { L10N_PREFIX, LocalizationService } from "@progress/kendo-angular-l10n";
 import { OTPInputSeparatorComponent } from "./otpinput-separator.component";
 import { take } from "rxjs/operators";

package/esm2022/package-metadata.mjs

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

package/esm2022/rangeslider/rangeslider.component.mjs

@@ -16,6 +16,8 @@ import { SliderBase } from '../sliders-common/slider-base';
 import { SliderTicksComponent } from '../sliders-common/slider-ticks.component';
 import { NgIf } from '@angular/common';
 import { LocalizedRangeSliderMessagesDirective } from './localization/localized-rangeslider-messages.directive';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 const PRESSED = 'k-pressed';
@@ -70,6 +72,7 @@ export class RangeSliderComponent extends SliderBase {
         this.ngZone = ngZone;
         this.changeDetector = changeDetector;
         this.hostElement = hostElement;
+        validatePackage(packageMetadata);
     }
     /**
      * Focuses the RangeSlider.

package/esm2022/text-fields-common/text-fields-base.mjs

@@ -22,7 +22,7 @@ export 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).
      *

package/esm2022/textarea/models/textarea-settings.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/textarea/textarea.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input, Output, ElementRef, EventEmitter, NgZone, Renderer2, ChangeDetectorRef, Injector, forwardRef, ContentChild } from '@angular/core';
 import { fromEvent } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, take } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { KendoInput, guid, isDocumentAvailable, hasObservers, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -122,6 +122,10 @@ export 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
@@ -212,6 +216,7 @@ export class TextAreaComponent extends TextFieldsBase {
      */
     valueChange = new EventEmitter();
     initialHeight;
+    maxResizableHeight;
     resizeSubscription;
     _size = 'medium';
     _rounded = 'medium';
@@ -252,10 +257,24 @@ export 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);
@@ -283,8 +302,14 @@ export 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');
@@ -448,6 +473,10 @@ export 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`);
@@ -518,7 +547,7 @@ export 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' },
             {
@@ -660,6 +689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], maxlength: [{
                 type: Input
+            }], maxResizableRows: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], tabIndex: [{