@syncfusion/ej2-inputs - npm Package Compare versions

Comparing version 17.1.50 to 17.2.28-beta

CHANGELOG.md

@@ -5,2 +5,32 @@ # Changelog
 
+### TextBox
+
+#### New Features
+
+- #228310, #233267 - Now, you can add additional html attribute to the element using  `htmlAttributes` property.
+
+#### Bug Fixes
+
+- #238248 - Issue with "throws error while reset the form" has been resolved.
+
+- #235983 - Resolved the HTML5 standard issues in textbox control.
+
+### NumericTextBox
+
+#### New Features
+
+- #228310, #233267 - Now, you can add additional html attribute to the element using  `htmlAttributes` property.
+
+#### Bug Fixes
+
+- #237600 - Now, validation message get removed while change the numeric value through spin buttons.
+
+### MaskedTextBox
+
+#### New Features
+
+- #228310, #233267 - Now, you can add additional html attribute to the element using  `htmlAttributes` property.
+
+## 17.1.50 (2019-06-04)
+
 ### Uploader
@@ -7,0 +37,0 @@

dist/global/index.d.ts

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

helpers/e2e/index.d.ts

@@ -5,1 +5,2 @@ export * from './maskedtextboxHelper';
 export * from './uploaderHelper';
+export * from './slider';

helpers/e2e/index.js

@@ -10,1 +10,2 @@ "use strict";
 __export(require("./uploaderHelper"));
+__export(require("./slider"));

package.json

 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@17.1.49",
+  "_id": "@syncfusion/ej2-inputs@17.2.1",
   "_inBundle": false,
-  "_integrity": "sha512-bJBH32eX4w22fKNbRosyP5C98AF3YoThYWzabmJDJFIXAQUOaw5xQdGDPzLsrpAbu42QMO6LjYhlRfuSQfBqOQ==",
+  "_integrity": "sha512-covxo3B9VL5rfEPua3EuzpBfT5+BSmSWv7+PxO0o/sl8RhQ6Tfu3EgFZsY6ncTUigMaocypQmLK8pG6Doar0jw==",
   "_location": "/@syncfusion/ej2-inputs",
@@ -25,3 +25,2 @@ "_phantomChildren": {},
     "/@syncfusion/ej2-diagrams",
-    "/@syncfusion/ej2-diagrams/@syncfusion/ej2-navigations",
     "/@syncfusion/ej2-documenteditor",
@@ -40,6 +39,6 @@ "/@syncfusion/ej2-dropdowns",
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-17.1.49.tgz",
-  "_shasum": "79c9a90e23ae8306298b66fd795935fcaa3ac28b",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-17.2.1.tgz",
+  "_shasum": "ec7de1f02e3a6c4176ca5490fc523a34a282ef22",
   "_spec": "@syncfusion/ej2-inputs@*",
-  "_where": "/jenkins/workspace/ation_hotfix_16.4.0.42_Vol4-CJVRBFC7Z7RSISPRJNEMNQSRMCB6XTG67IJD6R2DVNXFIKQEITTQ@2/packages/included",
+  "_where": "/jenkins/workspace/ation_hotfix_16.4.0.42_Vol4-CJVRBFC7Z7RSISPRJNEMNQSRMCB6XTG67IJD6R2DVNXFIKQEITTQ/packages/included",
   "author": {
@@ -50,6 +49,6 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.49",
-    "@syncfusion/ej2-buttons": "~17.1.50",
-    "@syncfusion/ej2-popups": "~17.1.50",
-    "@syncfusion/ej2-splitbuttons": "~17.1.50"
+    "@syncfusion/ej2-base": "~17.2.28-beta",
+    "@syncfusion/ej2-buttons": "~17.2.28-beta",
+    "@syncfusion/ej2-popups": "~17.2.28-beta",
+    "@syncfusion/ej2-splitbuttons": "~17.2.28-beta"
   },
@@ -121,4 +120,4 @@ "deprecated": false,
   },
-  "version": "17.1.50",
+  "version": "17.2.28-beta",
   "sideEffects": false
 }

src/color-picker/color-picker-model.d.ts

@@ -86,2 +86,3 @@ import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel, ClickEventArgs, OpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
      * @event
+     * @blazorProperty 'Selected'
      */
@@ -95,2 +96,3 @@ select?: EmitType<ColorPickerEventArgs>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -101,3 +103,4 @@ change?: EmitType<ColorPickerEventArgs>;
      * Trigger while rendering each palette tile.
-     * @event
+     * @event 
+     * @blazorProperty 'OnTileRender'
      */
@@ -109,2 +112,3 @@ beforeTileRender?: EmitType<PaletteTileEventArgs>;
      * @event
+     * @blazorProperty 'OnOpen'
      */
@@ -116,2 +120,3 @@ beforeOpen?: EmitType<BeforeOpenCloseEventArgs>;
      * @event
+     * @blazorProperty 'Opened'
      */
