@syncfusion/ej2-inputs 35.1.41 → 35.1.42

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

@@ -40,6 +40,30 @@ var Input;
     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.
      * ```
@@ -464,8 +488,11 @@ 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;
                 }
@@ -608,6 +635,7 @@ var Input;
             };
             resizeHandlers.set(element, resizeHandler_1);
             window.addEventListener('resize', resizeHandler_1);
+            observeElementDetach(element, container, resizeHandler_1);
         }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;
@@ -12704,11 +12732,26 @@ var ColorPicker = /** @__PURE__ @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');
         }
@@ -12721,34 +12764,51 @@ var ColorPicker = /** @__PURE__ @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) {
@@ -13611,10 +13671,12 @@ var ColorPicker = /** @__PURE__ @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));
@@ -13672,8 +13734,13 @@ var ColorPicker = /** @__PURE__ @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;
         }
@@ -13694,6 +13761,9 @@ var ColorPicker = /** @__PURE__ @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);