@syncfusion/ej2-base - npm Package Compare versions

Comparing version 15.4.23 to 16.1.24

CHANGELOG.md

@@ -5,2 +5,16 @@ # Changelog
 
+### New Feature
+
+- Essential JS 2 is now officially released and production ready.
+- Angular Universal support added
+- New High Contrast theme added
+- A web based tool for Custom Resource Generator is released for JavaScript (ES5) users
+
+### Breaking Changes
+
+- Tag prefix for Angular components is changed from `ej` to `ejs`. For example, `ej-grid` is changed to `ejs-grid`.
+- **Touch**: Removed `doubleTap` event and added `tapCount` argument in tap event.
+
+## 15.4.23-preview (2017-12-27)
+
 ### Common
@@ -7,0 +21,0 @@

dist/global/index.d.ts

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

index.js

@@ -7,3 +7,6 @@ define(["require", "exports", "./src/index"], function (require, exports, index_1) {
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * index
+     */
     __export(index_1);
 });

intl.js

@@ -7,3 +7,6 @@ define(["require", "exports", "./src/intl/index"], function (require, exports, index_1) {
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * intl
+     */
     __export(index_1);
 });

package.json

 {
   "name": "@syncfusion/ej2-base",
-  "version": "15.4.23",
+  "version": "16.1.24",
   "description": "Essential JS 2 Base Library",
@@ -5,0 +5,0 @@ "author": "Syncfusion Inc.",

ReadMe.md

@@ -1,2 +0,2 @@
-A common package of Essential JS 2 base libraries, methods and class definitions. It comes with full documentation and support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.  
+A common package of Essential JS 2 base libraries, methods and class definitions. It comes with the full documentation and support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.  
 
@@ -3,0 +3,0 @@ ## Resources

src/ajax.js

@@ -6,4 +6,28 @@ define(["require", "exports", "./util"], function (require, exports, util_1) {
     var defaultType = 'GET';
-    var Ajax = (function () {
+    /**
+     * Ajax class provides ability to make asynchronous HTTP request to the server
+     * ```typescript
+     *   var ajax = new Ajax("index.html", "GET", true);
+     *   ajax.send().then(
+     *               function (value) {
+     *                   console.log(value);
+     *               },
+     *               function (reason) {
+     *                   console.log(reason);
+     *               });
+     * ```
+     */
+    var Ajax = /** @class */ (function () {
+        /**
+         * Constructor for Ajax class
+         * @param  {string|Object} options?
+         * @param  {string} type?
+         * @param  {boolean} async?
+         * @returns defaultType
+         */
         function Ajax(options, type, async) {
+            /**
+             * A boolean value indicating whether the request should be sent asynchronous or not.
+             * @default true
+             */
             this.mode = true;
@@ -22,2 +46,7 @@ this.options = {};
         }
+        /**
+         * Send the request to server.
+         * @param {any} data - To send the user data
+         * @return {Promise}
+         */
         Ajax.prototype.send = function (data) {
@@ -30,2 +59,3 @@ var _this = this;
                 _this.httpRequest.open(_this.type, _this.url, _this.mode);
+                // Set default headers
                 if (!util_1.isNullOrUndefined(_this.data)) {
@@ -64,2 +94,3 @@ _this.httpRequest.setRequestHeader('Content-Type', _this.contentType || 'application/json; charset=utf-8');
                     catch (error) {
+                        // no exception handle
                     }
@@ -77,2 +108,7 @@ }
         };
+        /**
+         * To get the response header from XMLHttpRequest
+         * @param  {string} key Key to search in the response header
+         * @returns {string}
+         */
         Ajax.prototype.getResponseHeader = function (key) {
@@ -79,0 +115,0 @@ var responseHeaders;

src/animation.js

@@ -20,6 +20,20 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
-    var Animation = (function (_super) {
+    /**
+     * The Animation framework provide options to animate the html DOM elements
+     * ```typescript
+     *   let animeObject = new Animation({
+     *      name: 'SlideLeftIn',
+     *      duration: 1000
+     *   });
+     *   animeObject.animate('#anime1');
+     *   animeObject.animate('#anime2', { duration: 500 });
+     * ```
+     */
+    var Animation = /** @class */ (function (_super) {
         __extends(Animation, _super);
         function Animation(options) {
             var _this = _super.call(this, options, undefined) || this;
+            /**
+             * @private
+             */
             _this.easing = {
@@ -38,2 +52,8 @@ ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',
         Animation_1 = Animation;
+        /**
+         * Applies animation to the current element.
+         * @param {string | HTMLElement} element - Element which needs to be animated.
+         * @param {AnimationModel} options - Overriding default animation settings.
+         * @return {void}
+         */
         Animation.prototype.animate = function (element, options) {
@@ -55,2 +75,8 @@ options = !options ? {} : options;
         };
+        /**
+         * Stop the animation effect on animated element.
+         * @param {HTMLElement} element - Element which needs to be stop the animation.
+         * @param {AnimationOptions} model - Handling the animation model at stop function.
+         * @return {void}
+         */
         Animation.stop = function (element, model) {
@@ -69,2 +95,7 @@ element.style.animation = '';
         };
+        /**
+         * Set delay to animation element
+         * @param {AnimationModel} model
+         * @returns {void}
+         */
         Animation.delayAnimation = function (model) {
@@ -78,2 +109,7 @@ if (model.delay) {
         };
+        /**
+         * Triggers animation
+         * @param {AnimationModel} model
+         * @returns {void}
+         */
         Animation.applyAnimation = function (model) {
@@ -91,5 +127,9 @@ var _this = this;
                     if (timeStamp) {
+                        // let step: number = model.timeStamp = timeStamp - startTime;
+                        /** phantomjs workaround for timestamp fix */
                         prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp;
                         model.timeStamp = (timeStamp + model.timeStamp) - prevTimeStamp;
                         prevTimeStamp = timeStamp;
+                        /** phantomjs workaround end */
+                        // trigger animation begin event
                         if (!step && model.begin) {
@@ -101,2 +141,3 @@ model.begin.call(_this, model);
                         if (model.timeStamp < duration && model.timeStamp + avg < duration && model.element.getAttribute('e-animate')) {
+                            // apply animation effect to the current element                
                             model.element.style.animation = model.name + ' ' + model.duration + 'ms ' + model.timingFunction;
@@ -106,5 +147,7 @@ if (model.progress) {
                             }
+                            // repeat requestAnimationFrame 
                             requestAnimationFrame(startAnimation);
                         }
                         else {
+                            // clear requestAnimationFrame
                             cancelAnimationFrame(timerId);
@@ -121,2 +164,3 @@ model.element.removeAttribute('e-animation-id');
                         startTime = performance.now();
+                        // set initial requestAnimationFrame
                         timerId = requestAnimationFrame(startAnimation);
@@ -136,2 +180,7 @@ model.element.setAttribute('e-animation-id', timerId.toString());
         };
+        /**
+         * Returns Animation Model
+         * @param {AnimationModel} options
+         * @returns {AnimationModel}
+         */
         Animation.prototype.getModel = function (options) {
@@ -150,8 +199,20 @@ return {
         };
+        /**
+         * @private
+         */
         Animation.prototype.onPropertyChanged = function (newProp, oldProp) {
+            // no code needed
         };
+        /**
+         * Returns module name as animation
+         * @private
+         */
         Animation.prototype.getModuleName = function () {
             return 'animation';
         };
+        /**
+         * @private
+         */
         Animation.prototype.destroy = function () {
+            //Override base destroy;
         };
@@ -189,2 +250,14 @@ __decorate([
     exports.Animation = Animation;
+    /**
+     * Ripple provides material theme's wave effect when an element is clicked
+     * ```html
+     * <div id='ripple'></div>
+     * <script>
+     *   rippleEffect(document.getElementById('ripple'));
+     * </script>
+     * ```
+     * @private
+     * @param HTMLElement element - Target element
+     * @param RippleOptions rippleOptions - Ripple options .
+     */
     function rippleEffect(element, rippleOptions, done) {
@@ -221,2 +294,8 @@ var rippleModel = getRippleModel(rippleOptions);
     }
+    /**
+     * Handler for ripple event
+     * @param {MouseEvent} e
+     * @returns {void}
+     * @private
+     */
     function rippleHandler(e) {
@@ -255,8 +334,27 @@ var target = (e.target);
     }
+    /**
+     * Handler for ripple element mouse up event
+     * @param {MouseEvent} e
+     * @returns {void}
+     * @private
+     */
     function rippleUpHandler(e) {
         removeRipple(e, this);
     }
+    /**
+     * Handler for ripple element mouse move event
+     * @param {MouseEvent} e
+     * @returns {void}
+     * @private
+     */
     function rippleLeaveHandler(e) {
         removeRipple(e, this);
     }
+    /**
+     * Handler for removing ripple element
+     * @param {MouseEvent} e
+     * @param {rippleArgs} eventArgs
+     * @returns {void}
+     * @private
+     */
     function removeRipple(e, eventArgs) {
@@ -278,2 +376,3 @@ var duration = eventArgs.rippleOptions.duration;
         }
+        /* tslint:disable:align */
         setTimeout(function () {
@@ -292,2 +391,7 @@ if (rippleElement && rippleElement.parentNode) {
     exports.isRippleEnabled = false;
+    /**
+     * Animation Module provides support to enable ripple effect functionality to Essential JS 2 components.
+     * @param {boolean} isRipple Specifies the boolean value to enable or disable ripple effect.
+     * @returns {boolean}
+     */
     function enableRipple(isRipple) {
@@ -294,0 +398,0 @@ exports.isRippleEnabled = isRipple;

src/base.js

 define(["require", "exports", "./util", "./dom", "./observer"], function (require, exports, util_1, dom_1, observer_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var Base = (function () {
+    /* tslint:enable:no-any */
+    /**
+     * Base library module is common module for Framework modules like touch,keyboard and etc.,
+     * @private
+     */
+    var Base = /** @class */ (function () {
+        /**
+         * Base constructor accept options and element
+         */
         function Base(options, element) {
@@ -11,2 +19,3 @@ this.isProtectedOnChange = true;
             this.refreshing = false;
+            // tslint:disable-next-line:no-empty
             this.finalUpdate = function () { };
@@ -32,2 +41,9 @@ this.childChangedProperties = {};
         }
+        /** Property base section */
+        /**
+         * Function used to set bunch of property at a time.
+         * @private
+         * @param  {Object} prop - JSON object which holds components properties.
+         * @param  {boolean} muteOnChange? - Specifies to true when we set properties.
+         */
         Base.prototype.setProperties = function (prop, muteOnChange) {
@@ -47,2 +63,9 @@ var prevDetection = this.isProtectedOnChange;
         ;
+        /**
+         * Calls for child element data bind
+         * @param {Object} obj
+         * @param {Object} parent
+         * @returns {void}
+         */
+        // tslint:disable-next-line:no-any
         Base.callChildDataBind = function (obj, parent) {
@@ -71,2 +94,5 @@ var keys = Object.keys(obj);
         };
+        /**
+         * Bind property changes immediately to components
+         */
         Base.prototype.dataBind = function () {
@@ -95,8 +121,29 @@ Base.callChildDataBind(this.childChangedProperties, this);
         ;
+        /** Event Base Section */
+        /**
+         * Adds the handler to the given event listener.
+         * @param {string} eventName - A String that specifies the name of the event
+         * @param {Function} listener - Specifies the call to run when the event occurs.
+         * @return {void}
+         */
         Base.prototype.addEventListener = function (eventName, handler) {
             this.modelObserver.on(eventName, handler);
         };
+        /**
+         * Removes the handler from the given event listener.
+         * @param {string} eventName - A String that specifies the name of the event to remove
+         * @param {Function} listener - Specifies the function to remove
+         * @return {void}
+         */
         Base.prototype.removeEventListener = function (eventName, handler) {
             this.modelObserver.off(eventName, handler);
         };
+        /**
+         * Triggers the handlers in the specified event.
+         * @private
+         * @param {string} eventName - Specifies the event to trigger for the specified component properties.
+         * Can be a custom event, or any of the standard events.
+         * @param {Event} eventProp - Additional parameters to pass on to the event properties
+         * @return {void}
+         */
         Base.prototype.trigger = function (eventName, eventProp) {
@@ -110,3 +157,7 @@ if (this.isDestroyed !== true) {
         };
+        /**
+         * To maintain instance in base class
+         */
         Base.prototype.addInstance = function () {
+            // Add module class to the root element
             var moduleClass = 'e-' + this.getModuleName().toLowerCase();
@@ -121,2 +172,5 @@ dom_1.addClass([this.element], ['e-control', moduleClass]);
         };
+        /**
+         * To remove the instance from the element
+         */
         Base.prototype.destroy = function () {
@@ -128,2 +182,3 @@ var _this = this;
             if (this.element.ej2_instances.length === 0) {
+                // Remove module class from the root element
                 dom_1.removeClass([this.element], ['e-control']);
@@ -130,0 +185,0 @@ }

src/browser.js

@@ -22,4 +22,11 @@ define(["require", "exports", "./util"], function (require, exports, util_1) {
     };
-    window.browserDetails = window.browserDetails || {};
-    var Browser = (function () {
+    /* istanbul ignore else  */
+    if (typeof window !== 'undefined') {
+        window.browserDetails = window.browserDetails || {};
+    }
+    /**
+     * Get configuration details for Browser
+     * @private
+     */
+    var Browser = /** @class */ (function () {
         function Browser() {
@@ -52,3 +59,9 @@ }
         };
+        /**
+         * To get events from the browser
+         * @param {string} event - type of event triggered.
+         * @returns {Boolean}
+         */
         Browser.getEvent = function (event) {
+            // tslint:disable-next-line:no-any
             var events = {
@@ -69,11 +82,29 @@ start: {
         };
+        /**
+         * To get the Touch start event from browser
+         * @returns {string}
+         */
         Browser.getTouchStartEvent = function () {
             return Browser.getEvent('start');
         };
+        /**
+         * To get the Touch end event from browser
+         * @returns {string}
+         */
         Browser.getTouchEndEvent = function () {
             return Browser.getEvent('end');
         };
+        /**
+         * To get the Touch move event from browser
+         * @returns {string}
+         */
         Browser.getTouchMoveEvent = function () {
             return Browser.getEvent('move');
         };
+        /**
+         * To get the value based on provided key and regX
+         * @param {string} key
+         * @param {RegExp} regX
+         * @returns {Object}
+         */
         Browser.getValue = function (key, regX) {
@@ -90,2 +121,7 @@ var browserDetails = window.browserDetails;
             },
+            //Properties 
+            /**
+             * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.
+             * Also we can set our own userAgent.
+             */
             set: function (uA) {
@@ -99,2 +135,7 @@ Browser.uA = uA;
         Object.defineProperty(Browser, "info", {
+            //Read Only Properties
+            /**
+             * Property is to get the browser information like Name, Version and Language
+             * @returns BrowserInfo
+             */
             get: function () {
@@ -110,2 +151,5 @@ if (util_1.isUndefined(window.browserDetails.info)) {
         Object.defineProperty(Browser, "isIE", {
+            /**
+             * Property is to get whether the userAgent is based IE.
+             */
             get: function () {
@@ -118,2 +162,5 @@ return Browser.getValue('isIE', REGX_IE);
         Object.defineProperty(Browser, "isTouch", {
+            /**
+             * Property is to get whether the browser has touch support.
+             */
             get: function () {
@@ -129,2 +176,5 @@ if (util_1.isUndefined(window.browserDetails.isTouch)) {
         Object.defineProperty(Browser, "isPointer", {
+            /**
+             * Property is to get whether the browser has Pointer support.
+             */
             get: function () {
@@ -140,2 +190,5 @@ if (util_1.isUndefined(window.browserDetails.isPointer)) {
         Object.defineProperty(Browser, "isMSPointer", {
+            /**
+             * Property is to get whether the browser has MSPointer support.
+             */
             get: function () {
@@ -151,2 +204,5 @@ if (util_1.isUndefined(window.browserDetails.isMSPointer)) {
         Object.defineProperty(Browser, "isDevice", {
+            /**
+             * Property is to get whether the userAgent is device based.
+             */
             get: function () {
@@ -159,2 +215,5 @@ return Browser.getValue('isDevice', REGX_MOBILE);
         Object.defineProperty(Browser, "isIos", {
+            /**
+             * Property is to get whether the userAgent is IOS.
+             */
             get: function () {
@@ -167,2 +226,5 @@ return Browser.getValue('isIos', REGX_IOS);
         Object.defineProperty(Browser, "isIos7", {
+            /**
+             * Property is to get whether the userAgent is Ios7.
+             */
             get: function () {
@@ -175,2 +237,5 @@ return Browser.getValue('isIos7', REGX_IOS7);
         Object.defineProperty(Browser, "isAndroid", {
+            /**
+             * Property is to get whether the userAgent is Android.
+             */
             get: function () {
@@ -183,2 +248,5 @@ return Browser.getValue('isAndroid', REGX_ANDROID);
         Object.defineProperty(Browser, "isWebView", {
+            /**
+             * Property is to identify whether application ran in web view.
+             */
             get: function () {
@@ -196,2 +264,5 @@ if (util_1.isUndefined(window.browserDetails.isWebView)) {
         Object.defineProperty(Browser, "isWindows", {
+            /**
+             * Property is to get whether the userAgent is Windows.
+             */
             get: function () {
@@ -204,2 +275,5 @@ return Browser.getValue('isWindows', REGX_WINDOWS);
         Object.defineProperty(Browser, "touchStartEvent", {
+            /**
+             * Property is to get the touch start event. It returns event name based on browser.
+             */
             get: function () {
@@ -215,2 +289,5 @@ if (util_1.isUndefined(window.browserDetails.touchStartEvent)) {
         Object.defineProperty(Browser, "touchMoveEvent", {
+            /**
+             * Property is to get the touch move event. It returns event name based on browser.
+             */
             get: function () {
@@ -226,2 +303,5 @@ if (util_1.isUndefined(window.browserDetails.touchMoveEvent)) {
         Object.defineProperty(Browser, "touchEndEvent", {
+            /**
+             * Property is to get the touch end event. It returns event name based on browser.
+             */
             get: function () {
@@ -236,3 +316,4 @@ if (util_1.isUndefined(window.browserDetails.touchEndEvent)) {
         });
-        Browser.uA = navigator.userAgent;
+        /* istanbul ignore next */
+        Browser.uA = typeof navigator !== 'undefined' ? navigator.userAgent : '';
         return Browser;
@@ -239,0 +320,0 @@ }());

src/canvas-renderer.js

 define(["require", "exports", "./util"], function (require, exports, util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var CanvasRenderer = (function () {
+    /**
+     * @private
+     */
+    var CanvasRenderer = /** @class */ (function () {
+        /* End-Properties */
         function CanvasRenderer(rootID) {
             this.rootId = rootID;
         }
+        // method to get the attributes value
+        /* tslint:disable */
         CanvasRenderer.prototype.getOptionValue = function (options, key) {
             return options[key];
         };
+        /* tslint:enable */
+        /**
+         * To create a Html5 canvas element
+         * @param {BaseAttibutes} options - Options to create canvas
+         * @return {HTMLCanvasElement}
+         */
         CanvasRenderer.prototype.createCanvas = function (options) {
@@ -19,2 +31,8 @@ var canvasObj = document.createElement('canvas');
         };
+        /**
+         * To set the width and height for the Html5 canvas element
+         * @param {number} width - width of the canvas
+         * @param {number} height - height of the canvas
+         * @return {void}
+         */
         CanvasRenderer.prototype.setCanvasSize = function (width, height) {
@@ -36,2 +54,3 @@ var element = document.getElementById(this.rootId);
         };
+        // To set the values to the attributes
         CanvasRenderer.prototype.setAttributes = function (options) {
@@ -46,2 +65,7 @@ this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');
         };
+        /**
+         * To draw a line
+         * @param {LineAttributes} options - required options to draw a line on the canvas
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawLine = function (options) {
@@ -58,2 +82,7 @@ this.ctx.save();
         };
+        /**
+         * To draw a rectangle
+         * @param {RectAttributes} options - required options to draw a rectangle on the canvas
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawRectangle = function (options) {
@@ -82,2 +111,3 @@ var canvasCtx = this.ctx;
         };
+        // To draw the corner of a rectangle
         CanvasRenderer.prototype.drawCornerRadius = function (options) {
@@ -110,2 +140,8 @@ var cornerRadius = options.rx;
         };
+        /**
+         * To draw a path on the canvas
+         * @param {PathAttributes} options - options needed to draw path
+         * @param {Int32Array} canvasTranslate - Array of numbers to translate the canvas
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawPath = function (options, canvasTranslate) {
@@ -180,2 +216,8 @@ var path = options.d;
         };
+        /**
+         * To draw a text
+         * @param {TextAttributes} options - options required to draw text
+         * @param {string} label - Specifies the text which has to be drawn on the canvas
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawText = function (options, label) {
@@ -210,2 +252,7 @@ var fontWeight = this.getOptionValue(options, 'font-weight');
         };
+        /**
+         * To draw circle on the canvas
+         * @param {CircleAttributes} options - required options to draw the circle
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawCircle = function (options) {
@@ -225,2 +272,7 @@ var canvasCtx = this.ctx;
         };
+        /**
+         * To draw polyline
+         * @param {PolylineAttributes} options - options needed to draw polyline
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawPolyline = function (options) {
@@ -247,2 +299,7 @@ this.ctx.save();
         };
+        /**
+         * To draw an ellipse on the canvas
+         * @param {EllipseAttributes} options - options needed to draw ellipse
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawEllipse = function (options) {
@@ -269,2 +326,7 @@ var canvasCtx = this.ctx;
         };
+        /**
+         * To draw an image
+         * @param {ImageAttributes} options - options required to draw an image on the canvas
+         * @return {void}
+         */
         CanvasRenderer.prototype.drawImage = function (options) {
@@ -280,2 +342,7 @@ this.ctx.save();
         };
+        /**
+         * To create a linear gradient
+         * @param {string[]} colors - Specifies the colors required to create linear gradient
+         * @return {string}
+         */
         CanvasRenderer.prototype.createLinearGradient = function (colors) {
@@ -289,2 +356,7 @@ var myGradient;
         };
+        /**
+         * To create a radial gradient
+         * @param {string[]} colors - Specifies the colors required to create linear gradient
+         * @return {string}
+         */
         CanvasRenderer.prototype.createRadialGradient = function (colors) {
@@ -298,2 +370,3 @@ var myGradient;
         };
+        // To set the gradient values
         CanvasRenderer.prototype.setGradientValues = function (colors, myGradient) {
@@ -316,2 +389,8 @@ var colorName;
         };
+        /**
+         * To set the attributes to the element
+         * @param {SVGCanvasAttributes} options - Attributes to set for the element
+         * @param {HTMLElement} element - The element to which the attributes need to be set
+         * @return {HTMLElement}
+         */
         CanvasRenderer.prototype.setElementAttributes = function (options, element) {
@@ -325,2 +404,7 @@ var keys = Object.keys(options);
         };
+        /**
+         * To update the values of the canvas element attributes
+         * @param {SVGCanvasAttributes} options - Specifies the colors required to create gradient
+         * @return {void}
+         */
         CanvasRenderer.prototype.updateCanvasAttributes = function (options) {
@@ -327,0 +411,0 @@ this.setElementAttributes(options, this.canvasObj);

src/child-property.js

 define(["require", "exports", "./util", "./base"], function (require, exports, util_1, base_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var ChildProperty = (function () {
+    /**
+     * To detect the changes for inner properties.
+     * @private
+     */
+    var ChildProperty = /** @class */ (function () {
         function ChildProperty(parent, propName, defaultValue, isArray) {
@@ -10,2 +14,3 @@ this.properties = {};
             this.oldProperties = {};
+            // tslint:disable-next-line:no-empty
             this.finalUpdate = function () { };
@@ -19,2 +24,8 @@ this.callChildDataBind = util_1.getValue('callChildDataBind', base_1.Base);
         }
+        /**
+         * Updates the property changes
+         * @param {boolean} val
+         * @param {string} propName
+         * @returns {void}
+         */
         ChildProperty.prototype.updateChange = function (val, propName) {
@@ -31,2 +42,5 @@ if (val === true) {
         };
+        /**
+         * Updates time out duration
+         */
         ChildProperty.prototype.updateTimeOut = function () {
@@ -41,2 +55,5 @@ if (this.parentObj.updateTimeOut) {
         };
+        /**
+         * Clears changed properties
+         */
         ChildProperty.prototype.clearChanges = function () {
@@ -48,2 +65,8 @@ this.finalUpdate();
         };
+        /**
+         * Set property changes
+         * @param {Object} prop
+         * @param {boolean} muteOnChange
+         * {void}
+         */
         ChildProperty.prototype.setProperties = function (prop, muteOnChange) {
@@ -59,2 +82,5 @@ if (muteOnChange === true) {
         };
+        /**
+         * Binds data
+         */
         ChildProperty.prototype.dataBind = function () {
@@ -75,2 +101,9 @@ this.callChildDataBind(this.childChangedProperties, this);
         };
+        /**
+         * Saves changes to newer values
+         * @param {string} key
+         * @param {Object} newValue
+         * @param {Object} oldValue
+         * @returns {void}
+         */
         ChildProperty.prototype.saveChanges = function (key, newValue, oldValue) {
@@ -77,0 +110,0 @@ if (this.controlParent.isProtectedOnChange) {

src/component.js

@@ -20,4 +20,10 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
-    var Component = (function (_super) {
+    /**
+     * Base class for all Essential JavaScript components
+     */
+    var Component = /** @class */ (function (_super) {
         __extends(Component, _super);
+        /**
+         * Initialize the constructor for component base
+         */
         function Component(options, selector) {
@@ -34,2 +40,3 @@ var _this = _super.call(this, options, selector) || this;
             _this.localObserver = new observer_1.Observer(_this);
+            // tslint:disable-next-line:no-function-constructor-with-string-args
             _this.detectFunction = new Function('args', 'var prop = Object.keys(args); if(prop.length){this[prop[0]] = args[prop[0]];}');
@@ -46,2 +53,5 @@ internationalization_1.onIntlChange.on('notifyExternalChange', _this.detectFunction, _this);
         ;
+        /**
+         * Destroys the sub modules while destroying the widget
+         */
         Component.prototype.destroy = function () {
@@ -63,2 +73,5 @@ if (this.isDestroyed) {
         };
+        /**
+         * Applies all the pending property changes and render the component again.
+         */
         Component.prototype.refresh = function () {
@@ -75,2 +88,6 @@ this.refreshing = true;
         };
+        /**
+         * Appends the component within the given HTML element
+         * @param {string | HTMLElement} selector - Target element where component needs to be appended.
+         */
         Component.prototype.appendTo = function (selector) {
@@ -102,2 +119,5 @@ if (!util_1.isNullOrUndefined(selector) && typeof (selector) === 'string') {
         };
+        /**
+         * When invoked, applies the pending property changes immediately to the component.
+         */
         Component.prototype.dataBind = function () {
@@ -108,2 +128,11 @@ this.injectModules();
         ;
+        /**
+         * Attach one or more  event handler to the current component context.
+         * It is used for internal handling event internally within the component only.
+         * @param {BoundOptions[]| string} event - It is  optional type either to  Set the collection of event list or the eventName.
+         * @param {Function} handler - optional parameter Specifies the handler to run when the event occurs
+         * @param {Object} context - optional parameter Specifies the context to be bind in the handler.
+         * @return {void}
+         * @private
+         */
         Component.prototype.on = function (event, handler, context) {
@@ -120,2 +149,9 @@ if (typeof event === 'string') {
         };
+        /**
+         * To remove one or more event handler that has been attached with the on() method.
+         * @param {BoundOptions[]| string} event - It is  optional type either to  Set the collection of event list or the eventName.
+         * @param {Function} handler - optional parameter Specifies the function to run when the event occurs
+         * @return {void}
+         * @private
+         */
         Component.prototype.off = function (event, handler) {
@@ -132,2 +168,9 @@ if (typeof event === 'string') {
         };
+        /**
+         * To notify the handlers in the specified event.
+         * @param {string} property - Specifies the event to be notify.
+         * @param {Object} argument - Additional parameters to pass while calling the handler.
+         * @return {void}
+         * @private
+         */
         Component.prototype.notify = function (property, argument) {
@@ -138,2 +181,6 @@ if (this.isDestroyed !== true) {
         };
+        /**
+         * Get injected modules
+         * @private
+         */
         Component.prototype.getInjectedModules = function () {
@@ -143,2 +190,5 @@ return this.injectedModules;
         ;
+        /**
+         * Dynamically injects the required modules to the component.
+         */
         Component.Inject = function () {
@@ -173,2 +223,3 @@ var moduleList = [];
         Component.prototype.clearTemplate = function (templateName) {
+            //No Code
         };
@@ -205,2 +256,3 @@ Component.prototype.addOnPersist = function (options) {
                 if (ignoreList.indexOf(key) === -1) {
+                    // tslint:disable-next-line:no-any
                     var value = obj[key];
@@ -207,0 +259,0 @@ if (typeof value === 'object' && !(value instanceof Array)) {

src/dom.js

 define(["require", "exports", "./event-handler", "./util"], function (require, exports, event_handler_1, util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Function to create Html element.
+     * @param tagName - Name of the tag, id and class names.
+     * @param properties - Object to set properties in the element.
+     * @param properties.id - To set the id to the created element.
+     * @param properties.className - To add classes to the element.
+     * @param properties.innerHTML - To set the innerHTML to element.
+     * @param properties.styles - To set the some custom styles to element.
+     * @param properties.attrs - To set the attributes to element.
+     * @private
+     */
     function createElement(tagName, properties) {
@@ -25,2 +36,8 @@ var element = document.createElement(tagName);
     exports.createElement = createElement;
+    /**
+     * The function used to add the classes to array of elements
+     * @param  {Element[]|NodeList} elements - An array of elements that need to add a list of classes
+     * @param  {string|string[]} classes - String or array of string that need to add an individual element as a class
+     * @private
+     */
     function addClass(elements, classes) {
@@ -40,2 +57,8 @@ var classList = getClassList(classes);
     exports.addClass = addClass;
+    /**
+     * The function used to add the classes to array of elements
+     * @param  {Element[]|NodeList} elements - An array of elements that need to remove a list of classes
+     * @param  {string|string[]} classes - String or array of string that need to add an individual element as a class
+     * @private
+     */
     function removeClass(elements, classes) {
@@ -65,2 +88,7 @@ var classList = getClassList(classes);
     }
+    /**
+     * The function used to check element is visible or not.
+     * @param  {Element|Node} element - An element the need to check visibility
+     * @private
+     */
     function isVisible(element) {
@@ -71,2 +99,8 @@ var ele = element;
     exports.isVisible = isVisible;
+    /**
+     * The function used to insert an array of elements into a first of the element.
+     * @param  {Element[]|NodeList} fromElements - An array of elements that need to prepend.
+     * @param  {Element} toElement - An element that is going to prepend.
+     * @private
+     */
     function prepend(fromElements, toElement) {
@@ -82,2 +116,8 @@ var docFrag = document.createDocumentFragment();
     exports.prepend = prepend;
+    /**
+     * The function used to insert an array of elements into last of the element.
+     * @param  {Element[]|NodeList} fromElements - An array of elements that need to append.
+     * @param  {Element} toElement - An element that is going to prepend.
+     * @private
+     */
     function append(fromElements, toElement) {
@@ -93,2 +133,7 @@ var docFrag = document.createDocumentFragment();
     exports.append = append;
+    /**
+     * The function used to remove the element from the
+     * @param  {Element|Node|HTMLElement} element - An element that is going to detach from the Dom
+     * @private
+     */
     function detach(element) {
@@ -99,2 +144,7 @@ var parentNode = element.parentNode;
     exports.detach = detach;
+    /**
+     * The function used to remove the element from Dom also clear the bounded events
+     * @param  {Element|Node|HTMLElement} element - An element remove from the Dom
+     * @private
+     */
     function remove(element) {
@@ -106,2 +156,8 @@ var parentNode = element.parentNode;
     exports.remove = remove;
+    /**
+     * The function helps to set multiple attributes to an element
+     * @param  {Element|Node} element - An element that need to set attributes.
+     * @param  {{[key:string]:string}} attributes - JSON Object that is going to as attributes.
+     * @private
+     */
     function attributes(element, attributes) {
@@ -117,2 +173,8 @@ var keys = Object.keys(attributes);
     exports.attributes = attributes;
+    /**
+     * The function selects the element from giving context.
+     * @param  {string} selector - Selector string need fetch element from the
+     * @param  {Document|Element=document} context - It is an optional type, That specifies a Dom context.
+     * @private
+     */
     function select(selector, context) {
@@ -123,2 +185,8 @@ if (context === void 0) { context = document; }
     exports.select = select;
+    /**
+     * The function selects an array of element from the given context.
+     * @param  {string} selector - Selector string need fetch element from the
+     * @param  {Document|Element=document} context - It is an optional type, That specifies a Dom context.
+     * @private
+     */
     function selectAll(selector, context) {
@@ -130,2 +198,8 @@ if (context === void 0) { context = document; }
     exports.selectAll = selectAll;
+    /**
+     * Returns single closest parent element based on class selector.
+     * @param  {Element} element - An element that need to find the closest element.
+     * @param  {string} selector - A classSelector of closest element.
+     * @private
+     */
     function closest(element, selector) {
@@ -145,2 +219,7 @@ var el = element;
     exports.closest = closest;
+    /**
+     * Returns all sibling elements of the given element.
+     * @param  {Element|Node} element - An element that need to get siblings.
+     * @private
+     */
     function siblings(element) {
@@ -158,2 +237,9 @@ var siblings = [];
     exports.siblings = siblings;
+    /**
+     * set the value if not exist. Otherwise set the existing value
+     * @param  {HTMLElement} element - An element to which we need to set value.
+     * @param  {string} property - Property need to get or set.
+     * @param  {string} value - value need to set.
+     * @private
+     */
     function getAttributeOrDefault(element, property, value) {
@@ -168,5 +254,13 @@ var attrVal = element.getAttribute(property);
     exports.getAttributeOrDefault = getAttributeOrDefault;
+    /**
+     * Set the style attributes to Html element.
+     * @param {HTMLElement} element - Element which we want to set attributes
+     * @param {any} attrs - Set the given attributes to element
+     * @return {void}
+     * @private
+     */
     function setStyleAttribute(element, attrs) {
         if (attrs !== undefined) {
             Object.keys(attrs).forEach(function (key) {
+                // tslint:disable-next-line:no-any
                 element.style[key] = attrs[key];
@@ -177,2 +271,10 @@ });
     exports.setStyleAttribute = setStyleAttribute;
+    /**
+     * Method for add and remove classes to a dom element.
+     * @param {Element} element - Element for add and remove classes
+     * @param {string[]} addClasses - List of classes need to be add to the element
+     * @param {string[]} removeClasses - List of classes need to be remove from the element
+     * @return {void}
+     * @private
+     */
     function classList(element, addClasses, removeClasses) {
@@ -183,2 +285,9 @@ addClass([element], addClasses);
     exports.classList = classList;
+    /**
+     * Method to check whether the element matches the given selector.
+     * @param {Element} element - Element to compare with the selector.
+     * @param {string} selector - String selector which element will satisfy.
+     * @return {void}
+     * @private
+     */
     function matches(element, selector) {
@@ -185,0 +294,0 @@ var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;

src/draggable.js

@@ -24,3 +24,6 @@ var __extends = (this && this.__extends) || (function () {
     var axisValueMapper = ['left', 'top'];
-    var Position = (function (_super) {
+    /**
+     * Specifies the position coordinates
+     */
+    var Position = /** @class */ (function (_super) {
         __extends(Position, _super);
@@ -39,3 +42,19 @@ function Position() {
     exports.Position = Position;
-    var Draggable = (function (_super) {
+    /**
+     * Draggable Module provides support to enable draggable functionality in Dom Elements.
+     * ```html
+     * <div id='drag'>Draggable</div>
+     * <script>
+     * var ele = document.getElementById('drag');
+     * var drag:Draggable = new Draggable(ele,{
+     *     clone:false,
+     *     drag: function(e) {
+     *      //drag handler code.
+     *      },
+     *     handle:'.class'
+     * });
+     * </script>
+     * ```
+     */
+    var Draggable = /** @class */ (function (_super) {
         __extends(Draggable, _super);
@@ -213,2 +232,3 @@ function Draggable(element, options) {
                 eleObj.instance.intOver(evt, eleObj.target);
+                /* tslint:disable no-any */
                 eleObj.instance.dragData[this.scope] = this.droppables[this.scope];
@@ -312,3 +332,5 @@ this.hoverObject = eleObj;
         };
+        // triggers when property changed
         Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {
+            //No Code to handle
         };
@@ -315,0 +337,0 @@ Draggable.prototype.getModuleName = function () {

src/droppable.js

@@ -20,3 +20,18 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
-    var Droppable = (function (_super) {
+    /**
+     * Droppable Module provides support to enable droppable functionality in Dom Elements.
+     * ```html
+     * <div id='drop'>Droppable</div>
+     * <script>
+     * let ele:HTMLElement = document.getElementById('drop');
+     * var drag:Droppable = new Droppable(ele,{
+     *     accept:'.drop',
+     *     drop: function(e) {
+     *      //drop handler code.
+     *     }
+     * });
+     * </script>
+     * ```
+     */
+    var Droppable = /** @class */ (function (_super) {
         __extends(Droppable, _super);
@@ -37,3 +52,5 @@ function Droppable(element, options) {
         };
+        // triggers when property changed
         Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {
+            //No Code to handle
         };
@@ -40,0 +57,0 @@ Droppable.prototype.getModuleName = function () {

src/event-handler.js

 define(["require", "exports", "./util"], function (require, exports, util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var EventHandler = (function () {
+    /**
+     * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element
+     * @private
+     * ```html
+     * <div id="Eventdiv">  </div>
+     * <script>
+     *   let node: HTMLElement = document.querySelector("#Eventdiv");
+     *   EventHandler.addEventListener(node, "click", function(){
+     *       // click handler function code
+     *   });
+     *   EventHandler.addEventListener(node, "onmouseover", function(){
+     *       // mouseover handler function code
+     *   });
+     *   EventHandler.removeEventListener(node, "click", function(){
+     *       // click handler function code
+     *   });
+     *   eventObj.clearEvents();
+     * </script>
+     * ```
+     */
+    var EventHandler = /** @class */ (function () {
         function EventHandler() {
         }
+        // to get the event data based on element
         EventHandler.addOrGetEventData = function (element) {
@@ -16,2 +37,11 @@ if ('__eventList' in element) {
         };
+        /**
+         * Add an event to the specified DOM element.
+         * @param {any} element - Target HTML DOM element
+         * @param {string} eventName - A string that specifies the name of the event
+         * @param {Function} listener - Specifies the function to run when the event occurs
+         * @param {Object} bindTo - A object that binds 'this' variable in the event handler
+         * @param {number} debounce - Specifies at what interval given event listener should be triggered.
+         * @return {Function}
+         */
         EventHandler.add = function (element, eventName, listener, bindTo, intDebounce) {
@@ -40,2 +70,9 @@ var eventData = EventHandler.addOrGetEventData(element);
         };
+        /**
+         * Remove an event listener that has been attached before.
+         * @param {any} element - Specifies the target html element to remove the event
+         * @param {string} eventName - A string that specifies the name of the event to remove
+         * @param {Function} listener - Specifies the function to remove
+         * @return {void}
+         */
         EventHandler.remove = function (element, eventName, listener) {
@@ -64,2 +101,7 @@ var eventData = EventHandler.addOrGetEventData(element);
         };
+        /**
+         * Clear all the event listeners that has been previously attached to the element.
+         * @param {any} element - Specifies the target html element to clear the events
+         * @return {void}
+         */
         EventHandler.clearEvents = function (element) {
@@ -75,2 +117,10 @@ var eventData;
         };
+        /**
+         * Trigger particular event of the element.
+         * @param {any} element - Specifies the target html element to trigger the events
+         * @param {string} eventName - Specifies the event to trigger for the specified element.
+         * Can be a custom event, or any of the standard events.
+         * @param {any} eventProp - Additional parameters to pass on to the event properties
+         * @return {void}
+         */
         EventHandler.trigger = function (element, eventName, eventProp) {
@@ -77,0 +127,0 @@ var eventData = EventHandler.addOrGetEventData(element);

src/index.js

@@ -7,2 +7,5 @@ define(["require", "exports", "./ajax", "./animation", "./base", "./browser", "./canvas-renderer", "./component", "./child-property", "./draggable", "./droppable", "./event-handler", "./internationalization", "./keyboard", "./l10n", "./module-loader", "./notify-property-change", "./svg-renderer", "./touch", "./template-engine", "./util", "./dom"], function (require, exports, ajax_1, animation_1, base_1, browser_1, canvas_renderer_1, component_1, child_property_1, draggable_1, droppable_1, event_handler_1, internationalization_1, keyboard_1, l10n_1, module_loader_1, notify_property_change_1, svg_renderer_1, touch_1, template_engine_1, util_1, dom_1) {
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Base modules
+     */
     __export(ajax_1);
@@ -9,0 +12,0 @@ __export(animation_1);

src/internationalization.js

 define(["require", "exports", "./intl/date-formatter", "./intl/number-formatter", "./intl/date-parser", "./intl/number-parser", "./intl/intl-base", "./util", "./observer"], function (require, exports, date_formatter_1, number_formatter_1, date_parser_1, number_parser_1, intl_base_1, util_1, observer_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Specifies the observer used for external change detection.
+     */
     exports.onIntlChange = new observer_1.Observer();
+    /**
+     * Specifies the default rtl status for EJ2 components.
+     */
     exports.rightToLeft = false;
+    /**
+     * Specifies the CLDR data loaded for internationalization functionalities.
+     * @private
+     */
     exports.cldrData = {};
+    /**
+     * Specifies the default culture value to be considered.
+     * @private
+     */
     exports.defaultCulture = 'en-US';
+    /**
+     * Specifies default currency code to be considered
+     * @private
+     */
     exports.defaultCurrencyCode = 'USD';
     var mapper = ['numericObject', 'dateObject'];
-    var Internationalization = (function () {
+    /**
+     * Internationalization class provides support to parse and format the number and date object to the desired format.
+     * ```typescript
+     * // To set the culture globally
+     * setCulture('en-GB');
+     *
+     * // To set currency code globally
+     * setCurrencyCode('EUR');
+     *
+     * //Load cldr data
+     * loadCldr(gregorainData);
+     * loadCldr(timeZoneData);
+     * loadCldr(numbersData);
+     * loadCldr(numberSystemData);
+     *
+     * // To use formatter in component side
+     * let Intl:Internationalization = new Internationalization();
+     *
+     * // Date formatting
+     * let dateFormatter: Function = Intl.getDateFormat({skeleton:'long',type:'dateTime'});
+     * dateFormatter(new Date('11/2/2016'));
+     * dateFormatter(new Date('25/2/2030'));
+     * Intl.formatDate(new Date(),{skeleton:'E'});
+     *
+     * //Number formatting
+     * let numberFormatter: Function = Intl.getNumberFormat({skeleton:'C5'})
+     * numberFormatter(24563334);
+     * Intl.formatNumber(123123,{skeleton:'p2'});
+     *
+     * // Date parser
+     * let dateParser: Function = Intl.getDateParser({skeleton:'short',type:'time'});
+     * dateParser('10:30 PM');
+     * Intl.parseDate('10',{skeleton:'H'});
+     * ```
+     */
+    var Internationalization = /** @class */ (function () {
         function Internationalization(cultureName) {
@@ -16,5 +69,15 @@ if (cultureName) {
         }
+        /**
+         * Returns the format function for given options.
+         * @param {DateFormatOptions} options - Specifies the format options in which the format function will return.
+         * @returns {Function}
+         */
         Internationalization.prototype.getDateFormat = function (options) {
             return date_formatter_1.DateFormat.dateFormat(this.getCulture(), options || { type: 'date', skeleton: 'short' }, exports.cldrData);
         };
+        /**
+         * Returns the format function for given options.
+         * @param {NumberFormatOptions} options - Specifies the format options in which the format function will return.
+         * @returns {Function}
+         */
         Internationalization.prototype.getNumberFormat = function (options) {
@@ -26,23 +89,71 @@ if (options && !options.currency) {
         };
+        /**
+         * Returns the parser function for given options.
+         * @param {DateFormatOptions} options - Specifies the format options in which the parser function will return.
+         * @returns {Function}
+         * @private
+         */
         Internationalization.prototype.getDateParser = function (options) {
             return date_parser_1.DateParser.dateParser(this.getCulture(), options || { skeleton: 'short', type: 'date' }, exports.cldrData);
         };
+        /**
+         * Returns the parser function for given options.
+         * @param {NumberFormatOptions} options - Specifies the format options in which the parser function will return.
+         * @returns {Function}
+         */
         Internationalization.prototype.getNumberParser = function (options) {
             return number_parser_1.NumberParser.numberParser(this.getCulture(), options || { format: 'N' }, exports.cldrData);
         };
+        /**
+         * Returns the formatted string based on format options.
+         * @param {Number} value - Specifies the number to format.
+         * @param {NumberFormatOptions} option - Specifies the format options in which the number will be formatted.
+         * @returns {string}
+         */
         Internationalization.prototype.formatNumber = function (value, option) {
             return this.getNumberFormat(option)(value);
         };
+        /**
+         * Returns the formatted date string based on format options.
+         * @param {Number} value - Specifies the number to format.
+         * @param {DateFormatOptions} option - Specifies the format options in which the number will be formatted.
+         * @returns {string}
+         */
         Internationalization.prototype.formatDate = function (value, option) {
             return this.getDateFormat(option)(value);
         };
+        /**
+         * Returns the date object for given date string and options.
+         * @param {string} value - Specifies the string to parse.
+         * @param {DateFormatOptions} option - Specifies the parse options in which the date string will be parsed.
+         * @returns {Date}
+         */
         Internationalization.prototype.parseDate = function (value, option) {
             return this.getDateParser(option)(value);
         };
+        /**
+         * Returns the number object from the given string value and options.
+         * @param {string} value - Specifies the string to parse.
+         * @param {NumberFormatOptions} option - Specifies the parse options in which the  string number  will be parsed.
+         * @returns {number}
+         */
         Internationalization.prototype.parseNumber = function (value, option) {
             return this.getNumberParser(option)(value);
         };
+        /**
+         * Returns Native Date Time Pattern
+         * @param {DateFormatOptions} option - Specifies the parse options for resultant date time pattern.
+         * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.
+         * @returns {string}
+         * @private
+         */
         Internationalization.prototype.getDatePattern = function (option, isExcelFormat) {
             return intl_base_1.IntlBase.getActualDateTimeFormat(this.getCulture(), option, exports.cldrData, isExcelFormat);
         };
+        /**
+         * Returns Native Number Pattern
+         * @param {NumberFormatOptions} option - Specifies the parse options for resultant number pattern.
+         * @returns {string}
+         * @private
+         */
         Internationalization.prototype.getNumberPattern = function (option) {
@@ -57,2 +168,6 @@ return intl_base_1.IntlBase.getActualNumberFormat(this.getCulture(), option, exports.cldrData);
     exports.Internationalization = Internationalization;
+    /**
+     * Set the default culture to all EJ2 components
+     * @param {string} cultureName - Specifies the culture name to be set as default culture.
+     */
     function setCulture(cultureName) {
@@ -63,2 +178,7 @@ exports.defaultCulture = cultureName;
     exports.setCulture = setCulture;
+    /**
+     * Set the default currency code to all EJ2 components
+     * @param {string} currencyCode Specifies the culture name to be set as default culture.
+     * @returns {void}
+     */
     function setCurrencyCode(currencyCode) {
@@ -69,2 +189,7 @@ exports.defaultCurrencyCode = currencyCode;
     exports.setCurrencyCode = setCurrencyCode;
+    /**
+     * Load the CLDR data into context
+     * @param {Object[]} obj Specifies the CLDR data's to be used for formatting and parser.
+     * @returns {void}
+     */
     function loadCldr() {
@@ -81,2 +206,7 @@ var data = [];
     exports.loadCldr = loadCldr;
+    /**
+     * To enable or disable RTL functionality for all components globally.
+     * @param {boolean} status - Optional argument Specifies the status value to enable or disable rtl option.
+     * @returns {void}
+     */
     function enableRtl(status) {
@@ -88,3 +218,10 @@ if (status === void 0) { status = true; }
     exports.enableRtl = enableRtl;
+    /**
+     * To get the numeric CLDR object for given culture
+     * @param {string} locale - Specifies the locale for which numericObject to be returned.
+     * @ignore
+     * @private
+     */
     function getNumericObject(locale, type) {
+        /* tslint:disable no-any */
         var numObject = intl_base_1.IntlBase.getDependables(exports.cldrData, locale, true)[mapper[0]];
@@ -98,2 +235,7 @@ var dateObject = intl_base_1.IntlBase.getDependables(exports.cldrData, locale)[mapper[1]];
     exports.getNumericObject = getNumericObject;
+    /**
+     * To get the default date CLDR object.
+     * @ignore
+     * @private
+     */
     function getDefaultDateObject() {
@@ -100,0 +242,0 @@ return intl_base_1.IntlBase.getDependables(exports.cldrData, '', false)[mapper[1]];

src/intl/date-formatter.js

@@ -32,5 +32,16 @@ define(["require", "exports", "./parser-base", "./intl-base", "../util"], function (require, exports, parser_base_1, intl_base_1, util_1) {
     var timeSeparator = 'timeSeparator';
-    var DateFormat = (function () {
+    /**
+     * Date Format is a framework provides support for date formatting.
+     * @private
+     */
+    var DateFormat = /** @class */ (function () {
         function DateFormat() {
         }
+        /**
+         * Returns the formatter function for given skeleton.
+         * @param {string} -  Specifies the culture name to be which formatting.
+         * @param {DateFormatOptions} - Specific the format in which date  will format.
+         * @param {cldr} - Specifies the global cldr data collection.
+         * @return Function.
+         */
         DateFormat.dateFormat = function (culture, option, cldr) {
@@ -56,2 +67,3 @@ var _this = this;
                     }
+                    /* tslint:disable no-any */
                     var charKey = exports.datePartMatcher[char];
@@ -87,2 +99,7 @@ switch (char) {
         };
+        /**
+         * Returns formatted date string based on options passed.
+         * @param {Date} value
+         * @param {FormatOptions} options
+         */
         DateFormat.intDateFormatter = function (value, options) {
@@ -162,2 +179,3 @@ var pattern = options.pattern;
                         ret += options.numMapper.numberSymbols[timeSeparator];
+                        /* tslint:enable no-any */
                         break;
@@ -180,2 +198,5 @@ case '/':
         };
+        /**
+         * Returns two digit numbers for given value and length
+         */
         DateFormat.checkTwodigitNumber = function (val, len) {
@@ -188,2 +209,8 @@ var ret = val + '';
         };
+        /**
+         * Returns the value of the Time Zone.
+         * @param {number} tVal
+         * @param {string} pattern
+         * @private
+         */
         DateFormat.getTimeZoneValue = function (tVal, pattern) {
@@ -190,0 +217,0 @@ var _this = this;

src/intl/date-parser.js

@@ -19,5 +19,18 @@ define(["require", "exports", "./intl-base", "./parser-base", "../util", "./date-formatter"], function (require, exports, intl_base_1, parser_base_1, util_1, date_formatter_1) {
     var month = 'months';
-    var DateParser = (function () {
+    /* tslint:disable no-any */
+    /**
+     * Date Parser.
+     * @private
+     */
+    var DateParser = /** @class */ (function () {
         function DateParser() {
         }
+        /**
+         * Returns the parser function for given skeleton.
+         * @param {string} -  Specifies the culture name to be which formatting.
+         * @param {DateFormatOptions} - Specific the format in which string date  will be parsed.
+         * @param {cldr} - Specifies the global cldr data collection.
+         *  @return Function.
+         */
+        // tslint:disable-next-line:max-func-body-length
         DateParser.dateParser = function (culture, option, cldr) {
@@ -57,2 +70,3 @@ var _this = this;
                         case 'c':
+                            // tslint:disable-next-line
                             var weekObject = parser_base_1.ParserBase.reverseObject(dependable.dateObject[intl_base_1.IntlBase.days][standalone][intl_base_1.IntlBase.monthIndex[len]]);
@@ -70,3 +84,5 @@ regexString += '(' + Object.keys(weekObject).join('|') + ')';
                             if ((char === 'M' || char === 'L') && len > 2) {
+                                // tslint:disable-next-line
                                 parseOptions[charKey] = parser_base_1.ParserBase.reverseObject(dependable.dateObject[month][standalone][intl_base_1.IntlBase.monthIndex[len]]);
+                                /* tslint:disable no-any */
                                 regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';
@@ -137,2 +153,8 @@ }
         };
+        /**
+         * Returns date object for provided date options
+         * @param {DateParts} options
+         * @param {Date} value
+         * @returns {Date}
+         */
         DateParser.getDateObject = function (options, value) {
@@ -196,2 +218,9 @@ var res = value || new Date();
         };
+        /**
+         * Returns date parsing options for provided value along with parse and numeric options
+         * @param {string} value
+         * @param {ParseOptions} parseOptions
+         * @param {NumericOptions} num
+         * @returns {DateParts}
+         */
         DateParser.internalDateParse = function (value, parseOptions, num) {
@@ -241,2 +270,8 @@ var matches = value.match(parseOptions.parserRegex);
         };
+        /**
+         * Returns parsed number for provided Numeric string and Numeric Options
+         * @param {string} value
+         * @param {NumericOptions} option
+         * @returns {number}
+         */
         DateParser.internalNumberParser = function (value, option) {
@@ -249,2 +284,9 @@ value = parser_base_1.ParserBase.convertValueParts(value, option.numberParseRegex, option.numericPair);
         };
+        /**
+         * Returns parsed time zone RegExp for provided hour format and time zone
+         * @param {string} hourFormat
+         * @param {base.TimeZoneOptions} tZone
+         * @param {string} nRegex
+         * @returns {string}
+         */
         DateParser.parseTimeZoneRegx = function (hourFormat, tZone, nRegex) {
@@ -269,2 +311,10 @@ var pattern = tZone.gmtFormat;
         };
+        /**
+         * Returns zone based value.
+         * @param {boolean} flag
+         * @param {string} val1
+         * @param {string} val2
+         * @param {NumericOptions} num
+         * @returns {number}
+         */
         DateParser.getZoneValue = function (flag, val1, val2, num) {
@@ -271,0 +321,0 @@ var value = this.internalNumberParser(flag ? val1 : val2, num);

src/intl/index.js

@@ -7,2 +7,5 @@ define(["require", "exports", "./date-formatter", "./number-formatter", "./intl-base", "./date-parser", "./number-parser"], function (require, exports, date_formatter_1, number_formatter_1, intl_base_1, date_parser_1, number_parser_1) {
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Internationalization
+     */
     __export(date_formatter_1);
@@ -9,0 +12,0 @@ __export(number_formatter_1);

src/intl/intl-base.js

 define(["require", "exports", "../util", "./parser-base", "./date-formatter", "./number-formatter"], function (require, exports, util_1, parser_base_1, date_formatter_1, number_formatter_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Date base common constants and function for date parser and formatter.
+     */
     var IntlBase;
     (function (IntlBase) {
+        // tslint:disable-next-line:max-line-length
         IntlBase.negativeDataRegex = /^(('[^']+'|''|[^*#@0,.E])*)(\*.)?((([#,]*[0,]*0+)(\.0*[0-9]*#*)?)|([#,]*@+#*))(E\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;
@@ -36,2 +40,3 @@ IntlBase.customRegex = /^(('[^']+'|''|[^*#@0,.])*)(\*.)?((([0#,]*[0,]*[0#]*)(\.[0#]*)?)|([#,]*@+#*))(E\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;
         IntlBase.basicPatterns = ['short', 'medium', 'long', 'full'];
+        /* tslint:disable:quotemark */
         IntlBase.defaultObject = {
@@ -265,2 +270,3 @@ 'dates': {
         };
+        /* tslint:enable:quotemark */
         IntlBase.monthIndex = {
@@ -272,4 +278,10 @@ 3: 'abbreviated',
         };
+        /**
+         *
+         */
         IntlBase.month = 'months';
         IntlBase.days = 'days';
+        /**
+         * Default numerber Object
+         */
         IntlBase.patternMatcher = {
@@ -281,2 +293,10 @@ C: 'currency',
         };
+        /**
+         * Returns the resultant pattern based on the skeleton, dateObject and the type provided
+         * @private
+         * @param {string} skeleton
+         * @param {Object} dateObject
+         * @param {string} type
+         * @returns {string}
+         */
         function getResultantPattern(skeleton, dateObject, type) {
@@ -299,2 +319,10 @@ var resPattern;
         IntlBase.getResultantPattern = getResultantPattern;
+        /**
+         * Returns the dependable object for provided cldr data and culture
+         * @private
+         * @param {Object} cldr
+         * @param {string} culture
+         * @param {boolean} isNumber
+         * @returns {Dependables}
+         */
         function getDependables(cldr, culture, isNumber) {
@@ -312,2 +340,11 @@ var ret = {};
         IntlBase.getDependables = getDependables;
+        /**
+         * Returns the symbol pattern for provided parameters
+         * @private
+         * @param {string} type
+         * @param {string} numSystem
+         * @param {Object} obj
+         * @param {boolean} isAccount
+         * @returns {string}
+         */
         function getSymbolPattern(type, numSystem, obj, isAccount) {
@@ -319,2 +356,8 @@ return util_1.getValue(type + 'Formats-numberSystem-' +
         IntlBase.getSymbolPattern = getSymbolPattern;
+        /**
+         * Returns proper numeric skeleton
+         * @private
+         * @param {string} skeleton
+         * @returns {NumericSkeleton}
+         */
         function getProperNumericSkeleton(skeleton) {
@@ -325,2 +368,3 @@ var matches = skeleton.match(IntlBase.formatRegex);
             ret.isAccount = (pattern === 'A');
+            /* tslint:disable no-any */
             ret.type = IntlBase.patternMatcher[pattern];
@@ -333,2 +377,11 @@ if (skeleton.length > 1) {
         IntlBase.getProperNumericSkeleton = getProperNumericSkeleton;
+        /**
+         * Returns format data for number formatting like minimum fraction, maximum fraction, etc..,
+         * @private
+         * @param {string} pattern
+         * @param {boolean} needFraction
+         * @param {string} cSymbol
+         * @param {boolean} fractionOnly
+         * @returns {NegativeData}
+         */
         function getFormatData(pattern, needFraction, cSymbol, fractionOnly) {
@@ -358,2 +411,9 @@ var nData = fractionOnly ? {} : { nlead: '', nend: '' };
         IntlBase.getFormatData = getFormatData;
+        /**
+         * Changes currency symbol
+         * @private
+         * @param {string} val
+         * @param {string} sym
+         * @returns {string}
+         */
         function changeCurrencySymbol(val, sym) {
@@ -365,2 +425,9 @@ if (val) {
         }
+        /**
+         * Returns currency symbol based on currency code
+         * @private
+         * @param {Object} numericObject
+         * @param {string} currencyCode
+         * @returns {string}
+         */
         function getCurrencySymbol(numericObject, currencyCode) {
@@ -370,2 +437,10 @@ return util_1.getValue('currencies.' + currencyCode + '.symbol', numericObject) || '$';
         IntlBase.getCurrencySymbol = getCurrencySymbol;
+        /**
+         * Returns formatting options for custom number format
+         * @private
+         * @param {string} format
+         * @param {CommonOptions} dOptions
+         * @param {Dependables} obj
+         * @returns {GenericFormatOptions}
+         */
         function customFormat(format, dOptions, obj) {
@@ -385,2 +460,10 @@ var options = {};
         IntlBase.customFormat = customFormat;
+        /**
+         * Returns custom formatting options
+         * @private
+         * @param {string} format
+         * @param {CommonOptions} dOptions
+         * @param {Object} numObject
+         * @returns {NegativeData}
+         */
         function customNumberFormat(format, dOptions, numObject) {
@@ -431,2 +514,10 @@ var cOptions = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 };
         }
+        /**
+         * Returns formatting options for currency or percent type
+         * @private
+         * @param {string[]} parts
+         * @param {string} actual
+         * @param {string} symbol
+         * @returns {NegativeData}
+         */
         function isCurrencyPercent(parts, actual, symbol) {
@@ -447,2 +538,8 @@ var options = { nlead: parts[0], nend: parts[1] };
         IntlBase.isCurrencyPercent = isCurrencyPercent;
+        /**
+         * Returns culture based date separator
+         * @private
+         * @param {Object} dateObj
+         * @returns {string}
+         */
         function getDateSeparator(dateObj) {
@@ -453,2 +550,10 @@ var value = (util_1.getValue('dateFormats.short', dateObj) || '').match(/[d‏M‏]([^d‏M])[d‏M‏]/i);
         IntlBase.getDateSeparator = getDateSeparator;
+        /**
+         * Returns Native Date Time pattern
+         * @private
+         * @param {string} culture
+         * @param {DateFormatOptions} options
+         * @param {Object} cldr
+         * @returns {string}
+         */
         function getActualDateTimeFormat(culture, options, cldr, isExcelFormat) {
@@ -485,2 +590,10 @@ var dependable = getDependables(cldr, culture);
         IntlBase.getActualDateTimeFormat = getActualDateTimeFormat;
+        /**
+         * Returns Native Number pattern
+         * @private
+         * @param {string} culture
+         * @param {NumberFormatOptions} options
+         * @param {Object} cldr
+         * @returns {string}
+         */
         function getActualNumberFormat(culture, options, cldr) {
@@ -487,0 +600,0 @@ var dependable = getDependables(cldr, culture, true);

src/intl/number-formatter.js

@@ -17,5 +17,16 @@ define(["require", "exports", "../util", "../internationalization", "./intl-base", "./parser-base"], function (require, exports, util_1, internationalization_1, intl_base_1, parser_base_1) {
     var nan = 'nan';
-    var NumberFormat = (function () {
+    /**
+     * Module for number formatting.
+     * @private
+     */
+    var NumberFormat = /** @class */ (function () {
         function NumberFormat() {
         }
+        /**
+         * Returns the formatter function for given skeleton.
+         * @param {string} culture -  Specifies the culture name to be which formatting.
+         * @param {NumberFormatOptions} option - Specific the format in which number  will format.
+         * @param {Object} object- Specifies the global cldr data collection.
+         * @return Function.
+         */
         NumberFormat.numberFormatter = function (culture, option, cldr) {
@@ -30,2 +41,3 @@ var _this = this;
             dOptions.currencySymbol = intl_base_1.IntlBase.getCurrencySymbol(dependable.numericObject, fOptions.currency || internationalization_1.defaultCurrencyCode);
+            /* tslint:disable no-any */
             dOptions.percentSymbol = dOptions.numberMapper.numberSymbols[percentSign];
@@ -88,2 +100,7 @@ dOptions.minusSymbol = dOptions.numberMapper.numberSymbols[minusSign];
         };
+        /**
+         * Returns grouping details for the pattern provided
+         * @param {string} pattern
+         * @returns {GroupDetails}
+         */
         NumberFormat.getGroupingDetails = function (pattern) {
@@ -106,2 +123,10 @@ var ret = {};
         };
+        /**
+         * Returns if the provided integer range is valid.
+         * @param {number} val1
+         * @param {number} val2
+         * @param {boolean} checkbothExist
+         * @param {boolean} isFraction
+         * @returns {boolean}
+         */
         NumberFormat.checkValueRange = function (val1, val2, checkbothExist, isFraction) {
@@ -133,2 +158,9 @@ var decide = isFraction ? 'f' : 's';
         };
+        /**
+         * Check if the provided fraction range is valid
+         * @param {number} val
+         * @param {string} text
+         * @param {boolean} isFraction
+         * @returns {void}
+         */
         NumberFormat.checkRange = function (val, text, isFraction) {
@@ -140,2 +172,9 @@ var range = isFraction ? [0, 20] : [1, 21];
         };
+        /**
+         * Returns formatted numeric string for provided formatting options
+         * @param {number} value
+         * @param {base.GenericFormatOptions} fOptions
+         * @param {CommonOptions} dOptions
+         * @returns {string}
+         */
         NumberFormat.intNumberFormatter = function (value, fOptions, dOptions) {
@@ -173,2 +212,9 @@ var curData;
         };
+        /**
+         * Returns significant digits processed numeric string
+         * @param {number} value
+         * @param {number} min
+         * @param {number} max
+         * @returns {string}
+         */
         NumberFormat.processSignificantDigits = function (value, min, max) {
@@ -187,2 +233,11 @@ var temp = value + '';
         };
+        /**
+         * Returns grouped numeric string
+         * @param {string} val
+         * @param {number} level1
+         * @param {string} sep
+         * @param {string} decimalSymbol
+         * @param {number} level2
+         * @returns {string}
+         */
         NumberFormat.groupNumbers = function (val, level1, sep, decimalSymbol, level2) {
@@ -206,2 +261,9 @@ var flag = !util_1.isNullOrUndefined(level2) && level2 !== 0;
         };
+        /**
+         * Returns fraction processed numeric string
+         * @param {number} value
+         * @param {number} min
+         * @param {number} max
+         * @returns {string}
+         */
         NumberFormat.processFraction = function (value, min, max) {
@@ -229,2 +291,8 @@ var temp = (value + '').split('.')[1];
         };
+        /**
+         * Returns integer processed numeric string
+         * @param {string} value
+         * @param {number} min
+         * @returns {string}
+         */
         NumberFormat.processMinimumIntegers = function (value, min) {
@@ -231,0 +299,0 @@ var temp = value.split('.');

src/intl/number-parser.js

@@ -9,5 +9,16 @@ define(["require", "exports", "../util", "./parser-base", "./intl-base"], function (require, exports, util_1, parser_base_1, intl_base_1) {
     var keys = ['minusSign', 'infinity'];
-    var NumberParser = (function () {
+    /**
+     * Module for Number Parser.
+     * @private
+     */
+    var NumberParser = /** @class */ (function () {
         function NumberParser() {
         }
+        /**
+         * Returns the parser function for given skeleton.
+         * @param {string} -  Specifies the culture name to be which formatting.
+         * @param {NumberFormatOptions} - Specific the format in which number  will parsed.
+         * @param {cldr} - Specifies the global cldr data collection.
+         * @return Function.
+         */
         NumberParser.numberParser = function (culture, option, cldr) {
@@ -27,2 +38,3 @@ var _this = this;
             parseOptions.symbolRegex = parser_base_1.ParserBase.getSymbolRegex(Object.keys(numOptions.symbolMatch));
+            // tslint:disable-next-line:no-any
             parseOptions.infinity = numOptions.symbolNumberSystem[keys[1]];
@@ -40,2 +52,9 @@ var symbolpattern = intl_base_1.IntlBase.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount);
         };
+        /**
+         * Returns parsed number for the provided formatting options
+         * @param {string} value
+         * @param {NumericParts} options
+         * @param {NumericOptions} numOptions
+         * @returns {number}
+         */
         NumberParser.getParsedNumber = function (value, options, numOptions) {
@@ -42,0 +61,0 @@ var isNegative;

src/intl/parser-base.js

@@ -0,1 +1,4 @@
+/**
+ * Parser
+ */
 define(["require", "exports", "../util"], function (require, exports, util_1) {
@@ -22,11 +25,32 @@ "use strict";
     var latnNumberSystem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-    var ParserBase = (function () {
+    /**
+     * Interface for parser base
+     * @private
+     */
+    var ParserBase = /** @class */ (function () {
         function ParserBase() {
         }
+        /**
+         * Returns the cldr object for the culture specifies
+         * @param {Object} obj - Specifies the object from which culture object to be acquired.
+         * @param {string} cName - Specifies the culture name.
+         * @returns {Object}
+         */
         ParserBase.getMainObject = function (obj, cName) {
             return util_1.getValue('main.' + cName, obj);
         };
+        /**
+         * Returns the numbering system object from given cldr data.
+         * @param {Object} obj - Specifies the object from which number system is acquired.
+         * @returns {Object}
+         */
         ParserBase.getNumberingSystem = function (obj) {
             return util_1.getValue('supplemental.numberingSystems', obj) || this.numberingSystems;
         };
+        /**
+         * Returns the reverse of given object keys or keys specified.
+         * @param {Object} prop - Specifies the object to be reversed.
+         * @param {number[]} keys - Optional parameter specifies the custom keyList for reversal.
+         * @returns {Object}
+         */
         ParserBase.reverseObject = function (prop, keys) {
@@ -37,2 +61,3 @@ var propKeys = keys || Object.keys(prop);
                 var key = propKeys_1[_i];
+                /* tslint:disable no-any */
                 if (!res.hasOwnProperty(prop[key])) {
@@ -44,2 +69,7 @@ res[prop[key]] = key;
         };
+        /**
+         * Returns the symbol regex by skipping the escape sequence.
+         * @param {string[]} props - Specifies the array values to be skipped.
+         * @returns {RegExp}
+         */
         ParserBase.getSymbolRegex = function (props) {
@@ -60,2 +90,7 @@ var regexStr = props.map(function (str) {
         };
+        /**
+         * Returns regex string for provided value
+         * @param {string} val
+         * @returns {string}
+         */
         ParserBase.constructRegex = function (val) {
@@ -74,2 +109,9 @@ var len = val.length;
         };
+        /**
+         * Returns the replaced value of matching regex and obj mapper.
+         * @param {string} value - Specifies the  values to be replaced.
+         * @param {RegExp} regex - Specifies the  regex to search.
+         * @param {Object} obj - Specifies the  object matcher to be replace value parts.
+         * @returns {string}
+         */
         ParserBase.convertValueParts = function (value, regex, obj) {
@@ -80,2 +122,7 @@ return value.replace(regex, function (str) {
         };
+        /**
+         * Returns default numbering system object for formatting from cldr data
+         * @param {Object} obj
+         * @returns {NumericObject}
+         */
         ParserBase.getDefaultNumberingSystem = function (obj) {
@@ -87,2 +134,5 @@ var ret = {};
         };
+        /**
+         * Returns the replaced value of matching regex and obj mapper.
+         */
         ParserBase.getCurrentNumericOptions = function (curObj, numberSystem, needSymbols) {
@@ -107,2 +157,9 @@ var ret = {};
         };
+        /**
+         * Returns number mapper object for the provided cldr data
+         * @param {Object} curObj
+         * @param {Object} numberSystem
+         * @param {boolean} isNumber
+         * @returns {NumberMapper}
+         */
         ParserBase.getNumberMapper = function (curObj, numberSystem, isNumber) {
@@ -109,0 +166,0 @@ var ret = { mapper: {} };

src/keyboard.js

@@ -65,6 +65,30 @@ var __extends = (this && this.__extends) || (function () {
     };
-    var KeyboardEvents = (function (_super) {
+    /**
+     * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.
+     * ```html
+     * <div id='testEle'>  </div>;
+     * <script>
+     *   let node: HTMLElement = document.querySelector('#testEle');
+     *   let kbInstance = new KeyboardEvents({
+     *       element: node,
+     *       keyConfigs:{ selectAll : 'ctrl+a' },
+     *       keyAction: function (e:KeyboardEvent, action:string) {
+     *           // handler function code
+     *       }
+     *   });
+     * </script>
+     * ```
+     */
+    var KeyboardEvents = /** @class */ (function (_super) {
         __extends(KeyboardEvents, _super);
+        /**
+         * Initializes the KeyboardEvents
+         * @param {HTMLElement} element
+         * @param {KeyboardEventsModel} options
+         */
         function KeyboardEvents(element, options) {
             var _this = _super.call(this, options, element) || this;
+            /**
+             * To handle a key press event returns null
+             */
             _this.keyPressHandler = function (e) {
@@ -96,2 +120,6 @@ var isAltKey = e.altKey;
         KeyboardEvents_1 = KeyboardEvents;
+        /**
+         * Unwire bound events and destroy the instance.
+         * @return {void}
+         */
         KeyboardEvents.prototype.destroy = function () {
@@ -101,3 +129,11 @@ this.unwireEvents();
         };
+        /**
+         * Function can be used to specify certain action if a property is changed
+         * @param newProp
+         * @param oldProp
+         * @returns {void}
+         * @private
+         */
         KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {
+            // No code are needed
         };
@@ -108,11 +144,26 @@ ;
         };
+        /**
+         * To get the module name, returns 'keyboard'.
+         * @private
+         */
         KeyboardEvents.prototype.getModuleName = function () {
             return 'keyboard';
         };
+        /**
+         * Wiring event handlers to events
+         */
         KeyboardEvents.prototype.wireEvents = function () {
             this.element.addEventListener(this.eventName, this.keyPressHandler);
         };
+        /**
+         * Unwiring event handlers to events
+         */
         KeyboardEvents.prototype.unwireEvents = function () {
             this.element.removeEventListener(this.eventName, this.keyPressHandler);
         };
+        /**
+         * To get the key configuration data
+         * @param {string} config - configuration data
+         * returns {KeyData}
+         */
         KeyboardEvents.getKeyConfigData = function (config) {
@@ -138,2 +189,3 @@ if (config in this.configCache) {
         };
+        // Return the keycode value as string 
         KeyboardEvents.getKeyCode = function (keyVal) {
@@ -140,0 +192,0 @@ return keyCode[keyVal] || keyVal.toUpperCase().charCodeAt(0);

src/l10n.js

 define(["require", "exports", "./util", "./internationalization"], function (require, exports, util_1, internationalization_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var L10n = (function () {
+    /**
+     * L10n modules provides localized text for different culture.
+     * ```typescript
+     * import {setCulture} from '@syncfusion/ts-base-library';
+     * //load global locale object common for all components.
+     * L10n.load({
+     *    'fr-BE': {
+     *       'button': {
+     *            'check': 'vérifié'
+     *        }
+     *    }
+     * });
+     * //set globale default locale culture.
+     * setCulture('fr-BE');
+     * let instance: L10n = new L10n('button', {
+     *    check: 'checked'
+     * });
+     * //Get locale text for current property.
+     * instance.getConstant('check');
+     * //Change locale culture in a component.
+     * instance.setLocale('en-US');
+     * ```
+     */
+    var L10n = /** @class */ (function () {
+        /**
+         * Constructor
+         */
         function L10n(controlName, localeStrings, locale) {
@@ -10,2 +36,7 @@ this.controlName = controlName;
         }
+        /**
+         * Sets the locale text
+         * @param {string} locale
+         * @returns {void}
+         */
         L10n.prototype.setLocale = function (locale) {
@@ -15,8 +46,24 @@ var intLocale = this.intGetControlConstant(L10n.locale, locale);
         };
+        /**
+         * Sets the global locale for all components.
+         * @param {Object} localeObject - specifies the localeObject to be set as global locale.
+         */
         L10n.load = function (localeObject) {
             this.locale = util_1.extend(this.locale, localeObject, {}, true);
         };
+        /**
+         * Returns current locale text for the property based on the culture name and control name.
+         * @param {string} propertyName - specifies the property for which localize text to be returned.
+         * @return string
+         */
         L10n.prototype.getConstant = function (prop) {
+            /* tslint:disable no-any */
             return this.currentLocale[prop] || this.localeStrings[prop] || '';
         };
+        /**
+         * Returns the control constant object for current object and the locale specified.
+         * @param {Object} curObject
+         * @param {string} locale
+         * @returns {Object}
+         */
         L10n.prototype.intGetControlConstant = function (curObject, locale) {
@@ -23,0 +70,0 @@ if (curObject[locale]) {

src/module-loader.js

@@ -5,3 +5,3 @@ define(["require", "exports", "./util"], function (require, exports, util_1) {
     var MODULE_SUFFIX = 'Module';
-    var ModuleLoader = (function () {
+    var ModuleLoader = /** @class */ (function () {
         function ModuleLoader(parent) {
@@ -12,2 +12,8 @@ this.loadedModules = [];
         ;
+        /**
+         * Inject required modules in component library
+         * @return {void}
+         * @param {ModuleDeclaration[]} requiredModules - Array of modules to be required
+         * @param {Function[]} moduleList - Array of modules to be injected from sample side
+         */
         ModuleLoader.prototype.inject = function (requiredModules, moduleList) {
@@ -43,2 +49,6 @@ var reqLength = requiredModules.length;
         };
+        /**
+         * To remove the created object while destroying the control
+         * @return {void}
+         */
         ModuleLoader.prototype.clean = function () {
@@ -53,2 +63,7 @@ for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {
         };
+        /**
+         * Removes all unused modules
+         * @param {ModuleDeclaration[]} moduleList
+         * @returns {void}
+         */
         ModuleLoader.prototype.clearUnusedModule = function (moduleList) {
@@ -69,5 +84,15 @@ var _this = this;
         };
+        /**
+         * To get the name of the member.
+         * @param {string} name
+         * @returns {string}
+         */
         ModuleLoader.prototype.getMemberName = function (name) {
             return name[0].toLowerCase() + name.substring(1) + MODULE_SUFFIX;
         };
+        /**
+         * Returns boolean based on whether the module specified is loaded or not
+         * @param {string} modName
+         * @returns {boolean}
+         */
         ModuleLoader.prototype.isModuleLoaded = function (modName) {
@@ -74,0 +99,0 @@ for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {

src/notify-property-change.js

 define(["require", "exports", "./util"], function (require, exports, util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Returns the Class Object
+     * @param {ClassObject} instance - instance of ClassObject
+     * @param {string} curKey - key of the current instance
+     * @param {Object} defaultValue - default Value
+     * @param {Object[]} type
+     */
     function getObject(instance, curKey, defaultValue, type) {
@@ -10,2 +17,11 @@ if (!instance.properties.hasOwnProperty(curKey)) {
     }
+    /**
+     * Returns object array
+     * @param {ClassObject} instance
+     * @param {string} curKey
+     * @param {Object[]} defaultValue
+     * @param type
+     * @param {boolean} isSetter
+     * @returns {Object[]}
+     */
     function getObjectArray(instance, curKey, defaultValue, type, isSetter, isFactory) {
@@ -30,2 +46,7 @@ var result = [];
     }
+    /**
+     * Returns the properties of the object
+     * @param {Object} defaultValue
+     * @param {string} curKey
+     */
     function propertyGetter(defaultValue, curKey) {
@@ -39,2 +60,7 @@ return function () {
     }
+    /**
+     * Set the properties for the object
+     * @param {Object} defaultValue
+     * @param {string} curKey
+     */
     function propertySetter(defaultValue, curKey) {
@@ -49,2 +75,5 @@ return function (newValue) {
     }
+    /**
+     * Returns complex objects
+     */
     function complexGetter(defaultValue, curKey, type) {
@@ -55,2 +84,5 @@ return function () {
     }
+    /**
+     * Sets complex objects
+     */
     function complexSetter(defaultValue, curKey, type) {
@@ -108,2 +140,11 @@ return function (newValue) {
     }
+    /**
+     * Method used to create property. General syntax below.
+     * @param  {T} defaultValue? - Specifies the default value of property.
+     * ```
+     * @Property('TypeScript')
+     * propertyName: Type;
+     * ```
+     * @private
+     */
     function Property(defaultValue) {
@@ -117,2 +158,3 @@ return function (target, key) {
             };
+            //new property creation
             Object.defineProperty(target, key, propertyDescriptor);
@@ -123,2 +165,12 @@ addPropertyCollection(target, key, 'prop', defaultValue);
     exports.Property = Property;
+    /**
+     * Method used to create complex property. General syntax below.
+     * @param  {T} defaultValue - Specifies the default value of property.
+     * @param  {Function} type - Specifies the class type of complex object.
+     * ```
+     * @Complex<Type>({},Type)
+     * propertyName: Type;
+     * ```
+     * @private
+     */
     function Complex(defaultValue, type) {
@@ -132,2 +184,3 @@ return function (target, key) {
             };
+            //new property creation
             Object.defineProperty(target, key, propertyDescriptor);
@@ -138,2 +191,12 @@ addPropertyCollection(target, key, 'complexProp', defaultValue, type);
     exports.Complex = Complex;
+    /**
+     * Method used to create complex Factory property. General syntax below.
+     * @param  {Function} defaultType - Specifies the default value of property.
+     * @param  {Function} type - Specifies the class factory type of complex object.
+     * ```
+     * @ComplexFactory(defaultType, factoryFunction)
+     * propertyName: Type1 | Type2;
+     * ```
+     * @private
+     */
     function ComplexFactory(type) {
@@ -147,2 +210,3 @@ return function (target, key) {
             };
+            //new property creation
             Object.defineProperty(target, key, propertyDescriptor);
@@ -153,2 +217,12 @@ addPropertyCollection(target, key, 'complexProp', {}, type);
     exports.ComplexFactory = ComplexFactory;
+    /**
+     * Method used to create complex array property. General syntax below.
+     * @param  {T[]} defaultValue - Specifies the default value of property.
+     * @param  {Function} type - Specifies the class type of complex object.
+     * ```
+     * @Collection([], Type);
+     * propertyName: Type;
+     * ```
+     * @private
+     */
     function Collection(defaultValue, type) {
@@ -162,2 +236,3 @@ return function (target, key) {
             };
+            //new property creation
             Object.defineProperty(target, key, propertyDescriptor);
@@ -168,2 +243,12 @@ addPropertyCollection(target, key, 'colProp', defaultValue, type);
     exports.Collection = Collection;
+    /**
+     * Method used to create complex factory array property. General syntax below.
+     * @param  {T[]} defaultType - Specifies the default type of property.
+     * @param  {Function} type - Specifies the class type of complex object.
+     * ```
+     * @Collection([], Type);
+     * propertyName: Type;
+     * ```
+     * @private
+     */
     function CollectionFactory(type) {
@@ -177,2 +262,3 @@ return function (target, key) {
             };
+            //new property creation
             Object.defineProperty(target, key, propertyDescriptor);
@@ -183,2 +269,11 @@ addPropertyCollection(target, key, 'colProp', {}, type);
     exports.CollectionFactory = CollectionFactory;
+    /**
+     * Method used to create event property. General syntax below.
+     * @param  {Function} defaultValue? - Specifies the default value of property.
+     * @param  {boolean} isComplex? - Specifies the whether it is complex object.
+     * ```
+     * @Event(()=>{return true;})
+     * ```
+     * @private
+     */
     function Event() {
@@ -207,5 +302,31 @@ return function (target, key) {
     exports.Event = Event;
+    /**
+     * NotifyPropertyChanges is triggers the call back when the property has been changed.
+     *
+     * ```
+     *  @NotifyPropertyChanges
+     * class DemoClass implements INotifyPropertyChanged {
+     *
+     *     @Property()
+     *     property1: string;
+     *
+     *     dataBind: () => void;
+     *
+     *     constructor() { }
+     *
+     *     onPropertyChanged(newProp: any, oldProp: any) {
+     *         // Called when property changed
+     *     }
+     * }
+     * ```
+     * @private
+     */
     function NotifyPropertyChanges(classConstructor) {
+        /** Need to code */
     }
     exports.NotifyPropertyChanges = NotifyPropertyChanges;
+    /**
+     * Method  used to create the builderObject for the target component.
+     * @private
+     */
     function addPropertyCollection(target, key, propertyType, defaultValue, type) {
@@ -224,2 +345,3 @@ if (util_1.isUndefined(target.propList)) {
         }
+        /* tslint:disable no-any */
         target.propList[propertyType + 's'].push({
@@ -231,3 +353,9 @@ propertyName: key,
         target.propList[propertyType + 'Names'].push(key);
+        /* tslint:enable no-any */
     }
+    /**
+     * Returns an object containing the builder properties
+     * @param {Function} component
+     * @private
+     */
     function getBuilderProperties(component) {
@@ -279,2 +407,7 @@ if (util_1.isUndefined(component.prototype.builderObject)) {
     }
+    /**
+     * Method used to create builder for the components
+     * @param {any} component -specifies the target component for which builder to be created.
+     * @private
+     */
     function CreateBuilder(component) {
@@ -299,2 +432,8 @@ var builderFunction = function (element) {
     exports.CreateBuilder = CreateBuilder;
+    /**
+     * Returns parent options for the object
+     * @param {Object} context
+     * @param {string} prefix
+     * @private
+     */
     function getParentContext(context, prefix) {
@@ -301,0 +440,0 @@ if (context.hasOwnProperty('parentObj') === false) {

src/observer.js

 define(["require", "exports", "./util"], function (require, exports, util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var Observer = (function () {
+    var Observer = /** @class */ (function () {
         function Observer(context) {
@@ -13,2 +13,9 @@ this.boundedEvents = {};
         ;
+        /**
+         * To attach handler for given property in current context.
+         * @param {string} property - specifies the name of the event.
+         * @param {Function} handler - Specifies the handler function to be called while event notified.
+         * @param {Object} context - Specifies the context binded to the handler.
+         * @return {void}
+         */
         Observer.prototype.on = function (property, handler, context) {
@@ -27,2 +34,8 @@ if (util_1.isNullOrUndefined(handler)) {
         };
+        /**
+         * To remove handlers from a event attached using on() function.
+         * @param {string} eventName - specifies the name of the event.
+         * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.
+         * @return {void}
+         */
         Observer.prototype.off = function (property, handler) {
@@ -45,2 +58,8 @@ if (this.notExist(property)) {
         };
+        /**
+         * To notify the handlers in the specified event.
+         * @param {string} property - Specifies the event to be notify.
+         *  @param {Object} args - Additional parameters to pass while calling the handler.
+         * @return {void}
+         */
         Observer.prototype.notify = function (property, argument) {
@@ -59,8 +78,17 @@ if (this.notExist(property)) {
         };
+        /**
+         * To destroy handlers in the event
+         */
         Observer.prototype.destroy = function () {
             this.boundedEvents = this.context = undefined;
         };
+        /**
+         * Returns if the property exists.
+         */
         Observer.prototype.notExist = function (prop) {
             return this.boundedEvents.hasOwnProperty(prop) === false;
         };
+        /**
+         * Returns if the handler is present.
+         */
         Observer.prototype.isHandlerPresent = function (boundedEvents, handler) {
@@ -67,0 +95,0 @@ for (var _i = 0, boundedEvents_1 = boundedEvents; _i < boundedEvents_1.length; _i++) {

src/svg-renderer.js

 define(["require", "exports", "./util"], function (require, exports, util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var SvgRenderer = (function () {
+    var SvgRenderer = /** @class */ (function () {
+        /* End-Properties */
         function SvgRenderer(rootID) {
+            //Internal Variables 
             this.svgLink = 'http://www.w3.org/2000/svg';
             this.rootId = rootID;
         }
+        // method to get the attributes value
+        /* tslint:disable */
         SvgRenderer.prototype.getOptionValue = function (options, key) {
             return options[key];
-        };
+        }; /* tslint:enable */
+        /**
+         * To create a Html5 SVG element
+         * @param {SVGAttributes} options - Options to create SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.createSvg = function (options) {
@@ -24,2 +33,3 @@ if (util_1.isNullOrUndefined(options.id)) {
         };
+        // method to set the height and width for the SVG element
         SvgRenderer.prototype.setSVGSize = function (width, height) {
@@ -41,2 +51,7 @@ var element = document.getElementById(this.rootId);
         };
+        /**
+         * To draw a path
+         * @param {PathAttributes} options - Options to draw a path in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawPath = function (options) {
@@ -50,2 +65,7 @@ var path = document.getElementById(options.id);
         };
+        /**
+         * To draw a line
+         * @param {LineAttributes} options - Options to draw a line in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawLine = function (options) {
@@ -59,2 +79,7 @@ var line = document.getElementById(options.id);
         };
+        /**
+         * To draw a rectangle
+         * @param {BaseAttibutes} options - Required options to draw a rectangle in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawRectangle = function (options) {
@@ -68,2 +93,7 @@ var rectangle = document.getElementById(options.id);
         };
+        /**
+         * To draw a circle
+         * @param {CircleAttributes} options - Required options to draw a circle in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawCircle = function (options) {
@@ -77,2 +107,7 @@ var circle = document.getElementById(options.id);
         };
+        /**
+         * To draw a polyline
+         * @param {PolylineAttributes} options - Options required to draw a polyline
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawPolyline = function (options) {
@@ -86,2 +121,7 @@ var polyline = document.getElementById(options.id);
         };
+        /**
+         * To draw an ellipse
+         * @param {EllipseAttributes} options - Options required to draw an ellipse
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawEllipse = function (options) {
@@ -95,2 +135,7 @@ var ellipse = document.getElementById(options.id);
         };
+        /**
+         * To draw a polygon
+         * @param {PolylineAttributes} options - Options needed to draw a polygon in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawPolygon = function (options) {
@@ -104,2 +149,7 @@ var polygon = document.getElementById(options.id);
         };
+        /**
+         * To draw an image
+         * @param {ImageAttributes} options - Required options to draw an image in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawImage = function (options) {
@@ -122,2 +172,7 @@ var img = document.createElementNS(this.svgLink, 'image');
         };
+        /**
+         * To draw a text
+         * @param {TextAttributes} options - Options needed to draw a text in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.createText = function (options, label) {
@@ -131,2 +186,8 @@ var text = document.createElementNS(this.svgLink, 'text');
         };
+        /**
+         * To create a tSpan
+         * @param {TextAttributes} options - Options to create tSpan
+         * @param {string} label - The text content which is to be rendered in the tSpan
+         * @return {Element}
+         */
         SvgRenderer.prototype.createTSpan = function (options, label) {
@@ -140,2 +201,7 @@ var tSpan = document.createElementNS(this.svgLink, 'tspan');
         };
+        /**
+         * To create a title
+         * @param {string} text - The text content which is to be rendered in the title
+         * @return {Element}
+         */
         SvgRenderer.prototype.createTitle = function (text) {
@@ -146,2 +212,6 @@ var title = document.createElementNS(this.svgLink, 'title');
         };
+        /**
+         * To create defs element in SVG
+         * @return {Element}
+         */
         SvgRenderer.prototype.createDefs = function () {
@@ -151,2 +221,7 @@ var defs = document.createElementNS(this.svgLink, 'defs');
         };
+        /**
+         * To create clip path in SVG
+         * @param {BaseAttibutes} options - Options needed to create clip path
+         * @return {Element}
+         */
         SvgRenderer.prototype.createClipPath = function (options) {
@@ -157,2 +232,7 @@ var clipPath = document.createElementNS(this.svgLink, 'clipPath');
         };
+        /**
+         * To create foreign object in SVG
+         * @param {BaseAttibutes} options - Options needed to create foreign object
+         * @return {Element}
+         */
         SvgRenderer.prototype.createForeignObject = function (options) {
@@ -163,2 +243,7 @@ var foreignObject = document.createElementNS(this.svgLink, 'foreignObject');
         };
+        /**
+         * To create group element in SVG
+         * @param {BaseAttibutes} options - Options needed to create group
+         * @return {Element}
+         */
         SvgRenderer.prototype.createGroup = function (options) {
@@ -169,2 +254,8 @@ var group = document.createElementNS(this.svgLink, 'g');
         };
+        /**
+         * To create pattern in SVG
+         * @param {PatternAttributes} options - Required options to create pattern in SVG
+         * @param {string} type - Specifies the name of the pattern
+         * @return {Element}
+         */
         SvgRenderer.prototype.createPattern = function (options, element) {
@@ -175,2 +266,10 @@ var pattern = document.createElementNS(this.svgLink, element);
         };
+        /**
+         * To create radial gradient in SVG
+         * @param {string[]} colors - Specifies the colors required to create radial gradient
+         * @param {string[]} colorStop - Specifies the colorstop required to create radial gradient
+         * @param {string} name - Specifies the name of the gradient
+         * @param {RadialGradient} options - value for radial gradient
+         * @return {string}
+         */
         SvgRenderer.prototype.createRadialGradient = function (colors, name, options) {
@@ -195,2 +294,10 @@ var colorName;
         };
+        /**
+         * To create linear gradient in SVG
+         * @param {string[]} colors - Array of string specifies the values for color
+         * @param {string[]} colors - Array of string specifies the values for colorStop
+         * @param {string} name - Specifies the name of the gradient
+         * @param {LinearGradient} options - Specifies the options for gradient
+         * @return {string}
+         */
         SvgRenderer.prototype.createLinearGradient = function (colors, name, options) {
@@ -214,2 +321,10 @@ var colorName;
         };
+        /**
+         * To render the gradient element in SVG
+         * @param {string} gradientType - Specifies the type of the gradient
+         * @param {RadialGradient | LinearGradient} options - Options required to render a gradient
+         * @param {string[]} colors - Array of string specifies the values for color
+         * @param {string[]} colorStop - Array of string specifies the values for colorStop
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawGradient = function (gradientType, options, colors) {
@@ -229,2 +344,7 @@ var defs = this.createDefs();
         };
+        /**
+         * To render a clip path
+         * @param {BaseAttibutes} options - Options required to render a clip path
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawClipPath = function (options) {
@@ -238,2 +358,7 @@ var defs = this.createDefs();
         };
+        /**
+         * To create circular clip path in SVG
+         * @param {CircleAttributes} options - Options required to create circular clip path
+         * @return {Element}
+         */
         SvgRenderer.prototype.drawCircularClipPath = function (options) {
@@ -247,2 +372,8 @@ var defs = this.createDefs();
         };
+        /**
+         * To set the attributes to the element
+         * @param {SVGCanvasAttributes} options - Attributes to set for the element
+         * @param {Element} element - The element to which the attributes need to be set
+         * @return {Element}
+         */
         SvgRenderer.prototype.setElementAttributes = function (options, element) {
@@ -249,0 +380,0 @@ var keys = Object.keys(options);

src/template-engine.js

@@ -5,4 +5,12 @@ define(["require", "exports", "./template", "./dom"], function (require, exports, template_1, dom_1) {
     var HAS_ROW = /^[\n\r.]+\<tr|^\<tr/;
+    /**
+     * Compile the template string into template function.
+     * @param  {string} templateString - The template string which is going to convert.
+     * @param  {Object} helper? - Helper functions as an object.
+     * @private
+     */
+    //tslint:disable-next-line
     function compile(templateString, helper) {
         var compiler = engineObj.compile(templateString, helper);
+        //tslint:disable-next-line
         return function (data, component, propName) {
@@ -20,2 +28,7 @@ var result = compiler(data, component, propName);
     exports.compile = compile;
+    /**
+     * Set your custom template engine for template rendering.
+     * @param  {ITemplateEngine} classObj - Class object for custom template.
+     * @private
+     */
     function setTemplateEngine(classObj) {
@@ -25,2 +38,7 @@ engineObj.compile = classObj.compile;
     exports.setTemplateEngine = setTemplateEngine;
+    /**
+     * Get current template engine for template rendering.
+     * @param  {ITemplateEngine} classObj - Class object for custom template.
+     * @private
+     */
     function getTemplateEngine() {
@@ -30,3 +48,4 @@ return engineObj.compile;
     exports.getTemplateEngine = getTemplateEngine;
-    var Engine = (function () {
+    //Default Engine Class
+    var Engine = /** @class */ (function () {
         function Engine() {
@@ -33,0 +52,0 @@ }

src/template.js

@@ -0,1 +1,4 @@
+/**
+ * Template Engine
+ */
 define(["require", "exports"], function (require, exports) {
@@ -15,2 +18,8 @@ "use strict";
     var exp = new RegExp('\\${([^}]*)}', 'g');
+    // let cachedTemplate: Object = {};
+    /**
+     * The function to set regular expression for template expression string.
+     * @param  {RegExp} value - Value expression.
+     * @private
+     */
     function expression(value) {
@@ -23,2 +32,24 @@ if (value) {
     exports.expression = expression;
+    // /**
+    //  * To render the template string from the given data.
+    //  * @param  {string} template - String Template.
+    //  * @param  {Object[]|JSON} data - DataSource for the template.
+    //  * @param  {Object} helper? - custom helper object.
+    //  */
+    // export function template(template: string, data: JSON, helper?: Object): string {
+    //     let hash: string = hashCode(template);
+    //     let tmpl: Function;
+    //     if (!cachedTemplate[hash]) {
+    //         tmpl = cachedTemplate[hash] = compile(template, helper);
+    //     } else {
+    //         tmpl = cachedTemplate[hash];
+    //     }
+    //     return tmpl(data);
+    // }
+    /**
+     * Compile the template string into template function.
+     * @param  {string} template - The template string which is going to convert.
+     * @param  {Object} helper? - Helper functions as an object.
+     * @private
+     */
     function compile(template, helper) {
@@ -28,2 +59,3 @@ var argName = 'data';
         var fnCode = "var str=\"" + evalExpResult + "\"; return str;";
+        // tslint:disable-next-line:no-function-constructor-with-string-args
         var fn = new Function(argName, fnCode);
@@ -33,9 +65,15 @@ return fn.bind(helper);
     exports.compile = compile;
+    // function used to evaluate the function expression
     function evalExp(str, nameSpace, helper) {
+        /**
+         * Variable containing Local Keys
+         */
         var localKeys = [];
         return str.replace(LINES, '').replace(DBL_QUOTED_STR, '\'$1\'').replace(exp, function (match, cnt, offset, matchStr) {
             var matches = cnt.match(CALL_FUNCTION);
+            // matches to detect any function calls
             if (matches) {
                 var rlStr = matches[1];
                 if (IF_STMT.test(cnt)) {
+                    //handling if condition
                     cnt = '"; ' + cnt.replace(matches[1], rlStr.replace(WORD, function (str) {
@@ -47,3 +85,5 @@ str = str.trim();
                 else if (FOR_STMT.test(cnt)) {
+                    //handling for condition
                     var rlStr_1 = matches[1].split(' of ');
+                    // replace for each into actual JavaScript
                     cnt = '"; ' + cnt.replace(matches[1], function (mtc) {
@@ -57,2 +97,3 @@ localKeys.push(rlStr_1[0]);
                 else {
+                    //helper function handling
                     var fnStr = cnt.split('(');
@@ -67,8 +108,11 @@ var fNameSpace = (helper && helper.hasOwnProperty(fnStr[0]) ? 'this.' : 'global');
             else if (ELSE_STMT.test(cnt)) {
+                //handling else condition
                 cnt = '"; ' + cnt.replace(ELSE_STMT, '} else { \n str = str + "');
             }
             else if (!!cnt.match(IF_OR_FOR)) {
+                // close condition 
                 cnt = cnt.replace(IF_OR_FOR, '"; \n } \n str = str + "');
             }
             else {
+                // evaluate normal expression
                 cnt = '"+' + addNameSpace(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '+"';
@@ -83,1 +127,5 @@ }
 });
+// // Create hashCode for template string to storeCached function
+// function hashCode(str: string): string {
+//     return str.split('').reduce((a: number, b: string) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0).toString();
+// }

src/touch-model.d.ts

@@ -1,2 +0,2 @@
-import { extend, isNullOrUndefined } from './util';import { Property, Complex, NotifyPropertyChanges, INotifyPropertyChanged, Event } from './notify-property-change';import { Browser } from './browser';import { Base, EmitType } from './base';import { ChildProperty } from './child-property';import { EventHandler, BaseEventArgs } from './event-handler';
+import { extend } from './util';import { Property, Complex, NotifyPropertyChanges, INotifyPropertyChanged, Event } from './notify-property-change';import { Browser } from './browser';import { Base, EmitType } from './base';import { ChildProperty } from './child-property';import { EventHandler, BaseEventArgs } from './event-handler';
 import {TapEventArgs,SwipeEventArgs,ScrollEventArgs} from "./touch";
@@ -29,8 +29,2 @@
     /**
-     * Specifies the callback function for doubleTap event.
-     * @event
-     */
-    doubleTap?: EmitType<TapEventArgs>;
-
-    /**
      * Specifies the callback function for tapHold event.
@@ -54,6 +48,6 @@ * @event
     /**
-     * Specifies the time delay for doubleTap.
-     * @default 500
+     * Specifies the time delay for tap.
+     * @default 350
      */
-    doubleTapThreshold?: number;
+    tapThreshold?: number;
 
@@ -60,0 +54,0 @@ /**

src/touch.d.ts

@@ -25,5 +25,2 @@ import { INotifyPropertyChanged } from './notify-property-change';
  *    }
- *    doubleTap: function (e) {
- *        // double tap handler function code
- *    }
  *    tapHold: function (e) {
@@ -57,3 +54,5 @@ *        // tap hold handler function code
     private tStampStart;
+    private touchAction;
     private timeOutTap;
+    private modeClear;
     private timeOutTapHold;
@@ -66,7 +65,2 @@ /**
     /**
-     * Specifies the callback function for doubleTap event.
-     * @event
-     */
-    doubleTap: EmitType<TapEventArgs>;
-    /**
      * Specifies the callback function for tapHold event.
@@ -87,6 +81,6 @@ * @event
     /**
-     * Specifies the time delay for doubleTap.
-     * @default 500
+     * Specifies the time delay for tap.
+     * @default 350
      */
-    doubleTapThreshold: number;
+    tapThreshold: number;
     /**
@@ -102,2 +96,3 @@ * Specifies the time delay for tap hold.
     swipeSettings: SwipeSettingsModel;
+    private tapCount;
     constructor(element: HTMLElement, options?: TouchModel);
@@ -148,2 +143,6 @@ /**
     originalEvent: TouchEventArgs | MouseEventArgs;
+    /**
+     * Tap Count.
+     */
+    tapCount?: number;
 }
@@ -150,0 +149,0 @@ /**

src/touch.js

@@ -20,3 +20,7 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
-    var SwipeSettings = (function (_super) {
+    /**
+     * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc..,
+     * @private
+     */
+    var SwipeSettings = /** @class */ (function (_super) {
         __extends(SwipeSettings, _super);
@@ -33,17 +37,46 @@ function SwipeSettings() {
     var swipeRegex = /(Up|Down)/;
-    var Touch = (function (_super) {
+    /**
+     * Touch class provides support to handle the touch event like tap, double tap, tap hold, etc..,
+     * ```typescript
+     *    let node: HTMLElement;
+     * let touchObj: Touch = new Touch({
+     *    element: node,
+     *    tap: function (e) {
+     *        // tap handler function code
+     *    }
+     *    tapHold: function (e) {
+     *        // tap hold handler function code
+     *    }
+     *    scroll: function (e) {
+     *        // scroll handler function code
+     *    }
+     *    swipe: function (e) {
+     *        // swipe handler function code
+     *    }
+     * });
+     * ```
+     */
+    var Touch = /** @class */ (function (_super) {
         __extends(Touch, _super);
+        /* End-Properties */
         function Touch(element, options) {
             var _this = _super.call(this, options, element) || this;
+            _this.touchAction = true;
+            _this.tapCount = 0;
             _this.startEvent = function (evt) {
-                var point = (evt.changedTouches ? evt.changedTouches[0] : evt);
-                _this.isTouchMoved = false;
-                _this.movedDirection = '';
-                _this.startPoint = _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };
-                _this.startEventData = point;
-                _this.hScrollLocked = _this.vScrollLocked = false;
-                _this.tStampStart = Date.now();
-                _this.timeOutTapHold = setTimeout(function () { _this.tapHoldEvent(evt); }, _this.tapHoldThreshold);
-                event_handler_1.EventHandler.add(_this.element, browser_1.Browser.touchMoveEvent, _this.moveEvent, _this);
-                event_handler_1.EventHandler.add(_this.element, browser_1.Browser.touchEndEvent, _this.endEvent, _this);
+                if (_this.touchAction === true) {
+                    var point = (evt.changedTouches ? evt.changedTouches[0] : evt);
+                    if (evt.changedTouches !== undefined) {
+                        _this.touchAction = false;
+                    }
+                    _this.isTouchMoved = false;
+                    _this.movedDirection = '';
+                    _this.startPoint = _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };
+                    _this.startEventData = point;
+                    _this.hScrollLocked = _this.vScrollLocked = false;
+                    _this.tStampStart = Date.now();
+                    _this.timeOutTapHold = setTimeout(function () { _this.tapHoldEvent(evt); }, _this.tapHoldThreshold);
+                    event_handler_1.EventHandler.add(_this.element, browser_1.Browser.touchMoveEvent, _this.moveEvent, _this);
+                    event_handler_1.EventHandler.add(_this.element, browser_1.Browser.touchEndEvent, _this.endEvent, _this);
+                }
             };
@@ -72,2 +105,3 @@ _this.moveEvent = function (evt) {
                 clearTimeout(_this.timeOutTapHold);
+                clearTimeout(_this.timeOutTap);
                 var point = evt;
@@ -77,7 +111,8 @@ if (evt.changedTouches) {
                 }
-                _this.isTouchMoved = !(point.clientX === _this.startPoint.clientX && point.clientY === _this.startPoint.clientY);
+                var diffX = point.clientX - _this.startPoint.clientX;
+                var diffY = point.clientY - _this.startPoint.clientY;
+                diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX);
+                diffY = Math.floor(diffY < 0 ? -1 * diffY : diffX);
+                _this.isTouchMoved = diffX > 1 || diffY > 1;
                 _this.endPoint = point;
-                var dblTapTriggred = false;
-                var eDblTapArgs;
-                var eTapArgs;
                 var eSwipeArgs;
@@ -95,13 +130,7 @@ var tDistance = _this.swipeSettings.swipeThresholdDistance;
                 if (!_this.isTouchMoved) {
-                    eDblTapArgs = util_1.extend(eDblTapArgs, _this.defaultArgs, {});
-                    if (!util_1.isNullOrUndefined(_this.lastTapTime) && (new Date().getTime() - _this.lastTapTime) < _this.doubleTapThreshold) {
-                        clearTimeout(_this.timeOutTap);
-                        dblTapTriggred = true;
-                        _this.trigger('doubleTap', eDblTapArgs);
-                    }
-                    if (!dblTapTriggred) {
-                        eTapArgs = util_1.extend(eTapArgs, _this.defaultArgs, {});
+                    if (typeof _this.tap === 'function') {
+                        _this.trigger('tap', { originalEvent: evt, tapCount: ++_this.tapCount });
                         _this.timeOutTap = setTimeout(function () {
-                            _this.trigger('tap', eTapArgs);
-                        }, (typeof _this.doubleTap !== 'function' ? 0 : _this.doubleTapThreshold));
+                            _this.tapCount = 0;
+                        }, _this.tapThreshold);
                     }
@@ -127,2 +156,5 @@ }
                 }
+                _this.modeClear = setTimeout(function () {
+                    _this.touchAction = true;
+                }, (typeof _this.tap !== 'function' ? 0 : 10));
                 _this.lastTapTime = new Date().getTime();
@@ -135,3 +167,10 @@ event_handler_1.EventHandler.remove(_this.element, browser_1.Browser.touchMoveEvent, _this.moveEvent);
         }
+        // triggers when property changed 
+        /**
+         * @private
+         * @param newProp
+         * @param oldProp
+         */
         Touch.prototype.onPropertyChanged = function (newProp, oldProp) {
+            //No Code to handle
         };
@@ -144,2 +183,6 @@ Touch.prototype.bind = function () {
         };
+        /**
+         * To destroy the touch instance.
+         * @return {void}
+         */
         Touch.prototype.destroy = function () {
@@ -149,2 +192,3 @@ this.unwireEvents();
         };
+        // Need to changes the event binding once we updated the event handler.
         Touch.prototype.wireEvents = function () {
@@ -156,5 +200,15 @@ event_handler_1.EventHandler.add(this.element, browser_1.Browser.touchStartEvent, this.startEvent, this);
         };
+        /**
+         * Returns module name as touch
+         * @returns {string}
+         * @private
+         */
         Touch.prototype.getModuleName = function () {
             return 'touch';
         };
+        /**
+         * Returns if the HTML element is Scrollable.
+         * @param {HTMLElement} element - HTML Element to check if Scrollable.
+         * @returns {boolean}
+         */
         Touch.prototype.isScrollable = function (element) {
@@ -169,2 +223,4 @@ var eleStyle = getComputedStyle(element);
         Touch.prototype.tapHoldEvent = function (evt) {
+            this.tapCount = 0;
+            this.touchAction = true;
             var eTapArgs;
@@ -211,2 +267,3 @@ event_handler_1.EventHandler.remove(this.element, browser_1.Browser.touchMoveEvent, this.moveEvent);
         };
+        // tslint:disable-next-line:no-any
         Touch.prototype.checkSwipe = function (ele, flag) {
@@ -226,5 +283,2 @@ var keys = ['scroll', 'offset'];
             notify_property_change_1.Event()
-        ], Touch.prototype, "doubleTap", void 0);
-        __decorate([
-            notify_property_change_1.Event()
         ], Touch.prototype, "tapHold", void 0);
@@ -238,4 +292,4 @@ __decorate([
         __decorate([
-            notify_property_change_1.Property(500)
-        ], Touch.prototype, "doubleTapThreshold", void 0);
+            notify_property_change_1.Property(350)
+        ], Touch.prototype, "tapThreshold", void 0);
         __decorate([
@@ -242,0 +296,0 @@ notify_property_change_1.Property(750)

src/util.js

@@ -6,2 +6,9 @@ define(["require", "exports"], function (require, exports) {
     var uid = 0;
+    /**
+     * Create Instance from constructor function with desired parameters.
+     * @param {Function} classFunction - Class function to which need to create instance
+     * @param {any[]} params - Parameters need to passed while creating instance
+     * @return {any}
+     * @private
+     */
     function createInstance(classFunction, params) {
@@ -13,2 +20,8 @@ var arrayParam = params;
     exports.createInstance = createInstance;
+    /**
+     * To run a callback function immediately after the browser has completed other operations.
+     * @param {Function} handler - callback function to be triggered.
+     * @return {Function}
+     * @private
+     */
     function setImmediate(handler) {
@@ -33,3 +46,11 @@ var unbind;
     exports.setImmediate = setImmediate;
+    /**
+     * To get nameSpace value from the desired object.
+     * @param {string} nameSpace - String value to the get the inner object
+     * @param {any} obj - Object to get the inner object value.
+     * @return {any}
+     * @private
+     */
     function getValue(nameSpace, obj) {
+        /* tslint:disable no-any */
         var value = obj;
@@ -43,2 +64,10 @@ var splits = nameSpace.split('.');
     exports.getValue = getValue;
+    /**
+     * To set value for the nameSpace in desired object.
+     * @param {string} nameSpace - String value to the get the inner object
+     * @param {any} value - Value that you need to set.
+     * @param {any} obj - Object to get the inner object value.
+     * @return {void}
+     * @private
+     */
     function setValue(nameSpace, value, obj) {
@@ -64,2 +93,9 @@ var keys = nameSpace.split('.');
     exports.setValue = setValue;
+    /**
+     * Delete an item from Object
+     * @param {any} obj - Object in which we need to delete an item.
+     * @param {string} params - String value to the get the inner object
+     * @return {void}
+     * @private
+     */
     function deleteObject(obj, key) {
@@ -69,2 +105,8 @@ delete obj[key];
     exports.deleteObject = deleteObject;
+    /**
+     * Check weather the given argument is only object.
+     * @param {any} obj - Object which is need to check.
+     * @return {boolean}
+     * @private
+     */
     function isObject(obj) {
@@ -75,2 +117,9 @@ var objCon = {};
     exports.isObject = isObject;
+    /**
+     * To get enum value by giving the string.
+     * @param {any} enumObject - Enum object.
+     * @param {string} enumValue - Enum value to be searched
+     * @return {any}
+     * @private
+     */
     function getEnumValue(enumObject, enumValue) {
@@ -80,2 +129,9 @@ return enumObject[enumValue];
     exports.getEnumValue = getEnumValue;
+    /**
+     * Merge the source object into destination object.
+     * @param {any} source - source object which is going to merge with destination object
+     * @param {any} destination - object need to be merged
+     * @return {void}
+     * @private
+     */
     function merge(source, destination) {
@@ -93,2 +149,10 @@ if (!isNullOrUndefined(destination)) {
     exports.merge = merge;
+    /**
+     * Extend the two object with newer one.
+     * @param {any} copied - Resultant object after merged
+     * @param {Object} first - First object need to merge
+     * @param {Object} second - Second object need to merge
+     * @return {Object}
+     * @private
+     */
     function extend(copied, first, second, deep) {
@@ -125,2 +189,8 @@ var result = copied || {};
     exports.extend = extend;
+    /**
+     * To check whether the object is null or undefined.
+     * @param {Object} value - To check the object is null or undefined
+     * @return {boolean}
+     * @private
+     */
     function isNullOrUndefined(value) {
@@ -130,2 +200,8 @@ return value === undefined || value === null;
     exports.isNullOrUndefined = isNullOrUndefined;
+    /**
+     * To check whether the object is undefined.
+     * @param {Object} value - To check the object is undefined
+     * @return {boolean}
+     * @private
+     */
     function isUndefined(value) {
@@ -135,2 +211,8 @@ return ('undefined' === typeof value);
     exports.isUndefined = isUndefined;
+    /**
+     * To return the generated unique name
+     * @param {string} definedName - To concatenate the unique id to provided name
+     * @return {string}
+     * @private
+     */
     function getUniqueID(definedName) {
@@ -140,4 +222,12 @@ return definedName + '_' + uid++;
     exports.getUniqueID = getUniqueID;
+    /**
+     * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly.
+     * @param {Function} eventFunction - Specifies the function to run when the event occurs
+     * @param {number} delay - A number that specifies the milliseconds for function delay call option
+     * @return {Function}
+     * @private
+     */
     function debounce(eventFunction, delay) {
         var out;
+        // tslint:disable-next-line
         return function () {
@@ -155,2 +245,10 @@ var _this = this;
     exports.debounce = debounce;
+    // Added since lint ignored after added '//tslint:disable-next-line' 
+    /* tslint:disable:no-any */
+    /**
+     * To convert the object to string for query url
+     * @param  {Object} data
+     * @returns string
+     * @private
+     */
     function queryParams(data) {
@@ -166,2 +264,7 @@ var array = [];
     exports.queryParams = queryParams;
+    /**
+     * To check whether the given array contains object.
+     * @param {T[]} value- Specifies the T type array to be checked.
+     * @private
+     */
     function isObjectArray(value) {
@@ -177,2 +280,9 @@ var parser = Object.prototype.toString;
     exports.isObjectArray = isObjectArray;
+    /**
+     * To check whether the  child element is descendant to parent element or parent and child are same element.
+     * @param{Element} - Specifies the child element to compare with parent.
+     * @param{Element} - Specifies the parent element.
+     * @return boolean
+     * @private
+     */
     function compareElementParent(child, parent) {
@@ -191,2 +301,7 @@ var node = child;
     exports.compareElementParent = compareElementParent;
+    /**
+     * To throw custom error message.
+     * @param{string} - Specifies the error message to be thrown.
+     * @private
+     */
     function throwError(message) {
@@ -201,2 +316,8 @@ try {
     exports.throwError = throwError;
+    /**
+     * This function is used to print given element
+     * @param{Element} element - Specifies the print content element.
+     * @param{Window} printWindow - Specifies the print window.
+     * @private
+     */
     function print(element, printWindow) {
@@ -217,2 +338,3 @@ var div = document.createElement('div');
         printWindow.focus();
+        // tslint:disable-next-line
         var interval = setInterval(function () {
@@ -228,2 +350,8 @@ if (printWindow.ready) {
     exports.print = print;
+    /**
+     * Function to normalize the units applied to the element.
+     * @param  {number|string} value
+     * @return {string} result
+     * @private
+     */
     function formatUnit(value) {
@@ -237,3 +365,12 @@ var result = value + '';
     exports.formatUnit = formatUnit;
+    /**
+     * Function to fetch the Instances of a HTML element for the given component.
+     * @param {string | HTMLElement} element
+     * @param {any} component
+     * @return {Object} inst
+     * @private
+     */
+    // tslint:disable-next-line
     function getInstance(element, component) {
+        // tslint:disable-next-line:no-any
         var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;
@@ -251,3 +388,11 @@ if (elem[instances]) {
     exports.getInstance = getInstance;
+    /**
+     * Function to add instances for the given element.
+     * @param {string | HTMLElement} element
+     * @param {Object} instance
+     * @return {void}
+     * @private
+     */
     function addInstance(element, instance) {
+        // tslint:disable-next-line:no-any
         var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;
@@ -254,0 +399,0 @@ if (elem[instances]) {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

4116743

increased by13.64%

Number of package files

116

increased by6.42%

Lines of code

31576

increased by13.8%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes