@syncfusion/ej2-inputs 31.1.23 → 31.2.4

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

@@ -1253,6 +1253,7 @@ let NumericTextBox = class NumericTextBox extends Component {
             if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
+            this.updateFloatLabelOverflowWidth();
             this.renderComplete();
         }
     }
@@ -2028,6 +2029,12 @@ let NumericTextBox = class NumericTextBox extends Component {
             return;
         }
         this.isFocused = true;
+        if (this.floatLabelType !== 'Never' && this.inputWrapper && this.inputWrapper.container) {
+            const label = this.inputWrapper.container.querySelector('.e-float-text');
+            if (label) {
+                label.removeAttribute('style');
+            }
+        }
         this.prevValue = this.value;
         if ((this.value || this.value === 0)) {
             let formatValue = this.formatNumber();
@@ -2083,6 +2090,7 @@ let NumericTextBox = class NumericTextBox extends Component {
                 EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);
             }
         }
+        this.updateFloatLabelOverflowWidth();
         const formElement = closest(this.element, 'form');
         if (formElement) {
             const element = this.element.nextElementSibling;
@@ -2441,6 +2449,24 @@ let NumericTextBox = class NumericTextBox extends Component {
             detach(this.spinDown);
         }
     }
+    getRightIconsWidth() {
+        const container = this.inputWrapper.container;
+        let width = 0;
+        const iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        const icons = container.querySelectorAll(iconSelectors);
+        for (let index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    }
+    updateFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
+        const calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    }
     /**
      * Gets the component name
      *
@@ -2813,6 +2839,12 @@ function maskInputFocusHandler(event) {
     if (!this.isClicked) {
         triggerFocus.call(this, eventArgs, inputElement);
     }
+    if (this.floatLabelType !== 'Never' && this.inputObj && this.inputObj.container) {
+        const label = this.inputObj.container.querySelector('.e-float-text');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    }
     if (this.mask) {
         if (!(!(modelValue === null || modelValue === '') || this.floatLabelType === 'Always' ||
             this.placeholder === null || this.placeholder === '')) {
@@ -2914,6 +2946,7 @@ function maskInputBlurHandler(event) {
         container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj
     };
     this.trigger('blur', this.blurEventArgs);
+    this.updateFloatLabelOverflowWidth();
     if (this.mask) {
         this.isFocus = false;
         if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') {
@@ -3824,6 +3857,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
             if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {
                 this.element.setAttribute('aria-label', 'maskedtextbox');
             }
+            this.updateFloatLabelOverflowWidth();
             this.renderComplete();
         }
     }
@@ -4096,6 +4130,24 @@ let MaskedTextBox = class MaskedTextBox extends Component {
             removeClass([this.inputObj.container], [MASKINPUT_FOCUS]);
         }
     }
+    getRightIconsWidth() {
+        const container = this.inputObj.container;
+        let width = 0;
+        const iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        const icons = container.querySelectorAll(iconSelectors);
+        for (let index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    }
+    updateFloatLabelOverflowWidth() {
+        const container = this.inputObj.container;
+        const label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
+        const calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    }
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it maintains the initial input element from the DOM.
@@ -9323,6 +9375,12 @@ let Uploader = class Uploader extends Component {
         if (!this.enabled) {
             return;
         }
+        if (!this.multiple && this.getFilesData().length > 0) {
+            const selectedFile = this.getSelectedFiles(0);
+            if (selectedFile) {
+                this.remove(selectedFile, false, false, true, null);
+            }
+        }
         let targetFiles;
         /* istanbul ignore next */
         if (args.type === 'drop') {
@@ -10064,7 +10122,7 @@ let Uploader = class Uploader extends Component {
         const progressbarWrapper = this.createElement('span', { className: PROGRESS_WRAPPER });
         const progressBar = this.createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });
         const progressbarInnerWrapper = this.createElement('span', { className: PROGRESS_INNER_WRAPPER });
-        progressBar.setAttribute('style', 'width: 0%');
+        progressBar.style.width = '0%';
         const progressbarText = this.createElement('span', { className: PROGRESSBAR_TEXT });
         progressbarText.textContent = '0%';
         progressbarInnerWrapper.appendChild(progressBar);
@@ -10087,7 +10145,7 @@ let Uploader = class Uploader extends Component {
         }
     }
     changeProgressValue(li, progressValue) {
-        li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);
+        li.querySelector('.' + PROGRESSBAR).style.width = progressValue;
         li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;
     }
     uploadInProgress(e, files, customUI, request) {
@@ -14670,6 +14728,7 @@ let TextArea = class TextArea extends Component {
         this.element.defaultValue = this.element.value;
         Input.setWidth(this.width, this.textareaWrapper.container);
         this.setWrapperWidth();
+        this.updateFloatLabelOverflowWidth();
         this.renderComplete();
     }
     getModuleName() {
@@ -14776,6 +14835,12 @@ let TextArea = class TextArea extends Component {
             event: args,
             value: this.value
         };
+        if (this.floatLabelType !== 'Never' && this.textareaWrapper && this.textareaWrapper.container) {
+            const label = this.textareaWrapper.container.querySelector('.e-float-text');
+            if (label) {
+                label.removeAttribute('style');
+            }
+        }
         this.trigger('focus', eventArgs);
     }
     focusOutHandler(args) {
@@ -14788,6 +14853,7 @@ let TextArea = class TextArea extends Component {
             event: args,
             value: this.value
         };
+        this.updateFloatLabelOverflowWidth();
         this.trigger('blur', eventArgs);
     }
     keydownHandler(args) {
@@ -15032,6 +15098,24 @@ let TextArea = class TextArea extends Component {
     getCurrentResizeClass(resizeMode) {
         return resizeMode === 'None' ? RESIZE_NONE : (resizeMode === 'Both' ? RESIZE_XY : resizeMode === 'Horizontal' ? RESIZE_X : RESIZE_Y);
     }
+    getRightIconsWidth() {
+        const container = this.textareaWrapper.container;
+        let width = 0;
+        const iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        const icons = container.querySelectorAll(iconSelectors);
+        for (let index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    }
+    updateFloatLabelOverflowWidth() {
+        const container = this.textareaWrapper.container;
+        const label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
+        const calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    }
 };
 __decorate$7([
     Property(false)