@syncfusion/ej2-base 20.1.57 → 20.1.58-106983

package/package.json

@@ -1,110 +1,29 @@
 {
-	"_from": "@syncfusion/ej2-base@*",
-	"_id": "@syncfusion/ej2-base@20.1.55",
+	"_from": "@syncfusion/ej2-base@~20.1.57",
+	"_id": "@syncfusion/ej2-base@20.1.61",
 	"_inBundle": false,
-	"_integrity": "sha512-8aq1464TXvI7tOSODaEYO8vGel2j1YF6XmtkV7qo1o+PwR1sDIqgnHykgZU7VLgWHdxUjdNw1BuZb2gl9micOg==",
+	"_integrity": "sha512-NBSAZ+To+mH0QjmVMXMvqoWRsXb1JYIzTW8fM3yF/D9bIUYJ19Xlz60GeCY4sJk6n8GzWj/xrLmDdh76P64ukQ==",
 	"_location": "/@syncfusion/ej2-base",
 	"_phantomChildren": {},
 	"_requested": {
 	  "type": "range",
 	  "registry": true,
-	  "raw": "@syncfusion/ej2-base@*",
+	  "raw": "@syncfusion/ej2-base@~20.1.57",
 	  "name": "@syncfusion/ej2-base",
 	  "escapedName": "@syncfusion%2fej2-base",
 	  "scope": "@syncfusion",
-	  "rawSpec": "*",
+	  "rawSpec": "~20.1.57",
 	  "saveSpec": null,
-	  "fetchSpec": "*"
+	  "fetchSpec": "~20.1.57"
 	},
 	"_requiredBy": [
-	  "/",
-	  "/@syncfusion/ej2",
-	  "/@syncfusion/ej2-angular-base",
-	  "/@syncfusion/ej2-angular-calendars",
-	  "/@syncfusion/ej2-angular-charts",
-	  "/@syncfusion/ej2-angular-documenteditor",
-	  "/@syncfusion/ej2-angular-dropdowns",
-	  "/@syncfusion/ej2-angular-filemanager",
-	  "/@syncfusion/ej2-angular-gantt",
-	  "/@syncfusion/ej2-angular-grids",
-	  "/@syncfusion/ej2-angular-navigations",
-	  "/@syncfusion/ej2-angular-pdfviewer",
-	  "/@syncfusion/ej2-angular-pivotview",
-	  "/@syncfusion/ej2-angular-richtexteditor",
-	  "/@syncfusion/ej2-angular-schedule",
-	  "/@syncfusion/ej2-angular-spreadsheet",
-	  "/@syncfusion/ej2-angular-treegrid",
-	  "/@syncfusion/ej2-barcode-generator",
 	  "/@syncfusion/ej2-buttons",
-	  "/@syncfusion/ej2-calendars",
-	  "/@syncfusion/ej2-charts",
-	  "/@syncfusion/ej2-circulargauge",
-	  "/@syncfusion/ej2-data",
-	  "/@syncfusion/ej2-diagrams",
-	  "/@syncfusion/ej2-documenteditor",
-	  "/@syncfusion/ej2-drawings",
-	  "/@syncfusion/ej2-dropdowns",
-	  "/@syncfusion/ej2-excel-export",
-	  "/@syncfusion/ej2-filemanager",
-	  "/@syncfusion/ej2-gantt",
-	  "/@syncfusion/ej2-grids",
-	  "/@syncfusion/ej2-heatmap",
-	  "/@syncfusion/ej2-inplace-editor",
-	  "/@syncfusion/ej2-inputs",
-	  "/@syncfusion/ej2-kanban",
-	  "/@syncfusion/ej2-layouts",
-	  "/@syncfusion/ej2-lineargauge",
-	  "/@syncfusion/ej2-lists",
-	  "/@syncfusion/ej2-maps",
-	  "/@syncfusion/ej2-navigations",
-	  "/@syncfusion/ej2-notifications",
-	  "/@syncfusion/ej2-pdfviewer",
-	  "/@syncfusion/ej2-pivotview",
-	  "/@syncfusion/ej2-popups",
-	  "/@syncfusion/ej2-progressbar",
-	  "/@syncfusion/ej2-querybuilder",
-	  "/@syncfusion/ej2-react-base",
-	  "/@syncfusion/ej2-react-calendars",
-	  "/@syncfusion/ej2-react-charts",
-	  "/@syncfusion/ej2-react-documenteditor",
-	  "/@syncfusion/ej2-react-dropdowns",
-	  "/@syncfusion/ej2-react-filemanager",
-	  "/@syncfusion/ej2-react-gantt",
-	  "/@syncfusion/ej2-react-grids",
-	  "/@syncfusion/ej2-react-navigations",
-	  "/@syncfusion/ej2-react-pdfviewer",
-	  "/@syncfusion/ej2-react-pivotview",
-	  "/@syncfusion/ej2-react-richtexteditor",
-	  "/@syncfusion/ej2-react-schedule",
-	  "/@syncfusion/ej2-react-spreadsheet",
-	  "/@syncfusion/ej2-react-treegrid",
-	  "/@syncfusion/ej2-richtexteditor",
-	  "/@syncfusion/ej2-schedule",
-	  "/@syncfusion/ej2-splitbuttons",
-	  "/@syncfusion/ej2-spreadsheet",
-	  "/@syncfusion/ej2-svg-base",
-	  "/@syncfusion/ej2-treegrid",
-	  "/@syncfusion/ej2-treemap",
-	  "/@syncfusion/ej2-vue-base",
-	  "/@syncfusion/ej2-vue-calendars",
-	  "/@syncfusion/ej2-vue-charts",
-	  "/@syncfusion/ej2-vue-documenteditor",
-	  "/@syncfusion/ej2-vue-dropdowns",
-	  "/@syncfusion/ej2-vue-filemanager",
-	  "/@syncfusion/ej2-vue-gantt",
-	  "/@syncfusion/ej2-vue-grids",
-	  "/@syncfusion/ej2-vue-navigations",
-	  "/@syncfusion/ej2-vue-pdfviewer",
-	  "/@syncfusion/ej2-vue-pivotview",
-	  "/@syncfusion/ej2-vue-richtexteditor",
-	  "/@syncfusion/ej2-vue-schedule",
-	  "/@syncfusion/ej2-vue-spreadsheet",
-	  "/@syncfusion/ej2-vue-treegrid"
+	  "/@syncfusion/ej2-popups"
 	],
-	"_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-base/-/ej2-base-20.1.55.tgz",
-	"_shasum": "276806d41168b79bd36ffc0fb17ef47336363c2f",
-	"_spec": "@syncfusion/ej2-base@*",
-	"_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
+	"_resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.61.tgz",
+	"_shasum": "dd04e7d5bd0af8034a1c4db11b7e684e7212682c",
+	"_spec": "@syncfusion/ej2-base@~20.1.57",
+	"_where": "E:\\New folder (3)\\node_modules\\@syncfusion\\ej2-popups",
 	"author": {
 	  "name": "Syncfusion Inc."
 	},
@@ -153,7 +72,8 @@
 	  "type": "git",
 	  "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
 	},