@@ -123,2 +128,3 @@ open?: EmitType<OpenEventArgs>;
      * @event
+     * @blazorProperty 'OnClose'
      */
@@ -130,2 +136,3 @@ beforeClose?: EmitType<BeforeOpenCloseEventArgs>;
      * @event
+     * @blazorProperty 'OnModeSwitch'
      */
@@ -137,2 +144,3 @@ beforeModeSwitch?: EmitType<ModeSwitchEventArgs>;
      * @event
+     * @blazorProperty 'Created'
      */
@@ -139,0 +147,0 @@ created?: EmitType<Event>;

src/color-picker/color-picker.d.ts

@@ -102,2 +102,3 @@ import { BaseEventArgs, Component, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
      * @event
+     * @blazorProperty 'Selected'
      */
@@ -110,2 +111,3 @@ select: EmitType<ColorPickerEventArgs>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -116,2 +118,3 @@ change: EmitType<ColorPickerEventArgs>;
      * @event
+     * @blazorProperty 'OnTileRender'
      */
@@ -122,2 +125,3 @@ beforeTileRender: EmitType<PaletteTileEventArgs>;
      * @event
+     * @blazorProperty 'OnOpen'
      */
@@ -128,2 +132,3 @@ beforeOpen: EmitType<BeforeOpenCloseEventArgs>;
      * @event
+     * @blazorProperty 'Opened'
      */
@@ -134,2 +139,3 @@ open: EmitType<OpenEventArgs>;
      * @event
+     * @blazorProperty 'OnClose'
      */
@@ -140,2 +146,3 @@ beforeClose: EmitType<BeforeOpenCloseEventArgs>;
      * @event
+     * @blazorProperty 'OnModeSwitch'
      */
@@ -146,2 +153,3 @@ beforeModeSwitch: EmitType<ModeSwitchEventArgs>;
      * @event
+     * @blazorProperty 'Created'
      */
@@ -148,0 +156,0 @@ created: EmitType<Event>;

src/input/input.js

@@ -62,2 +62,3 @@ import { createElement, attributes, addClass, removeClass, detach, classList, closest, isNullOrUndefined } from '@syncfusion/ej2-base';
             setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);
+            inputObject.clearButton.setAttribute('role', 'button');
             if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {
@@ -284,3 +285,3 @@ addClass([inputObject.container], CLASSNAMES.INPUTGROUP);
             spanEle.innerHTML = placeholder;
-            result = spanEle.textContent;
+            result = spanEle.innerHTML;
         }
@@ -350,2 +351,3 @@ return result;
                 parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);
+                element.removeAttribute('placeholder');
             }
