@syncfusion/ej2-inputs - npm Package Compare versions

Comparing version 16.4.53 to 16.4.54

CHANGELOG.md

@@ -5,2 +5,34 @@ # Changelog
 
+### TextBox
+
+#### Bug Fixes
+
+- Now, input event will trigger after clear the textbox value using clear icon.
+
+- Now, the default value is set to the textbox while resetting the form.
+
+### Uploader
+
+#### Bug Fixes
+
+- Uploader file list will be cleared while reset the form.
+
+#### New Features
+
+- Provided `cssClass` property to add custom CSS classes to an uploader.
+
+### MaskedTextBox
+
+#### Bug Fixes
+
+- Issue with, “MaskedTextBox not restoring the initial value on form reset” has been fixed.
+
+### NumericTextBox
+
+#### Bug Fixes
+
+- Issue with, “NumericTextBox not restoring the initial value on form reset” has been fixed.
+
+## 16.4.53 (2019-02-13)
+
 ### ColorPicker
@@ -7,0 +39,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.4.53
+*  version : 16.4.54
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "16.4.53",
+  "version": "16.4.54",
   "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.",
@@ -13,3 +13,3 @@ "author": "Syncfusion Inc.",
     "@syncfusion/ej2-buttons": "~16.4.53",
-    "@syncfusion/ej2-popups": "~16.4.53",
+    "@syncfusion/ej2-popups": "~16.4.54",
     "@syncfusion/ej2-splitbuttons": "~16.4.53"
@@ -16,0 +16,0 @@ },

src/form-validator/form-validator-model.d.ts

 import { selectAll, select, createElement, Base, EmitType } from '@syncfusion/ej2-base';import { extend, isNullOrUndefined, IKeyValue, EventHandler } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, Event, onIntlChange } from '@syncfusion/ej2-base';import { Internationalization, L10n } from '@syncfusion/ej2-base';
-import {ErrorOption} from "./form-validator";
+import {ErrorOption,ValidArgs,FormEventArgs} from "./form-validator";
 
@@ -90,3 +90,3 @@ /**
      */
-    validationBegin?: EmitType<Object>;
+    validationBegin?: EmitType<Object | ValidArgs>;
 
@@ -97,3 +97,3 @@ /**
      */
-    validationComplete?: EmitType<Object>;
+    validationComplete?: EmitType<Object | FormEventArgs>;
 
@@ -100,0 +100,0 @@ /**

src/form-validator/form-validator.d.ts

@@ -115,3 +115,3 @@ import { Base, EmitType } from '@syncfusion/ej2-base';
      */
-    validationBegin: EmitType<Object>;
+    validationBegin: EmitType<Object | ValidArgs>;
     /**
@@ -121,3 +121,3 @@ * Triggers after validation is completed
      */
