@syncfusion/ej2-inputs 35.1.37 → 35.1.42

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 35.1.37
+*  version : 35.1.42
 *  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "35.1.37",
+  "version": "35.1.42",
   "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",
@@ -9,8 +9,8 @@
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~35.1.37",
-    "@syncfusion/ej2-buttons": "~35.1.37",
-    "@syncfusion/ej2-popups": "~35.1.37",
+    "@syncfusion/ej2-buttons": "~35.1.41",
+    "@syncfusion/ej2-popups": "~35.1.42",
     "@syncfusion/ej2-splitbuttons": "~35.1.37"
   },
   "devDependencies": {},

package/src/color-picker/color-picker.js

@@ -399,11 +399,26 @@ var ColorPicker = /** @class */ (function (_super) {
     };
     ColorPicker.prototype.firstPaletteFocus = function () {
         if (!select('.' + SELECT, this.container.children[0])) {
-            selectAll('.' + PALETTES, this.container)[0].focus();
+            var firstTile = select('.' + TILE, this.container);
+            if (firstTile) {
+                firstTile.focus();
+            }
+            else {
+                selectAll('.' + PALETTES, this.container)[0].focus();
+            }
         }
     };
     ColorPicker.prototype.appendPalette = function (colors, key, refEle) {
-        var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });
+        var rowCount = Math.ceil(colors.length / this.columns);
+        var palette = this.createElement('div', {
+            className: PALETTES,
+            attrs: {
+                'tabindex': '0', 'role': 'grid',
+                'aria-label': (key === 'recent-color' ? 'Recent ' : '') + 'Color palette, ' + rowCount +
+                    (rowCount === 1 ? ' row and ' : ' rows and ') + this.columns +
+                    (this.columns === 1 ? ' column' : ' columns')
+            }
+        });
         if (key === 'recent-color') {
             palette.classList.add('e-recent-palette');
         }
@@ -416,34 +431,51 @@ var ColorPicker = /** @class */ (function (_super) {
         var row;
         var tile;
         var roundedColor;
+        var rowIdx = 0;
+        var colIdx;
         for (var i = 0, len = colors.length; i < len; i++) {
             if (i === 0 || i % this.columns === 0) {
+                rowIdx++;
+                colIdx = 0;
                 row = this.createElement('div', {
-                    className: 'e-row', attrs: { 'role': 'row' }
+                    className: 'e-row',
+                    attrs: { 'role': 'row', 'aria-label': 'Row ' + rowIdx }
                 });
                 palette.appendChild(row);
             }
+            colIdx++;
             roundedColor = this.roundValue(colors[i]).toLowerCase();
             tile = this.createElement('span', {
-                className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }
+                className: TILE, attrs: {
+                    'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false',
+                    'tabindex': '-1',
+                    'aria-rowindex': rowIdx.toString(), 'aria-colindex': colIdx.toString()
+                }
             });
             this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });
             row.appendChild(tile);
             if (this.value === roundedColor && key !== 'recent-color') {
                 this.addTileSelection(tile);
-                palette.focus();
             }
             tile.style.backgroundColor = this.convertToRgbString(this.hexToRgb(roundedColor));
         }
