@syncfusion/ej2-inputs 31.2.15 → 32.1.20

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

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, createElement, addClass, attributes, removeClass, formatUnit, remove, detach, classList, closest, Component, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, merge, getNumericObject, Property, Event, NotifyPropertyChanges, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, Base, onIntlChange, select, selectAll, KeyboardEvents, Ajax, append, Animation, compile, rippleEffect, getInstance } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, createElement, addClass, attributes, removeClass, formatUnit, remove, detach, classList, closest, Component, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, selectAll, compile, select, append, merge, getNumericObject, Property, Event, NotifyPropertyChanges, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, Base, onIntlChange, 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';
@@ -1254,6 +1254,8 @@ let NumericTextBox = class NumericTextBox extends Component {
                 this.enabled = false;
             }
             this.updateFloatLabelOverflowWidth();
+            this.createPrependTemplate();
+            this.createAppendTemplate();
             this.renderComplete();
         }
     }
@@ -1608,6 +1610,104 @@ let NumericTextBox = class NumericTextBox extends Component {
         EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);
         EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);
     }
+    updatePrependTemplate() {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    }
+    updateAppendTemplate() {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    }
+    templateComplier(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;
+    }
+    createPrependTemplate() {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            const container = this.container;
+            this.prependedElement = this.createElement('div', { className: 'e-prepend-template' });
+            this.iconTemplateFunction = this.templateComplier(this.prependTemplate);
+            const iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.prependedElement);
+            if (iconTemplateCompiler) {
+                const fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.prependedElement);
+            }
+            const 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();
+        }
+    }
+    createAppendTemplate() {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            const container = this.container;
+            this.appendedElement = this.createElement('div', { className: 'e-append-template' });
+            this.iconTemplateFunction = this.templateComplier(this.appendTemplate);
+            const iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.appendedElement);
+            if (iconTemplateCompiler) {
+                const fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.appendedElement);
+            }
+            container.classList.add('e-append-wrapper');
+            const spinElement = container.querySelector('.e-spin-down');
+            if (this.showSpinButton && spinElement) {
+                container.insertBefore(this.appendedElement, spinElement);
+            }
+            else {
+                container.appendChild(this.appendedElement);
+            }
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    }
+    handleFloatLabel() {
+        const 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);
+        }
+    }
+    removePrependTemplate() {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    }
+    removeAppendTemplate() {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
+    }
     changeHandler(event) {
         event.stopPropagation();
         if (!this.element.value.length) {
@@ -1999,6 +2099,9 @@ let NumericTextBox = class NumericTextBox extends Component {
             ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
     }
     mouseWheel(event) {
+        if (!this.allowMouseWheel) {
+            return;
+        }
         event.preventDefault();
         let delta;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2047,9 +2150,17 @@ let NumericTextBox = class NumericTextBox extends Component {
                 }
             }
         }
-        if (!Browser.isDevice) {
+        if (!Browser.isDevice && this.allowMouseWheel) {
             EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);
         }
+        const 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);
+        }
     }
     focusOutHandler(event) {
         this.blurEventArgs = { event: event, value: this.value, container: this.container };
@@ -2081,6 +2192,20 @@ let NumericTextBox = class NumericTextBox extends Component {
             }
         }
         this.updateFloatLabelOverflowWidth();
+        const 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);
+        }
         const formElement = closest(this.element, 'form');
         if (formElement) {
             const element = this.element.nextElementSibling;
@@ -2209,6 +2334,9 @@ let NumericTextBox = class NumericTextBox extends Component {
      */
     destroy() {
         this.unwireEvents();
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -2305,6 +2433,7 @@ let NumericTextBox = class NumericTextBox extends Component {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'readonly':
                     Input.setReadonly(newProp.readonly, this.element);
@@ -2389,6 +2518,18 @@ let NumericTextBox = class NumericTextBox extends Component {
                 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;
             }
         }
     }
@@ -2419,7 +2560,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         const container = this.inputWrapper.container;
         const label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
         const 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';
         }
     }
@@ -2490,9 +2631,18 @@ __decorate([
 __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);
@@ -2801,6 +2951,14 @@ function maskInputFocusHandler(event) {
             label.removeAttribute('style');
         }
     }
+    const 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 === '')) {
@@ -2903,6 +3061,20 @@ function maskInputBlurHandler(event) {
     };
     this.trigger('blur', this.blurEventArgs);
     this.updateFloatLabelOverflowWidth();
+    const 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') {
@@ -3814,6 +3986,8 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                 this.element.setAttribute('aria-label', 'maskedtextbox');
             }
             this.updateFloatLabelOverflowWidth();
+            this.createPrependTemplate();
+            this.createAppendTemplate();
             this.renderComplete();
         }
     }