-    validationComplete: EmitType<Object>;
+    validationComplete: EmitType<Object | FormEventArgs>;
     /**
@@ -215,1 +215,14 @@ * Assigns the custom function to place the error message in the page.
 }
+export interface ValidArgs {
+    value: string;
+    param?: Object;
+    element?: HTMLElement;
+    formElement?: HTMLFormElement;
+}
+export interface FormEventArgs {
+    inputName: string;
+    message: string;
+    element: HTMLInputElement;
+    status?: string;
+    errorElement?: HTMLElement;
+}

src/maskedtextbox/base/mask-base.js

@@ -140,2 +140,5 @@ /**
         bindClearEvent.call(this);
+        if (this.formElement) {
+            EventHandler.add(this.formElement, 'reset', resetFormHandler, this);
+        }
     }
@@ -156,2 +159,5 @@ }
     EventHandler.remove(this.element, 'cut', maskInputCutHandler);
+    if (this.formElement) {
+        EventHandler.remove(this.formElement, 'reset', resetFormHandler);
+    }
 }
@@ -183,2 +189,10 @@ /**
 }
+function resetFormHandler() {
+    if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {
+        setElementValue.call(this, this.promptMask);
+    }
+    else {
+        this.value = this.initInputValue;
+    }
+}
 /**
@@ -185,0 +199,0 @@ * @hidden

src/maskedtextbox/maskedtextbox/maskedtextbox-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, attributes, addClass, detach, createElement } from '@syncfusion/ej2-base';import { removeClass , Browser} from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';import { maskInputBlurHandler } from '../base/mask-base';
+import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, attributes, addClass, detach, createElement } from '@syncfusion/ej2-base';import { removeClass , Browser, closest} from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';import { maskInputBlurHandler } from '../base/mask-base';
 import {MaskChangeEventArgs,MaskFocusEventArgs,MaskBlurEventArgs} from "./maskedtextbox";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -36,2 +36,4 @@ import { Component, EmitType, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';
     private preEleVal;
+    private formElement;
+    private initInputValue;
     /**
@@ -38,0 +40,0 @@ * Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the

src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -22,3 +22,3 @@ var __extends = (this && this.__extends) || (function () {
 import { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach } from '@syncfusion/ej2-base';
-import { removeClass, Browser } from '@syncfusion/ej2-base';
+import { removeClass, Browser, closest } from '@syncfusion/ej2-base';
 import { Input } from '../../input/input';
@@ -47,3 +47,5 @@ import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';
     function MaskedTextBox(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.initInputValue = '';
+        return _this;
     }
@@ -80,2 +82,3 @@ /**
         this.angularTagName = null;
+        this.formElement = closest(this.element, 'form');
         if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {
@@ -97,2 +100,5 @@ this.angularTagName = this.element.tagName;
         }
+        if (this.formElement) {
+            this.initInputValue = this.value;
+        }
     };
@@ -129,2 +135,5 @@ /**
             }
+            if (this.element.getAttribute('value') || this.value) {
+                this.element.setAttribute('value', this.element.value);
+            }
         }
@@ -131,0 +140,0 @@ };

src/numerictextbox/numerictextbox.d.ts

@@ -24,2 +24,4 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private spinDown;
+    private formEle;
+    private inputEleValue;
     private timeOut;
@@ -240,2 +242,3 @@ private prevValue;
     private clear;
+    protected resetFormHandler(): void;
     private wireEvents;
@@ -242,0 +245,0 @@ private wireSpinBtnEvents;

src/numerictextbox/numerictextbox.js

@@ -63,2 +63,3 @@ var __extends = (this && this.__extends) || (function () {
         this.angularTagName = null;
+        this.formEle = closest(this.element, 'form');
         if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {
@@ -91,2 +92,5 @@ this.angularTagName = this.element.tagName;
         this.prevValue = this.value;
+        if (this.formEle) {
+            this.inputEleValue = this.value;
+        }
         this.validateMinMax();
@@ -121,2 +125,5 @@ this.validateStep();
             }
+            if (this.element.getAttribute('value') || this.value) {
+                this.element.setAttribute('value', this.element.value);
+            }
         }
@@ -271,2 +278,10 @@ };
     };
+    NumericTextBox.prototype.resetFormHandler = function () {
+        if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {
+            this.updateValue(null);
+        }
+        else {
+            this.updateValue(this.inputEleValue);
+        }
+    };
     NumericTextBox.prototype.wireEvents = function () {
@@ -283,2 +298,5 @@ EventHandler.add(this.element, 'focus', this.focusIn, this);
             this.bindClearEvent();
+            if (this.formEle) {
+                EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
+            }
         }
@@ -304,2 +322,5 @@ };
         EventHandler.remove(this.element, 'paste', this.pasteHandler);
+        if (this.formEle) {
+            EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
+        }
     };
@@ -306,0 +327,0 @@ NumericTextBox.prototype.unwireSpinBtnEvents = function () {

src/textbox/textbox.d.ts

@@ -51,2 +51,7 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private globalize;
+    private preventChange;
+    private isAngular;
+    private isForm;
+    private formElement;
+    private initialValue;
     /**
@@ -157,3 +162,6 @@ * Specifies the behavior of the TextBox such as text, password, email, etc.
     render(): void;
+    private setInitialValue;
     private wireEvents;
+    private resetValue;
+    private resetForm;
     private focusHandler;
@@ -160,0 +168,0 @@ private focusOutHandler;

src/textbox/textbox.js

@@ -43,2 +43,4 @@ var __extends = (this && this.__extends) || (function () {
         _this.previousValue = null;
+        _this.isAngular = false;
+        _this.isForm = false;
         return _this;
@@ -112,2 +114,6 @@ }
         this.cloneElement = this.element.cloneNode(true);
+        this.formElement = this.element.closest('form');
+        if (!isNullOrUndefined(this.formElement)) {
+            this.isForm = true;
+        }
         /* istanbul ignore next */
@@ -180,3 +186,12 @@ if (this.element.tagName === 'EJS-TEXTBOX') {
         }
