@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/dist/es6/ej2-inputs.es5.js

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, createElement, addClass, attributes, removeClass, formatUnit, remove, detach, classList, closest, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, merge, getNumericObject, Property, Event, NotifyPropertyChanges, Component, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, onIntlChange, select, selectAll, Base, KeyboardEvents, Ajax, append, Animation, compile, rippleEffect, getInstance } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, createElement, addClass, attributes, removeClass, formatUnit, remove, detach, classList, closest, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, selectAll, compile, select, append, merge, getNumericObject, Property, Event, NotifyPropertyChanges, Component, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, onIntlChange, Base, KeyboardEvents, Ajax, Animation, rippleEffect, getInstance } from '@syncfusion/ej2-base';
 import { Tooltip, getZindexPartial, createSpinner, showSpinner, hideSpinner, isCollide, Popup } from '@syncfusion/ej2-popups';
 import { SplitButton, Deferred, getModel } from '@syncfusion/ej2-splitbuttons';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -1278,6 +1278,8 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                 this.enabled = false;
             }
             this.updateFloatLabelOverflowWidth();
+            this.createPrependTemplate();
+            this.createAppendTemplate();
             this.renderComplete();
         }
     };
@@ -1636,6 +1638,104 @@ var NumericTextBox = /** @__PURE__ @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) {
@@ -2029,6 +2129,9 @@ var NumericTextBox = /** @__PURE__ @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
@@ -2078,9 +2181,17 @@ var NumericTextBox = /** @__PURE__ @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;
@@ -2113,6 +2224,20 @@ var NumericTextBox = /** @__PURE__ @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;
@@ -2244,6 +2369,9 @@ var NumericTextBox = /** @__PURE__ @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];
         }
@@ -2341,6 +2469,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'readonly':
                     Input.setReadonly(newProp.readonly, this.element);
@@ -2425,6 +2554,18 @@ var NumericTextBox = /** @__PURE__ @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;
             }
         }
     };
@@ -2525,9 +2666,18 @@ var NumericTextBox = /** @__PURE__ @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);
@@ -2839,6 +2989,14 @@ function maskInputFocusHandler(event) {
             label.removeAttribute('style');
         }
     }
+    var floatLabelElement = this.inputObj.container.querySelector('.e-float-text');
+    if (floatLabelElement && this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+        setTimeout(function () {
+            if (floatLabelElement) {
+                floatLabelElement.style.width = 'auto';
+            }
+        }.bind(this), 5);
+    }
     if (this.mask) {
         if (!(!(modelValue === null || modelValue === '') || this.floatLabelType === 'Always' ||
             this.placeholder === null || this.placeholder === '')) {
@@ -2941,6 +3099,20 @@ function maskInputBlurHandler(event) {
     };
     this.trigger('blur', this.blurEventArgs);
     this.updateFloatLabelOverflowWidth();
+    var floatLabelElement = this.inputObj.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.style.width = this.element.offsetWidth + 'px';
+            }
+        }.bind(this), 5);
+    }
     if (this.mask) {
         this.isFocus = false;
         if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') {
@@ -3873,6 +4045,8 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                 this.element.setAttribute('aria-label', 'maskedtextbox');
             }
             this.updateFloatLabelOverflowWidth();
+            this.createPrependTemplate();
+            this.createAppendTemplate();
             this.renderComplete();
         }
     };
@@ -4059,6 +4233,7 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'customCharacters':
                     this.customCharacters = newProp.customCharacters;
@@ -4078,6 +4253,12 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                     this.updateHTMLAttrToWrapper();
                     this.checkHtmlAttributes(true);
                     break;
+                case 'prependTemplate':
+                    this.updatePrependTemplate();
+                    break;
+                case 'appendTemplate':
+                    this.updateAppendTemplate();
+                    break;
                 case 'mask':
                     {
                         var strippedValue_1 = this.value;
@@ -4112,6 +4293,98 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
         }
         this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
     };
+    MaskedTextBox.prototype.updatePrependTemplate = function () {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    };
+    MaskedTextBox.prototype.updateAppendTemplate = function () {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    };
+    MaskedTextBox.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;
+    };
+    MaskedTextBox.prototype.createPrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            var container = this.inputObj.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();
+        }
+    };
+    MaskedTextBox.prototype.createAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            var container = this.inputObj.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');
+            container.appendChild(this.appendedElement);
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    };
+    MaskedTextBox.prototype.handleFloatLabel = function () {
+        var floatLabelElement = this.inputObj.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);
+        }
+    };
+    MaskedTextBox.prototype.removePrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    };
+    MaskedTextBox.prototype.removeAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
+    };
     MaskedTextBox.prototype.updateValue = function (strippedVal) {
         this.resetMaskedTextBox();
         setMaskValue.call(this, strippedVal);
@@ -4176,6 +4449,9 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
      */
     MaskedTextBox.prototype.destroy = function () {
         unwireEvents.call(this);
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -4238,6 +4514,12 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(null)
     ], MaskedTextBox.prototype, "customCharacters", void 0);
