@syncfusion/ej2-inputs 25.2.6 → 26.1.35

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

@@ -36,7 +36,6 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
     private formElement;
     private initInputValue;
     private maskOptions;
-    private isAngular;
     private preventChange;
     private isClicked;
     private clearButton;
@@ -240,7 +239,7 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
      * Gets the value of the MaskedTextBox with the masked format.
      * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.
      *
-     * @returns {string}
+     * @returns {string} Returns the value with the masked format.
      */
     getMaskedValue(): string;
     /**

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -52,7 +52,6 @@ var MaskedTextBox = /** @class */ (function (_super) {
     function MaskedTextBox(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.initInputValue = '';
-        _this.isAngular = false;
         _this.preventChange = false;
         _this.isClicked = false;
         _this.maskOptions = options;
@@ -128,7 +127,6 @@ var MaskedTextBox = /** @class */ (function (_super) {
         var keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Initializes the component rendering.
      *
@@ -160,9 +158,12 @@ var MaskedTextBox = /** @class */ (function (_super) {
             if (this.element.getAttribute('value') || this.value) {
                 this.element.setAttribute('value', this.element.value);
             }
-            if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
+            if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder')) {
+                this.element.setAttribute('aria-label', 'maskedtextbox');
+            }
             this.renderComplete();
         }
     };
@@ -326,7 +327,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
                     if (this.placeholder && !this.isFocus) {
                         this.setMaskPlaceholder(false, false);
                     }
-                    if (this.value === "" && oldProp.value != null) {
+                    if (this.value === '' && oldProp.value != null) {
                         this.element.selectionStart = 0;
                         this.element.selectionEnd = 0;
                     }
@@ -405,17 +406,15 @@ var MaskedTextBox = /** @class */ (function (_super) {
         this.resetMaskedTextBox();
         setMaskValue.call(this, strippedVal);
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Gets the value of the MaskedTextBox with the masked format.
      * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.
      *
-     * @returns {string}
+     * @returns {string} Returns the value with the masked format.
      */
     MaskedTextBox.prototype.getMaskedValue = function () {
         return unstrippedValue.call(this, this.element);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Sets the focus to widget for interaction.
      *

package/src/numerictextbox/numerictextbox.d.ts

@@ -46,10 +46,8 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private numericOptions;
     private isInteract;
     private serverDecimalSeparator;
-    private isVue;
     private preventChange;
     private elementPrevValue;
-    private isAngular;
     private isDynamicChange;
     private inputValue;
     private clearButton;
@@ -348,6 +346,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     /**
      * Returns the value of NumericTextBox with the format applied to the NumericTextBox.
      *
+     * @returns {string} - Returns the formatted value of the NumericTextBox.
      */
     getText(): string;
     /**
@@ -365,7 +364,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     /**
      * Gets the properties to be maintained in the persisted state.
      *
-     * @returns {string}
+     * @returns {string} - Returns the persisted data.
      */
     getPersistData(): string;
     /**

package/src/numerictextbox/numerictextbox.js

@@ -60,9 +60,7 @@ var NumericTextBox = /** @class */ (function (_super) {
      */
     function NumericTextBox(options, element) {
         var _this = _super.call(this, options, element) || this;
-        _this.isVue = false;
         _this.preventChange = false;
-        _this.isAngular = false;
         _this.isDynamicChange = false;
         _this.numericOptions = options;
         return _this;
@@ -161,6 +159,9 @@ var NumericTextBox = /** @class */ (function (_super) {
             if (this.element.hasAttribute('data-val')) {
                 this.element.setAttribute('data-val', 'false');
             }
+            if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder')) {
+                this.element.setAttribute('aria-label', 'numerictextbox');
+            }
             if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
@@ -625,16 +626,14 @@ var NumericTextBox = /** @class */ (function (_super) {
                 }
                 if (_this.element.selectionStart > 0) {
                     if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {
-                        if (isNullOrUndefined(_this.prevVal)) {
-                            // eslint-disable-next-line no-self-assign
-                            _this.element.value = _this.element.value;
-                        }
-                        else {
+                        if (!isNullOrUndefined(_this.prevVal)) {
                             _this.element.value = _this.prevVal;
                         }
                         _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);
                     }
-                    if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {
+                    if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator &&
+                        _this.decimals === 0 &&
+                        _this.validateDecimalOnType) {
                         _this.element.value = _this.element.value.substring(0, prevPos) +
                             _this.element.value.substring(currentPos, _this.element.value.length);
                     }
@@ -663,8 +662,7 @@ var NumericTextBox = /** @class */ (function (_super) {
         }
     };
     NumericTextBox.prototype.inputHandler = function (event) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        var numerictextboxObj = this;
+        var numerictextboxObj = null || this;
         if (!this.enabled || this.readonly) {
             return;
         }
@@ -687,7 +685,9 @@ var NumericTextBox = /** @class */ (function (_super) {
             var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
             //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
             var nonZeroRegex = new RegExp('[^0-9]+$');
-            if (nonZeroRegex.test(this.element.value) || ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) && this.element.value[this.element.value.length - 1] === '0')) {
+            if (nonZeroRegex.test(this.element.value) ||
+                ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) &&
+                    this.element.value[this.element.value.length - 1] === '0')) {
                 current = this.value;
             }
             var eventArgs = {
@@ -999,8 +999,7 @@ var NumericTextBox = /** @class */ (function (_super) {
         if (!this.getElementData(event)) {
             return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        var result = this.getElementData(event);
+        this.getElementData(event);
         var target = event.currentTarget;
         var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;
         EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);
@@ -1147,15 +1146,14 @@ var NumericTextBox = /** @class */ (function (_super) {
         }, this.clearButton);
         _super.prototype.destroy.call(this);
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns */
     /**
      * Returns the value of NumericTextBox with the format applied to the NumericTextBox.
      *
+     * @returns {string} - Returns the formatted value of the NumericTextBox.
      */
     NumericTextBox.prototype.getText = function () {
         return this.element.value;
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns */
     /**
      * Sets the focus to widget for interaction.
      *
@@ -1178,17 +1176,15 @@ var NumericTextBox = /** @class */ (function (_super) {
             removeClass([this.container], [NUMERIC_FOCUS]);
         }
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Gets the properties to be maintained in the persisted state.
      *
-     * @returns {string}
+     * @returns {string} - Returns the persisted data.
      */
     NumericTextBox.prototype.getPersistData = function () {
         var keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Calls internally if any of the property value is changed.
      *

package/src/otp-input/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * OtpInput modules
+ */
+export * from './otp-input';
+export * from './otp-input-model';

package/src/otp-input/index.js

@@ -0,0 +1,4 @@
+/**
+ * OtpInput modules
+ */
+export * from './otp-input';

package/src/otp-input/otp-input-model.d.ts

@@ -0,0 +1,142 @@
+import { INotifyPropertyChanged, NotifyPropertyChanges, Component, Property, getUniqueID, isNullOrUndefined, addClass, attributes, removeClass, remove, EmitType, Event } from '@syncfusion/ej2-base';
+import {OtpInputType,OtpInputStyle,OtpChangedEventArgs,OtpFocusEventArgs,OtpInputEventArgs} from "./otp-input";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class OtpInput
+ */
+export interface OtpInputModel extends ComponentModel{
+
+    /**
+     * Specifies the length of the Otp (One-Time Password) to be entered by the user.
+     * This determines the number of input fields in the Otp Input.
+     *
+     * {% codeBlock src='otp-input/length/index.md' %}{% endcodeBlock %}
+     *
+     * @default 4
+     */
+    length?: number;
+
+    /**
+     * Specifies the value of the Otp (One-Time Password) input.
+     * This can be a string or a number, representing the Otp value entered by the user.
+     *
+     * {% codeBlock src='otp-input/value/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     * @aspType string
+     */
+    value?: string | number;
+
+    /**
+     * Specifies the input type of the Otp.
+     *
+     * {% codeBlock src='otp-input/type/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default OtpInputType.Number
+     * @asptype OtpInputType
+     */
+    type?: string | OtpInputType;
+
+    /**
+     * Specifies the separator used to separate each input field in the Otp Input component.
+     * The separator is displayed between each input field.
+     *
+     * {% codeBlock src='otp-input/separator/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    separator?: string;
+
+    /**
+     * Specifies the text that is shown as a hint/placeholder until the user focuses on or enters a value in the Otp Input.
+     * If a single text is provided, it will be used for all input fields; otherwise, each text letter will be used for each field.
+     *
+     * {% codeBlock src='otp-input/placeholder/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    placeholder?: string;
+
+    /**
+     * Specifies the style variant for the input fields in the Otp Input component.
+     *
+     * {% codeBlock src='otp-input/stylingMode/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default OtpInputStyle.Outlined
+     * @asptype OtpInputStyle
+     */
+    stylingMode?: string | OtpInputStyle;
+
+    /**
+     * Specifies whether the Otp input component is disabled.
+     * When set to true, the component is disabled and user input is not allowed.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Defines one or more CSS classes that can be used to customize the appearance of the Otp (One-Time Password) input component.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Specifies additional HTML attributes to be applied to the Otp (One-Time Password) input component.
+     *
+     * {% codeBlock src='otp-input/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
+     * Defines the ARIA-label attribute for each input field in the Otp (One-Time Password) input component.
+     * Each string in the array corresponds to the ARIA-label attribute for each input field.
+     *
+     * {% codeBlock src='otp-input/ariaLabels/index.md' %}{% endcodeBlock %}
+     *
+     * @default []
+     */
+    ariaLabels?: string[];
+
+    /**
+     * Event triggers after the creation of the Otp Input.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers after the value is changed and the Otp input is focused out.
+     *
+     * @event change
+     */
+    valueChanged?: EmitType<OtpChangedEventArgs>;
+
+    /**
+     * Event triggers when the Otp input is focused.
+     *
+     * @event focus
+     */
+    focus?: EmitType<OtpFocusEventArgs>;
+
+    /**
+     * Event triggers when the Otp input is focused out.
+     *
+     * @event blur
+     */
+    blur?: EmitType<OtpFocusEventArgs>;
+
+    /**
+     * Event triggers each time when the value of each Otp input is changed.
+     *
+     * @event input
+     */
+    input?: EmitType<OtpInputEventArgs>;
+
+}

package/src/otp-input/otp-input.d.ts

@@ -0,0 +1,313 @@
+import { INotifyPropertyChanged, Component, EmitType } from '@syncfusion/ej2-base';
+import { OtpInputModel } from './otp-input-model';
+/**
+ * Specifies the type of input for the Otp (One-Time Password) input component.
+ */
+export declare enum OtpInputType {
+    /**
+     * Specifies the type of input to be number for the Otp input.
+     */
+    Number = "number",
+    /**
+     * Specifies the type of input to be text for the Otp input.
+     */
+    Text = "text",
+    /**
+     * Specifies the type of input to be password for the Otp input.
+     */
+    Password = "password"
+}
+/**
+ * Specifies the style variant for the Otp (One-Time Password) input component.
+ */
+export declare enum OtpInputStyle {
+    /**
+     * Specifies the style of the Otp input to be outlined.
+     */
+    Outlined = "outlined",
+    /**
+     * Specifies the style of the Otp input to be underlined.
+     */
+    Underlined = "underlined",
+    /**
+     * Specifies the style of the Otp input to be filled.
+     */
+    Filled = "filled"
+}
+/**
+ * Provides information about valueChanged event callback
+ */
+export interface OtpChangedEventArgs {
+    /**
+     * Provides the Otp input container element.
+     */
+    element: HTMLElement;
+    /**
+     * Provides the original event.
+     */
+    event: Event;
+    /**
+     * Provides whether the change is triggered by user interaction.
+     */
+    isInteracted: boolean;
+    /**
+     * Provides the previous value of the Otp input.
+     */
+    previousValue: string | number;
+    /**
+     * Provides the current value of the Otp input.
+     */
+    value: string | number;
+}
+/**
+ * Provides information about focus event callback
+ */
+export interface OtpFocusEventArgs {
+    /**
+     * Provides the Otp input container element.
+     */
+    element: HTMLElement;
+    /**
+     * Provides the original event.
+     */
+    event: Event;
+    /**
+     * Provides whether the change is triggered by user interaction.
+     */
+    isInteracted: boolean;
+    /**
+     * Provides the current value of the Otp input.
+     */
+    value: string | number;
+}
+/**
+ * Provides information about input event callback
+ */
+export interface OtpInputEventArgs {
+    /**
+     * Provides the Otp input container element.
+     */
+    element: HTMLElement;
+    /**
+     * Provides the original event.
+     */
+    event: Event;
+    /**
+     * Provides the previous value of the Otp input.
+     */
+    previousValue: string | number;
+    /**
+     * Provides the current value of the Otp input.
+     */
+    value: string | number;
+}
+/**
+ * Represents the Otp component that allows the user to enter the otp values.
+ * ```html
+ * <div id='OTPInput'></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var OtpinputObj = new OtpInput();
+ *   OtpinputObj.appendTo('#OTPInput');
+ * </script>
+ * ```
+ */
+export declare class OtpInput extends Component<HTMLElement> implements INotifyPropertyChanged {
+    /**
+     * Specifies the length of the Otp (One-Time Password) to be entered by the user.
+     * This determines the number of input fields in the Otp Input.
+     *
+     * {% codeBlock src='otp-input/length/index.md' %}{% endcodeBlock %}
+     *
+     * @default 4
+     */
+    length: number;
+    /**
+     * Specifies the value of the Otp (One-Time Password) input.
+     * This can be a string or a number, representing the Otp value entered by the user.
+     *
+     * {% codeBlock src='otp-input/value/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     * @aspType string
+     */
+    value: string | number;
+    /**
+     * Specifies the input type of the Otp.
+     *
+     * {% codeBlock src='otp-input/type/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default OtpInputType.Number
+     * @asptype OtpInputType
+     */
+    type: string | OtpInputType;
+    /**
+     * Specifies the separator used to separate each input field in the Otp Input component.
+     * The separator is displayed between each input field.
+     *
+     * {% codeBlock src='otp-input/separator/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    separator: string;
+    /**
+     * Specifies the text that is shown as a hint/placeholder until the user focuses on or enters a value in the Otp Input.
+     * If a single text is provided, it will be used for all input fields; otherwise, each text letter will be used for each field.
+     *
+     * {% codeBlock src='otp-input/placeholder/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    placeholder: string;
+    /**
+     * Specifies the style variant for the input fields in the Otp Input component.
+     *
+     * {% codeBlock src='otp-input/stylingMode/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default OtpInputStyle.Outlined
+     * @asptype OtpInputStyle
+     */
+    stylingMode: string | OtpInputStyle;
+    /**
+     * Specifies whether the Otp input component is disabled.
+     * When set to true, the component is disabled and user input is not allowed.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Defines one or more CSS classes that can be used to customize the appearance of the Otp (One-Time Password) input component.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Specifies additional HTML attributes to be applied to the Otp (One-Time Password) input component.
+     *
+     * {% codeBlock src='otp-input/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
+     * Defines the ARIA-label attribute for each input field in the Otp (One-Time Password) input component.
+     * Each string in the array corresponds to the ARIA-label attribute for each input field.
+     *
+     * {% codeBlock src='otp-input/ariaLabels/index.md' %}{% endcodeBlock %}
+     *
+     * @default []
+     */
+    ariaLabels: string[];
+    /**
+     * Event triggers after the creation of the Otp Input.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Event triggers after the value is changed and the Otp input is focused out.
+     *
+     * @event change
+     */
+    valueChanged: EmitType<OtpChangedEventArgs>;
+    /**
+     * Event triggers when the Otp input is focused.
+     *
+     * @event focus
+     */
+    focus: EmitType<OtpFocusEventArgs>;
+    /**
+     * Event triggers when the Otp input is focused out.
+     *
+     * @event blur
+     */
+    blur: EmitType<OtpFocusEventArgs>;
+    /**
+     * Event triggers each time when the value of each Otp input is changed.
+     *
+     * @event input
+     */
+    input: EmitType<OtpInputEventArgs>;
+    private inputs;
+    private previousValue;
+    private hiddenInputEle;
+    private separatorElements;
+    private shouldFireFocus;
+    private shouldFireBlur;
+    private isFocusInCalled;
+    private isFocusOutCalled;
+    constructor(options?: OtpInputModel, element?: string | HTMLElement);
+    protected preRender(): void;
+    render(): void;
+    private initialize;
+    private renderInputs;
+    private createOtpInput;
+    private renderSeparator;
+    private updateSeparatorValue;
+    private addPlaceHolder;
+    private updateInputType;
+    private getDefaultValue;
+    private handleInputChange;
+    private handleKeyAction;
+    private handleSelection;
+    private handleFocus;
+    private handleBlur;
+    private handlePaste;
+    private triggerInputEvent;
+    private triggerValuechanged;
+    private wireEvents;
+    private unWireEvents;
+    private updateValueProperty;
+    private updateInputValue;
+    private updateCssClass;
+    private updateVariantClass;
+    private updateAriaLabel;
+    private updateDisabledState;
+    private setElementAttributes;
+    private handleLengthChange;
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName(): string;
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    protected getPersistData(): string;
+    /**
+     * Destroy the Otp input.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+    /**
+     * Sets the focus to the Otp input for interaction.
+     *
+     * @returns {void}
+     */
+    focusIn(): void;
+    /**
+     * Remove the focus from Otp input, if it is in focus state.
+     *
+     * @returns {void}
+     */
+    focusOut(): void;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {OtpInputModel} newProp - Specifies new properties
+     * @param  {OtpInputModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp: OtpInputModel, oldProp?: OtpInputModel): void;
+}