@syncfusion/ej2-base - npm Package Compare versions

Comparing version 1.0.16 to 1.0.18

dist/es6/animation.js

@@ -178,21 +178,2 @@ var __extends = (this && this.__extends) || (function () {
 export { Animation };
-export function ripple(element, selector, rippleFlag) {
-    if (rippleFlag === false || (rippleFlag === undefined && !isRippleEnabled)) {
-        return Function;
-    }
-    element.setAttribute('data-ripple', 'true');
-    EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, selector: selector });
-    EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, selector: selector });
-    EventHandler.add(element, 'mouseleave', rippleMoveHandler, { parent: element, selector: selector });
-    if (Browser.isPointer) {
-        EventHandler.add(element, 'transitionend', rippleMoveHandler, { parent: element, selector: selector });
-    }
-    return (function () {
-        element.removeAttribute('data-ripple');
-        EventHandler.remove(element, 'mousedown', rippleHandler);
-        EventHandler.remove(element, 'mouseup', rippleUpHandler);
-        EventHandler.remove(element, 'mouseleave', rippleMoveHandler);
-        EventHandler.remove(element, 'transitionend', rippleMoveHandler);
-    });
-}
 export function rippleEffect(element, rippleOptions, done) {
@@ -206,12 +187,5 @@ var rippleModel = getRippleModel(rippleOptions);
     EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, rippleOptions: rippleModel, done: done });
-    EventHandler.add(element, 'mouseleave', rippleMoveHandler, { parent: element, rippleOptions: rippleModel });
-    if (rippleOptions && rippleOptions.selector) {
-        var selectors = selectAll(rippleOptions.selector, element);
-        for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
-            var selector = selectors_1[_i];
-            EventHandler.add(selector, 'mouseleave', rippleMoveHandler, { parent: selector, rippleOptions: rippleModel });
-        }
-    }
+    EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });
     if (Browser.isPointer) {
-        EventHandler.add(element, 'transitionend', rippleMoveHandler, { parent: element, rippleOptions: rippleModel });
+        EventHandler.add(element, 'transitionend', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });
     }
@@ -222,11 +196,4 @@ return (function () {
         EventHandler.remove(element, 'mouseup', rippleUpHandler);
-        EventHandler.remove(element, 'mouseleave', rippleMoveHandler);
-        EventHandler.remove(element, 'transitionend', rippleMoveHandler);
-        if (rippleOptions && rippleOptions.selector) {
-            var selectors = selectAll(rippleOptions.selector, element);
-            for (var _i = 0, selectors_2 = selectors; _i < selectors_2.length; _i++) {
-                var selector = selectors_2[_i];
-                EventHandler.remove(selector, 'mouseleave', rippleMoveHandler);
-            }
-        }
+        EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);
+        EventHandler.remove(element, 'transitionend', rippleLeaveHandler);
     });
@@ -246,3 +213,3 @@ }
     var target = (e.target);
-    var selector = this.rippleOptions ? this.rippleOptions.selector : this.selector;
+    var selector = this.rippleOptions.selector;
     var element = selector ? closest(target, selector) : target;
@@ -267,3 +234,3 @@ if (!element || (this.rippleOptions && closest(target, this.rippleOptions.ignore))) {
     element.classList.add('e-ripple');
-    var duration = this.rippleOptions ? this.rippleOptions.duration.toString() : '350';
+    var duration = this.rippleOptions.duration.toString();
     var styles = 'width: ' + diameter + ';height: ' + diameter + ';left: ' + x + 'px;top: ' + y + 'px;' +
@@ -275,2 +242,5 @@ 'transition-duration: ' + duration + 'ms;';
     rippleElement.style.transform = 'scale(1)';
+    if (element !== this.parent) {
+        EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: this.parent, rippleOptions: this.rippleOptions });
+    }
 }
@@ -280,9 +250,9 @@ function rippleUpHandler(e) {
 }