+    __decorate$1([
+        Property(null)
+    ], MaskedTextBox.prototype, "prependTemplate", void 0);
+    __decorate$1([
+        Property(null)
+    ], MaskedTextBox.prototype, "appendTemplate", void 0);
     __decorate$1([
         Event()
     ], MaskedTextBox.prototype, "created", void 0);
@@ -14096,6 +14378,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
@@ -14118,6 +14401,12 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                     this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
                     break;
+                case 'prependTemplate':
+                    this.updatePrependTemplate();
+                    break;
+                case 'appendTemplate':
+                    this.updateAppendTemplate();
+                    break;
             }
         }
     };
@@ -14309,6 +14598,23 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {
             this.element.setAttribute('aria-label', 'textbox');
         }
+        this.createPrependTemplate();
+        this.createAppendTemplate();
+        if (this.multiline && this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate) && typeof window.ResizeObserver !== 'undefined') {
+            var resizeObserver = new window.ResizeObserver(function (entries) {
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    var floatLabelElement = entry.target && entry.target.parentElement ? entry.target.parentElement.querySelector('.e-float-text.e-label-bottom') : null;
+                    if (floatLabelElement && floatLabelElement.classList.contains('e-label-bottom')) {
+                        floatLabelElement.style.width = entry.contentRect.width + "px";
+                    }
+                    else if (floatLabelElement && floatLabelElement.classList.contains('e-label-top')) {
+                        floatLabelElement.style.width = 'auto';
+                    }
+                }
+            });
+            resizeObserver.observe(this.textarea);
+        }
         this.renderComplete();
     };
     TextBox.prototype.updateHTMLAttributesToWrapper = function () {
@@ -14323,6 +14629,98 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
             this.respectiveElement.setAttribute('value', this.initialValue);
         }
     };
+    TextBox.prototype.updatePrependTemplate = function () {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    };
+    TextBox.prototype.updateAppendTemplate = function () {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    };
+    TextBox.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;
+    };
+    TextBox.prototype.createPrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            var container = this.textboxWrapper.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();
+        }
+    };
+    TextBox.prototype.createAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            var container = this.textboxWrapper.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');
+            container.appendChild(this.appendedElement);
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    };
+    TextBox.prototype.handleFloatLabel = function () {
+        var floatLabelElement = this.textboxWrapper.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);
+        }
+    };
+    TextBox.prototype.removePrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    };
+    TextBox.prototype.removeAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
+    };
     TextBox.prototype.wireEvents = function () {
         EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);
         EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);
