@progress/kendo-angular-inputs 19.3.0-develop.24 → 19.3.0-develop.26

package/esm2022/package-metadata.mjs

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

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/textarea.component.mjs

@@ -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';
@@ -262,6 +267,14 @@ export class TextAreaComponent extends TextFieldsBase {
         this.ngZone.runOutsideAngular(() => {
             this.handleFlow();
         });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.prefix) {
+                this.prefix.flow = this.flow;
+            }
+            if (this.suffix) {
+                this.suffix.flow = this.flow;
+            }
+        });
         const stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(input => {
             this.handleClasses(this[input], input);
@@ -289,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');
@@ -454,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`);
@@ -524,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' },
             {
@@ -666,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: [{

package/fesm2022/progress-kendo-angular-inputs.mjs

@@ -550,8 +550,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1754485173,
-    version: '19.3.0-develop.24',
+    publishDate: 1754555109,
+    version: '19.3.0-develop.26',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -17084,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).
      *
@@ -17313,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
@@ -17403,6 +17407,7 @@ class TextAreaComponent extends TextFieldsBase {
      */
     valueChange = new EventEmitter();
     initialHeight;
+    maxResizableHeight;
     resizeSubscription;
     _size = 'medium';
     _rounded = 'medium';
@@ -17453,6 +17458,14 @@ class TextAreaComponent extends TextFieldsBase {
         this.ngZone.runOutsideAngular(() => {
             this.handleFlow();
         });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.prefix) {
+                this.prefix.flow = this.flow;
+            }
+            if (this.suffix) {
+                this.suffix.flow = this.flow;
+            }
+        });
         const stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(input => {
             this.handleClasses(this[input], input);
@@ -17480,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');
@@ -17645,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`);
@@ -17715,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' },
             {
@@ -17857,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: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "19.3.0-develop.24",
+  "version": "19.3.0-develop.26",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -28,7 +28,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1754485173,
+      "publishDate": 1754555109,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -40,20 +40,20 @@
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.24",
-    "@progress/kendo-angular-common": "19.3.0-develop.24",
-    "@progress/kendo-angular-utils": "19.3.0-develop.24",
-    "@progress/kendo-angular-navigation": "19.3.0-develop.24",
-    "@progress/kendo-angular-dialog": "19.3.0-develop.24",
-    "@progress/kendo-angular-intl": "19.3.0-develop.24",
-    "@progress/kendo-angular-l10n": "19.3.0-develop.24",
-    "@progress/kendo-angular-popup": "19.3.0-develop.24",
-    "@progress/kendo-angular-icons": "19.3.0-develop.24",
+    "@progress/kendo-angular-buttons": "19.3.0-develop.26",
+    "@progress/kendo-angular-common": "19.3.0-develop.26",
+    "@progress/kendo-angular-utils": "19.3.0-develop.26",
+    "@progress/kendo-angular-navigation": "19.3.0-develop.26",
+    "@progress/kendo-angular-dialog": "19.3.0-develop.26",
+    "@progress/kendo-angular-intl": "19.3.0-develop.26",
+    "@progress/kendo-angular-l10n": "19.3.0-develop.26",
+    "@progress/kendo-angular-popup": "19.3.0-develop.26",
+    "@progress/kendo-angular-icons": "19.3.0-develop.26",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.24",
+    "@progress/kendo-angular-schematics": "19.3.0-develop.26",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"

package/text-fields-common/text-fields-base.d.ts

@@ -20,7 +20,7 @@ export declare abstract class TextFieldsBase {
     /**
      * Sets the `title` attribute of the internal textarea input element of the component.
      */
-    title: string;
+    title: string | undefined;
     /**
      * 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/textarea/textarea.component.d.ts

@@ -74,6 +74,10 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
      * Sets the maximum number of characters allowed in the text area.
      */
     maxlength: number;
+    /**
+     * @hidden
+     */
+    maxResizableRows: number;
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      * @default 0
@@ -142,6 +146,7 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
      */
     valueChange: EventEmitter<any>;
     private initialHeight;
+    private maxResizableHeight;
     private resizeSubscription;
     private _size;
     private _rounded;
@@ -233,5 +238,5 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
     private handleFlow;
     private setInputAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextAreaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "kendo-textarea", ["kendoTextArea"], { "focusableId": { "alias": "focusableId"; "required": false; }; "flow": { "alias": "flow"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "adornmentsOrientation": { "alias": "adornmentsOrientation"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "showPrefixSeparator": { "alias": "showPrefixSeparator"; "required": false; }; "showSuffixSeparator": { "alias": "showSuffixSeparator"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; }, ["prefix", "suffix"], ["kendo-textarea-prefix", "kendo-textarea-suffix"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "kendo-textarea", ["kendoTextArea"], { "focusableId": { "alias": "focusableId"; "required": false; }; "flow": { "alias": "flow"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "adornmentsOrientation": { "alias": "adornmentsOrientation"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "maxResizableRows": { "alias": "maxResizableRows"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "showPrefixSeparator": { "alias": "showPrefixSeparator"; "required": false; }; "showSuffixSeparator": { "alias": "showSuffixSeparator"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; }, ["prefix", "suffix"], ["kendo-textarea-prefix", "kendo-textarea-suffix"], true, never>;
 }