-function rippleMoveHandler(e) {
+function rippleLeaveHandler(e) {
     removeRipple(e, this);
 }
 function removeRipple(e, eventArgs) {
-    var duration = eventArgs.rippleOptions ? eventArgs.rippleOptions.duration : 350;
+    var duration = eventArgs.rippleOptions.duration;
     var target = (e.target);
-    var selector = eventArgs.rippleOptions ? eventArgs.rippleOptions.selector : eventArgs.selector;
+    var selector = eventArgs.rippleOptions.selector;
     var element = selector ? closest(target, selector) : target;
@@ -297,2 +267,5 @@ if (!element || (element && element.className.indexOf('e-ripple') === -1)) {
     }
+    if (eventArgs.parent !== element) {
+        EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);
+    }
     setTimeout(function () {
@@ -299,0 +272,0 @@ if (rippleElement && rippleElement.parentNode) {

dist/es6/draggable.js

@@ -152,3 +152,3 @@ var __extends = (this && this.__extends) || (function () {
             pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };
-            if (this.clone) {
+            if (this.clone && !this.enableTailMode) {
                 this.diffX = this.position.left - this.offset.left;
@@ -240,3 +240,3 @@ this.diffY = this.position.top - this.offset.top;
             var styles = getComputedStyle(helperElement);
-            if (this.pageX !== pagex) {
+            if (this.pageX !== pagex || this.skipDistanceCheck) {
                 var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)
@@ -254,3 +254,3 @@ + parseFloat(styles.marginRight));
             }
-            if (this.pageY !== pagey) {
+            if (this.pageY !== pagey || this.skipDistanceCheck) {
                 var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)
@@ -409,3 +409,4 @@ + parseFloat(styles.marginBottom));
             draggable: drag,
-            helper: helper
+            helper: helper,
+            draggedElement: this.element
         };
@@ -484,2 +485,11 @@ };
 ], Draggable.prototype, "axis", void 0);
+__decorate([
+    Property()
+], Draggable.prototype, "queryPositionInfo", void 0);
+__decorate([
+    Property(false)
+], Draggable.prototype, "enableTailMode", void 0);
+__decorate([
+    Property(false)
+], Draggable.prototype, "skipDistanceCheck", void 0);
 Draggable = Draggable_1 = __decorate([
@@ -486,0 +496,0 @@ NotifyPropertyChanges

dist/es6/form-validator.js

@@ -22,2 +22,7 @@ var __extends = (this && this.__extends) || (function () {
 import { Property, NotifyPropertyChanges, Event } from './notify-property-change';
+var VALIDATE_EMAIL = new RegExp('^[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,5}' +
+    '|[.]{1}[a-zA-Z]{2,4}[.]{1}[a-zA-Z]{2,4})$');
+var VALIDATE_URL = new RegExp('^((ftp|http|https):\/\/)?www\.([A-z]{2,})\.([A-z]{2,})$');
+var VALIDATE_DATE_ISO = new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$');
+var VALIDATE_DIGITS = new RegExp('^[0-9]*$');
 export var ErrorOption;
@@ -53,3 +58,5 @@ (function (ErrorOption) {
             min: 'Please enter a value greater than or equal to {0}.',
-            regex: 'Please enter a correct value.'
+            regex: 'Please enter a correct value.',
+            tel: 'Please enter a valid 10 digit mobile number.',
+            pattern: 'Please enter a correct pattern value.',
         };
@@ -59,2 +66,4 @@ element = typeof element === 'string' ? select(element, document) : element;
             _this.element.setAttribute('novalidate', '');
+            _this.inputElements = selectAll(_this.selectQuery, _this.element);
+            _this.createHTML5Rules();
             _this.wireEvents();
@@ -143,6 +152,45 @@ }
     };
+    FormValidator.prototype.createHTML5Rules = function () {
+        for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
+            var input = _a[_i];
+            var defRules = ['regex', 'required', 'rangeLength', 'maxLength', 'minLength', 'digits',
+                'dateIso', 'pattern', 'type', 'min', 'max', 'range'];
+            var acceptedTypes = ['email', 'url', 'date', 'number', 'digits'];
+            var allRule = {};
+            for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {
+                var rule = defRules_1[_b];
+                if (input.getAttribute(rule) !== null) {
+                    switch (rule) {
+                        case 'required':
+                            this.defRule(input, allRule, rule, input.required);
+                            break;
+                        case 'type':
+                            if (acceptedTypes.indexOf(input.type) !== -1) {
+                                this.defRule(input, allRule, input.type, true);
+                            }
+                            break;
+                        case 'rangeLength':
+                        case 'range':
+                            this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));
+                            break;
+                        default:
+                            this.defRule(input, allRule, rule, input.getAttribute(rule));
+                    }
+                }
+            }
+            if (Object.keys(allRule).length !== 0) {
+                this.addRules(input.name, allRule);
+            }
+        }
+    };
+    FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {
+        var message = input.getAttribute('data-' + ruleName + '-message');
+        if (message) {
+            value = [value, message];
+        }
+        ruleCon[ruleName] = value;
+    };
     FormValidator.prototype.wireEvents = function () {
-        var inputElements = selectAll(this.selectQuery, this.element);
-        for (var _i = 0, inputElements_1 = inputElements; _i < inputElements_1.length; _i++) {
-            var input = inputElements_1[_i];
+        for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
+            var input = _a[_i];
             if (FormValidator_1.isCheckable(input)) {
@@ -162,5 +210,4 @@ EventHandler.add(input, 'click', this.clickHandler, this);
     FormValidator.prototype.unwireEvents = function () {
-        var inputElements = selectAll(this.selectQuery, this.element);
-        for (var _i = 0, inputElements_2 = inputElements; _i < inputElements_2.length; _i++) {
-            var input = inputElements_2[_i];
+        for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
+            var input = _a[_i];
             EventHandler.clearEvents(input);
@@ -251,4 +298,4 @@ }
                     this.inputElement.setAttribute('aria-required', 'true');
-                    break;
                 }
+                break;
             }
@@ -268,3 +315,3 @@ else {
         this.trigger('validationBegin', args);
-        if (typeof currentRule[0] === 'function') {
+        if (currentRule && typeof currentRule[0] === 'function') {
             var fn = currentRule[0];
@@ -364,14 +411,9 @@ return fn.call(this, { element: this.inputElement, value: this.inputElement.value });
     email: function (option) {
-        return new RegExp('^[a-zA-Z0-9.!#$%&\'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?' +
-            '(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$').test(option.value);
+        return VALIDATE_EMAIL.test(option.value);
     },
     url: function (option) {
-        return new RegExp('^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|(www\\.)?){1}([0-9A-Za-z-\\.@:%_\‌​+~#=]+)' +
-            '+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?').test(option.value);
+        return VALIDATE_URL.test(option.value);
     },
-    date: function (option) {
-        return !isNaN(new Date(option.value).getTime());
-    },
     dateIso: function (option) {
-        return new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$').test(option.value);
+        return VALIDATE_DATE_ISO.test(option.value);
     },
@@ -382,3 +424,3 @@ number: function (option) {
     digits: function (option) {
-        return new RegExp('^[0-9]*$').test(option.value);
+        return VALIDATE_DIGITS.test(option.value);
     },
@@ -399,11 +441,20 @@ maxLength: function (option) {
     },
+    date: function (option) {
+        return !isNaN(new Date(option.value).getTime());
+    },
     max: function (option) {
-        return !isNaN(Number(option.value)) && Number(option.value) <= option.param;
+        if (!isNaN(Number(option.value))) {
+            return +option.value <= option.param;
+        }
+        return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();
     },
     min: function (option) {
-        return !isNaN(Number(option.value)) && Number(option.value) >= option.param;
+        if (!isNaN(Number(option.value))) {
+            return +option.value >= option.param;
+        }
+        return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();
     },
     regex: function (option) {
         return new RegExp(option.param).test(option.value);
-    }
+    },
 };
@@ -410,0 +461,0 @@ __decorate([

e2e/protractor.config.js

@@ -137,2 +137,6 @@ const os = require("os");
     },
-};
+};
+
+if (os.hostname().indexOf('jenkins') !== -1) {
+    exports.config.seleniumAddress = 'http://localhost:4444/wd/hub'
+}

package.json

 {
   "name": "@syncfusion/ej2-base",
-  "version": "1.0.16",
-  "description": "Essential JS 2 Base library",
+  "version": "1.0.18",
+  "description": "Essential JS 2 Base Library",
   "author": "Syncfusion Inc.",
@@ -6,0 +6,0 @@ "license": "SEE LICENSE IN license",

src/animation.d.ts

@@ -132,17 +132,2 @@ import { Base, EmitType } from './base';
  * <script>
- *   Ripple('#ripple');
- *   // OR
- *   Ripple(document.getElementById('ripple'));
- * </script>
- * ```
- * @private
- * @param HTMLElement element - Target element
- * @param string selector - Child element selector.
- */
-export declare function ripple(element: HTMLElement, selector?: string, rippleFlag?: boolean): () => void;
-/**
- * Ripple provides material theme's wave effect when an element is clicked
- * ```html
- * <div id='ripple'></div>
- * <script>
  *   rippleEffect(document.getElementById('ripple'));
@@ -149,0 +134,0 @@ * </script>

src/animation.js

@@ -176,22 +176,2 @@ var __extends = (this && this.__extends) || (function () {
     exports.Animation = Animation;
-    function ripple(element, selector, rippleFlag) {
-        if (rippleFlag === false || (rippleFlag === undefined && !exports.isRippleEnabled)) {
-            return Function;
-        }
-        element.setAttribute('data-ripple', 'true');
-        event_handler_1.EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, selector: selector });
-        event_handler_1.EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, selector: selector });
-        event_handler_1.EventHandler.add(element, 'mouseleave', rippleMoveHandler, { parent: element, selector: selector });
-        if (browser_1.Browser.isPointer) {
-            event_handler_1.EventHandler.add(element, 'transitionend', rippleMoveHandler, { parent: element, selector: selector });
-        }
-        return (function () {
-            element.removeAttribute('data-ripple');
-            event_handler_1.EventHandler.remove(element, 'mousedown', rippleHandler);
-            event_handler_1.EventHandler.remove(element, 'mouseup', rippleUpHandler);
-            event_handler_1.EventHandler.remove(element, 'mouseleave', rippleMoveHandler);
-            event_handler_1.EventHandler.remove(element, 'transitionend', rippleMoveHandler);
-        });
-    }
-    exports.ripple = ripple;
     function rippleEffect(element, rippleOptions, done) {
@@ -205,12 +185,5 @@ var rippleModel = getRippleModel(rippleOptions);
         event_handler_1.EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, rippleOptions: rippleModel, done: done });
-        event_handler_1.EventHandler.add(element, 'mouseleave', rippleMoveHandler, { parent: element, rippleOptions: rippleModel });
-        if (rippleOptions && rippleOptions.selector) {
-            var selectors = dom_1.selectAll(rippleOptions.selector, element);
-            for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
-                var selector = selectors_1[_i];
-                event_handler_1.EventHandler.add(selector, 'mouseleave', rippleMoveHandler, { parent: selector, rippleOptions: rippleModel });
-            }
-        }
+        event_handler_1.EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });
         if (browser_1.Browser.isPointer) {
-            event_handler_1.EventHandler.add(element, 'transitionend', rippleMoveHandler, { parent: element, rippleOptions: rippleModel });
+            event_handler_1.EventHandler.add(element, 'transitionend', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });
         }
