@syncfusion/ej2-inputs 31.2.15 → 32.1.20

package/src/numerictextbox/numerictextbox.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, EventHandler, Property, Event, Browser, L10n, getUniqueID } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, Browser, L10n, getUniqueID, append, compile, select, selectAll } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';
@@ -166,6 +166,8 @@ var NumericTextBox = /** @class */ (function (_super) {
                 this.enabled = false;
             }
             this.updateFloatLabelOverflowWidth();
+            this.createPrependTemplate();
+            this.createAppendTemplate();
             this.renderComplete();
         }
     };
@@ -524,6 +526,104 @@ var NumericTextBox = /** @class */ (function (_super) {
         EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);
         EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);
     };
+    NumericTextBox.prototype.updatePrependTemplate = function () {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    };
+    NumericTextBox.prototype.updateAppendTemplate = function () {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    };
+    NumericTextBox.prototype.templateComplier = function (iconTemplate) {
+        if (iconTemplate) {
+            try {
+                if (typeof iconTemplate !== 'function' && selectAll(iconTemplate, document).length) {
+                    return compile(select(iconTemplate, document).innerHTML.trim());
+                }
+                else {
+                    return compile(iconTemplate);
+                }
+            }
+            catch (exception) {
+                return compile(iconTemplate);
+            }
+        }
+        return undefined;
+    };
+    NumericTextBox.prototype.createPrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            var container = this.container;
+            this.prependedElement = this.createElement('div', { className: 'e-prepend-template' });
+            this.iconTemplateFunction = this.templateComplier(this.prependTemplate);
+            var iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.prependedElement);
+            if (iconTemplateCompiler) {
+                var fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.prependedElement);
+            }
+            var inputElement = container.querySelector('input');
+            container.classList.add('e-prepend-wrapper');
+            if (inputElement) {
+                container.insertBefore(this.prependedElement, inputElement);
+            }
+            else {
+                container.insertBefore(this.prependedElement, container.firstChild);
+            }
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    };
+    NumericTextBox.prototype.createAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            var container = this.container;
+            this.appendedElement = this.createElement('div', { className: 'e-append-template' });
+            this.iconTemplateFunction = this.templateComplier(this.appendTemplate);
+            var iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.appendedElement);
+            if (iconTemplateCompiler) {
+                var fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.appendedElement);
+            }
+            container.classList.add('e-append-wrapper');
+            var spinElement = container.querySelector('.e-spin-down');
+            if (this.showSpinButton && spinElement) {
+                container.insertBefore(this.appendedElement, spinElement);
+            }
+            else {
+                container.appendChild(this.appendedElement);
+            }
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    };
+    NumericTextBox.prototype.handleFloatLabel = function () {
+        var floatLabelElement = this.container.querySelector('.e-float-text');
+        if (floatLabelElement && this.floatLabelType === 'Auto') {
+            setTimeout(function () {
+                if (floatLabelElement && this.prependedElement && !this.enableRtl) {
+                    floatLabelElement.style.marginLeft = this.prependedElement.offsetWidth + "px";
+                    floatLabelElement.style.marginRight = '0';
+                }
+                else if (floatLabelElement && this.prependedElement && this.enableRtl) {
+                    floatLabelElement.style.marginRight = this.prependedElement.offsetWidth + "px";
+                    floatLabelElement.style.marginLeft = '0';
+                }
+                if (floatLabelElement && floatLabelElement.classList.contains('e-label-bottom')) {
+                    floatLabelElement.style.width = this.element.offsetWidth + 'px';
+                }
+            }.bind(this), 5);
+        }
+    };
+    NumericTextBox.prototype.removePrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    };
+    NumericTextBox.prototype.removeAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
+    };
     NumericTextBox.prototype.changeHandler = function (event) {
         event.stopPropagation();
         if (!this.element.value.length) {
@@ -918,6 +1018,9 @@ var NumericTextBox = /** @class */ (function (_super) {
             ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
     };
     NumericTextBox.prototype.mouseWheel = function (event) {
+        if (!this.allowMouseWheel) {
+            return;
+        }
         event.preventDefault();
         var delta;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -967,9 +1070,17 @@ var NumericTextBox = /** @class */ (function (_super) {
                 }
             }
         }
-        if (!Browser.isDevice) {
+        if (!Browser.isDevice && this.allowMouseWheel) {
             EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);
         }
+        var floatLabelElement = this.container.querySelector('.e-float-text');
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate) && floatLabelElement) {
+            setTimeout(function () {
+                if (floatLabelElement) {
+                    floatLabelElement.style.width = 'auto';
+                }
+            }.bind(this), 5);
+        }
     };
     NumericTextBox.prototype.focusOutHandler = function (event) {
         var _this = this;
@@ -1002,6 +1113,20 @@ var NumericTextBox = /** @class */ (function (_super) {
             }
         }
         this.updateFloatLabelOverflowWidth();
+        var floatLabelElement = this.container.querySelector('.e-float-text');
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate) && floatLabelElement) {
+            setTimeout(function () {
+                if (floatLabelElement && this.prependedElement && !this.enableRtl) {
+                    floatLabelElement.style.marginLeft = this.prependedElement.offsetWidth + "px";
+                }
+                else if (floatLabelElement && this.prependedElement && this.enableRtl) {
+                    floatLabelElement.style.marginRight = this.prependedElement.offsetWidth + "px";
+                }
+                if (floatLabelElement && floatLabelElement.classList.contains('e-label-bottom')) {
+                    floatLabelElement.style.width = this.element.offsetWidth + 'px';
+                }
+            }.bind(this), 5);
+        }
         var formElement = closest(this.element, 'form');
         if (formElement) {
             var element = this.element.nextElementSibling;
@@ -1133,6 +1258,9 @@ var NumericTextBox = /** @class */ (function (_super) {
      */
     NumericTextBox.prototype.destroy = function () {
         this.unwireEvents();
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -1230,6 +1358,7 @@ var NumericTextBox = /** @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'readonly':
                     Input.setReadonly(newProp.readonly, this.element);
@@ -1314,6 +1443,18 @@ var NumericTextBox = /** @class */ (function (_super) {
                 case 'decimals':
                     this.decimals = newProp.decimals;
                     this.updateValue(this.value);
+                    break;
+                case 'allowMouseWheel':
+                    if (this.allowMouseWheel && this.isFocused) {
+                        EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);
+                    }
+                    break;
+                case 'prependTemplate':
+                    this.updatePrependTemplate();
+                    break;
+                case 'appendTemplate':
+                    this.updateAppendTemplate();
+                    break;
             }
         }
     };
@@ -1344,7 +1485,7 @@ var NumericTextBox = /** @class */ (function (_super) {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
         var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
-        if (label && calculateWidth) {
+        if (label && calculateWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
             label.style.width = calculateWidth + 'px';
         }
     };
@@ -1414,9 +1555,18 @@ var NumericTextBox = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], NumericTextBox.prototype, "validateDecimalOnType", void 0);
+    __decorate([
+        Property(true)
+    ], NumericTextBox.prototype, "allowMouseWheel", void 0);
     __decorate([
         Property('Never')
     ], NumericTextBox.prototype, "floatLabelType", void 0);
+    __decorate([
+        Property(null)
+    ], NumericTextBox.prototype, "prependTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], NumericTextBox.prototype, "appendTemplate", void 0);
     __decorate([
         Event()
     ], NumericTextBox.prototype, "created", void 0);

package/src/smart-textarea/smart-textarea-model.d.ts

@@ -1,5 +1,5 @@
-import { EventHandler, Property, createElement } from '@syncfusion/ej2-base';import { TextArea } from '../textarea/textarea';import { CaretPosition, CaretPositionHelper } from './caret-helper';
-import {SuggestionMode} from "./smart-textarea";
+import { EmitType, Event, EventHandler, Property, createElement } from '@syncfusion/ej2-base';import { TextArea } from '../textarea/textarea';import { CaretPosition, CaretPositionHelper } from './caret-helper';
+import {BeforeSuggestionInsertArgs,AfterSuggestionInsertArgs,SuggestionMode} from "./smart-textarea";
 import {TextAreaModel} from "../textarea/textarea-model";
 
 /**
@@ -7,6 +7,20 @@ import {TextAreaModel} from "../textarea/textarea-model";
  */
 export interface SmartTextAreaModel extends TextAreaModel{
 
+    /**
+     * Triggered before suggestions are shown as the user types in the SmartTextArea component. Allows cancellation of suggestion insertion.
+     *
+     * @event beforeSuggestionInsert
+     */
+    beforeSuggestionInsert?: EmitType<BeforeSuggestionInsertArgs>;
+
+    /**
+     * Triggered after suggestions are shown as the user types in the SmartTextArea component. Used for post-insertion analytics or updates.
+     *
+     * @event afterSuggestionInsert
+     */
+    afterSuggestionInsert?: EmitType<AfterSuggestionInsertArgs>;
+
     /**
      * Represents the user's role or designation, which can be used to provide role-specific suggestions or content within the smart textarea.
      * Provide a string that describes who is typing and for what reason, optionally giving other contextual information.

package/src/smart-textarea/smart-textarea.d.ts

@@ -1,6 +1,10 @@
 /// <reference path="../textarea/textarea-model.d.ts" />
+import { EmitType } from '@syncfusion/ej2-base';
 import { TextArea } from '../textarea/textarea';
 import { SmartTextAreaModel } from './smart-textarea-model';
+/**
+ * @hidden
+ */
 export interface ChatParameters {
     messages: ChatMessage[];
     temperature?: number;
@@ -9,18 +13,62 @@ export interface ChatParameters {
     frequencyPenalty?: number;
     presencePenalty?: number;
 }
+/**
+ * @hidden
+ */
 export declare enum ChatMessageRole {
     System = "system",
     User = "user",
     Assistant = "assistant"
 }
+/**
+ * @hidden
+ */
 export interface ChatMessage {
     role: ChatMessageRole;
     content: string;
 }
+/**
+ * Event arguments passed before a suggestion is inserted into the textarea.
+ * Allows customization or cancellation of the insertion.
+ */
+export interface BeforeSuggestionInsertArgs {
+    /**
+     * Specifies the text that will be displayed as a suggestion while typing in the SmartTextArea.
+     */
+    text: string;
+    /**
+     * Set to true to cancel the suggestion insertion. Default: false
+     */
+    cancel: boolean;
+}
+/**
+ * Event arguments passed after a suggestion has been successfully inserted.
+ */
+export interface AfterSuggestionInsertArgs {
+    /**
+     * Specifies the text that is displayed as a suggestion while typing in the SmartTextArea. If the suggestion request fails, an empty string is returned.
+     */
+    text: string;
+}
+/**
+ * Defines the value for the `showSuggestionOnPopup` property.
+ */
 export declare type SuggestionMode = 'Enable' | 'Disable' | 'None';
 export declare class SmartTextArea extends TextArea {
     private pendingSuggestionAbort;
+    /**
+     * Triggered before suggestions are shown as the user types in the SmartTextArea component. Allows cancellation of suggestion insertion.
+     *
+     * @event beforeSuggestionInsert
+     */
+    beforeSuggestionInsert: EmitType<BeforeSuggestionInsertArgs>;
+    /**
+     * Triggered after suggestions are shown as the user types in the SmartTextArea component. Used for post-insertion analytics or updates.
+     *
+     * @event afterSuggestionInsert
+     */
+    afterSuggestionInsert: EmitType<AfterSuggestionInsertArgs>;
     /**
      * Represents the user's role or designation, which can be used to provide role-specific suggestions or content within the smart textarea.
      * Provide a string that describes who is typing and for what reason, optionally giving other contextual information.
@@ -62,6 +110,10 @@ export declare class SmartTextArea extends TextArea {
     private textArea;
     private suggestionDisplay;
     private typingDebounceTimeout;
+    /**
+     * @private
+     * @returns {void}
+     */
     render(): void;
     protected wireEvents(): void;
     protected unWireEvents(): void;
@@ -75,6 +127,15 @@ export declare class SmartTextArea extends TextArea {
     private requestSuggestionAsync;
     private validateSuggestion;
     private indexOfAny;
+    /**
+     * Gets component name.
+     * @returns {string} - Returns the string value.
+     * @private
+     */
     getModuleName(): string;
+    /**
+     * @private
+     * @returns {void}
+     */
     destroy(): void;
 }

package/src/smart-textarea/smart-textarea.js

@@ -54,9 +54,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 ///<reference path='../textarea/textarea-model.d.ts'/>
-import { EventHandler, Property, createElement } from '@syncfusion/ej2-base';
+import { Event, EventHandler, Property, createElement } from '@syncfusion/ej2-base';
 import { TextArea } from '../textarea/textarea';
 import { CaretPositionHelper } from './caret-helper';
+/**
+ * @hidden
+ */
 export var ChatMessageRole;
 (function (ChatMessageRole) {
     ChatMessageRole["System"] = "system";
@@ -75,6 +78,10 @@ var SmartTextArea = /** @class */ (function (_super) {
     function SmartTextArea(options, element) {
         return _super.call(this, options, element) || this;
     }
+    /**
+     * @private
+     * @returns {void}
+     */
     SmartTextArea.prototype.render = function () {
         _super.prototype.render.call(this);
         if (!(this.element instanceof HTMLTextAreaElement)) {
@@ -89,7 +96,7 @@ var SmartTextArea = /** @class */ (function (_super) {
             this.textArea.setAttribute('data-inline-suggestions', suggestionState);
         }
         this.suggestionDisplay = this.shouldShowInlineSuggestions(this.textArea) ?
-            new InlineSuggestion(smartTextArea, this.textArea) : new ContextSuggestion(smartTextArea, this.textArea);
+            new InlineSuggestion(this, smartTextArea, this.textArea) : new ContextSuggestion(this, smartTextArea, this.textArea);
     };
     SmartTextArea.prototype.wireEvents = function () {
         var _this = this;
@@ -224,7 +231,7 @@ var SmartTextArea = /** @class */ (function (_super) {
     };
     SmartTextArea.prototype.requestSuggestionAsync = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var requestDetails, suggestionData, chatConfig, insertSuggestion, response;
+            var requestDetails, suggestionData, chatConfig, insertSuggestion, response, beforeArgs;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -254,7 +261,15 @@ var SmartTextArea = /** @class */ (function (_super) {
                             if (!insertSuggestion.endsWith(' ')) {
                                 insertSuggestion += ' ';
                             }
-                            this.suggestionDisplay.show(insertSuggestion);
+                            beforeArgs = {
+                                text: insertSuggestion,
+                                cancel: false
+                            };
+                            this.trigger('beforeSuggestionInsert', beforeArgs);
+                            if (beforeArgs.cancel) {
+                                return [2 /*return*/];
+                            }
+                            this.suggestionDisplay.show(beforeArgs.text);
                         }
                         return [2 /*return*/];
                 }
@@ -284,15 +299,30 @@ var SmartTextArea = /** @class */ (function (_super) {
         }
         return -1;
     };
+    /**
+     * Gets component name.
+     * @returns {string} - Returns the string value.
+     * @private
+     */
     SmartTextArea.prototype.getModuleName = function () {
         return 'smarttextarea';
     };
+    /**
+     * @private
+     * @returns {void}
+     */
     SmartTextArea.prototype.destroy = function () {
         _super.prototype.destroy.call(this);
         this.textArea = null;
         this.suggestionDisplay = null;
         this.typingDebounceTimeout = null;
     };
+    __decorate([
+        Event()
+    ], SmartTextArea.prototype, "beforeSuggestionInsert", void 0);
+    __decorate([
+        Event()
+    ], SmartTextArea.prototype, "afterSuggestionInsert", void 0);
     __decorate([
         Property('')
     ], SmartTextArea.prototype, "userRole", void 0);
@@ -308,9 +338,13 @@ var SmartTextArea = /** @class */ (function (_super) {
     return SmartTextArea;
 }(TextArea));
 export { SmartTextArea };
+/**
+ * @hidden
+ */
 var InlineSuggestion = /** @class */ (function () {
-    function InlineSuggestion(smartTextArea, textArea) {
-        this.owner = smartTextArea;
+    function InlineSuggestion(smartTextArea, container, textArea) {
+        this.smartTextArea = smartTextArea;
+        this.owner = container;
         this.textArea = textArea;
         this.latestSuggestionText = '';
         this.suggestionStartPos = null;
@@ -374,6 +408,7 @@ var InlineSuggestion = /** @class */ (function () {
         configurable: true
     });
     InlineSuggestion.prototype.accept = function () {
+        var insertedText = this.currentSuggestion;
         this.textArea.setSelectionRange(this.suggestionEndPos, this.suggestionEndPos);
         this.suggestionStartPos = null;
         this.suggestionEndPos = null;
@@ -382,6 +417,7 @@ var InlineSuggestion = /** @class */ (function () {
         }
         this.textArea.removeAttribute('data-suggestion-visible');
         CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);
+        this.smartTextArea.trigger('afterSuggestionInsert', { insertedText: insertedText });
     };
     InlineSuggestion.prototype.reject = function () {
         if (!this.isShowing()) {
@@ -403,11 +439,15 @@ var InlineSuggestion = /** @class */ (function () {
     };
     return InlineSuggestion;
 }());
+/**
+ * @hidden
+ */
 var ContextSuggestion = /** @class */ (function () {
-    function ContextSuggestion(container, textArea) {
+    function ContextSuggestion(smartTextArea, container, textArea) {
         var _this = this;
         this.latestSuggestionText = '';
         this.showing = false;
+        this.smartTextArea = smartTextArea;
         this.textArea = textArea;
         this.suggestionElement = document.createElement('div');
         this.suggestionElement.classList.add('smart-textarea-suggestion-overlay');
@@ -461,9 +501,11 @@ var ContextSuggestion = /** @class */ (function () {
     };
     ContextSuggestion.prototype.accept = function () {
         if (this.showing) {
-            CaretPositionHelper.insertCharacter(this.textArea, this.currentSuggestion);
+            var insertedText = this.currentSuggestion;
+            CaretPositionHelper.insertCharacter(this.textArea, insertedText);
             CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);
             this.hide();
+            this.smartTextArea.trigger('afterSuggestionInsert', { insertedText: insertedText });
         }
     };
     ContextSuggestion.prototype.reject = function () {
@@ -495,6 +537,9 @@ var ContextSuggestion = /** @class */ (function () {
     };
     return ContextSuggestion;
 }());
+/**
+ * @hidden
+ */
 var VirtualCaret = /** @class */ (function () {
     function VirtualCaret(smartTextArea, textArea) {
         this.textArea = textArea;

package/src/textarea/textarea-model.d.ts

@@ -1,5 +1,5 @@
-import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';import { detach, getUniqueID, Event, EventHandler, EmitType, Internationalization, L10n, addClass, removeClass, closest, formatUnit } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject, TEXTBOX_FOCUS } from '../input/input';import { FocusInEventArgs, FocusOutEventArgs, InputEventArgs, ChangedEventArgs } from '../textbox/textbox';
-import {Resize} from "./textarea";
+import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, isNullOrUndefined, setValue, getValue, append, compile, select, selectAll } from '@syncfusion/ej2-base';import { detach, getUniqueID, Event, EventHandler, EmitType, Internationalization, L10n, addClass, removeClass, closest, formatUnit } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject, TEXTBOX_FOCUS } from '../input/input';import { FocusInEventArgs, FocusOutEventArgs, InputEventArgs, ChangedEventArgs } from '../textbox/textbox';
+import {Resize,AdornmentsDirection} from "./textarea";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -116,6 +116,54 @@ export interface TextAreaModel extends ComponentModel{
      */
     rows?: number;
 
+    /**
+     * Specifies the HTML template to prepend inside the TextArea wrapper.
+     * Accepts an HTML string or a function returning an HTML string.
+     * Updates dynamically when the property value changes.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    prependTemplate?: string | Function;
+
+    /**
+     * Specifies the HTML template to append inside the TextArea wrapper.
+     * Accepts an HTML string or a function returning an HTML string.
+     * Updates dynamically when the property value changes.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    appendTemplate?: string | Function;
+
+    /**
+     * Specifies the adornment direction of textarea.
+     * Controls the flow of the textarea and adornment sections (horizontal vs vertical).
+     *
+     * @isenumeration true
+     * @asptype AdornmentsDirection
+     * @default 'Horizontal'
+     *
+     */
+    adornmentFlow?: AdornmentsDirection;
+
+    /**
+     * Specifies the adornment orientation of textarea.
+     * Controls the direction of adornment items relative to each other within their region (horizontal vs vertical).
+     *
+     * @isenumeration true
+     * @asptype AdornmentsDirection
+     * @default 'Horizontal'
+     *
+     */
+    adornmentOrientation?: AdornmentsDirection;
+
     /**
      * Triggers when the TextArea component is created.
      *

package/src/textarea/textarea.d.ts

@@ -4,6 +4,12 @@ import { FloatLabelType } from '../input/input';
 import { FocusInEventArgs, FocusOutEventArgs, InputEventArgs, ChangedEventArgs } from '../textbox/textbox';
 import { TextAreaModel } from './textarea-model';
 export declare type Resize = 'Vertical' | 'Horizontal' | 'Both' | 'None';
+/**
+ * Defines the direction for adornments elements for TextArea.
+ * - Horizontal :- Adornments elemets with textarea in horizontal direction.
+ * - Vertical :- Adornments elemets with textarea in vertical direction.
+ */
+export declare type AdornmentsDirection = 'Horizontal' | 'Vertical';
 export declare class TextArea extends Component<HTMLTextAreaElement> implements INotifyPropertyChanged {
     private textareaWrapper;
     private textareaOptions;
@@ -16,6 +22,9 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
     private inputPreviousValue;
     private preventChange;
     private clearButton;
+    private prependedElement;
+    private appendedElement;
+    private iconTemplateFn;
     /**
      * Specifies the boolean value whether the TextArea allows user to change the text.
      *
@@ -113,6 +122,50 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
      * @aspType int?
      */
     rows: number;
+    /**
+     * Specifies the HTML template to prepend inside the TextArea wrapper.
+     * Accepts an HTML string or a function returning an HTML string.
+     * Updates dynamically when the property value changes.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    prependTemplate: string | Function;
+    /**
+     * Specifies the HTML template to append inside the TextArea wrapper.
+     * Accepts an HTML string or a function returning an HTML string.
+     * Updates dynamically when the property value changes.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    appendTemplate: string | Function;
+    /**
+     * Specifies the adornment direction of textarea.
+     * Controls the flow of the textarea and adornment sections (horizontal vs vertical).
+     *
+     * @isenumeration true
+     * @asptype AdornmentsDirection
+     * @default 'Horizontal'
+     *
+     */
+    adornmentFlow: AdornmentsDirection;
+    /**
+     * Specifies the adornment orientation of textarea.
+     * Controls the direction of adornment items relative to each other within their region (horizontal vs vertical).
+     *
+     * @isenumeration true
+     * @asptype AdornmentsDirection
+     * @default 'Horizontal'
+     *
+     */
+    adornmentOrientation: AdornmentsDirection;
     /**
      * Triggers when the TextArea component is created.
      *
@@ -167,6 +220,15 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
      * @private
      */
     render(): void;
+    private updatePrependTemplate;
+    private updateAppendTemplate;
+    private templateComplier;
+    private createPrependTemplate;
+    private createAppendTemplate;
+    private handleAdornmentDirection;
+    private handleAdornmentFloatLabel;
+    private removePrependTemplate;
+    private removeAppendTemplate;
     getModuleName(): string;
     /**
      * Gets the properties to be maintained in the persisted state.