@@ -3996,6 +4170,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'customCharacters':
                     this.customCharacters = newProp.customCharacters;
@@ -4015,6 +4190,12 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     this.updateHTMLAttrToWrapper();
                     this.checkHtmlAttributes(true);
                     break;
+                case 'prependTemplate':
+                    this.updatePrependTemplate();
+                    break;
+                case 'appendTemplate':
+                    this.updateAppendTemplate();
+                    break;
                 case 'mask':
                     {
                         const strippedValue = this.value;
@@ -4049,6 +4230,98 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         }
         this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
     }
+    updatePrependTemplate() {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    }
+    updateAppendTemplate() {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    }
+    templateComplier(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;
+    }
+    createPrependTemplate() {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            const container = this.inputObj.container;
+            this.prependedElement = this.createElement('div', { className: 'e-prepend-template' });
+            this.iconTemplateFunction = this.templateComplier(this.prependTemplate);
+            const iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.prependedElement);
+            if (iconTemplateCompiler) {
+                const fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.prependedElement);
+            }
+            const 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();
+        }
+    }
+    createAppendTemplate() {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            const container = this.inputObj.container;
+            this.appendedElement = this.createElement('div', { className: 'e-append-template' });
+            this.iconTemplateFunction = this.templateComplier(this.appendTemplate);
+            const iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.appendedElement);
+            if (iconTemplateCompiler) {
+                const fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.appendedElement);
+            }
+            container.classList.add('e-append-wrapper');
+            container.appendChild(this.appendedElement);
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    }
+    handleFloatLabel() {
+        const 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);
+        }
+    }
+    removePrependTemplate() {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    }
+    removeAppendTemplate() {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
+    }
     updateValue(strippedVal) {
         this.resetMaskedTextBox();
         setMaskValue.call(this, strippedVal);
@@ -4100,7 +4373,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         const container = this.inputObj.container;
         const label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
         const 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';
         }
     }
@@ -4113,6 +4386,9 @@ let MaskedTextBox = class MaskedTextBox extends Component {
      */
     destroy() {
         unwireEvents.call(this);
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -4176,6 +4452,12 @@ __decorate$1([
 __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);
@@ -13818,6 +14100,7 @@ let TextBox = class TextBox extends Component {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
@@ -13840,6 +14123,12 @@ let TextBox = class TextBox extends Component {
                     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;
             }
         }
     }
@@ -14030,6 +14319,22 @@ let TextBox = class TextBox extends Component {
         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') {
+            const resizeObserver = new window.ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const 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();
     }
     updateHTMLAttributesToWrapper() {
@@ -14044,6 +14349,98 @@ let TextBox = class TextBox extends Component {
             this.respectiveElement.setAttribute('value', this.initialValue);
         }
     }
+    updatePrependTemplate() {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    }
+    updateAppendTemplate() {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    }
+    templateComplier(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;
+    }
+    createPrependTemplate() {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            const container = this.textboxWrapper.container;
+            this.prependedElement = this.createElement('div', { className: 'e-prepend-template' });
+            this.iconTemplateFunction = this.templateComplier(this.prependTemplate);
+            const iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.prependedElement);
+            if (iconTemplateCompiler) {
+                const fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.prependedElement);
+            }
+            const 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();
+        }
+    }
+    createAppendTemplate() {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            const container = this.textboxWrapper.container;
+            this.appendedElement = this.createElement('div', { className: 'e-append-template' });
+            this.iconTemplateFunction = this.templateComplier(this.appendTemplate);
+            const iconTemplateCompiler = this.iconTemplateFunction(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.appendedElement);
+            if (iconTemplateCompiler) {
+                const fromElements = [].slice.call(iconTemplateCompiler);
+                append(fromElements, this.appendedElement);
+            }
+            container.classList.add('e-append-wrapper');
+            container.appendChild(this.appendedElement);
+            this.handleFloatLabel();
+            this.renderReactTemplates();
+        }
+    }
+    handleFloatLabel() {
+        const 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);
+        }
+    }
+    removePrependTemplate() {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    }
+    removeAppendTemplate() {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
+    }
     wireEvents() {
         EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);
         EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);
@@ -14107,6 +14504,14 @@ let TextBox = class TextBox extends Component {
             value: this.value
         };
         this.trigger('focus', eventArgs);
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                const label = this.textboxWrapper ? this.textboxWrapper.container.querySelector('.e-float-text') : null;
+                if (label) {
+                    label.style.width = 'auto';
+                }
+            }.bind(this), 5);
+        }
     }
     focusOutHandler(args) {
         if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&
@@ -14119,9 +14524,18 @@ let TextBox = class TextBox extends Component {
             value: this.value
         };
         this.trigger('blur', eventArgs);
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                const 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);
+        }
     }
     keydownHandler(args) {
-        if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.respectiveElement.value === '')) {
+        const isUndoAction = args.ctrlKey && args.keyCode === 90;
+        if ((args.keyCode === 13 || args.keyCode === 9 || isUndoAction) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.respectiveElement.value === '')) {
             this.setProperties({ value: this.respectiveElement.value }, true);
         }
     }