@@ -221,11 +194,4 @@ return (function () {
             event_handler_1.EventHandler.remove(element, 'mouseup', rippleUpHandler);
-            event_handler_1.EventHandler.remove(element, 'mouseleave', rippleMoveHandler);
-            event_handler_1.EventHandler.remove(element, 'transitionend', rippleMoveHandler);
-            if (rippleOptions && rippleOptions.selector) {
-                var selectors = dom_1.selectAll(rippleOptions.selector, element);
-                for (var _i = 0, selectors_2 = selectors; _i < selectors_2.length; _i++) {
-                    var selector = selectors_2[_i];
-                    event_handler_1.EventHandler.remove(selector, 'mouseleave', rippleMoveHandler);
-                }
-            }
+            event_handler_1.EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);
+            event_handler_1.EventHandler.remove(element, 'transitionend', rippleLeaveHandler);
         });
@@ -246,3 +212,3 @@ }
         var target = (e.target);
-        var selector = this.rippleOptions ? this.rippleOptions.selector : this.selector;
+        var selector = this.rippleOptions.selector;
         var element = selector ? dom_1.closest(target, selector) : target;
@@ -267,3 +233,3 @@ if (!element || (this.rippleOptions && dom_1.closest(target, this.rippleOptions.ignore))) {
         element.classList.add('e-ripple');
-        var duration = this.rippleOptions ? this.rippleOptions.duration.toString() : '350';
+        var duration = this.rippleOptions.duration.toString();
         var styles = 'width: ' + diameter + ';height: ' + diameter + ';left: ' + x + 'px;top: ' + y + 'px;' +
@@ -275,2 +241,5 @@ 'transition-duration: ' + duration + 'ms;';
         rippleElement.style.transform = 'scale(1)';
+        if (element !== this.parent) {
+            event_handler_1.EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: this.parent, rippleOptions: this.rippleOptions });
+        }
     }
