@syncfusion/ej2-base 19.2.55 → 19.3.47

package/src/dom.js

@@ -3,21 +3,21 @@
  */
 import { EventHandler } from './event-handler';
 import { isNullOrUndefined, getValue, setValue, isObject, extend } from './util';
-import { VirtualDOM } from './virtual-dom';
 var SVG_REG = /^svg|^path|^g/;
 /**
  * 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.
+ *
+ * @param {string} tagName - Name of the tag, id and class names.
+ * @param {ElementProperties} properties - Object to set properties in the element.
+ * @param {ElementProperties} properties.id - To set the id to the created element.
+ * @param {ElementProperties} properties.className - To add classes to the element.
+ * @param {ElementProperties} properties.innerHTML - To set the innerHTML to element.
+ * @param {ElementProperties} properties.styles - To set the some custom styles to element.
+ * @param {ElementProperties} properties.attrs - To set the attributes to element.
+ * @returns {any} ?
  * @private
  */
 export function createElement(tagName, properties) {
-    //tslint:disable-next-line
     var element = (SVG_REG.test(tagName) ? document.createElementNS('http://www.w3.org/2000/svg', tagName) : document.createElement(tagName));
     if (typeof (properties) === 'undefined') {
         return element;
@@ -39,8 +39,10 @@ export function createElement(tagName, properties) {
 }
 /**
  * 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
+ * @returns {any} .
  * @private
  */
 export function addClass(elements, classes) {
@@ -69,8 +71,10 @@ export function addClass(elements, classes) {
 }
 /**
  * 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
+ * @returns {any} .
  * @private
  */
 export function removeClass(elements, classes) {
@@ -82,7 +86,6 @@ export function removeClass(elements, classes) {
         if (canRemove) {
             for (var _b = 0, classList_2 = classList; _b < classList_2.length; _b++) {
                 var className = classList_2[_b];
-                /* istanbul ignore next */
                 if (flag) {
                     var classes_1 = getValue('attributes.className', ele);
                     var classArr = classes_1.split(' ');
@@ -100,6 +103,13 @@ export function removeClass(elements, classes) {
     }
     return elements;
 }
+/**
+ * The function used to get classlist.
+ *
+ * @param  {string | string[]} classes - An element the need to check visibility
+ * @returns {string[]} ?
+ * @private
+ */
 function getClassList(classes) {
     var classList = [];
     if (typeof classes === 'string') {
@@ -112,7 +122,9 @@ function getClassList(classes) {
 }
 /**
  * The function used to check element is visible or not.
+ *
  * @param  {Element|Node} element - An element the need to check visibility
+ * @returns {boolean} ?
  * @private
  */
 export function isVisible(element) {
@@ -121,54 +133,51 @@ export function isVisible(element) {
 }
 /**
  * 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.
+ * @param {boolean} isEval - ?
+ * @returns {Element[] | NodeList} ?
  * @private
  */
 export function prepend(fromElements, toElement, isEval) {
-    //tslint:disable:no-any
-    if (isObject(toElement)) {
-        VirtualDOM.prepend(fromElements, toElement);
+    var docFrag = document.createDocumentFragment();
+    for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {
+        var ele = _a[_i];
+        docFrag.appendChild(ele);
     }
-    else {
-        var docFrag = document.createDocumentFragment();
-        for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {
-            var ele = _a[_i];
-            docFrag.appendChild(ele);
-        }
-        toElement.insertBefore(docFrag, toElement.firstElementChild);
-        if (isEval) {
-            executeScript(toElement);
-        }
+    toElement.insertBefore(docFrag, toElement.firstElementChild);
+    if (isEval) {
+        executeScript(toElement);
     }
     return fromElements;
 }
 /**
  * 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.
+ * @param {boolean} isEval - ?
+ * @returns {Element[] | NodeList} ?
  * @private
  */
 export function append(fromElements, toElement, isEval) {
-    if (isObject(toElement)) {
-        VirtualDOM.append(fromElements, toElement);
+    var docFrag = document.createDocumentFragment();
+    for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {
+        var ele = _a[_i];
+        docFrag.appendChild(ele);
     }
-    else {
-        var docFrag = document.createDocumentFragment();
-        for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {
-            var ele = _a[_i];
-            docFrag.appendChild(ele);
-        }
-        toElement.appendChild(docFrag);
-        if (isEval) {
-            executeScript(toElement);
-        }
+    toElement.appendChild(docFrag);
+    if (isEval) {
+        executeScript(toElement);
     }
     return fromElements;
 }
 /**
  * The function is used to evaluate script from Ajax request
- * @param ele - An element is going to evaluate the script
+ *
+ * @param {Element} ele - An element is going to evaluate the script
+ * @returns {void} ?
  */
 function executeScript(ele) {
     var eleArray = ele.querySelectorAll('script');
@@ -180,49 +189,45 @@ function executeScript(ele) {
     });
 }
 /**
- * The function used to remove the element from the
+ * The function used to remove the element from parentnode
+ *
  * @param  {Element|Node|HTMLElement} element - An element that is going to detach from the Dom
+ * @returns {any} ?
  * @private
  */
+// eslint-disable-next-line
 export function detach(element) {
-    if (isObject(element)) {
-        return VirtualDOM.detach(element);
-    }
-    else {
-        var parentNode = element.parentNode;
-        if (parentNode) {
-            return parentNode.removeChild(element);
-        }
+    var parentNode = element.parentNode;
+    if (parentNode) {
+        return parentNode.removeChild(element);
     }
 }
-//tslint: enable:no-any
 /**
  * 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
+ * @returns {void} ?
  * @private
  */
 export function remove(element) {
-    if (isObject(element)) {
-        VirtualDOM.detach(element);
-    }
-    else {
-        var parentNode = element.parentNode;
-        EventHandler.clearEvents(element);
-        parentNode.removeChild(element);
-    }
+    var parentNode = element.parentNode;
+    EventHandler.clearEvents(element);
+    parentNode.removeChild(element);
 }
 /**
  * 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.
+ * @param  {string} attributes - JSON Object that is going to as attributes.
+ * @returns {Element} ?
  * @private
  */
+// eslint-disable-next-line
 export function attributes(element, attributes) {
     var keys = Object.keys(attributes);
     var ele = element;
     for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
         var key = keys_1[_i];
-        /* istanbul ignore next */
         if (isObject(ele)) {
             var iKey = key;
             if (key === 'tabindex') {
@@ -238,43 +243,44 @@ export function attributes(element, 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.
+ *
+ * @param  {string} selector - Selector string need fetch element
+ * @param  {Document|Element} context - It is an optional type, That specifies a Dom context.
+ * @param {boolean} needsVDOM ?
+ * @returns {any} ?
  * @private
  */
-//tslint:disable-next-line
+// eslint-disable-next-line
 export function select(selector, context, needsVDOM) {
     if (context === void 0) { context = document; }
-    if (isObject(context) && needsVDOM) {
-        //tslint:disable-next-line
-        return VirtualDOM.vDomSelector({ ele: context, selector: selector, selectAll: false });
-    }
-    else {
-        selector = querySelectId(selector);
-        return context.querySelector(selector);
-    }
+    selector = querySelectId(selector);
+    return context.querySelector(selector);
 }
 /**
  * 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.
+ *
+ * @param  {string} selector - Selector string need fetch element
+ * @param  {Document|Element} context - It is an optional type, That specifies a Dom context.
+ * @param {boolean} needsVDOM ?
+ * @returns {HTMLElement[]} ?
  * @private
  */
+// eslint-disable-next-line
 export function selectAll(selector, context, needsVDOM) {
     if (context === void 0) { context = document; }
-    if (isObject(context) && !needsVDOM) {
-        //tslint:disable-next-line
-        return VirtualDOM.vDomSelector({ ele: context, selector: selector, selectAll: true });
-    }
-    else {
-        selector = querySelectId(selector);
-        var nodeList = context.querySelectorAll(selector);
-        return nodeList;
-    }
+    selector = querySelectId(selector);
+    var nodeList = context.querySelectorAll(selector);
+    return nodeList;
 }
+/**
+ * The function selects an id of element from the given context.
+ *
+ * @param  {string} selector - Selector string need fetch element
+ * @returns {string} ?
+ * @private
+ */
 function querySelectId(selector) {
-    var charRegex = /(!|"|\$|%|&|'|\(|\)|\*|\/|:|;|<|=|\?|@|\]|\^|`|{|}|\||\+|~)/g;
-    if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {
+    if (selector.match(/#[0-9]/g)) {
         var idList = selector.split(',');
         for (var i = 0; i < idList.length; i++) {
             var list = idList[i].split(' ');
@@ -282,7 +288,7 @@ function querySelectId(selector) {
                 if (list[j].indexOf('#') > -1) {
                     if (!list[j].match(/\[.*\]/)) {
                         var splitId = list[j].split('#');
-                        if (splitId[1].match(/^\d/) || splitId[1].match(charRegex)) {
+                        if (splitId[1].match(/^\d/)) {
                             var setId = list[j].split('.');
                             setId[0] = setId[0].replace(/#/, '[id=\'') + '\']';
                             list[j] = setId.join('.');
@@ -298,8 +304,10 @@ function querySelectId(selector) {
 }
 /**
  * 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.
+ * @returns {Element} ?
  * @private
  */
 export function closest(element, selector) {
@@ -307,7 +315,6 @@ export function closest(element, selector) {
     if (typeof el.closest === 'function') {
         return el.closest(selector);
     }
-    /* istanbul ignore next */
     while (el && el.nodeType === 1) {
         if (matches(el, selector)) {
             return el;
@@ -318,7 +325,9 @@ export function closest(element, selector) {
 }
 /**
  * Returns all sibling elements of the given element.
+ *
  * @param  {Element|Node} element - An element that need to get siblings.
+ * @returns {Element[]} ?
  * @private
  */
 export function siblings(element) {
@@ -334,12 +343,13 @@ export function siblings(element) {
 }
 /**
  * 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.
+ * @returns {string} ?
  * @private
  */
-/* istanbul ignore next */
 export function getAttributeOrDefault(element, property, value) {
     var attrVal;
     var isObj = isObject(element);
@@ -362,31 +372,27 @@ export function getAttributeOrDefault(element, property, value) {
 }
 /**
  * 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}
+ * @returns {void} ?
  * @private
  */
 export function setStyleAttribute(element, attrs) {
     if (attrs !== undefined) {
-        if (isObject(element)) {
-            // tslint:disable-next-line:no-any
-            VirtualDOM.setStyleAttribute(element, attrs);
-        }
-        else {
-            Object.keys(attrs).forEach(function (key) {
-                // tslint:disable-next-line:no-any
-                element.style[key] = attrs[key];
-            });
-        }
+        Object.keys(attrs).forEach(function (key) {
+            // eslint-disable-next-line
+            element.style[key] = attrs[key];
+        });
     }
 }
 /**
  * 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}
+ * @returns {void} ?
  * @private
  */
 export function classList(element, addClasses, removeClasses) {
@@ -395,13 +401,14 @@ export function classList(element, addClasses, removeClasses) {
 }
 /**
  * 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}
+ * @returns {void} ?
  * @private
  */
 export function matches(element, selector) {
-    //tslint:disable-next-line
+    // eslint-disable-next-line
     var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;
     if (matches) {
         return matches.call(element, selector);
@@ -410,29 +417,29 @@ export function matches(element, selector) {
         return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;
     }
 }
-/* istanbul ignore next */
+/**
+ * Method to get the html text from DOM.
+ *
+ * @param {HTMLElement} ele - Element to compare with the selector.
+ * @param {string} innerHTML - String selector which element will satisfy.
+ * @returns {void} ?
+ * @private
+ */
 export function includeInnerHTML(ele, innerHTML) {
-    if (isObject(ele)) {
-        if (innerHTML === '') {
-            ele.children = [];
-        }
-        else {
-            var res = VirtualDOM.ConvertHTMLToJSon(innerHTML);
-            if (res.length) {
-                VirtualDOM.assignParent(res, ele);
-                ele.children = res;
-            }
-        }
-    }
-    else {
-        ele.innerHTML = innerHTML;
-    }
+    ele.innerHTML = innerHTML;
 }
-/* istanbul ignore next */
-//tslint:disable-next-line
+/**
+ * Method to get the containsclass.
+ *
+ * @param {HTMLElement} ele - Element to compare with the selector.
+ * @param {string} className - String selector which element will satisfy.
+ * @returns {any} ?
+ * @private
+ */
+// eslint-disable-next-line
 export function containsClass(ele, className) {
     if (isObject(ele)) {
-        // tslint:disable-next-line:no-any
+        // eslint-disable-next-line
         return new RegExp('\\b' + className + '\\b', 'i').test(ele.attributes.className);
     }
     else {
@@ -441,21 +448,18 @@ export function containsClass(ele, className) {
 }
 /**
  * Method to check whether the element matches the given selector.
- * @param {} element - Element to compare with the selector.
- * @param {string} selector - String selector which element will satisfy.
- * @return {Element | VirtualObject}
+ *
+ * @param {Object} element - Element to compare with the selector.
+ * @param {boolean} deep ?
+ * @returns {any} ?
  * @private
  */
-/* istanbul ignore next */
-//tslint:disable:no-any
+// eslint-disable-next-line
 export function cloneNode(element, deep) {
     if (isObject(element)) {
         if (deep) {
             return extend({}, {}, element, true);
         }
-        else {
-            return { tagName: element.tagName, attributes: element.attributes };
-        }
     }
     else {
         return element.cloneNode(deep);

package/src/draggable-model.d.ts

@@ -158,4 +158,9 @@ export interface DraggableModel {
      */
     tapHoldThreshold?: number;
 
+    /**
+     * @private
+     */
+    enableScrollHandler?: boolean;
+
 }

package/src/draggable.d.ts

@@ -272,6 +272,10 @@ export declare class Draggable extends Base<HTMLElement> implements INotifyPrope
      *  @private
      */
     tapHoldThreshold: number;
+    /**
+     * @private
+     */
+    enableScrollHandler: boolean;
     private target;
     /**
      * @private
@@ -297,7 +301,6 @@ export declare class Draggable extends Base<HTMLElement> implements INotifyPrope
     private tapHoldTimer;
     private dragElePosition;
     currentStateTarget: any;
-    enableScrollHandler: boolean;
     private externalInitialize;
     private diffY;
     private pageY;

package/src/draggable.js

@@ -76,7 +76,6 @@ var Draggable = /** @class */ (function (_super) {
         _this.dragProcessStarted = false;
         /* tslint:disable no-any */
         _this.tapHoldTimer = 0;
-        _this.enableScrollHandler = false;
         _this.externalInitialize = false;
         _this.diffY = 0;
         _this.parentScrollX = 0;
@@ -299,6 +298,10 @@ var Draggable = /** @class */ (function (_super) {
             if (this.clone && marginTop !== 0) {
                 pos.top += marginTop;
             }
+            if (this.enableScrollHandler && !this.clone) {
+                pos.top -= this.parentScrollY;
+                pos.left -= this.parentScrollX;
+            }
             var posValue = this.getProcessedPositionValue({
                 top: (pos.top - this.diffY) + 'px',
                 left: (pos.left - this.diffX) + 'px'
@@ -662,7 +665,7 @@ var Draggable = /** @class */ (function (_super) {
             pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;
             pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;
         }
-        if (!this.clone && this.dragArea) {
+        if (!this.clone && this.dragArea && !isdragscroll) {
             this.getScrollableValues();
             pageY -= this.tempScrollHeight ? this.parentScrollY : 0;
             pageX -= this.tempScrollWidth ? this.parentScrollX : 0;
@@ -801,6 +804,9 @@ var Draggable = /** @class */ (function (_super) {
     __decorate([
         Property(750)
     ], Draggable.prototype, "tapHoldThreshold", void 0);
+    __decorate([
+        Property(false)
+    ], Draggable.prototype, "enableScrollHandler", void 0);
     Draggable = Draggable_1 = __decorate([
         NotifyPropertyChanges
     ], Draggable);

package/src/droppable-model.d.ts

@@ -12,26 +12,29 @@ export interface DroppableModel {
     accept?: string;
 
     /**
-     * Defines the scope value to group sets of draggable and droppable items. 
+     * Defines the scope value to group sets of draggable and droppable items.
      * A draggable with the same scope value will only be accepted by the droppable.
      */
     scope?: string;
 
     /**
      * Specifies the callback function, which will be triggered while drag element is dropped in droppable.
-     * @event
+     *
+     * @event drop
      */
     drop?: (args: DropEventArgs) => void;
 
     /**
      * Specifies the callback function, which will be triggered while drag element is moved over droppable element.
-     * @event
+     *
+     * @event over
      */
     over?: Function;
 
     /**
      * Specifies the callback function, which will be triggered while drag element is moved out of droppable element.
-     * @event
+     *
+     * @event bind
      */
     out?: Function;
 

package/src/droppable.d.ts

@@ -4,6 +4,7 @@ import { DroppableModel } from './droppable-model';
 import { DropInfo } from './draggable';
 /**
  * Droppable arguments in drop callback.
+ *
  * @private
  */
 export interface DropData {
@@ -67,17 +68,20 @@ export declare class Droppable extends Base<HTMLElement> implements INotifyPrope
     scope: string;
     /**
      * Specifies the callback function, which will be triggered while drag element is dropped in droppable.
-     * @event
+     *
+     * @event drop
      */
     drop: (args: DropEventArgs) => void;
     /**
      * Specifies the callback function, which will be triggered while drag element is moved over droppable element.
-     * @event
+     *
+     * @event over
      */
     over: Function;
     /**
      * Specifies the callback function, which will be triggered while drag element is moved out of droppable element.
-     * @event
+     *
+     * @event bind
      */
     out: Function;
     private mouseOver;

package/src/droppable.js

@@ -55,6 +55,7 @@ var Droppable = /** @class */ (function (_super) {
         EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);
     };
     // triggers when property changed
+    // eslint-disable-next-line
     Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {
         //No Code to handle
     };

package/src/event-handler.d.ts

@@ -1,6 +1,5 @@
 /**
  * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element
- * @private
  * ```html
  * <div id="Eventdiv">  </div>
  * <script>
@@ -22,40 +21,45 @@ export declare class EventHandler {
     private static addOrGetEventData;
     /**
      * 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}
+     * @param {number} intDebounce - Specifies at what interval given event listener should be triggered.
+     * @returns {Function} ?
      */
     static add(element: Element | HTMLElement | Document, eventName: string, listener: Function, bindTo?: Object, intDebounce?: number): Function;
     /**
      * 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}
+     * @returns {void} ?
      */
     static remove(element: Element | HTMLElement | Document, eventName: string, listener: Function): void;
     /**
      * 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}
+     * @returns {void} ?
      */
     static clearEvents(element: Element): void;
     /**
      * 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}
+     * @returns {void} ?
      */
     static trigger(element: HTMLElement, eventName: string, eventProp?: Object): void;
 }
 /**
  * Common Event argument for all base Essential JavaScript 2 Events.
+ *
  * @private
  */
 export interface BaseEventArgs {