@@ -352,0 +354,0 @@ else {

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

@@ -43,2 +43,9 @@ 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';
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
      * Sets a value that enables or disables the MaskedTextBox component.
@@ -124,2 +131,3 @@ * @default true
      * @event
+     * @blazorProperty 'Created'
      */
@@ -131,2 +139,3 @@ created?: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
@@ -138,2 +147,3 @@ destroyed?: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -145,2 +155,3 @@ change?: EmitType <MaskChangeEventArgs>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -152,2 +163,3 @@ focus?: EmitType<MaskFocusEventArgs>;
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -154,0 +166,0 @@ blur?: EmitType<MaskBlurEventArgs>;

src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -38,2 +38,3 @@ import { Component, EmitType, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';
     private initInputValue;
+    private maskOptions;
     /**
@@ -68,2 +69,10 @@ * Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
      * Sets a value that enables or disables the MaskedTextBox component.
@@ -144,2 +153,3 @@ * @default true
      * @event
+     * @blazorProperty 'Created'
      */
@@ -150,2 +160,3 @@ created: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
@@ -156,2 +167,3 @@ destroyed: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -162,2 +174,3 @@ change: EmitType<MaskChangeEventArgs>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -168,2 +181,3 @@ focus: EmitType<MaskFocusEventArgs>;
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -192,2 +206,4 @@ blur: EmitType<MaskBlurEventArgs>;
     render(): void;
+    private updateHTMLAttrToElement;
+    private updateHTMLAttrToWrapper;
     private resetMaskedTextBox;
@@ -197,2 +213,3 @@ private setMaskPlaceholder;
     private setWidth;
+    private checkHtmlAttributes;
     private createWrapper;
@@ -199,0 +216,0 @@ /**

src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -32,2 +32,3 @@ var __extends = (this && this.__extends) || (function () {
 var MASKINPUT_FOCUS = 'e-input-focus';
+var wrapperAttr = ['title', 'style', 'class'];
 /**
@@ -50,2 +51,3 @@ * The MaskedTextBox allows the user to enter the valid input only based on the provided mask.
         _this.initInputValue = '';
+        _this.maskOptions = options;
         return _this;
@@ -100,2 +102,4 @@ }
         }
+        this.updateHTMLAttrToElement();
+        this.checkHtmlAttributes(true);
         if (this.formElement) {
@@ -123,2 +127,3 @@ this.initInputValue = this.value;
             this.createWrapper();
+            this.updateHTMLAttrToWrapper();
             if (this.element.name === '') {
@@ -141,2 +146,18 @@ this.element.setAttribute('name', this.element.id);
     };
+    MaskedTextBox.prototype.updateHTMLAttrToElement = function () {
+        for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+            var key = _a[_i];
+            if (wrapperAttr.indexOf(key) < 0) {
+                this.element.setAttribute(key, this.htmlAttributes[key]);
+            }
+        }
+    };
+    MaskedTextBox.prototype.updateHTMLAttrToWrapper = function () {
+        for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+            var key = _a[_i];
+            if (wrapperAttr.indexOf(key) > -1) {
+                this.inputObj.container.setAttribute(key, this.htmlAttributes[key]);
+            }
+        }
+    };
     MaskedTextBox.prototype.resetMaskedTextBox = function () {
@@ -187,2 +208,32 @@ this.promptMask = '';
     };
+    MaskedTextBox.prototype.checkHtmlAttributes = function (isDynamic) {
+        var attributes = ['placeholder', 'disabled', 'value'];
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
+            var key = attributes_1[_i];
+            if (!isNullOrUndefined(this.element.getAttribute(key))) {
+                switch (key) {
+                    case 'placeholder':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['placeholder'] === undefined)) || !isDynamic) {
+                            this.setProperties({ placeholder: this.element.placeholder }, isDynamic);
+                        }
+                        break;
+                    case 'disabled':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['enabled'] === undefined)) || !isDynamic) {
+                            var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||
+                                this.element.getAttribute(key) === 'true' ? false : true;
+                            this.setProperties({ enabled: enabled }, isDynamic);
+                        }
+                        break;
+                    case 'value':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['value'] === undefined)) || !isDynamic) {
+                            this.setProperties({ value: this.element.value }, isDynamic);
+                        }
+                        break;
+                }
+            }
+        }
+    };
     MaskedTextBox.prototype.createWrapper = function () {
@@ -244,2 +295,7 @@ this.inputObj = Input.createInput({
                     break;
+                case 'htmlAttributes':
+                    this.updateHTMLAttrToElement();
+                    this.updateHTMLAttrToWrapper();
+                    this.checkHtmlAttributes(false);
+                    break;
                 case 'mask':
@@ -337,2 +393,5 @@ var strippedValue_1 = this.value;
     __decorate([
+        Property({})
+    ], MaskedTextBox.prototype, "htmlAttributes", void 0);
+    __decorate([
         Property(true)
@@ -339,0 +398,0 @@ ], MaskedTextBox.prototype, "enabled", void 0);

src/numerictextbox/numerictextbox-model.d.ts

@@ -65,2 +65,9 @@ import { Component, EventHandler, Property, Event, Browser, L10n, EmitType } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { createElement, attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';import { Internationalization, NumberFormatOptions, getNumericObject } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../input/input';
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
      * Specifies whether the up and down spin buttons should be displayed in NumericTextBox.
@@ -175,2 +182,3 @@ * @default true
      * @event
+     * @blazorProperty 'Created'
      */
@@ -182,2 +190,3 @@ created?: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
@@ -189,2 +198,3 @@ destroyed?: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -196,2 +206,3 @@ change?: EmitType<ChangeEventArgs>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -203,2 +214,3 @@ focus?: EmitType<NumericFocusEventArgs>;
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -205,0 +217,0 @@ blur?: EmitType<NumericBlurEventArgs>;

src/numerictextbox/numerictextbox.d.ts

@@ -46,2 +46,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private blurEventArgs;
+    private numericOptions;
     private isInteract;
@@ -96,2 +97,10 @@ /**
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
      * Specifies whether the up and down spin buttons should be displayed in NumericTextBox.
@@ -194,2 +203,3 @@ * @default true
      * @event
+     * @blazorProperty 'Created'
      */
@@ -200,2 +210,3 @@ created: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
@@ -206,2 +217,3 @@ destroyed: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -212,2 +224,3 @@ change: EmitType<ChangeEventArgs>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -218,2 +231,3 @@ focus: EmitType<NumericFocusEventArgs>;
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -233,2 +247,4 @@ blur: EmitType<NumericBlurEventArgs>;
     private createWrapper;
+    private updateHTMLAttrToElement;
+    private updateHTMLAttrToWrapper;
     private spinBtnCreation;
@@ -244,2 +260,3 @@ private validateMinMax;
     protected resetFormHandler(): void;
+    private setSpinButton;
     private wireEvents;
@@ -246,0 +263,0 @@ private wireSpinBtnEvents;

src/numerictextbox/numerictextbox.js

@@ -38,2 +38,3 @@ var __extends = (this && this.__extends) || (function () {
 var NUMERIC_FOCUS = 'e-input-focus';
+var wrapperAttributes = ['title', 'style', 'class'];
 /**
@@ -54,3 +55,5 @@ * Represents the NumericTextBox component that allows the user to enter only numeric values.
     function NumericTextBox(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.numericOptions = options;
+        return _this;
     }
@@ -72,8 +75,8 @@ NumericTextBox.prototype.preRender = function () {
             for (index; index < this.element.attributes.length; index++) {
-                input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
-                input.innerHTML = this.element.innerHTML;
+                var attributeName = this.element.attributes[index].nodeName;
+                if (attributeName !== 'id') {
+                    input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                    input.innerHTML = this.element.innerHTML;
+                }
             }
-            if (this.element.hasAttribute('id')) {
-                this.element.removeAttribute('id');
-            }
             if (this.element.hasAttribute('name')) {
@@ -96,3 +99,4 @@ this.element.removeAttribute('name');
         this.initCultureFunc();
-        this.checkAttributes();
+        this.updateHTMLAttrToElement();
+        this.checkAttributes(true);
         this.prevValue = this.value;
@@ -136,4 +140,4 @@ if (this.formEle) {
     };
-    NumericTextBox.prototype.checkAttributes = function () {
-        var attributes = ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name'];
+    NumericTextBox.prototype.checkAttributes = function (isDynamic) {
+        var attributes = ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];
         for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
@@ -144,11 +148,57 @@ var prop = attributes_1[_i];
                     case 'disabled':
-                        var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === '' ||
-                            this.element.getAttribute(prop) === 'true' ? false : true;
-                        this.setProperties({ enabled: enabled }, true);
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || !isDynamic) {
+                            var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''
+                                || this.element.getAttribute(prop) === 'true' ? false : true;
+                            this.setProperties({ enabled: enabled }, isDynamic);
+                        }
                         break;
                     case 'readonly':
-                        var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''
-                            || this.element.getAttribute(prop) === 'true' ? true : false;
-                        this.setProperties({ readonly: readonly }, true);
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || !isDynamic) {
+                            var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''
+                                || this.element.getAttribute(prop) === 'true' ? true : false;
+                            this.setProperties({ readonly: readonly }, isDynamic);
+                        }
                         break;
+                    case 'placeholder':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || !isDynamic) {
+                            this.setProperties({ placeholder: this.element.placeholder }, isDynamic);
+                        }
+                        break;
+                    case 'value':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || !isDynamic) {
+                            var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
+                            this.setProperties(setValue(prop, setNumber, {}), isDynamic);
+                        }
+                        break;
+                    case 'min':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || !isDynamic) {
+                            var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
+                            if (minValue !== null && !isNaN(minValue)) {
+                                this.setProperties(setValue(prop, minValue, {}), isDynamic);
+                            }
+                        }
+                        break;
+                    case 'max':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || !isDynamic) {
+                            var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
+                            if (maxValue !== null && !isNaN(maxValue)) {
+                                this.setProperties(setValue(prop, maxValue, {}), isDynamic);
+                            }
+                        }
+                        break;
+                    case 'step':
+                        // tslint:disable-next-line
+                        if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || !isDynamic) {
+                            var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
+                            if (stepValue !== null && !isNaN(stepValue)) {
+                                this.setProperties(setValue(prop, stepValue, {}), isDynamic);
+                            }
+                        }
+                        break;
                     case 'style':
@@ -200,2 +250,3 @@ this.inputStyle = this.element.getAttribute(prop);
         this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));
+        this.updateHTMLAttrToWrapper();
         if (this.readonly) {
@@ -213,2 +264,18 @@ attributes(this.element, { 'aria-readonly': 'true' });
     };
+    NumericTextBox.prototype.updateHTMLAttrToElement = function () {
+        for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+            var pro = _a[_i];
+            if (wrapperAttributes.indexOf(pro) < 0) {
+                this.element.setAttribute(pro, this.htmlAttributes[pro]);
+            }
+        }
+    };
+    NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {
+        for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+            var pro = _a[_i];
+            if (wrapperAttributes.indexOf(pro) > -1) {
+                this.container.setAttribute(pro, this.htmlAttributes[pro]);
+            }
+        }
+    };
     /* Spinner creation */
@@ -297,2 +364,16 @@ NumericTextBox.prototype.spinBtnCreation = function () {
     };
+    NumericTextBox.prototype.setSpinButton = function () {
+        if (!isNullOrUndefined(this.spinDown)) {
+            attributes(this.spinDown, {
+                'title': this.l10n.getConstant('decrementTitle'),
+                'aria-label': this.l10n.getConstant('decrementTitle')
+            });
+        }
+        if (!isNullOrUndefined(this.spinUp)) {
+            attributes(this.spinUp, {
+                'title': this.l10n.getConstant('incrementTitle'),
+                'aria-label': this.l10n.getConstant('incrementTitle')
+            });
+        }
+    };
     NumericTextBox.prototype.wireEvents = function () {
@@ -461,2 +542,12 @@ EventHandler.add(this.element, 'focus', this.focusHandler, this);
         }
+        var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);
+        parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;
+        this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;
+        var formElement = closest(this.element, 'form');
+        if (formElement) {
+            var element = this.element.nextElementSibling;
+            var keyupEvent = document.createEvent('KeyboardEvent');
+            keyupEvent.initEvent('keyup', false, true);
+            element.dispatchEvent(keyupEvent);
+        }
     };
@@ -560,3 +651,3 @@ ;
             attributes(this.element, { 'aria-valuenow': value });
-            this.hiddenInput.value = value;
+            this.hiddenInput.value = this.value.toString();
         }
@@ -779,2 +870,9 @@ else {
         EventHandler.remove(document, 'mouseup', this.mouseUpClick);
+        var formElement = closest(this.element, 'form');
+        if (formElement) {
+            var element = this.element.nextElementSibling;
+            var keyupEvent = document.createEvent('KeyboardEvent');
+            keyupEvent.initEvent('keyup', false, true);
+            element.dispatchEvent(keyupEvent);
+        }
     };
@@ -916,2 +1014,7 @@ NumericTextBox.prototype.getElementData = function (event) {
                     break;
+                case 'htmlAttributes':
+                    this.updateHTMLAttrToElement();
+                    this.updateHTMLAttrToWrapper();
+                    this.checkAttributes(false);
+                    break;
                 case 'placeholder':
@@ -958,14 +1061,3 @@ Input.setPlaceholder(newProp.placeholder, this.element);
                     this.l10n.setLocale(this.locale);
-                    if (!isNullOrUndefined(this.spinDown)) {
-                        attributes(this.spinDown, {
-                            'title': this.l10n.getConstant('decrementTitle'),
-                            'aria-label': this.l10n.getConstant('decrementTitle')
-                        });
-                    }
-                    if (!isNullOrUndefined(this.spinUp)) {
-                        attributes(this.spinUp, {
-                            'title': this.l10n.getConstant('incrementTitle'),
-                            'aria-label': this.l10n.getConstant('incrementTitle')
-                        });
-                    }
+                    this.setSpinButton();
                     this.updatePlaceholder();
@@ -1025,2 +1117,5 @@ Input.setPlaceholder(this.placeholder, this.element);
     __decorate([
+        Property({})
+    ], NumericTextBox.prototype, "htmlAttributes", void 0);
+    __decorate([
         Property(true)
@@ -1027,0 +1122,0 @@ ], NumericTextBox.prototype, "showSpinButton", void 0);

src/slider/slider-model.d.ts

@@ -269,2 +269,3 @@ import { Component, EventHandler, Property, Event, EmitType, Complex } from '@syncfusion/ej2-base';import { L10n, Internationalization, NumberFormatOptions } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, Browser } from '@syncfusion/ej2-base';import { Tooltip, Position, TooltipEventArgs } from '@syncfusion/ej2-popups';
      * @event
+     * @blazorProperty 'Created'
      */
@@ -277,2 +278,3 @@ created?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChange'
      */
@@ -285,2 +287,3 @@ change?: EmitType<SliderChangeEventArgs>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -292,3 +295,5 @@ changed?: EmitType<SliderChangeEventArgs>;
      *  which is used to customize the ticks labels dynamically.
+     * @deprecated
      * @event
+     * @blazorProperty 'TicksRendering'
      */
@@ -300,2 +305,3 @@ renderingTicks?: EmitType<SliderTickEventArgs>;
      * @event
+     * @blazorProperty 'TicksRendered'
      */
@@ -306,3 +312,5 @@ renderedTicks?: EmitType<SliderTickRenderedEventArgs>;
      * We can trigger tooltipChange event when we change the Sider tooltip value.
+     * @deprecated
      * @event
+     * @blazorProperty 'OnTooltipChange'
      */
@@ -309,0 +317,0 @@ tooltipChange?: EmitType<SliderTooltipEventArgs>;

src/slider/slider.d.ts

@@ -380,2 +380,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
      * @event
+     * @blazorProperty 'Created'
      */
@@ -387,2 +388,3 @@ created: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChange'
      */
@@ -394,2 +396,3 @@ change: EmitType<SliderChangeEventArgs>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -400,3 +403,5 @@ changed: EmitType<SliderChangeEventArgs>;
      *  which is used to customize the ticks labels dynamically.
+     * @deprecated
      * @event
+     * @blazorProperty 'TicksRendering'
      */
@@ -407,2 +412,3 @@ renderingTicks: EmitType<SliderTickEventArgs>;
      * @event
+     * @blazorProperty 'TicksRendered'
      */
@@ -412,3 +418,5 @@ renderedTicks: EmitType<SliderTickRenderedEventArgs>;
      * We can trigger tooltipChange event when we change the Sider tooltip value.
+     * @deprecated
      * @event
+     * @blazorProperty 'OnTooltipChange'
      */
@@ -415,0 +423,0 @@ tooltipChange: EmitType<SliderTooltipEventArgs>;

src/textbox/textbox-model.d.ts

@@ -52,2 +52,9 @@ import { Component, Property, Event, EmitType, EventHandler, L10n, setValue, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';import { addClass, removeClass } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject } from '../input/input';
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
      * Specifies a boolean value that enable or disable the multiline on the TextBox. 
@@ -80,2 +87,3 @@ * The TextBox changes from single line to multiline when enable this multiline mode.
      * @event
+     * @blazorProperty 'Created'
      */
@@ -87,2 +95,3 @@ created?: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
@@ -94,2 +103,3 @@ destroyed?: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -101,2 +111,3 @@ change?: EmitType<ChangedEventArgs>;
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -108,2 +119,3 @@ blur?: EmitType<FocusOutEventArgs>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -115,2 +127,3 @@ focus?: EmitType<FocusInEventArgs>;
      * @event
+     * @blazorProperty 'OnInput'
      */
@@ -117,0 +130,0 @@ input?: EmitType<InputEventArgs>;

src/textbox/textbox.d.ts

@@ -59,2 +59,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private initialValue;
+    private textboxOptions;
     /**
@@ -96,2 +97,10 @@ * Specifies the behavior of the TextBox such as text, password, email, etc.
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
      * Specifies a boolean value that enable or disable the multiline on the TextBox.
@@ -120,2 +129,3 @@ * The TextBox changes from single line to multiline when enable this multiline mode.
      * @event
+     * @blazorProperty 'Created'
      */
@@ -126,2 +136,3 @@ created: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
@@ -132,2 +143,3 @@ destroyed: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -138,2 +150,3 @@ change: EmitType<ChangedEventArgs>;
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -144,2 +157,3 @@ blur: EmitType<FocusOutEventArgs>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -150,2 +164,3 @@ focus: EmitType<FocusInEventArgs>;
      * @event
+     * @blazorProperty 'OnInput'
      */
@@ -172,2 +187,4 @@ input: EmitType<InputEventArgs>;
     render(): void;
+    private updateHTMLAttrToWrapper;
+    private updateHTMLAttrToElement;
     private setInitialValue;
@@ -174,0 +191,0 @@ private wireEvents;

src/textbox/textbox.js

@@ -28,2 +28,3 @@ var __extends = (this && this.__extends) || (function () {
 var TEXTBOX_FOCUS = 'e-input-focus';
+var containerAttr = ['title', 'style', 'class'];
 /**
@@ -49,2 +50,3 @@ * Represents the TextBox component that allows the user to enter the values based on it's type.
         _this.isForm = false;
+        _this.textboxOptions = options;
         return _this;
@@ -88,2 +90,8 @@ }
                     break;
+                case 'htmlAttributes':
+                    this.updateHTMLAttrToElement();
+                    this.updateHTMLAttrToWrapper();
+                    var attributes = this.element.attributes;
+                    this.checkAttributes(attributes, false);
+                    break;
                 case 'readonly':
@@ -159,7 +167,9 @@ Input.setReadonly(this.readonly, this.respectiveElement);
         }
+        this.updateHTMLAttrToElement();
         var attributes = this.element.attributes;
-        this.checkAttributes(attributes);
+        this.checkAttributes(attributes, true);
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
+        this.element.setAttribute('role', 'textbox');
         this.globalize = new Internationalization(this.locale);
@@ -184,2 +194,4 @@ var localeText = { placeholder: this.placeholder };
             this.element.removeAttribute('name');
+            this.textarea.setAttribute('role', this.element.getAttribute('role'));
+            this.element.removeAttribute('role');
             var attribute = ['required', 'minlength', 'maxlength'];
@@ -195,14 +207,41 @@ for (var i = 0; i < attribute.length; i++) {
     };
-    TextBox.prototype.checkAttributes = function (attrs) {
+    TextBox.prototype.checkAttributes = function (attrs, isDynamic) {
         for (var i = 0; i < attrs.length; i++) {
             var key = attrs[i].nodeName;
-            if (key === 'disabled') {
-                this.setProperties({ enabled: false }, true);
+            switch (key) {
+                case 'disabled':
+                    // tslint:disable-next-line
+                    if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['enabled'] === undefined)) || !isDynamic) {
+                        var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||
+                            this.element.getAttribute(key) === 'true' ? false : true;
+                        this.setProperties({ enabled: enabled }, isDynamic);
+                    }
+                    break;
+                case 'readonly':
+                    // tslint:disable-next-line
+                    if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['readonly'] === undefined)) || !isDynamic) {
+                        var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''
+                            || this.element.getAttribute(key) === 'true' ? true : false;
+                        this.setProperties({ readonly: readonly }, isDynamic);
+                    }
+                    break;
+                case 'placeholder':
+                    // tslint:disable-next-line
+                    if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['placeholder'] === undefined)) || !isDynamic) {
+                        this.setProperties({ placeholder: attrs[i].nodeValue }, isDynamic);
+                    }
+                    break;
+                case 'value':
+                    // tslint:disable-next-line
+                    if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || !isDynamic) {
+                        this.setProperties({ value: attrs[i].nodeValue }, isDynamic);
+                    }
+                    break;
+                case 'type':
+                    // tslint:disable-next-line
+                    if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['type'] === undefined)) || !isDynamic) {
+                        this.setProperties({ type: attrs[i].nodeValue }, isDynamic);
+                    }
+                    break;
             }
-            else if (key === 'readonly') {
-                this.setProperties({ readonly: true }, true);
-            }
-            else if (key === 'placeholder') {
-                this.setProperties({ placeholder: attrs[i].nodeValue }, true);
-            }
         }
@@ -228,2 +267,3 @@ };
         });
+        this.updateHTMLAttrToWrapper();
         if (this.isHiddenInput) {
@@ -233,5 +273,2 @@ this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
         this.wireEvents();
-        if (this.respectiveElement.value !== '') {
-            this.value = this.respectiveElement.value;
-        }
         if (!isNullOrUndefined(this.value)) {
@@ -249,2 +286,18 @@ Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);
     };
+    TextBox.prototype.updateHTMLAttrToWrapper = function () {
+        for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+            var key = _a[_i];
+            if (containerAttr.indexOf(key) > -1) {
+                this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+            }
+        }
+    };
+    TextBox.prototype.updateHTMLAttrToElement = function () {
+        for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+            var key = _a[_i];
+            if (containerAttr.indexOf(key) < 0) {
+                this.element.setAttribute(key, this.htmlAttributes[key]);
+            }
+        }
+    };
     TextBox.prototype.setInitialValue = function () {
@@ -281,10 +334,12 @@ if (!this.isAngular) {
         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');
+        if (!isNullOrUndefined(label)) {
+            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');
+            }
         }
-        else if (this.initialValue !== '') {
-            label.classList.add('e-label-top');
-            label.classList.remove('e-label-bottom');
-        }
     };
@@ -387,2 +442,7 @@ TextBox.prototype.focusHandler = function (args) {
         this.unWireEvents();
+        if (this.element.tagName === 'INPUT' && this.multiline) {
+            detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
+            this.respectiveElement = this.element;
+            this.element.removeAttribute('type');
+        }
         this.respectiveElement.classList.remove('e-input');
@@ -498,2 +558,5 @@ this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
     __decorate([
+        Property({})
+    ], TextBox.prototype, "htmlAttributes", void 0);
+    __decorate([
         Property(false)
@@ -500,0 +563,0 @@ ], TextBox.prototype, "multiline", void 0);

src/uploader/uploader-model.d.ts

@@ -1,2 +0,2 @@
-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, closest } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+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, closest } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { updateBlazorTemplate, resetBlazorTemplate } from '@syncfusion/ej2-base';
 import {ActionCompleteEventArgs,RenderingEventArgs,FileListRenderingEventArgs,SelectedEventArgs,UploadingEventArgs,RemovingEventArgs,ClearingEventArgs,CancelEventArgs,PauseResumeEventArgs} from "./uploader";
@@ -121,2 +121,9 @@ import {ComponentModel} from '@syncfusion/ej2-base';
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
      * Specifies the CSS class name that can be appended with root element of the uploader.
@@ -233,3 +240,4 @@ * One or more custom CSS classes can be added to a uploader.
      * Triggers when the component is created.
-     * @event 
+     * @event
+     * @blazorProperty 'Created' 
      */
@@ -241,2 +249,3 @@ created?: EmitType<Object>;
      * @event 
+     * @blazorProperty 'OnActionComplete'
      */
@@ -256,2 +265,3 @@ actionComplete?: EmitType<ActionCompleteEventArgs>;
      * @event
+     * @blazorProperty 'OnFileListRender'
      */
@@ -263,2 +273,3 @@ fileListRendering?: EmitType<FileListRenderingEventArgs>;
      * @event
+     * @blazorProperty 'FileSelected'
      */
@@ -270,2 +281,3 @@ selected?: EmitType<SelectedEventArgs>;
      * @event
+     * @blazorProperty 'OnUploadStart'
      */
@@ -301,2 +313,3 @@ uploading?: EmitType<UploadingEventArgs>;
      * @event
+     * @blazorProperty 'Success'
      */
@@ -332,2 +345,3 @@ success?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnFailured'
      */
@@ -339,2 +353,3 @@ failure?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnRemove'
      */
@@ -346,2 +361,3 @@ removing?: EmitType<RemovingEventArgs>;
      * @event
+     * @blazorProperty 'OnClear'
      */
@@ -373,2 +389,3 @@ clearing?: EmitType<ClearingEventArgs>;
      * @event
+     * @blazorProperty 'Progressing'
      */
@@ -396,2 +413,3 @@ progress?: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -427,2 +445,3 @@ change?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChunkSuccess'
      */
@@ -466,2 +485,3 @@ chunkSuccess?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChunkFailured'
      */
@@ -473,2 +493,3 @@ chunkFailure?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChunkUploadStart'
      */
@@ -480,2 +501,3 @@ chunkUploading?: EmitType<UploadingEventArgs>;
      * @event
+     * @blazorProperty 'OnCancel'
      */
@@ -487,2 +509,3 @@ canceling?: EmitType<CancelEventArgs>;
      * @event
+     * @blazorProperty 'Paused'
      */
@@ -494,2 +517,3 @@ pausing?: EmitType<PauseResumeEventArgs>;
      * @event
+     * @blazorProperty 'OnResume'
      */
@@ -496,0 +520,0 @@ resuming?: EmitType<PauseResumeEventArgs>;

src/uploader/uploader.d.ts

@@ -356,2 +356,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private browserName;
+    private uploaderOptions;
     /**
@@ -369,2 +370,10 @@ * Configures the save and remove URL to perform the upload operations in the server asynchronously.
     /**
+     * You can add the additional html attributes such as disabled, value etc., to the element.
+     * If you configured both property and equivalent html attribute then the component considers the property value.
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
      * Specifies the CSS class name that can be appended with root element of the uploader.
@@ -469,2 +478,3 @@ * One or more custom CSS classes can be added to a uploader.
      * @event
+     * @blazorProperty 'Created'
      */
@@ -475,2 +485,3 @@ created: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnActionComplete'
      */
@@ -488,2 +499,3 @@ actionComplete: EmitType<ActionCompleteEventArgs>;
      * @event
+     * @blazorProperty 'OnFileListRender'
      */
@@ -494,2 +506,3 @@ fileListRendering: EmitType<FileListRenderingEventArgs>;
      * @event
+     * @blazorProperty 'FileSelected'
      */
@@ -500,2 +513,3 @@ selected: EmitType<SelectedEventArgs>;
      * @event
+     * @blazorProperty 'OnUploadStart'
      */
@@ -530,2 +544,3 @@ uploading: EmitType<UploadingEventArgs>;
      * @event
+     * @blazorProperty 'Success'
      */
@@ -560,2 +575,3 @@ success: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnFailured'
      */
@@ -566,2 +582,3 @@ failure: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnRemove'
      */
@@ -572,2 +589,3 @@ removing: EmitType<RemovingEventArgs>;
      * @event
+     * @blazorProperty 'OnClear'
      */
@@ -598,2 +616,3 @@ clearing: EmitType<ClearingEventArgs>;
      * @event
+     * @blazorProperty 'Progressing'
      */
@@ -620,2 +639,3 @@ progress: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -650,2 +670,3 @@ change: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChunkSuccess'
      */
@@ -688,2 +709,3 @@ chunkSuccess: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChunkFailured'
      */
@@ -694,2 +716,3 @@ chunkFailure: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnChunkUploadStart'
      */
@@ -700,2 +723,3 @@ chunkUploading: EmitType<UploadingEventArgs>;
      * @event
+     * @blazorProperty 'OnCancel'
      */
@@ -706,2 +730,3 @@ canceling: EmitType<CancelEventArgs>;
      * @event
+     * @blazorProperty 'Paused'
      */
@@ -712,2 +737,3 @@ pausing: EmitType<PauseResumeEventArgs>;
      * @event
+     * @blazorProperty 'OnResume'
      */
@@ -750,2 +776,4 @@ resuming: EmitType<PauseResumeEventArgs>;
     private setDropArea;
+    private updateHTMLAttrToElement;
+    private updateHTMLAttrToWrapper;
     private setMultipleSelection;
@@ -773,2 +801,3 @@ private checkAutoUpload;
     private removeUploadedFile;
+    private removingEventCallback;
     private updateFormData;
@@ -827,2 +856,3 @@ private removeCompleted;
     private sendRequest;
+    private uploadingEventCallback;
     private eventCancelByArgs;
@@ -829,0 +859,0 @@ private checkChunkUpload;

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

11580307

increased by1.86%

Number of package files

354

increased by0.57%

Lines of code

148275

increased by1.22%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@syncfusion/ej2-base@17.2.49(transitive)

• + Added@syncfusion/ej2-buttons@17.2.47(transitive)

• + Added@syncfusion/ej2-icons@17.2.47(transitive)

• + Added@syncfusion/ej2-popups@17.2.47(transitive)

• + Added@syncfusion/ej2-splitbuttons@17.2.47(transitive)

• - Removed@syncfusion/ej2-base@17.1.49(transitive)

• - Removed@syncfusion/ej2-buttons@17.1.50(transitive)

• - Removed@syncfusion/ej2-icons@17.1.47(transitive)

• - Removed@syncfusion/ej2-popups@17.1.50(transitive)

• - Removed@syncfusion/ej2-splitbuttons@17.1.51(transitive)

• Updated@syncfusion/ej2-base@~17.2.28-beta

• Updated@syncfusion/ej2-buttons@~17.2.28-beta

• Updated@syncfusion/ej2-popups@~17.2.28-beta

• Updated@syncfusion/ej2-splitbuttons@~17.2.28-beta