@syncfusion/ej2-inputs 20.2.48 → 20.3.49

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

@@ -69,7 +69,7 @@ var Input;
         }
         validateInputType(inputObject.container, args.element);
         inputObject = setPropertyValue(args, inputObject);
-        createSpanElement(inputObject, makeElement);
+        createSpanElement(inputObject.container, makeElement);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         return inputObject;
     }
@@ -82,6 +82,9 @@ var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.add('e-input-focus');
             }
+            setTimeout(() => {
+                Input.calculateWidth(args.element, parent);
+            }, 80);
         });
         args.element.addEventListener('blur', function () {
             const parent = getParentNode(this);
@@ -89,6 +92,9 @@ var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.remove('e-input-focus');
             }
+            setTimeout(() => {
+                Input.calculateWidth(args.element, parent);
+            }, 80);
         });
         args.element.addEventListener('input', () => {
             checkInputValue(floatType, args.element);
@@ -364,9 +370,7 @@ var Input;
      */
     function setValue$$1(value, element, floatLabelType, clearButton) {
         element.value = value;
-        if (isNullOrUndefined(element.getAttribute('value'))) {
-            calculateWidth(element, element.parentElement);
-        }
+        calculateWidth(element, element.parentElement);
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
             validateLabel(element, floatLabelType);
         }
@@ -417,11 +421,12 @@ var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container) {
+        let elementWidth = element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
         if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
             }
-            if (element.clientWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || element.clientWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {
+            if (elementWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || elementWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.add('e-float-text-overflow');
             }
         }
@@ -471,11 +476,10 @@ var Input;
         }
         else {
             if (!isNullOrUndefined(placeholder) && placeholder !== '') {
-                attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder });
+                attributes(element, { 'placeholder': placeholder });
             }
             else {
                 element.removeAttribute('placeholder');
-                element.removeAttribute('aria-placeholder');
             }
         }
     }
@@ -657,7 +661,7 @@ var Input;
             const inputObj = { container: container };
             input.classList.remove(CLASSNAMES.INPUT);
             createFloatingInput(args, inputObj, makeElement);
-            createSpanElement(inputObj, makeElement);
+            createSpanElement(inputObj.container, makeElement);
             calculateWidth(args.element, inputObj.container);
             const isPrependIcon = container.classList.contains('e-float-icon-left');
             if (isNullOrUndefined(iconEle)) {
@@ -690,22 +694,22 @@ var Input;
     }
     Input.addFloating = addFloating;
     /**
-    * Create the span inside the label and add the label text into the span textcontent
-    * ```
-    * E.g : Input.createSpanElement(inputObject, makeElement);
-    * ```
-    *
-    * @param {InputObject} inputObject
-    * - Element which is need to get the label
-    * @param {createElementParams} makeElement
-    * - Element which is need to create the span
-    */
+     * Create the span inside the label and add the label text into the span textcontent
+     * ```
+     * E.g : Input.createSpanElement(inputObject, makeElement);
+     * ```
+     *
+     * @param {InputObject} inputObject
+     * - Element which is need to get the label
+     * @param {createElementParams} makeElement
+     * - Element which is need to create the span
+     */
     function createSpanElement(inputObject, makeElement) {
-        if (inputObject.container.classList.contains('e-outline') && inputObject.container.getElementsByClassName('e-float-text')[0]) {
+        if (inputObject.classList.contains('e-outline') && inputObject.getElementsByClassName('e-float-text')[0]) {
             const labelSpanElement = makeElement('span', { className: CLASSNAMES.FLOATTEXTCONTENT });
-            labelSpanElement.innerHTML = inputObject.container.getElementsByClassName('e-float-text')[0].innerHTML;
-            inputObject.container.getElementsByClassName('e-float-text')[0].innerHTML = '';
-            inputObject.container.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);
+            labelSpanElement.innerHTML = inputObject.getElementsByClassName('e-float-text')[0].innerHTML;
+            inputObject.getElementsByClassName('e-float-text')[0].innerHTML = '';
+            inputObject.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);
         }
     }
     Input.createSpanElement = createSpanElement;