+        var selectedTile = palette.querySelector('.' + TILE + '.' + SELECT);
+        if (selectedTile) {
+            selectedTile.focus();
+        }
     };
     ColorPicker.prototype.setNoColor = function () {
         var noColorEle = this.container.querySelector('.e-row').children[0];
         noColorEle.classList.add(NOCOLOR);
+        noColorEle.setAttribute('aria-label', 'No color');
         if (!this.value) {
             noColorEle.classList.add(SELECT);
-            closest(noColorEle, '.' + PALETTES).focus();
+            noColorEle.setAttribute('aria-selected', 'true');
+            noColorEle.focus();
+        }
+        else {
+            noColorEle.setAttribute('aria-selected', 'false');
         }
-        ['aria-selected', 'aria-label'].forEach(function (attr) { noColorEle.removeAttribute(attr); });
         noColorEle.style.backgroundColor = '';
     };
     ColorPicker.prototype.appendElement = function (ele, insertPos) {
@@ -1022,7 +1054,7 @@ var ColorPicker = /** @class */ (function (_super) {
         else {
             this.setProperties({ 'value': hex }, true);
         }
-        this.element.value = hex ? hex : '#000000';
+        this.element.value = hex ? hex : (this.mode === 'Palette' && !this.modeSwitcher && this.noColor ? '' : '#000000');
     };
     ColorPicker.prototype.handlerDragPosition = function (prob, value, e) {
         e.preventDefault();
@@ -1306,10 +1338,12 @@ var ColorPicker = /** @class */ (function (_super) {
         }
     };
     ColorPicker.prototype.paletteKeyDown = function (e) {
-        var target = e.target;
-        if (!target.classList.contains(PALETTES)) {
+        var eventTarget = e.target;
+        if (!eventTarget.classList.contains(PALETTES) && !eventTarget.classList.contains(TILE)) {
             return;
         }
+        var target = eventTarget.classList.contains(TILE) ?
+            closest(eventTarget, '.' + PALETTES) : eventTarget;
         var selectedEle;
         var idx;
         var tiles = [].slice.call(selectAll('.' + TILE, target));
@@ -1367,8 +1401,13 @@ var ColorPicker = /** @class */ (function (_super) {
             case 13:
                 e.preventDefault();
                 if (prevSelectedEle) {
-                    var cValue = prevSelectedEle.getAttribute('aria-label');
-                    this.enterKeyHandler(cValue ? cValue : '');
+                    if (prevSelectedEle.classList.contains(NOCOLOR)) {
+                        this.enterKeyHandler('');
+                    }
+                    else {
+                        var cValue = prevSelectedEle.getAttribute('aria-label');
+                        this.enterKeyHandler(cValue ? cValue : '');
+                    }
                 }
                 break;
         }
@@ -1389,6 +1428,9 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), true);
         }
+        if (newEle) {
+            newEle.focus();
+        }
     };
     ColorPicker.prototype.tilePosition = function (items, element, cIdx) {
         items = Array.prototype.slice.call(items);

package/src/input/input.js

@@ -34,14 +34,33 @@ export var TEXTBOX_FOCUS = 'e-input-focus';
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export var Input;
 (function (Input) {
-    var privateInputObj = {
-        container: null,
-        buttons: [],
-        clearButton: null
-    };
     var floatType;
     var isBindClearAction = true;
     var resizeHandlers = new Map();
+    var mutationObservers = new Map();
+    var observeElementDetach = function (element, container, resizeHandler) {
+        var parent = container.parentElement;
+        if (!parent) {
+            return;
+        }
+        var observer = new MutationObserver(function () {
+            if (!document.documentElement.contains(container)) {
+                window.removeEventListener('resize', resizeHandler);
+                resizeHandlers.delete(element);
+                observer.disconnect();
+                mutationObservers.delete(element);
+            }
+        });
+        var host = parent;
+        while (host && host.parentElement && host.parentElement !== document.body) {
+            host = host.parentElement;
+        }
+        observer.observe(host || parent, {
+            childList: true,
+            subtree: true
+        });
+        mutationObservers.set(element, observer);
+    };
     /**
      * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
      * ```
@@ -84,7 +103,6 @@ export var Input;
         validateInputType(inputObject.container, args.element);
         inputObject = setPropertyValue(args, inputObject);
         createSpanElement(inputObject.container, makeElement);
-        privateInputObj = inputObject;
         return inputObject;
     }
     Input.createInput = createInput;
@@ -467,8 +485,11 @@ export var Input;
         if (!isNullOrUndefined(resizeHandlers)) {
             var resizeHandler = resizeHandlers.get(args.element);
             if (resizeHandler) {
-                window.removeEventListener('resize', resizeHandler);
-                resizeHandlers.delete(args.element);
+                var observer = mutationObservers.get(args.element);
+                if (observer) {
+                    observer.disconnect();
+                    mutationObservers.delete(args.element);
+                }
                 if (isReactMode) {
                     resizeHandlers = null;
                 }
@@ -480,14 +501,15 @@ export var Input;
                 args.element.classList.remove(CLASSNAMES.INPUT);
             }
         }
-        privateInputObj = null;
     }
     Input.destroy = destroy;
     function validateLabel(element, floatLabelType) {
         var parent = getParentNode(element);
         if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
             var label = getParentNode(element).getElementsByClassName('e-float-text')[0];
-            updateLabelState(element.value, label, element);
+            if (label) {
+                updateLabelState(element.value, label, element);
+            }
         }
     }
     /**
@@ -610,6 +632,7 @@ export var Input;
             };
             resizeHandlers.set(element, resizeHandler_1);
             window.addEventListener('resize', resizeHandler_1);
+            observeElementDetach(element, container, resizeHandler_1);
         }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;