@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/src/textarea/textarea.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Property, NotifyPropertyChanges, isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';
+import { Component, Property, NotifyPropertyChanges, isNullOrUndefined, setValue, getValue, append, compile, select, selectAll } from '@syncfusion/ej2-base';
 import { detach, getUniqueID, Event, EventHandler, Internationalization, L10n, addClass, removeClass, closest, formatUnit } from '@syncfusion/ej2-base';
 import { Input, TEXTBOX_FOCUS } from '../input/input';
 var HIDE_CLEAR = 'e-clear-icon-hide';
@@ -122,6 +122,7 @@ var TextArea = /** @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textareaWrapper.container]);
+                    this.handleAdornmentFloatLabel();
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.element);
@@ -173,6 +174,24 @@ var TextArea = /** @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;
             }
         }
     };
@@ -276,7 +295,147 @@ var TextArea = /** @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';
@@ -355,6 +514,9 @@ var TextArea = /** @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];
         }
@@ -390,6 +552,14 @@ var TextArea = /** @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) &&
@@ -402,6 +572,7 @@ var TextArea = /** @class */ (function (_super) {
             value: this.value
         };
         this.updateFloatLabelOverflowWidth();
+        this.handleAdornmentFloatLabel();
         this.trigger('blur', eventArgs);
     };
     TextArea.prototype.keydownHandler = function (args) {
@@ -663,9 +834,17 @@ var TextArea = /** @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([
         Property(false)
@@ -709,6 +888,18 @@ var TextArea = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], TextArea.prototype, "rows", void 0);
+    __decorate([
+        Property(null)
+    ], TextArea.prototype, "prependTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], TextArea.prototype, "appendTemplate", void 0);
+    __decorate([
+        Property('Horizontal')
+    ], TextArea.prototype, "adornmentFlow", void 0);
+    __decorate([
+        Property('Horizontal')
+    ], TextArea.prototype, "adornmentOrientation", void 0);
     __decorate([
         Event()
     ], TextArea.prototype, "created", void 0);

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';import { addClass, removeClass } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject, containerAttributes, TEXTBOX_FOCUS } from '../input/input';
+import { Component, Property, Event, EmitType, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser, compile, select, selectAll, append } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';import { addClass, removeClass } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject, containerAttributes, TEXTBOX_FOCUS } from '../input/input';
 import {ChangedEventArgs,FocusOutEventArgs,FocusInEventArgs,InputEventArgs} from "./textbox";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -110,6 +110,30 @@ export interface TextBoxModel extends ComponentModel{
      */
     width?: number | string;
 
+    /**
+     * Specifies the HTML template string for custom elements to prepend to the TextBox input.
+     * Supports icons, buttons, or any valid HTML. Updates dynamically on property change.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    prependTemplate?: string | Function;
+
+    /**
+     * Specifies the HTML template string for custom elements to append to the TextBox input.
+     * Supports icons, buttons, or any valid HTML. Updates dynamically on property change.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    appendTemplate?: string | Function;
+
     /**
      * Triggers when the TextBox component is created.
      *

package/src/textbox/textbox.d.ts

@@ -58,6 +58,9 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
     private textboxOptions;
     private inputPreviousValue;
     private clearButton;
+    private prependedElement;
+    private appendedElement;
+    private iconTemplateFunction;
     /**
      * Specifies the behavior of the TextBox such as text, password, email, etc.
      *
@@ -150,6 +153,28 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
      * @default null
      */
     width: number | string;
+    /**
+     * Specifies the HTML template string for custom elements to prepend to the TextBox input.
+     * Supports icons, buttons, or any valid HTML. Updates dynamically on property change.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    prependTemplate: string | Function;
+    /**
+     * Specifies the HTML template string for custom elements to append to the TextBox input.
+     * Supports icons, buttons, or any valid HTML. Updates dynamically on property change.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    appendTemplate: string | Function;
     /**
      * Triggers when the TextBox component is created.
      *
@@ -221,6 +246,14 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
     private updateHTMLAttributesToWrapper;
     private updateHTMLAttributesToElement;
     private setInitialValue;
+    private updatePrependTemplate;
+    private updateAppendTemplate;
+    private templateComplier;
+    private createPrependTemplate;
+    private createAppendTemplate;
+    private handleFloatLabel;
+    private removePrependTemplate;
+    private removeAppendTemplate;
     private wireEvents;
     private animationHandler;
     private resetValue;

package/src/textbox/textbox.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Property, Event, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
+import { Component, Property, Event, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser, compile, select, selectAll, append } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';
 import { addClass, removeClass } from '@syncfusion/ej2-base';
 import { Input, containerAttributes, TEXTBOX_FOCUS } from '../input/input';
@@ -127,6 +127,7 @@ var TextBox = /** @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
@@ -149,6 +150,12 @@ var TextBox = /** @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;
             }
         }
     };
@@ -340,6 +347,23 @@ var TextBox = /** @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 () {
@@ -354,6 +378,98 @@ var TextBox = /** @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);
@@ -417,6 +533,14 @@ var TextBox = /** @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 === '') &&
@@ -429,6 +553,14 @@ var TextBox = /** @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 === '')) {
@@ -538,6 +670,9 @@ var TextBox = /** @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];
         }
@@ -715,6 +850,12 @@ var TextBox = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], TextBox.prototype, "width", void 0);
+    __decorate([
+        Property(null)
+    ], TextBox.prototype, "prependTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], TextBox.prototype, "appendTemplate", void 0);
     __decorate([
         Event()
     ], TextBox.prototype, "created", void 0);