@syncfusion/ej2-inputs 35.1.37 → 35.1.42

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

@@ -40,6 +40,30 @@ var Input;
     let floatType;
     let isBindClearAction = true;
     let resizeHandlers = new Map();
+    const mutationObservers = new Map();
+    const observeElementDetach = (element, container, resizeHandler) => {
+        const parent = container.parentElement;
+        if (!parent) {
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            if (!document.documentElement.contains(container)) {
+                window.removeEventListener('resize', resizeHandler);
+                resizeHandlers.delete(element);
+                observer.disconnect();
+                mutationObservers.delete(element);
+            }
+        });
+        let 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.
      * ```
@@ -461,8 +485,11 @@ var Input;
         if (!isNullOrUndefined(resizeHandlers)) {
             const resizeHandler = resizeHandlers.get(args.element);
             if (resizeHandler) {
-                window.removeEventListener('resize', resizeHandler);
-                resizeHandlers.delete(args.element);
+                const observer = mutationObservers.get(args.element);
+                if (observer) {
+                    observer.disconnect();
+                    mutationObservers.delete(args.element);
+                }
                 if (isReactMode) {
                     resizeHandlers = null;
                 }
@@ -480,7 +507,9 @@ var Input;
         const parent = getParentNode(element);
         if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
             const label = getParentNode(element).getElementsByClassName('e-float-text')[0];
-            updateLabelState(element.value, label, element);
+            if (label) {
+                updateLabelState(element.value, label, element);
+            }
         }
     }
     /**
@@ -603,6 +632,7 @@ var Input;
             };
             resizeHandlers.set(element, resizeHandler);
             window.addEventListener('resize', resizeHandler);
+            observeElementDetach(element, container, resizeHandler);
         }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;
@@ -12456,11 +12486,26 @@ let ColorPicker = class ColorPicker extends Component {
     }
     firstPaletteFocus() {
         if (!select('.' + SELECT, this.container.children[0])) {
-            selectAll('.' + PALETTES, this.container)[0].focus();
+            const firstTile = select('.' + TILE, this.container);
+            if (firstTile) {
+                firstTile.focus();
+            }
+            else {
+                selectAll('.' + PALETTES, this.container)[0].focus();
+            }
         }
     }
     appendPalette(colors, key, refEle) {
-        const palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });
+        const rowCount = Math.ceil(colors.length / this.columns);
+        const 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');
         }
@@ -12473,34 +12518,51 @@ let ColorPicker = class ColorPicker extends Component {
         let row;
         let tile;
         let roundedColor;
+        let rowIdx = 0;
+        let colIdx;
         for (let 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));
         }
+        const selectedTile = palette.querySelector('.' + TILE + '.' + SELECT);
+        if (selectedTile) {
+            selectedTile.focus();
+        }
     }
     setNoColor() {
         const 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((attr) => { noColorEle.removeAttribute(attr); });
         noColorEle.style.backgroundColor = '';
     }
     appendElement(ele, insertPos = 0) {
@@ -13073,7 +13135,7 @@ let ColorPicker = class ColorPicker extends Component {
         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');
     }
     handlerDragPosition(prob, value, e) {
         e.preventDefault();
@@ -13356,10 +13418,12 @@ let ColorPicker = class ColorPicker extends Component {
         }
     }
     paletteKeyDown(e) {
-        const target = e.target;
-        if (!target.classList.contains(PALETTES)) {
+        const eventTarget = e.target;
+        if (!eventTarget.classList.contains(PALETTES) && !eventTarget.classList.contains(TILE)) {
             return;
         }
+        const target = eventTarget.classList.contains(TILE) ?
+            closest(eventTarget, '.' + PALETTES) : eventTarget;
         let selectedEle;
         let idx;
         const tiles = [].slice.call(selectAll('.' + TILE, target));
@@ -13417,8 +13481,13 @@ let ColorPicker = class ColorPicker extends Component {
             case 13:
                 e.preventDefault();
                 if (prevSelectedEle) {
-                    const cValue = prevSelectedEle.getAttribute('aria-label');
-                    this.enterKeyHandler(cValue ? cValue : '');
+                    if (prevSelectedEle.classList.contains(NOCOLOR)) {
+                        this.enterKeyHandler('');
+                    }
+                    else {
+                        const cValue = prevSelectedEle.getAttribute('aria-label');
+                        this.enterKeyHandler(cValue ? cValue : '');
+                    }
                 }
                 break;
         }
@@ -13439,6 +13508,9 @@ let ColorPicker = class ColorPicker extends Component {
             }
             this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), true);
         }
+        if (newEle) {
+            newEle.focus();
+        }
     }
     tilePosition(items, element, cIdx) {
         items = Array.prototype.slice.call(items);