@@ -14386,6 +14784,14 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
             value: this.value
         };
         this.trigger('focus', eventArgs);
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                var label = this.textboxWrapper ? this.textboxWrapper.container.querySelector('.e-float-text') : null;
+                if (label) {
+                    label.style.width = 'auto';
+                }
+            }.bind(this), 5);
+        }
     };
     TextBox.prototype.focusOutHandler = function (args) {
         if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&
@@ -14398,6 +14804,14 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
             value: this.value
         };
         this.trigger('blur', eventArgs);
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                var label = this.textboxWrapper ? this.textboxWrapper.container.querySelector('.e-float-text.e-label-bottom') : null;
+                if (label) {
+                    label.style.width = this.multiline ? this.textarea.offsetWidth : this.element.offsetWidth + 'px';
+                }
+            }.bind(this), 5);
+        }
     };
     TextBox.prototype.keydownHandler = function (args) {
         if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.respectiveElement.value === '')) {
@@ -14507,6 +14921,9 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
      */
     TextBox.prototype.destroy = function () {
         this.unWireEvents();
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -14684,6 +15101,12 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
     __decorate$6([
         Property(null)
     ], TextBox.prototype, "width", void 0);
+    __decorate$6([
+        Property(null)
+    ], TextBox.prototype, "prependTemplate", void 0);
+    __decorate$6([
+        Property(null)
+    ], TextBox.prototype, "appendTemplate", void 0);
     __decorate$6([
         Event()
     ], TextBox.prototype, "created", void 0);
@@ -14829,6 +15252,7 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textareaWrapper.container]);
+                    this.handleAdornmentFloatLabel();
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.element);
@@ -14880,6 +15304,24 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
                         this.setWrapperWidth();
                     }
                     break;
+                case 'prependTemplate':
+                    this.handleAdornmentDirection();
+                    this.updatePrependTemplate();
+                    break;
+                case 'appendTemplate':
+                    this.handleAdornmentDirection(true);
+                    this.updateAppendTemplate();
+                    break;
+                case 'adornmentFlow':
+                    this.handleAdornmentDirection();
+                    this.updatePrependTemplate();
+                    this.updateAppendTemplate();
+                    break;
+                case 'adornmentOrientation':
+                    this.handleAdornmentDirection();
+                    this.updatePrependTemplate();
+                    this.updateAppendTemplate();
+                    break;
             }
         }
     };
@@ -14983,7 +15425,147 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         Input.setWidth(this.width, this.textareaWrapper.container);
         this.setWrapperWidth();
         this.updateFloatLabelOverflowWidth();