@@ -280,9 +249,9 @@ function rippleUpHandler(e) {
     }
-    function rippleMoveHandler(e) {
+    function rippleLeaveHandler(e) {
         removeRipple(e, this);
     }
     function removeRipple(e, eventArgs) {
-        var duration = eventArgs.rippleOptions ? eventArgs.rippleOptions.duration : 350;
+        var duration = eventArgs.rippleOptions.duration;
         var target = (e.target);
-        var selector = eventArgs.rippleOptions ? eventArgs.rippleOptions.selector : eventArgs.selector;
+        var selector = eventArgs.rippleOptions.selector;
         var element = selector ? dom_1.closest(target, selector) : target;
@@ -297,2 +266,5 @@ if (!element || (element && element.className.indexOf('e-ripple') === -1)) {
         }
+        if (eventArgs.parent !== element) {
+            event_handler_1.EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);
+        }
         setTimeout(function () {
@@ -299,0 +271,0 @@ if (rippleElement && rippleElement.parentNode) {

src/base.d.ts

@@ -57,3 +57,3 @@ import { Observer } from './observer';
     /**
-     * Adds the handler to given event listener.
+     * Adds the handler to the given event listener.
      * @param {string} eventName - A String that specifies the name of the event
@@ -60,0 +60,0 @@ * @param {Function} listener - Specifies the call to run when the event occurs.

src/component-model.d.ts

@@ -21,3 +21,3 @@ import { isUndefined, getValue, isNullOrUndefined, setValue, getUniqueID } from './util';import { ModuleLoader, ModuleDeclaration } from './module-loader';import { Base } from './base';import { Observer, BoundOptions } from './observer';import { ChildProperty } from './child-property';import { Property, NotifyPropertyChanges } from './notify-property-change';import { onIntlChange, rightToLeft, defaultCulture } from './internationalization';
     /**
-     * Overrides the global culture and localization value for this component. Default Global culture is 'en-US'
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
      * @default undefined
@@ -24,0 +24,0 @@ */

src/component.d.ts

@@ -21,3 +21,3 @@ import { ModuleLoader, ModuleDeclaration } from './module-loader';
     /**
-     * Overrides the global culture and localization value for this component. Default Global culture is 'en-US'
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
      * @default undefined
@@ -39,7 +39,7 @@ */
     /**
-     * Apply all the pending property changes and render the component again
+     * Applies all the pending property changes and render the component again.
      */
     refresh(): void;
     /**
-     * Append the control within the given HTML Element
+     * Appends the control within the given HTML element
      * @param {string | HTMLElement} selector - Target element where control needs to be appended
@@ -49,3 +49,3 @@ */
     /**
-     * When invoked applies the pending property changes immediately to the component.
+     * When invoked, applies the pending property changes immediately to the component.
      */
@@ -85,3 +85,3 @@ dataBind(): void;
     /**
-     * Dynamically inject the required modules to component
+     * Dynamically injects the required modules to the component.
      */
@@ -88,0 +88,0 @@ static Inject(...moduleList: Function[]): void;

src/draggable-model.d.ts

@@ -107,2 +107,19 @@ import { Base } from './base';import { Browser } from './browser';import { isVisible } from './dom';import { Property, Complex, NotifyPropertyChanges, INotifyPropertyChanged, Event } from './notify-property-change';import { EventHandler } from './event-handler';import { ChildProperty } from './child-property';import { select, closest, setStyleAttribute, addClass, createElement } from './dom';import { extend, isUndefined, isNullOrUndefined, compareElementParent } from './util';
 
+    /**
+     * Specifies the function to change the position value.
+     * @private
+     */
+    queryPositionInfo?: Function;
+
+    /**
+     * Specifies whether the drag clone element will be split form the cursor pointer.
+     */
+    enableTailMode?: boolean;
+
+    /**
+     * Specifies whether to skip the previous drag movement comparison.
+     * @private
+     */
+    skipDistanceCheck?: boolean;
+
 }

src/draggable.d.ts

@@ -62,2 +62,6 @@ import { Base } from './base';
     helper?: HTMLElement;
+    /**
+     * Specifies the drag target element
+     */
+    draggedElement?: HTMLElement;
 }
@@ -209,4 +213,14 @@ export interface DropObject {
      * Specifies the function to change the position value.
+     * @private
      */
     queryPositionInfo: Function;
+    /**
+     * Specifies whether the drag clone element will be split form the cursor pointer.
+     */
+    enableTailMode: boolean;
+    /**
+     * Specifies whether to skip the previous drag movement comparison.
+     * @private
+     */
+    skipDistanceCheck: boolean;
     private target;
@@ -213,0 +227,0 @@ private initialPosition;

src/draggable.js

@@ -147,3 +147,3 @@ var __extends = (this && this.__extends) || (function () {
                 pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };
-                if (this.clone) {
+                if (this.clone && !this.enableTailMode) {
                     this.diffX = this.position.left - this.offset.left;
@@ -235,3 +235,3 @@ this.diffY = this.position.top - this.offset.top;
                 var styles = getComputedStyle(helperElement);
-                if (this.pageX !== pagex) {
+                if (this.pageX !== pagex || this.skipDistanceCheck) {
                     var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)
@@ -249,3 +249,3 @@ + parseFloat(styles.marginRight));
                 }
-                if (this.pageY !== pagey) {
+                if (this.pageY !== pagey || this.skipDistanceCheck) {
                     var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)
@@ -404,3 +404,4 @@ + parseFloat(styles.marginBottom));
                 draggable: drag,
-                helper: helper
+                helper: helper,
+                draggedElement: this.element
             };
@@ -479,2 +480,11 @@ };
     ], Draggable.prototype, "axis", void 0);
+    __decorate([
+        notify_property_change_1.Property()
+    ], Draggable.prototype, "queryPositionInfo", void 0);
+    __decorate([
+        notify_property_change_1.Property(false)
+    ], Draggable.prototype, "enableTailMode", void 0);
+    __decorate([
+        notify_property_change_1.Property(false)
+    ], Draggable.prototype, "skipDistanceCheck", void 0);
     Draggable = Draggable_1 = __decorate([
@@ -481,0 +491,0 @@ notify_property_change_1.NotifyPropertyChanges

src/form-validator.d.ts

@@ -35,2 +35,3 @@ import { Base, EmitType } from './base';
     private selectQuery;
+    private inputElements;
     /**
@@ -169,2 +170,4 @@ * Ignores input fields based on the class name
     constructor(element: string | HTMLFormElement, options?: FormValidatorModel);
+    private createHTML5Rules();
+    private defRule(input, ruleCon, ruleName, value);
     private wireEvents();
@@ -171,0 +174,0 @@ private unwireEvents();

src/form-validator.js

@@ -20,2 +20,7 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
+    var VALIDATE_EMAIL = new RegExp('^[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,5}' +
+        '|[.]{1}[a-zA-Z]{2,4}[.]{1}[a-zA-Z]{2,4})$');
+    var VALIDATE_URL = new RegExp('^((ftp|http|https):\/\/)?www\.([A-z]{2,})\.([A-z]{2,})$');
+    var VALIDATE_DATE_ISO = new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$');
+    var VALIDATE_DIGITS = new RegExp('^[0-9]*$');
     var ErrorOption;
@@ -51,3 +56,5 @@ (function (ErrorOption) {
                 min: 'Please enter a value greater than or equal to {0}.',
-                regex: 'Please enter a correct value.'
+                regex: 'Please enter a correct value.',
+                tel: 'Please enter a valid 10 digit mobile number.',
+                pattern: 'Please enter a correct pattern value.',
             };
@@ -57,2 +64,4 @@ element = typeof element === 'string' ? dom_1.select(element, document) : element;
                 _this.element.setAttribute('novalidate', '');
+                _this.inputElements = dom_1.selectAll(_this.selectQuery, _this.element);
+                _this.createHTML5Rules();
                 _this.wireEvents();
@@ -141,6 +150,45 @@ }
         };
+        FormValidator.prototype.createHTML5Rules = function () {
+            for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
+                var input = _a[_i];
+                var defRules = ['regex', 'required', 'rangeLength', 'maxLength', 'minLength', 'digits',
+                    'dateIso', 'pattern', 'type', 'min', 'max', 'range'];
+                var acceptedTypes = ['email', 'url', 'date', 'number', 'digits'];
+                var allRule = {};
+                for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {
+                    var rule = defRules_1[_b];
+                    if (input.getAttribute(rule) !== null) {
+                        switch (rule) {
+                            case 'required':
+                                this.defRule(input, allRule, rule, input.required);
+                                break;
+                            case 'type':
+                                if (acceptedTypes.indexOf(input.type) !== -1) {
+                                    this.defRule(input, allRule, input.type, true);
+                                }
+                                break;
+                            case 'rangeLength':
+                            case 'range':
+                                this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));
+                                break;
+                            default:
+                                this.defRule(input, allRule, rule, input.getAttribute(rule));
+                        }
+                    }
+                }
+                if (Object.keys(allRule).length !== 0) {
+                    this.addRules(input.name, allRule);
+                }
+            }
+        };
+        FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {
+            var message = input.getAttribute('data-' + ruleName + '-message');
+            if (message) {
+                value = [value, message];
+            }
+            ruleCon[ruleName] = value;
+        };
         FormValidator.prototype.wireEvents = function () {
-            var inputElements = dom_1.selectAll(this.selectQuery, this.element);
-            for (var _i = 0, inputElements_1 = inputElements; _i < inputElements_1.length; _i++) {
-                var input = inputElements_1[_i];
+            for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
+                var input = _a[_i];
                 if (FormValidator_1.isCheckable(input)) {
@@ -160,5 +208,4 @@ event_handler_1.EventHandler.add(input, 'click', this.clickHandler, this);
         FormValidator.prototype.unwireEvents = function () {
-            var inputElements = dom_1.selectAll(this.selectQuery, this.element);
-            for (var _i = 0, inputElements_2 = inputElements; _i < inputElements_2.length; _i++) {
-                var input = inputElements_2[_i];
+            for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
+                var input = _a[_i];
                 event_handler_1.EventHandler.clearEvents(input);
@@ -249,4 +296,4 @@ }
                         this.inputElement.setAttribute('aria-required', 'true');
-                        break;
                     }
+                    break;
                 }
@@ -266,3 +313,3 @@ else {
             this.trigger('validationBegin', args);
-            if (typeof currentRule[0] === 'function') {
+            if (currentRule && typeof currentRule[0] === 'function') {
                 var fn = currentRule[0];
@@ -362,14 +409,9 @@ return fn.call(this, { element: this.inputElement, value: this.inputElement.value });
         email: function (option) {
-            return new RegExp('^[a-zA-Z0-9.!#$%&\'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?' +
-                '(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$').test(option.value);
+            return VALIDATE_EMAIL.test(option.value);
         },
         url: function (option) {
-            return new RegExp('^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|(www\\.)?){1}([0-9A-Za-z-\\.@:%_\‌​+~#=]+)' +
-                '+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?').test(option.value);
+            return VALIDATE_URL.test(option.value);
         },
-        date: function (option) {
-            return !isNaN(new Date(option.value).getTime());
-        },
         dateIso: function (option) {
-            return new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$').test(option.value);
+            return VALIDATE_DATE_ISO.test(option.value);
         },
@@ -380,3 +422,3 @@ number: function (option) {
         digits: function (option) {
-            return new RegExp('^[0-9]*$').test(option.value);
+            return VALIDATE_DIGITS.test(option.value);
         },
@@ -397,11 +439,20 @@ maxLength: function (option) {
         },
+        date: function (option) {
+            return !isNaN(new Date(option.value).getTime());
+        },
         max: function (option) {
-            return !isNaN(Number(option.value)) && Number(option.value) <= option.param;
+            if (!isNaN(Number(option.value))) {
+                return +option.value <= option.param;
+            }
+            return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();
         },
         min: function (option) {
-            return !isNaN(Number(option.value)) && Number(option.value) >= option.param;
+            if (!isNaN(Number(option.value))) {
+                return +option.value >= option.param;
+            }
+            return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();
         },
         regex: function (option) {
             return new RegExp(option.param).test(option.value);
-        }
+        },
     };
@@ -408,0 +459,0 @@ __decorate([

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2313629

increased by0.28%

Lines of code

30603

increased by0.5%

No dependency changes