@syncfusion/ej2-inputs 31.2.12 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.12
-*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _inputs from '@syncfusion/ej2-inputs';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "31.2.12",
+  "version": "32.1.19",
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12",
-    "@syncfusion/ej2-splitbuttons": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19",
+    "@syncfusion/ej2-splitbuttons": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

package/src/maskedtextbox/base/mask-base.js

@@ -293,6 +293,14 @@ export 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 === '')) {
@@ -395,6 +403,20 @@ export 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') {

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

@@ -1,4 +1,4 @@
-import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach } from '@syncfusion/ej2-base';import { removeClass , Browser, closest} from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';
+import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs, selectAll, compile, select, append } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach } from '@syncfusion/ej2-base';import { removeClass , Browser, closest} from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';
 import {MaskChangeEventArgs,MaskFocusEventArgs,MaskBlurEventArgs} from "./maskedtextbox";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -129,6 +129,30 @@ export interface MaskedTextBoxModel extends ComponentModel{
      */
     customCharacters?: { [x: string]: Object };
 
+    /**
+     * Specifies the HTML template string for custom elements to prepend to the MaskedTextBox 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 MaskedTextBox 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 MaskedTextBox component is created.
      *

package/src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -40,6 +40,9 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
     private preventChange;
     private isClicked;
     private clearButton;
+    private prependedElement;
+    private appendedElement;
+    private iconTemplateFunction;
     /**
      * Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the
      * complete UI styles for the MaskedTextBox component.
@@ -153,6 +156,28 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
     customCharacters: {
         [x: string]: Object;
     };
+    /**
+     * Specifies the HTML template string for custom elements to prepend to the MaskedTextBox 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 MaskedTextBox 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 MaskedTextBox component is created.
      *
@@ -235,6 +260,14 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
      * @hidden
      */
     onPropertyChanged(newProp: MaskedTextBoxModel, oldProp: MaskedTextBoxModel): void;
+    private updatePrependTemplate;
+    private updateAppendTemplate;
+    private templateComplier;
+    private createPrependTemplate;
+    private createAppendTemplate;
+    private handleFloatLabel;
+    private removePrependTemplate;
+    private removeAppendTemplate;
     private updateValue;
     /**
      * Gets the value of the MaskedTextBox with the masked format.

package/src/maskedtextbox/maskedtextbox/maskedtextbox.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, Event, Property, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { Component, Event, Property, NotifyPropertyChanges, selectAll, compile, select, append } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach } from '@syncfusion/ej2-base';
 import { removeClass, Browser, closest } from '@syncfusion/ej2-base';
 import { Input } from '../../input/input';
@@ -166,6 +166,8 @@ var MaskedTextBox = /** @class */ (function (_super) {
                 this.element.setAttribute('aria-label', 'maskedtextbox');
             }
             this.updateFloatLabelOverflowWidth();
+            this.createPrependTemplate();
+            this.createAppendTemplate();
             this.renderComplete();
         }
     };
@@ -352,6 +354,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);
+                    this.handleFloatLabel();
                     break;
                 case 'customCharacters':
                     this.customCharacters = newProp.customCharacters;
@@ -371,6 +374,12 @@ var MaskedTextBox = /** @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;
@@ -405,6 +414,98 @@ var MaskedTextBox = /** @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);
@@ -469,6 +570,9 @@ var MaskedTextBox = /** @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];
         }
@@ -531,6 +635,12 @@ var MaskedTextBox = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], MaskedTextBox.prototype, "customCharacters", void 0);
+    __decorate([
+        Property(null)
+    ], MaskedTextBox.prototype, "prependTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], MaskedTextBox.prototype, "appendTemplate", void 0);
     __decorate([
         Event()
     ], MaskedTextBox.prototype, "created", void 0);

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Property, Event, Browser, L10n, EmitType, getUniqueID } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';import { Internationalization, NumberFormatOptions, getNumericObject } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../input/input';
+import { Component, EventHandler, Property, Event, Browser, L10n, EmitType, getUniqueID, append, compile, select, selectAll } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';import { Internationalization, NumberFormatOptions, getNumericObject } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../input/input';
 import {ChangeEventArgs,NumericFocusEventArgs,NumericBlurEventArgs} from "./numerictextbox";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -173,6 +173,18 @@ export interface NumericTextBoxModel extends ComponentModel{
      */
     validateDecimalOnType?: boolean;
 
+    /**
+     * Gets or sets a value indicating whether the mouse wheel interaction is enabled
+     * for incrementing or decrementing the value in the NumericTextBox component.
+     *
+     * @default true
+     * @remarks
+     * - When `allowMouseWheel` is set to `true`, scrolling the mouse wheel while the input is focused
+     *   will increment or decrement the value based on the step value.
+     * - When `allowMouseWheel` is set to `false`, mouse wheel scrolling will be ignored.
+     */
+    allowMouseWheel?: boolean;
+
     /**
      * The <b><a href="#placeholder" target="_blank">placeholder</a></b> acts as a label
      * and floats above the NumericTextBox based on the below values.
@@ -185,6 +197,30 @@ export interface NumericTextBoxModel extends ComponentModel{
      */
     floatLabelType?: FloatLabelType;
 
+    /**
+     * Specifies the HTML template string for custom elements to prepend to the NumericTextBox 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 NumericTextBox 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 NumericTextBox component is created.
      *

package/src/numerictextbox/numerictextbox.d.ts

@@ -51,6 +51,9 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private isDynamicChange;
     private inputValue;
     private clearButton;
+    private prependedElement;
+    private appendedElement;
+    private iconTemplateFunction;
     /**
      * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
      * complete UI styles for the NumericTextBox component.
@@ -200,6 +203,17 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
      * @default false
      */
     validateDecimalOnType: boolean;
+    /**
+     * Gets or sets a value indicating whether the mouse wheel interaction is enabled
+     * for incrementing or decrementing the value in the NumericTextBox component.
+     *
+     * @default true
+     * @remarks
+     * - When `allowMouseWheel` is set to `true`, scrolling the mouse wheel while the input is focused
+     *   will increment or decrement the value based on the step value.
+     * - When `allowMouseWheel` is set to `false`, mouse wheel scrolling will be ignored.
+     */
+    allowMouseWheel: boolean;
     /**
      * The <b><a href="#placeholder" target="_blank">placeholder</a></b> acts as a label
      * and floats above the NumericTextBox based on the below values.
@@ -211,6 +225,28 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
      * @default Never
      */
     floatLabelType: FloatLabelType;
+    /**
+     * Specifies the HTML template string for custom elements to prepend to the NumericTextBox 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 NumericTextBox 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 NumericTextBox component is created.
      *
@@ -287,6 +323,14 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private wireSpinBtnEvents;
     private unwireEvents;
     private unwireSpinBtnEvents;
+    private updatePrependTemplate;
+    private updateAppendTemplate;
+    private templateComplier;
+    private createPrependTemplate;
+    private createAppendTemplate;
+    private handleFloatLabel;
+    private removePrependTemplate;
+    private removeAppendTemplate;
     private changeHandler;
     private raiseChangeEvent;
     private pasteHandler;