+        this.handleAdornmentDirection();
+        this.createPrependTemplate();
+        this.createAppendTemplate();
         this.renderComplete();
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate) && typeof window.ResizeObserver !== 'undefined') {
+            var resizeObserver = new window.ResizeObserver(function (entries) {
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    var floatLabelElement = entry.target && entry.target.parentElement ? entry.target.parentElement.querySelector('.e-float-text') : null;
+                    if (floatLabelElement && floatLabelElement.classList.contains('e-label-bottom')) {
+                        floatLabelElement.style.width = entry.contentRect.width + "px";
+                    }
+                    else if (floatLabelElement && floatLabelElement.classList.contains('e-label-top')) {
+                        floatLabelElement.style.width = 'auto';
+                    }
+                }
+            });
+            resizeObserver.observe(this.element);
+        }
+    };
+    TextArea.prototype.updatePrependTemplate = function () {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    };
+    TextArea.prototype.updateAppendTemplate = function () {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    };
+    TextArea.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;
+    };
+    TextArea.prototype.createPrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            var container = this.textareaWrapper.container;
+            this.prependedElement = this.createElement('div', { className: 'e-prepend-template' });
+            this.iconTemplateFn = this.templateComplier(this.prependTemplate);
+            var iconTempCompiler = this.iconTemplateFn(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.prependedElement);
+            if (iconTempCompiler) {
+                var fromElements = [].slice.call(iconTempCompiler);
+                append(fromElements, this.prependedElement);
+            }
+            var inputElement = container.querySelector('textarea');
+            container.classList.add('e-prepend-wrapper');
+            if (inputElement) {
+                container.insertBefore(this.prependedElement, inputElement);
+            }
+            else {
+                container.insertBefore(this.prependedElement, container.firstChild);
+            }
+            this.handleAdornmentFloatLabel();
+            this.renderReactTemplates();
+        }
+    };
+    TextArea.prototype.createAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            var container = this.textareaWrapper.container;
+            this.appendedElement = this.createElement('div', { className: 'e-append-template' });
+            this.iconTemplateFn = this.templateComplier(this.appendTemplate);
+            var iconTempCompiler = this.iconTemplateFn(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.appendedElement);
+            if (iconTempCompiler) {
+                var fromElements = [].slice.call(iconTempCompiler);
+                append(fromElements, this.appendedElement);
+            }
+            container.classList.add('e-append-wrapper');
+            container.appendChild(this.appendedElement);
+            this.renderReactTemplates();
+        }
+    };
+    TextArea.prototype.handleAdornmentDirection = function (isPropertyChange) {
+        var floatLabelElement = this.textareaWrapper.container.querySelector('.e-float-text');
+        if (floatLabelElement && this.floatLabelType === 'Auto' && !isPropertyChange) {
+            floatLabelElement.style.marginLeft = '0';
+            floatLabelElement.style.marginRight = '0';
+            floatLabelElement.style.marginTop = '0';
+        }
+        if (this.adornmentFlow === 'Vertical' && (this.appendTemplate || this.prependTemplate)) {
+            this.textareaWrapper.container.classList.add('e-adornment-flow-vertical');
+            this.textareaWrapper.container.classList.remove('e-adornment-flow-horizontal');
+        }
+        else if (this.appendTemplate || this.prependTemplate) {
+            this.textareaWrapper.container.classList.add('e-adornment-flow-horizontal');
+            this.textareaWrapper.container.classList.remove('e-adornment-flow-vertical');
+        }
+        if (this.adornmentOrientation === 'Vertical' && (this.appendTemplate || this.prependTemplate)) {
+            this.textareaWrapper.container.classList.add('e-adornment-orientation-vertical');
+            this.textareaWrapper.container.classList.remove('e-adornment-orientation-horizontal');
+        }
+        else if (this.appendTemplate || this.prependTemplate) {
+            this.textareaWrapper.container.classList.add('e-adornment-orientation-horizontal');
+            this.textareaWrapper.container.classList.remove('e-adornment-orientation-vertical');
+        }
+    };
+    TextArea.prototype.handleAdornmentFloatLabel = function () {
+        var floatLabelElement = this.textareaWrapper.container.querySelector('.e-float-text');
+        if (floatLabelElement && this.floatLabelType === 'Auto') {
+            setTimeout(function () {
+                if (floatLabelElement && this.prependedElement && this.adornmentFlow !== 'Vertical' && !this.enableRtl) {
+                    floatLabelElement.style.marginLeft = this.prependedElement.offsetWidth + "px";
+                    floatLabelElement.style.marginRight = '0';
+                }
+                else if (floatLabelElement && this.prependedElement && this.adornmentFlow !== 'Vertical' && this.enableRtl) {
+                    floatLabelElement.style.marginRight = this.prependedElement.offsetWidth + "px";
+                    floatLabelElement.style.marginLeft = '0';
+                }
+                if (this.adornmentFlow === 'Vertical' && this.adornmentOrientation === 'Vertical') {
+                    if (floatLabelElement && this.prependedElement) {
+                        floatLabelElement.style.marginTop = this.prependedElement.offsetHeight + "px";
+                    }
+                }
+                if (this.adornmentFlow === 'Vertical' && this.adornmentOrientation === 'Horizontal') {
+                    if (floatLabelElement && this.prependedElement) {
+                        floatLabelElement.style.marginTop = this.prependedElement.offsetHeight + "px";
+                    }
+                }
+            }.bind(this), 10);
+        }
+    };
+    TextArea.prototype.removePrependTemplate = function () {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    };
+    TextArea.prototype.removeAppendTemplate = function () {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
     };
     TextArea.prototype.getModuleName = function () {
         return 'textarea';
@@ -15062,6 +15644,9 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
      */
     TextArea.prototype.destroy = function () {
         this.unWireEvents();
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -15097,6 +15682,14 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.trigger('focus', eventArgs);
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                var label = this.textareaWrapper ? this.textareaWrapper.container.querySelector('.e-float-text') : null;
+                if (label) {
+                    label.style.width = 'auto';
+                }
+            }.bind(this), 5);
+        }
     };
     TextArea.prototype.focusOutHandler = function (args) {
         if (!(this.previousValue === null && this.value === null) &&
@@ -15109,6 +15702,7 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
             value: this.value
         };
         this.updateFloatLabelOverflowWidth();
+        this.handleAdornmentFloatLabel();
         this.trigger('blur', eventArgs);
     };
     TextArea.prototype.keydownHandler = function (args) {
@@ -15370,9 +15964,17 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         var container = this.textareaWrapper.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.prependTemplate || !this.appendTemplate)) {
             label.style.width = calculateWidth + 'px';
         }