+        if (!isNullOrUndefined(this.value)) {
+            this.initialValue = this.value;
+            this.setInitialValue();
+        }
     };
+    TextBox.prototype.setInitialValue = function () {
+        if (!this.isAngular) {
+            this.element.setAttribute('value', this.initialValue);
+        }
+    };
     TextBox.prototype.wireEvents = function () {
@@ -187,2 +202,5 @@ EventHandler.add(this.element, 'focus', this.focusHandler, this);
         EventHandler.add(this.element, 'change', this.changeHandler, this);
+        if (this.isForm) {
+            EventHandler.add(this.formElement, 'reset', this.resetForm, this);
+        }
         if (this.enabled) {
@@ -192,2 +210,25 @@ this.bindClearEvent();
     };
+    TextBox.prototype.resetValue = function (value) {
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.value = value;
+        this.isProtectedOnChange = prevOnChange;
+    };
+    TextBox.prototype.resetForm = function () {
+        if (this.isAngular) {
+            this.resetValue('');
+        }
+        else {
+            this.resetValue(this.initialValue);
+        }
+        var label = this.textboxWrapper.container.querySelector('.e-float-text');
+        if (isNullOrUndefined(this.initialValue) || this.initialValue === '') {
+            label.classList.add('e-label-bottom');
+            label.classList.remove('e-label-top');
+        }
+        else if (this.initialValue !== '') {
+            label.classList.add('e-label-top');
+            label.classList.remove('e-label-bottom');
+        }
+    };
     TextBox.prototype.focusHandler = function (args) {
@@ -214,2 +255,4 @@ var eventArgs = {
     TextBox.prototype.inputHandler = function (args) {
+        // tslint:disable-next-line
+        var textboxObj = this;
         var eventArgs = {
@@ -221,2 +264,6 @@ event: args,
         };
+        if (this.isAngular) {
+            textboxObj.localChange({ value: this.element.value });
+            this.preventChange = true;
+        }
         this.trigger('input', eventArgs);
@@ -239,3 +286,9 @@ args.stopPropagation();
         };
-        this.trigger('change', eventArgs);
+        if (this.isAngular && this.preventChange !== true) {
+            this.trigger('change', eventArgs);
+        }
+        else if (isNullOrUndefined(this.isAngular) || !this.isAngular) {
+            this.trigger('change', eventArgs);
+        }
+        this.preventChange = false;
         this.previousValue = this.value;
@@ -251,4 +304,12 @@ };
         if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR))) {
+            var previousValue = this.value;
             Input.setValue('', this.element, this.floatLabelType, this.showClearButton);
             this.value = '';
+            var eventArgs = {
+                event: event,
+                value: this.element.value,
+                previousValue: previousValue,
+                container: this.textboxWrapper.container
+            };
+            this.trigger('input', eventArgs);
         }
@@ -261,2 +322,5 @@ };
         EventHandler.remove(this.element, 'change', this.changeHandler);
+        if (this.isForm) {
+            EventHandler.remove(this.formElement, 'reset', this.resetForm);
+        }
     };
@@ -263,0 +327,0 @@ /**

src/uploader/uploader-model.d.ts

@@ -127,2 +127,9 @@ import { Component, Property, Event, EmitType, EventHandler, classList, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser, Ajax, BeforeSendEventArgs, getUniqueID } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
     /**
+     * Specifies the CSS class name that can be appended with root element of the uploader.
+     * One or more custom CSS classes can be added to a uploader.
+     * @default
+     */
+    cssClass?: string;
+
+    /**
      * Specifies Boolean value that indicates whether the component is enabled or disabled.
@@ -129,0 +136,0 @@ * The uploader component does not allow to interact when this property is disabled.

src/uploader/uploader.d.ts

@@ -370,2 +370,8 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     /**
+     * Specifies the CSS class name that can be appended with root element of the uploader.
+     * One or more custom CSS classes can be added to a uploader.
+     * @default
+     */
+    cssClass: string;
+    /**
      * Specifies Boolean value that indicates whether the component is enabled or disabled.
@@ -731,2 +737,3 @@ * The uploader component does not allow to interact when this property is disabled.
     private sequenceUpload;
+    private setCSSClass;
     private wireEvents;
@@ -733,0 +740,0 @@ private unWireEvents;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9747344

increased by0.55%

Lines of code

114543

increased by0.38%

Dependency changes

• Updated@syncfusion/ej2-popups@~16.4.54