+	"sideEffects": true,
 	"typings": "index.d.ts",
-	"version": "20.1.57",
-	"sideEffects": true
-  }
+	"version": "20.1.58-106983"
+  }
+  

package/src/animation.d.ts

@@ -194,3 +194,16 @@ export declare let isRippleEnabled: boolean;
  * @returns {boolean} ?
  */
 export declare function enableRipple(isRipple: boolean): boolean;
+/**
+ * Defines the Modes of Global animation.
+ *
+ * @private
+ */
+export declare let animationMode: string;
+/**
+ * Method for set the Global animation modes for Syncfusion Blazor components.
+ *
+ * @param {string} value - Specifies the animation mode.
+ * @returns {void}
+ */
+export declare function setGlobalAnimation(value: string): void;

package/src/animation.js

@@ -103,11 +103,21 @@ var Animation = /** @class */ (function (_super) {
      * @returns {void}
      */
     Animation.delayAnimation = function (model) {
-        if (model.delay) {
-            setTimeout(function () { Animation_1.applyAnimation(model); }, model.delay);
+        if (animationMode === 'Disable') {
+            if (model.begin) {
+                model.begin.call(this, model);
+            }
+            if (model.end) {
+                model.end.call(this, model);
+            }
         }
         else {
-            Animation_1.applyAnimation(model);
+            if (model.delay) {
+                setTimeout(function () { Animation_1.applyAnimation(model); }, model.delay);
+            }
+            else {
+                Animation_1.applyAnimation(model);
+            }
         }
     };
     /**
@@ -271,7 +281,9 @@ export { Animation };
 export function rippleEffect(element, rippleOptions, done) {
     var rippleModel = getRippleModel(rippleOptions);
     if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {
-        return (function () { });
+        return (function () {
+            // do nothing.
+        });
     }
     element.setAttribute('data-ripple', 'true');
     EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });
@@ -413,3 +425,18 @@ export function enableRipple(isRipple) {
     isRippleEnabled = isRipple;
     return isRippleEnabled;
 }
+/**
+ * Defines the Modes of Global animation.
+ *
+ * @private
+ */
+export var animationMode = '';
+/**
+ * Method for set the Global animation modes for Syncfusion Blazor components.
+ *
+ * @param {string} value - Specifies the animation mode.
+ * @returns {void}
+ */
+export function setGlobalAnimation(value) {
+    animationMode = value;
+}

package/src/base.js

@@ -85,8 +85,8 @@ var Base = /** @class */ (function () {
         var keys = Object.keys(obj);
         for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
             var key = keys_1[_i];
-            if (parent[key] instanceof Array) {
-                for (var _a = 0, _b = parent[key]; _a < _b.length; _a++) {
+            if (parent["" + key] instanceof Array) {
+                for (var _a = 0, _b = parent["" + key]; _a < _b.length; _a++) {
                     var obj_1 = _b[_a];
                     if (obj_1.dataBind !== undefined) {
                         obj_1.dataBind();
@@ -94,7 +94,7 @@ var Base = /** @class */ (function () {
                 }
             }
             else {
-                parent[key].dataBind();
+                parent["" + key].dataBind();
             }
         }
     };
@@ -129,8 +129,8 @@ var Base = /** @class */ (function () {
         newChanges = newChanges ? newChanges : {};
         extend(this.bulkChanges, {}, newChanges, true);
         var sfBlazor = 'sfBlazor';
-        if (this.allowServerDataBinding && window[sfBlazor].updateModel) {
-            window[sfBlazor].updateModel(this);
+        if (this.allowServerDataBinding && window["" + sfBlazor].updateModel) {
+            window["" + sfBlazor].updateModel(this);
             this.bulkChanges = {};
         }
     };
@@ -139,14 +139,14 @@ var Base = /** @class */ (function () {
         if (isBlazor()) {
             // tslint:disable-next-line:no-any
             var newChanges = {};
-            newChanges[key] = newValue;
+            newChanges["" + key] = newValue;
             this.serverDataBind(newChanges);
         }
         if (this.isProtectedOnChange) {
             return;
         }
-        this.oldProperties[key] = oldValue;
-        this.changedProperties[key] = newValue;
+        this.oldProperties["" + key] = oldValue;
+        this.changedProperties["" + key] = newValue;
         this.finalUpdate();
         this.finalUpdate = setImmediate(this.dataBind.bind(this));
     };
@@ -192,7 +192,7 @@ var Base = /** @class */ (function () {
                 var handler = getValue(eventName, this);
                 if (handler) {
                     var blazor = 'Blazor';
-                    if (window[blazor]) {
+                    if (window["" + blazor]) {
                         var promise = handler.call(this, eventProp);
                         if (promise && typeof promise.then === 'function') {
                             if (!successHandler) {
@@ -283,7 +283,7 @@ export function getComponent(elem, comp) {
     var i;
     var ele = typeof elem === 'string' ? document.getElementById(elem) : elem;
     for (i = 0; i < ele.ej2_instances.length; i++) {
-        instance = ele.ej2_instances[i];
+        instance = ele.ej2_instances[parseInt(i.toString(), 10)];
         if (typeof comp === 'string') {
             var compName = instance.getModuleName();
             if (comp === compName) {
@@ -311,9 +311,9 @@ export function removeChildInstance(element) {
     // tslint:disable-next-line:no-any
     var childEle = [].slice.call(element.getElementsByClassName('e-control'));
     for (var i = 0; i < childEle.length; i++) {
-        var compName = childEle[i].classList[1].split('e-')[1];
+        var compName = childEle[parseInt(i.toString(), 10)].classList[1].split('e-')[1];
         // tslint:disable-next-line:no-any
-        var compInstance = getComponent(childEle[i], compName);
+        var compInstance = getComponent(childEle[parseInt(i.toString(), 10)], compName);
         if (!isUndefined(compInstance)) {
             compInstance.destroy();
         }

package/src/browser.js

@@ -35,7 +35,7 @@ var Browser = /** @class */ (function () {
         var clientInfo = [];
         for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
             var key = keys_1[_i];
-            clientInfo = Browser.userAgent.match(REGX_BROWSER[key]);
+            clientInfo = Browser.userAgent.match(REGX_BROWSER["" + key]);
             if (clientInfo) {
                 browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase());
                 browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name);
@@ -77,9 +77,9 @@ var Browser = /** @class */ (function () {
                 isPointer: 'pointercancel', isTouch: 'touchcancel', isDevice: 'mouseleave'
             }
         };
-        return (Browser.isPointer ? events[event].isPointer :
-            (Browser.isTouch ? events[event].isTouch + (!Browser.isDevice ? ' ' + events[event].isDevice : '')
-                : events[event].isDevice));
+        return (Browser.isPointer ? events["" + event].isPointer :
+            (Browser.isTouch ? events["" + event].isTouch + (!Browser.isDevice ? ' ' + events["" + event].isDevice : '')
+                : events["" + event].isDevice));
     };
     /**
      * To get the Touch start event from browser
@@ -121,17 +121,17 @@ var Browser = /** @class */ (function () {
      * @returns {Object} ?
      */
     Browser.getValue = function (key, regX) {
-        var browserDetails = window.browserDetails;
-        if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true) {
+        var browserDetails = typeof window !== 'undefined' ? window.browserDetails : {};
+        if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true) {
             browserDetails['isIos'] = true;
             browserDetails['isDevice'] = true;
             browserDetails['isTouch'] = true;
             browserDetails['isPointer'] = true;
         }
-        if ('undefined' === typeof browserDetails[key]) {
-            return browserDetails[key] = regX.test(Browser.userAgent);
+        if ('undefined' === typeof browserDetails["" + key]) {
+            return browserDetails["" + key] = regX.test(Browser.userAgent);
         }
-        return browserDetails[key];
+        return browserDetails["" + key];
     };
     Object.defineProperty(Browser, "userAgent", {
         get: function () {

package/src/child-property.js

@@ -30,10 +30,10 @@ var ChildProperty = /** @class */ (function () {
      */
     ChildProperty.prototype.updateChange = function (val, propName) {
         if (val === true) {
-            this.parentObj.childChangedProperties[propName] = val;
+            this.parentObj.childChangedProperties["" + propName] = val;
         }
         else {
-            delete this.parentObj.childChangedProperties[propName];
+            delete this.parentObj.childChangedProperties["" + propName];
         }
         if (this.parentObj.updateChange) {
             this.parentObj.updateChange(val, this.parentObj.propName);
@@ -121,8 +121,8 @@ var ChildProperty = /** @class */ (function () {
         if (!restrictServerDataBind) {
             this.serverDataBind(key, newValue, true);
         }
-        this.oldProperties[key] = oldValue;
-        this.changedProperties[key] = newValue;
+        this.oldProperties["" + key] = oldValue;
+        this.changedProperties["" + key] = newValue;
         this.updateChange(true, this.propName);
         this.finalUpdate();
         this.updateTimeOut();
@@ -138,19 +138,19 @@ var ChildProperty = /** @class */ (function () {
                 parent_1 = newChanges;
                 for (var i = 0; i < complexKeys.length; i++) {
                     var isFinal = i === complexKeys.length - 1;
-                    parent_1[complexKeys[i]] = isFinal ? value : {};
-                    parent_1 = isFinal ? parent_1 : parent_1[complexKeys[i]];
+                    parent_1[complexKeys[parseInt(i.toString(), 10)]] = isFinal ? value : {};
+                    parent_1 = isFinal ? parent_1 : parent_1[complexKeys[parseInt(i.toString(), 10)]];
                 }
             }
             else {
-                newChanges[parentKey] = {};
-                parent_1 = newChanges[parentKey];
-                newChanges[parentKey][key] = value;
+                newChanges["" + parentKey] = {};
+                parent_1 = newChanges["" + parentKey];
+                newChanges["" + parentKey]["" + key] = value;
             }
             /* istanbul ignore next */
             if (this.isParentArray) {
                 var actionProperty = 'ejsAction';
-                parent_1[actionProperty] = action ? action : 'none';
+                parent_1["" + actionProperty] = action ? action : 'none';
             }
             this.controlParent.serverDataBind(newChanges);
         }

package/src/component-model.d.ts

@@ -1,4 +1,4 @@
-import { isUndefined, getValue, isNullOrUndefined, setValue, uniqueID, isBlazor } from './util';import { ModuleLoader, ModuleDeclaration } from './module-loader';import { Base } from './base';import { Observer, BoundOptions } from './observer';import { ChildProperty } from './child-property';import { Property, NotifyPropertyChanges } from './notify-property-change';import { onIntlChange, rightToLeft, defaultCulture } from './internationalization';import { createElement, addClass, removeClass, ElementProperties, select } from './dom';import {validateLicense} from './validate-lic';
+import { isUndefined, getValue, isNullOrUndefined, setValue, uniqueID, isBlazor } from './util';import { ModuleLoader, ModuleDeclaration } from './module-loader';import { Base } from './base';import { Observer, BoundOptions } from './observer';import { ChildProperty } from './child-property';import { Property, NotifyPropertyChanges } from './notify-property-change';import { onIntlChange, rightToLeft, defaultCulture } from './internationalization';import { createElement, addClass, removeClass, ElementProperties, select } from './dom';import { validateLicense, createLicenseOverlay, componentList } from './validate-lic';
 
 /**
  * Interface for a class Component

package/src/component.d.ts

@@ -173,7 +173,7 @@ export declare abstract class Component<ElementType extends HTMLElement> extends
     private detectFunction;
     private mergePersistData;
     private setPersistData;
-    protected renderReactTemplates(): void;
+    protected renderReactTemplates(callback?: any): void;
     protected clearTemplate(templateName?: string[], index?: any): void;
     private getUniqueID;
     private pageID;

package/src/component.js

@@ -25,10 +25,16 @@ import { ChildProperty } from './child-property';
 import { Property, NotifyPropertyChanges } from './notify-property-change';
 import { onIntlChange, rightToLeft, defaultCulture } from './internationalization';
 import { createElement, addClass, removeClass, select } from './dom';
-import { validateLicense } from './validate-lic';
+import { validateLicense, createLicenseOverlay, componentList } from './validate-lic';
 var componentCount = 0;
 var lastPageID;
 var lastHistoryLen = 0;
+// Decalre the static variable to count the instance
+var instancecount = 0;
+// Decalre the static variable to find if control limit exceed or not
+var isvalid = true;
+// We have added styles to inline type so here declare the static variable to detect if banner is added or not
+var isBannerAdded = false;
 export var versionBasedStatePersistence = false;
 /**
  * To enable or disable version based statePersistence functionality for all components globally.
@@ -71,8 +77,14 @@ var Component = /** @class */ (function (_super) {
         _this.localObserver = new Observer(_this);
         // tslint:disable-next-line:no-function-constructor-with-string-args
         onIntlChange.on('notifyExternalChange', _this.detectFunction, _this, _this.randomId);
-        if (typeof window !== "undefined" && typeof document !== "undefined") {
-            validateLicense();
+        // Based on the considered control list we have count the instance
+        if (typeof window !== "undefined" && typeof document !== "undefined" && !validateLicense()) {
+            if (componentList.indexOf(_this.getModuleName()) !== -1) {
+                instancecount = instancecount + 1;
+                if (instancecount > 5) {
+                    isvalid = false;
+                }
+            }
         }
         if (!isUndefined(selector)) {
             _this.appendTo();
@@ -184,6 +196,11 @@ var Component = /** @class */ (function (_super) {
             }
             this.preRender();
             this.injectModules();
+            // Checked weather cases are valid or not. If control leads to more than five counts  
+            if (!isvalid && !isBannerAdded) {
+                createLicenseOverlay();
+                isBannerAdded = true;
+            }
             this.render();
             if (!this.mount) {
                 this.trigger('created');
@@ -293,8 +310,8 @@ var Component = /** @class */ (function (_super) {
             this.prototype.injectedModules = [];
         }
         for (var i = 0; i < moduleList.length; i++) {
-            if (this.prototype.injectedModules.indexOf(moduleList[i]) === -1) {
-                this.prototype.injectedModules.push(moduleList[i]);
+            if (this.prototype.injectedModules.indexOf(moduleList[parseInt(i.toString(), 10)]) === -1) {
+                this.prototype.injectedModules.push(moduleList[parseInt(i.toString(), 10)]);
             }
         }
     };
@@ -361,9 +378,11 @@ var Component = /** @class */ (function (_super) {
             }
         }
     };
-    //tslint:disable-next-line
-    Component.prototype.renderReactTemplates = function () {
-        //No Code
+    // eslint-disable-next-line
+    Component.prototype.renderReactTemplates = function (callback) {
+        if (!isNullOrUndefined(callback)) {
+            callback();
+        }
     };
     // eslint-disable-next-line
     Component.prototype.clearTemplate = function (templateName, index) {
@@ -431,10 +450,10 @@ var Component = /** @class */ (function (_super) {
                     }).map(function (str) {
                         return str.replace(key + '.', '');
                     });
-                    newObj[key] = this_1.iterateJsonProperties(this_1.getActualProperties(value), newList);
+                    newObj["" + key] = this_1.iterateJsonProperties(this_1.getActualProperties(value), newList);
                 }
                 else {
-                    newObj[key] = value;
+                    newObj["" + key] = value;
                 }
             }
         };

package/src/dom.js

@@ -233,10 +233,10 @@ export function attributes(element, attributes) {
             if (key === 'tabindex') {
                 iKey = 'tabIndex';
             }
-            ele.attributes[iKey] = attributes[key];
+            ele.attributes["" + iKey] = attributes["" + key];
         }
         else {
-            ele.setAttribute(key, attributes[key]);
+            ele.setAttribute(key, attributes["" + key]);
         }
     }
     return ele;
@@ -284,20 +284,20 @@ function querySelectId(selector) {
     if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {
         var idList = selector.split(',');
         for (var i = 0; i < idList.length; i++) {
-            var list = idList[i].split(' ');
+            var list = idList[parseInt(i.toString(), 10)].split(' ');
             for (var j = 0; j < list.length; j++) {
-                if (list[j].indexOf('#') > -1) {
-                    if (!list[j].match(/\[.*\]/)) {
-                        var splitId = list[j].split('#');
+                if (list[parseInt(j.toString(), 10)].indexOf('#') > -1) {
+                    if (!list[parseInt(j.toString(), 10)].match(/\[.*\]/)) {
+                        var splitId = list[parseInt(j.toString(), 10)].split('#');
                         if (splitId[1].match(/^\d/) || splitId[1].match(charRegex)) {
-                            var setId = list[j].split('.');
+                            var setId = list[parseInt(j.toString(), 10)].split('.');
                             setId[0] = setId[0].replace(/#/, '[id=\'') + '\']';
-                            list[j] = setId.join('.');
+                            list[parseInt(j.toString(), 10)] = setId.join('.');
                         }
                     }
                 }
             }
-            idList[i] = list.join(' ');
+            idList[parseInt(i.toString(), 10)] = list.join(' ');
         }
         return idList.join(',');
     }
@@ -365,7 +365,7 @@ export function getAttributeOrDefault(element, property, value) {
             element.setAttribute(property, value.toString());
         }
         else {
-            element.attributes[property] = value;
+            element.attributes["" + property] = value;
         }
         attrVal = value;
     }

package/src/draggable-model.d.ts

@@ -29,7 +29,8 @@ export interface DraggableModel {
     cursorAt?: PositionModel;
 
     /**
-     * If `clone` set to true, drag operations are performed in duplicate element of the draggable element. 
+     * If `clone` set to true, drag operations are performed in duplicate element of the draggable element.
+     *
      * @default true
      */
     clone?: boolean;
@@ -46,37 +47,42 @@ export interface DraggableModel {
 
     /**
      * Defines wheather need to replace drag element by currentstateTarget.
+     *
      * @private
      */
     isReplaceDragEle?: boolean;
 
     /**
      * Defines wheather need to add prevent select class to body or not.
+     *
      * @private
      */
     isPreventSelect?: boolean;
 
     /**
      * Specifies the callback function for drag event.
-
-     * @event
+     *
+     * @event drag
      */
     drag?: Function;
 
     /**
      * Specifies the callback function for dragStart event.
-     * @event
+     *
+     * @event dragStart
      */
     dragStart?: Function;
 
     /**
      * Specifies the callback function for dragStop event.
-     * @event
+     *
+     * @event dragStop
      */
     dragStop?: Function;
 
     /**
      * Defines the minimum distance draggable element to be moved to trigger the drag operation.
+     *
      * @default 1
      */
     distance?: number;
@@ -97,38 +103,42 @@ export interface DraggableModel {
     helper?: Function;
 
     /**
-     * Defines the scope value to group sets of draggable and droppable items. 
+     * Defines the scope value to group sets of draggable and droppable items.
      * A draggable with the same scope value will be accepted by the droppable.
      */
     scope?: string;
 
     /**
      * Specifies the dragTarget by which the clone element is positioned if not given current context element will be considered.
+     *
      * @private
      */
     dragTarget?: string;
 
     /**
-     * Defines the axis to limit the draggable element drag path.The possible axis path values are   
-     * * `x` - Allows drag movement in horizontal direction only. 
+     * Defines the axis to limit the draggable element drag path.The possible axis path values are
+     * * `x` - Allows drag movement in horizontal direction only.
      * * `y` - Allows drag movement in vertical direction only.
      */
     axis?: DragDirection;
 
     /**
      * Defines the function to change the position value.
+     *
      * @private
      */
     queryPositionInfo?: Function;
 
     /**
      * Defines whether the drag clone element will be split form the cursor pointer.
+     *
      * @private
      */
     enableTailMode?: boolean;
 
     /**
      * Defines whether to skip the previous drag movement comparison.
+     *
      * @private
      */
     skipDistanceCheck?: boolean;
@@ -141,6 +151,7 @@ export interface DraggableModel {
     /**
      * Defines whether to enable autoscroll on drag movement of draggable element.
      * enableAutoScroll
+     *
      * @private
      */
     enableAutoScroll?: boolean;
@@ -148,12 +159,14 @@ export interface DraggableModel {
     /**
      * Defines whether to enable taphold  on mobile devices.
      * enableAutoScroll
+     *
      * @private
      */
     enableTapHold?: boolean;
 
     /**
      * Specifies the time delay for tap hold.
+     *
      * @default 750
      *  @private
      */