+        else if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                var label = container ? container.querySelector('.e-float-text.e-label-bottom') : null;
+                if (label) {
+                    label.style.width = this.element.offsetWidth + 'px';
+                }
+            }.bind(this), 10);
+        }
     };
     __decorate$7([
         Property(false)
@@ -15416,6 +16018,18 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
     __decorate$7([
         Property(null)
     ], TextArea.prototype, "rows", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "prependTemplate", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "appendTemplate", void 0);
+    __decorate$7([
+        Property('Horizontal')
+    ], TextArea.prototype, "adornmentFlow", void 0);
+    __decorate$7([
+        Property('Horizontal')
+    ], TextArea.prototype, "adornmentOrientation", void 0);
     __decorate$7([
         Event()
     ], TextArea.prototype, "created", void 0);
@@ -15582,6 +16196,9 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+/**
+ * @hidden
+ */
 var ChatMessageRole;
 (function (ChatMessageRole) {
     ChatMessageRole["System"] = "system";
@@ -15600,6 +16217,10 @@ var SmartTextArea = /** @__PURE__ @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)) {
@@ -15614,7 +16235,7 @@ var SmartTextArea = /** @__PURE__ @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;
@@ -15749,7 +16370,7 @@ var SmartTextArea = /** @__PURE__ @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:
@@ -15779,7 +16400,15 @@ var SmartTextArea = /** @__PURE__ @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*/];
                 }
@@ -15809,15 +16438,30 @@ var SmartTextArea = /** @__PURE__ @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$8([
+        Event()
+    ], SmartTextArea.prototype, "beforeSuggestionInsert", void 0);
+    __decorate$8([
+        Event()
+    ], SmartTextArea.prototype, "afterSuggestionInsert", void 0);
     __decorate$8([
         Property('')
     ], SmartTextArea.prototype, "userRole", void 0);
@@ -15832,9 +16476,13 @@ var SmartTextArea = /** @__PURE__ @class */ (function (_super) {
     ], SmartTextArea.prototype, "showSuggestionOnPopup", void 0);
     return SmartTextArea;
 }(TextArea));
+/**
+ * @hidden
+ */
 var InlineSuggestion = /** @__PURE__ @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;
@@ -15898,6 +16546,7 @@ var InlineSuggestion = /** @__PURE__ @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;
@@ -15906,6 +16555,7 @@ var InlineSuggestion = /** @__PURE__ @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()) {
@@ -15927,11 +16577,15 @@ var InlineSuggestion = /** @__PURE__ @class */ (function () {
     };
     return InlineSuggestion;
 }());
+/**
+ * @hidden
+ */
 var ContextSuggestion = /** @__PURE__ @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');
@@ -15985,9 +16639,11 @@ var ContextSuggestion = /** @__PURE__ @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 () {
@@ -16019,6 +16675,9 @@ var ContextSuggestion = /** @__PURE__ @class */ (function () {
     };
     return ContextSuggestion;
 }());
+/**
+ * @hidden
+ */
 var VirtualCaret = /** @__PURE__ @class */ (function () {
     function VirtualCaret(smartTextArea, textArea) {
         this.textArea = textArea;