@@ -14228,6 +14642,9 @@ let TextBox = class TextBox extends Component {
      */
     destroy() {
         this.unWireEvents();
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -14404,6 +14821,12 @@ __decorate$6([
 __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);
@@ -14531,6 +14954,7 @@ let TextArea = class TextArea extends Component {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textareaWrapper.container]);
+                    this.handleAdornmentFloatLabel();
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.element);
@@ -14582,6 +15006,24 @@ let TextArea = class TextArea extends Component {
                         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;
             }
         }
     }
@@ -14685,7 +15127,146 @@ let TextArea = class TextArea extends Component {
         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') {
+            const resizeObserver = new window.ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const 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);
+        }
+    }
+    updatePrependTemplate() {
+        this.removePrependTemplate();
+        this.createPrependTemplate();
+    }
+    updateAppendTemplate() {
+        this.removeAppendTemplate();
+        this.createAppendTemplate();
+    }
+    templateComplier(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;
+    }
+    createPrependTemplate() {
+        if (!isNullOrUndefined(this.prependTemplate)) {
+            const container = this.textareaWrapper.container;
+            this.prependedElement = this.createElement('div', { className: 'e-prepend-template' });
+            this.iconTemplateFn = this.templateComplier(this.prependTemplate);
+            const iconTempCompiler = this.iconTemplateFn(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.prependedElement);
+            if (iconTempCompiler) {
+                const fromElements = [].slice.call(iconTempCompiler);
+                append(fromElements, this.prependedElement);
+            }
+            const 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();
+        }
+    }
+    createAppendTemplate() {
+        if (!isNullOrUndefined(this.appendTemplate)) {
+            const container = this.textareaWrapper.container;
+            this.appendedElement = this.createElement('div', { className: 'e-append-template' });
+            this.iconTemplateFn = this.templateComplier(this.appendTemplate);
+            const iconTempCompiler = this.iconTemplateFn(null, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, this.appendedElement);
+            if (iconTempCompiler) {
+                const fromElements = [].slice.call(iconTempCompiler);
+                append(fromElements, this.appendedElement);
+            }
+            container.classList.add('e-append-wrapper');
+            container.appendChild(this.appendedElement);
+            this.renderReactTemplates();
+        }
+    }
+    handleAdornmentDirection(isPropertyChange) {
+        const 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');
+        }
+    }
+    handleAdornmentFloatLabel() {
+        const 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);
+        }
+    }
+    removePrependTemplate() {
+        if (!isNullOrUndefined(this.prependedElement)) {
+            detach(this.prependedElement);
+            this.prependedElement = null;
+        }
+    }
+    removeAppendTemplate() {
+        if (!isNullOrUndefined(this.appendedElement)) {
+            detach(this.appendedElement);
+            this.appendedElement = null;
+        }
     }
     getModuleName() {
         return 'textarea';
@@ -14763,6 +15344,9 @@ let TextArea = class TextArea extends Component {
      */
     destroy() {
         this.unWireEvents();
+        this.removePrependTemplate();
+        this.removeAppendTemplate();
+        this.clearTemplate();
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -14798,6 +15382,14 @@ let TextArea = class TextArea extends Component {
             }
         }
         this.trigger('focus', eventArgs);
+        if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                const label = this.textareaWrapper ? this.textareaWrapper.container.querySelector('.e-float-text') : null;
+                if (label) {
+                    label.style.width = 'auto';
+                }
+            }.bind(this), 5);
+        }
     }
     focusOutHandler(args) {
         if (!(this.previousValue === null && this.value === null) &&
@@ -14810,6 +15402,7 @@ let TextArea = class TextArea extends Component {
             value: this.value
         };
         this.updateFloatLabelOverflowWidth();
+        this.handleAdornmentFloatLabel();
         this.trigger('blur', eventArgs);
     }
     keydownHandler(args) {
@@ -15068,9 +15661,17 @@ let TextArea = class TextArea extends Component {
         const container = this.textareaWrapper.container;
         const label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
         const calculateWidth = (container.clientWidth - this.getRightIconsWidth());
-        if (label && calculateWidth) {
+        if (label && calculateWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1) && (!this.prependTemplate || !this.appendTemplate)) {
             label.style.width = calculateWidth + 'px';
         }
+        else if (this.floatLabelType === 'Auto' && (this.prependTemplate || this.appendTemplate)) {
+            setTimeout(function () {
+                const 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([
@@ -15115,6 +15716,18 @@ __decorate$7([
 __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);
@@ -15236,6 +15849,9 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+/**
+ * @hidden
+ */
 var ChatMessageRole;
 (function (ChatMessageRole) {
     ChatMessageRole["System"] = "system";
@@ -15253,6 +15869,10 @@ class SmartTextArea extends TextArea {
     constructor(options, element) {
         super(options, element);
     }
+    /**
+     * @private
+     * @returns {void}
+     */
     render() {
         super.render();
         if (!(this.element instanceof HTMLTextAreaElement)) {
@@ -15267,7 +15887,7 @@ class SmartTextArea extends TextArea {
             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);
     }
     wireEvents() {
         super.wireEvents();
@@ -15414,7 +16034,15 @@ class SmartTextArea extends TextArea {
                 if (!insertSuggestion.endsWith(' ')) {
                     insertSuggestion += ' ';
                 }
-                this.suggestionDisplay.show(insertSuggestion);
+                const beforeArgs = {
+                    text: insertSuggestion,
+                    cancel: false
+                };
+                this.trigger('beforeSuggestionInsert', beforeArgs);
+                if (beforeArgs.cancel) {
+                    return;
+                }
+                this.suggestionDisplay.show(beforeArgs.text);
             }
         });
     }
@@ -15441,9 +16069,18 @@ class SmartTextArea extends TextArea {
         }
         return -1;
     }
+    /**
+     * Gets component name.
+     * @returns {string} - Returns the string value.
+     * @private
+     */
     getModuleName() {
         return 'smarttextarea';
     }
+    /**
+     * @private
+     * @returns {void}
+     */
     destroy() {
         super.destroy();
         this.textArea = null;
@@ -15451,6 +16088,12 @@ class SmartTextArea extends TextArea {
         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);
@@ -15463,6 +16106,9 @@ __decorate$8([
 __decorate$8([
     Property('None')
 ], SmartTextArea.prototype, "showSuggestionOnPopup", void 0);
+/**
+ * @hidden
+ */
 class InlineSuggestion {
     get value() {
         const value = this.originalValueProperty.get.call(this.textArea);
@@ -15471,8 +16117,9 @@ class InlineSuggestion {
     set value(newValue) {
         this.originalValueProperty.set.call(this.textArea, newValue);
     }
-    constructor(smartTextArea, textArea) {
-        this.owner = smartTextArea;
+    constructor(smartTextArea, container, textArea) {
+        this.smartTextArea = smartTextArea;
+        this.owner = container;
         this.textArea = textArea;
         this.latestSuggestionText = '';
         this.suggestionStartPos = null;
@@ -15517,6 +16164,7 @@ class InlineSuggestion {
         return this.latestSuggestionText;
     }
     accept() {
+        const insertedText = this.currentSuggestion;
         this.textArea.setSelectionRange(this.suggestionEndPos, this.suggestionEndPos);
         this.suggestionStartPos = null;
         this.suggestionEndPos = null;
@@ -15525,6 +16173,7 @@ class InlineSuggestion {
         }
         this.textArea.removeAttribute('data-suggestion-visible');
         CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);
+        this.smartTextArea.trigger('afterSuggestionInsert', { insertedText });
     }
     reject() {
         if (!this.isShowing()) {
@@ -15545,10 +16194,14 @@ class InlineSuggestion {
         }
     }
 }
+/**
+ * @hidden
+ */
 class ContextSuggestion {
-    constructor(container, textArea) {
+    constructor(smartTextArea, container, textArea) {
         this.latestSuggestionText = '';
         this.showing = false;
+        this.smartTextArea = smartTextArea;
         this.textArea = textArea;
         this.suggestionElement = document.createElement('div');
         this.suggestionElement.classList.add('smart-textarea-suggestion-overlay');
@@ -15598,9 +16251,11 @@ class ContextSuggestion {
     }
     accept() {
         if (this.showing) {
-            CaretPositionHelper.insertCharacter(this.textArea, this.currentSuggestion);
+            const insertedText = this.currentSuggestion;
+            CaretPositionHelper.insertCharacter(this.textArea, insertedText);
             CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);
             this.hide();
+            this.smartTextArea.trigger('afterSuggestionInsert', { insertedText });
         }
     }
     reject() {
@@ -15631,6 +16286,9 @@ class ContextSuggestion {
         return '';
     }
 }
+/**
+ * @hidden
+ */
 class VirtualCaret {
     constructor(smartTextArea, textArea) {
         this.textArea = textArea;