@@ -1210,13 +1214,11 @@ let NumericTextBox = class NumericTextBox extends Component {
     spinBtnCreation() {
         this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);
         attributes(this.spinDown, {
-            'title': this.l10n.getConstant('decrementTitle'),
-            'aria-label': this.l10n.getConstant('decrementTitle')
+            'title': this.l10n.getConstant('decrementTitle')
         });
         this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);
         attributes(this.spinUp, {
-            'title': this.l10n.getConstant('incrementTitle'),
-            'aria-label': this.l10n.getConstant('incrementTitle')
+            'title': this.l10n.getConstant('incrementTitle')
         });
         this.wireSpinBtnEvents();
     }
@@ -1236,7 +1238,12 @@ let NumericTextBox = class NumericTextBox extends Component {
             }
         }
         this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);
-        attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });
+        if (this.min !== -(Number.MAX_VALUE)) {
+            attributes(this.element, { 'aria-valuemin': this.min.toString() });
+        }
+        if (this.max !== (Number.MAX_VALUE)) {
+            attributes(this.element, { 'aria-valuemax': this.max.toString() });
+        }
     }
     formattedValue(decimals, value) {
         return this.instance.getNumberFormat({
@@ -1943,9 +1950,8 @@ let NumericTextBox = class NumericTextBox extends Component {
             detach(this.spinDown);
         }
         const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
-            'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
-            'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',
-            'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
+            'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',
+            'aria-valuemin', 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
         for (let i = 0; i < attrArray.length; i++) {
             this.element.removeAttribute(attrArray[i]);
         }
@@ -2244,8 +2250,8 @@ const regularExpressions = {
  */
 function createMask() {
     attributes(this.element, {
-        'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off',
-        'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': ''
+        'role': 'textbox', 'autocomplete': 'off', 'autocapitalize': 'off',
+        'spellcheck': 'false', 'aria-live': 'assertive'
     });
     if (this.mask) {
         const splitMask = this.mask.split(']');
@@ -2934,7 +2940,6 @@ function triggerMaskChangeEvent(event, oldValue) {
     }
     this.preEleVal = this.element.value;
     this.prevValue = strippedValue.call(this, this.element);
-    attributes(this.element, { 'aria-valuenow': this.element.value });
 }
 function maskInputKeyUpHandler(event) {
     if (this.mask && !this.readonly) {
@@ -3769,9 +3774,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
     destroy() {
         unwireEvents.call(this);
         const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
-            'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
-            'spellcheck', 'aria-autocomplete',
-            'aria-live', 'aria-valuenow', 'aria-invalid'];
+            'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-invalid'];
         for (let i = 0; i < attrArray.length; i++) {
             this.element.removeAttribute(attrArray[i]);
         }
@@ -11042,7 +11045,7 @@ let ColorPicker = class ColorPicker extends Component {
         const wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
         this.element.parentNode.insertBefore(wrapper, this.element);
         wrapper.appendChild(this.element);
-        attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false' });
+        attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false', 'aria-label': 'colorpicker' });
         this.container = this.createElement('div', { className: CONTAINER });
         this.getWrapper().appendChild(this.container);
         let value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';
@@ -11239,7 +11242,7 @@ let ColorPicker = class ColorPicker extends Component {
         }
     }
     appendPalette(colors, key, refEle) {
-        const palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0' } });
+        const palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });
         if (refEle) {
             refEle.appendChild(palette);
         }
@@ -11252,7 +11255,7 @@ let ColorPicker = class ColorPicker extends Component {
         for (let i = 0, len = colors.length; i < len; i++) {
             if (i === 0 || i % this.columns === 0) {
                 row = this.createElement('div', {
-                    className: 'e-row', attrs: { 'role': 'presentation' }
+                    className: 'e-row', attrs: { 'role': 'row' }
                 });
                 palette.appendChild(row);
             }
@@ -13347,7 +13350,7 @@ let TextBox = class TextBox extends Component {
         }
         this.respectiveElement.value = this.respectiveElement.defaultValue;
         this.respectiveElement.classList.remove('e-input');
-        this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
+        this.removeAttributes(['aria-disabled', 'aria-readonly', 'aria-labelledby']);
         if (!isNullOrUndefined(this.textboxWrapper)) {
             this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);
             detach(this.textboxWrapper.container);
@@ -13542,6 +13545,7 @@ class SignatureBase extends Component {
         this.clearArray = [];
         this.isBlazor = false;
         this.isResponsive = false;
+        this.imageEditorPointsColl = [];
     }
     /**
      * To Initialize the component rendering
@@ -13605,18 +13609,23 @@ class SignatureBase extends Component {
         this.canvasContext.fillStyle = this.strokeColor;
         if (this.backgroundImage) {
             this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
-            this.canvasContext.canvas.style.backgroundRepeat = "no-repeat";
+            this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';
         }
         else if (this.backgroundColor) {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
         }
     }
-    mouseDownHandler(e) {
+    mouseDownHandler(e, canvas, panStart, zoomState) {
         if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
             if (e.type === 'touchstart') {
                 e.preventDefault();
                 e.stopPropagation();
             }
+            if (canvas) {
+                this.canvasContext = canvas.getContext('2d');
+                this.scale = zoomState;
+                this.panStart = panStart;
+            }
             this.beginStroke(e);
             this.wireEvents();
         }
@@ -13733,10 +13742,34 @@ class SignatureBase extends Component {
     createPoint(e) {
         const rect = this.canvasContext.canvas.getBoundingClientRect();
         if (e.type === 'mousedown' || e.type === 'mousemove') {
-            return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
+            // signature
+            if (this.canvasRatio === undefined) {
+                return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
+            }
+            // image editor
+            else if (this.scale === 1) {
+                return this.point(((e.clientX - rect.left) * this.canvasRatio.width) / this.scale, ((e.clientY - rect.top) * this.canvasRatio.height) / this.scale, new Date().getTime());
+            }
+            else {
+                return this.point((((e.clientX - rect.left) + ((this.panStart.startX) / this.canvasRatio.width
+                    * this.scale)) / this.scale) * this.canvasRatio.width, (((e.clientY - rect.top) + ((this.panStart.startY) / this.canvasRatio.height
+                    * this.scale)) / this.scale) * this.canvasRatio.height, new Date().getTime());
+            }
         }
         else {
-            return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
+            // signature
+            if (this.canvasRatio === undefined) {
+                return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
+            }
+            // image editor
+            else if (this.scale === 1) {
+                return this.point(((e.touches[0].clientX - rect.left) * this.canvasRatio.width) / this.scale, ((e.touches[0].clientY - rect.top) * this.canvasRatio.height) / this.scale, new Date().getTime());
+            }
+            else {
+                return this.point((e.touches[0].clientX - rect.left) + this.panStart.startX / (this.canvasRatio.width
+                    * this.scale), (e.touches[0].clientY - rect.top) + this.panStart.startY / (this.canvasRatio.height
+                    * this.scale), new Date().getTime());
+            }
         }
     }
     /* Returns the current point corrdinates(x, y) and time.*/
@@ -13754,6 +13787,7 @@ class SignatureBase extends Component {
         const isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;
         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
             points.push(point);
+            this.imageEditorPointsColl.push(point);
             if (points.length > 2) {
                 if (points.length === 3) {
                     points.unshift(points[0]);
@@ -14391,10 +14425,12 @@ class SignatureBase extends Component {
      * @returns {void}
      */
     destroy() {
-        this.unwireEvents(null);
-        removeClass([this.element], 'e-' + this.getModuleName());
-        this.element.removeAttribute('tabindex');
-        this.pointColl = null;
+        if (this.getModuleName() !== 'image-editor') {
+            this.unwireEvents(null);
+            removeClass([this.element], 'e-' + this.getModuleName());
+            this.element.removeAttribute('tabindex');
+            this.pointColl = null;
+        }
         super.destroy();
     }
     /**