v19.4.38 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 19.4.38 (2021-12-17)
+
+### Common
+
+#### Bug Fixes
+
+- `I324684` - Resolved the `Treeview` check box issues in safari browser.
+
 ## 17.4.51 (2020-02-25)
 
 ### Common

controls/base/ReadMe.md

@@ -99,5 +99,5 @@ Check the license detail [here](https://github.com/syncfusion/ej2-base/blob/mast
 
 Check the changelog [here](https://ej2.syncfusion.com/documentation/release-notes?utm_source=npm&utm_campaign=ej2-base)
 
-    © Copyright 2019 Syncfusion, Inc. All Rights Reserved.
+    © Copyright 2021 Syncfusion, Inc. All Rights Reserved.
     The Syncfusion Essential Studio license and copyright applies to this distribution.

controls/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-base",
-	"version": "18.39.0",
+	"version": "18.43.1",
 	"description": "A common package of Essential JS 2 base libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/spec/util.spec.ts

@@ -190,19 +190,23 @@ describe('Util', () => {
         }, 1000);
     });
 
-    it('formatunit method auto value testing', () => {
+    it('formatunit method value testing', () => {
         expect(Util.formatUnit('auto')).toEqual('auto');
-    });
-
-    it('formatunit method percentage value testing', () => {
-        expect(Util.formatUnit('100%')).toEqual('100%');
-    });
-
-    it('formatunit method pixel value testing', () => {
+        expect(Util.formatUnit('100cm')).toEqual('100cm');
+        expect(Util.formatUnit('100mm')).toEqual('100mm');
+        expect(Util.formatUnit('100in')).toEqual('100in');
         expect(Util.formatUnit('100px')).toEqual('100px');
-    });
-
-    it('formatunit method number value testing', () => {
+        expect(Util.formatUnit('100pt')).toEqual('100pt');
+        expect(Util.formatUnit('100pc')).toEqual('100pc');
+        expect(Util.formatUnit('100%')).toEqual('100%');
+        expect(Util.formatUnit('100em')).toEqual('100em');
+        expect(Util.formatUnit('100ex')).toEqual('100ex');
+        expect(Util.formatUnit('100ch')).toEqual('100ch');
+        expect(Util.formatUnit('100rem')).toEqual('100rem');
+        expect(Util.formatUnit('100vw')).toEqual('100vw');
+        expect(Util.formatUnit('100vh')).toEqual('100vh');
+        expect(Util.formatUnit('100vmin')).toEqual('100vmin');
+        expect(Util.formatUnit('100vmax')).toEqual('100vmax');
         expect(Util.formatUnit(100)).toEqual('100px');
     });
     describe('addInstance function', () => {

controls/base/src/animation.ts

@@ -310,7 +310,7 @@ export interface AnimationOptions extends AnimationModel {
 export function rippleEffect(element: HTMLElement, rippleOptions?: RippleOptions, done?: Function): () => void {
     const rippleModel: RippleOptions = getRippleModel(rippleOptions);
     if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {
-        return Function;
+        return (() => {});
     }
     element.setAttribute('data-ripple', 'true');
     EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });

controls/base/src/browser.ts

@@ -150,6 +150,12 @@ export class Browser {
         if ('undefined' === typeof (<{ [key: string]: Object }>browserDetails)[key]) {
             return (<{ [key: string]: Object }>browserDetails)[key] = regX.test(Browser.userAgent);
         }
+        if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true) {
+            browserDetails['isIos'] = true;
+            browserDetails['isDevice'] = true;
+            browserDetails['isTouch'] = true;
+            browserDetails['isPointer'] = true;
+        }
         return (<{ [key: string]: Object }>browserDetails)[key];
     }
 

controls/base/src/dom.ts

@@ -288,15 +288,16 @@ export function selectAll(selector: string, context: Document | Element = docume
  * @private
  */
 function querySelectId(selector: string): string {
-    if (selector.match(/#[0-9]/g)) {
+    const charRegex: RegExp = /(!|"|\$|%|&|'|\(|\)|\*|\/|:|;|<|=|\?|@|\]|\^|`|{|}|\||\+|~)/g;
+    if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {
         const idList: string[] = selector.split(',');
         for (let i: number = 0; i < idList.length; i++) {
             const list: string[] = idList[i].split(' ');
             for (let j: number = 0; j < list.length; j++) {
                 if (list[j].indexOf('#') > -1) {
                     if (!list[j].match(/\[.*\]/)) {
                         const splitId: string[] = list[j].split('#');
-                        if (splitId[1].match(/^\d/)) {
+                        if (splitId[1].match(/^\d/) || splitId[1].match(charRegex)) {
                             const setId: string[] = list[j].split('.');
                             setId[0] = setId[0].replace(/#/, '[id=\'') + '\']';
                             list[j] = setId.join('.');

controls/base/src/draggable-model.d.ts

@@ -58,6 +58,7 @@ export interface DraggableModel {
 
     /**
      * Specifies the callback function for drag event.
+
      * @event
      */
     drag?: Function;

controls/base/src/draggable.ts

@@ -224,6 +224,7 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
     public isPreventSelect: boolean;
     /**
      * Specifies the callback function for drag event.
+
      * @event
      */
     @Event()
@@ -324,7 +325,7 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
      */
     @Property(750)
     public tapHoldThreshold: number;
-    /**
+     /**
      * @private
      */
     @Property(false)
@@ -352,6 +353,7 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
     private prevTop: number = 0;
     private dragProcessStarted: boolean = false;
     /* tslint:disable no-any */
+    private eleTop: number = 0;
     private tapHoldTimer: any = 0;
     private dragElePosition: any;
     public currentStateTarget: any;
@@ -572,6 +574,11 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
             if (this.clone && marginTop !== 0) {
                 pos.top += marginTop;
             }
+            this.eleTop = !isNaN(parseFloat(styles.top)) ? parseFloat(styles.top) - this.offset.top : 0;
+            /* istanbul ignore next */
+            // if (this.eleTop > 0) {
+            //     pos.top += this.eleTop;
+            // }
             if (this.enableScrollHandler && !this.clone) {
                 pos.top -= this.parentScrollY;
                 pos.left -= this.parentScrollX;
@@ -688,7 +695,6 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         let dLeft: number = this.position.left - this.diffX;
         let dTop: number = this.position.top - this.diffY;
         let styles: CSSStyleDeclaration = getComputedStyle(helperElement);
-        let marginTop: number = parseFloat(styles.marginTop);
         if (this.dragArea) {
             if (this.pageX !== pagex || this.skipDistanceCheck) {
                 let helperWidth: number = helperElement.offsetWidth + (parseFloat(styles.marginLeft)
@@ -732,37 +738,42 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
             this.dragLimit.top = this.clone ? this.dragLimit.top : 0;
             draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);
             draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);
-            // when drag-element has margin-top
-            /* istanbul ignore next */
-            if (marginTop > 0) {
-                if (this.clone) {
-                    draEleTop += this.element.offsetTop;
-                    if (dTop < 0) {
-                        if ((this.element.offsetTop + dTop) >= 0) {
-                            draEleTop = this.element.offsetTop + dTop;
-                        } else {
-                            draEleTop -= this.element.offsetTop;
-                        }
+        } else {
+            draEleTop = top - iTop;
+            draEleLeft = left - iLeft;
+        }
+        let marginTop: number = parseFloat(getComputedStyle(this.element).marginTop);
+        // when drag-element has margin-top
+        /* istanbul ignore next */
+        if (marginTop > 0) {
+            if (this.clone) {
+                draEleTop += marginTop;
+                if (dTop < 0) {
+                    if ((marginTop + dTop) >= 0) {
+                        draEleTop = marginTop + dTop;
+                    } else {
+                        draEleTop -= marginTop;
                     }
-                    draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;
                 }
-                if ((top - iTop) < 0) {
-                    if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {
-                        let tempDraEleTop: number = this.dragLimit.top + dTop - iTop;
-                        if ((tempDraEleTop + marginTop + iTop) < 0) {
-                            draEleTop -= marginTop + iTop;
-                        } else {
-                            draEleTop = tempDraEleTop;
-                        }
-                    } else {
+                draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;
+            }
+            if ((top - iTop) < 0) {
+                if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {
+                    let tempDraEleTop: number = this.dragLimit.top + dTop - iTop;
+                    if ((tempDraEleTop + marginTop + iTop) < 0) {
                         draEleTop -= marginTop + iTop;
+                    } else {
+                        draEleTop = tempDraEleTop;
                     }
+                } else {
+                    draEleTop -= marginTop + iTop;
                 }
             }
-        } else {
-            draEleTop = top - iTop;
-            draEleLeft = left - iLeft;
         }
+        /* istanbul ignore next */
+        // if(this.eleTop > 0) {
+        //      draEleTop += this.eleTop;
+        // }
         if (this.enableScrollHandler && !this.clone) {
             draEleTop -= this.parentScrollY;
             draEleLeft -= this.parentScrollX;
@@ -938,11 +949,6 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
             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 && !isdragscroll) {
-            this.getScrollableValues();
-            pageY -=  this.tempScrollHeight ? this.parentScrollY : 0;
-            pageX -=  this.tempScrollWidth ? this.parentScrollX : 0;
-        }
         return {
             left: pageX - (this.margin.left + this.cursorAt.left),
             top: pageY - (this.margin.top + this.cursorAt.top)

controls/base/src/intl/intl-base.ts

@@ -1212,7 +1212,7 @@ export namespace IntlBase {
         }
         iCulture = iCulture.slice(0, 2).toUpperCase() + iCulture.substr(2);
         if (mapper) {
-            firstDay = mapper[iCulture] || defaultFirstDay;
+            firstDay = mapper[iCulture] || mapper[iCulture.slice(0, 2)] || defaultFirstDay;
         }
         return firstDayMapper[firstDay];
     }
@@ -1247,7 +1247,7 @@ export namespace IntlBase {
         if (day < 4) {
             weeknum = Math.floor((daynum + day - 1) / 7) + 1;
             if (weeknum > 52) {
-                const nYear: Date = new Date(this.getFullYear() + 1, 0, 1);
+                const nYear: Date = new Date(date.getFullYear() + 1, 0, 1);
                 let nday: number = nYear.getDay();
                 nday = nday >= 0 ? nday : nday + 7;
                 weeknum = nday < 4 ? 1 : 53;

controls/base/src/template.ts

@@ -77,16 +77,18 @@ export function compile(template: string, helper?: Object, ignorePrefix?: boolea
         }
         str = str.replace(str, str1);
     }
-    else if(str.match(hrefRegex)) {
-        var check = str.match(hrefRegex);
-        var str1 = str;
-        for (var i=0; i < check.length; i++) {
-            var check1 = str.match(hrefRegex)[i].split('href=')[1];
-            var change = check1.match(/^'/) !== null ? check1.replace(/^'/, '\"') : check1;
-            change =change.match(/.$/)[0] === '\\'' ? change.replace(/.$/,'\"') : change;
-            str1 = str1.replace(check1, change);
+    else if (str.match(/(?:href='')/) === null) {
+        if(str.match(hrefRegex)) {
+            var check = str.match(hrefRegex);
+            var str1 = str;
+            for (var i=0; i < check.length; i++) {
+                var check1 = str.match(hrefRegex)[i].split('href=')[1];
+                var change = check1.match(/^'/) !== null ? check1.replace(/^'/, '\"') : check1;
+                change =change.match(/.$/)[0] === '\\'' ? change.replace(/.$/,'\"') : change;
+                str1 = str1.replace(check1, change);
+            }
+            str = str.replace(str, str1);
         }
-        str = str.replace(str, str1);
     }
     `;
     const fnCode: string = "var str=\"" + evalExpResult + "\";" + condtion + " return str;";

controls/base/src/util.ts

@@ -359,6 +359,12 @@ export function throwError(message: string): void {
 export function print(element: Element, printWindow?: Window): Window {
     const div: Element = document.createElement('div');
     const links: HTMLElement[] = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('base, link, style'));
+    const blinks: HTMLElement[] = [].slice.call(document.getElementsByTagName('body')[0].querySelectorAll('link, style'));
+    if (blinks.length) {
+        for (let l: number = 0, len: number = blinks.length; l < len; l++) {
+            links.push(blinks[l]);
+        }
+    }
     let reference: string = '';
     if (isNullOrUndefined(printWindow)) {
         printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');
@@ -393,7 +399,7 @@ export function print(element: Element, printWindow?: Window): Window {
  */
 export function formatUnit(value: number | string): string {
     const result: string = <string>value + '';
-    if (result === 'auto' || result.indexOf('%') !== -1 || result.indexOf('px') !== -1) {
+    if (result.match(/auto|cm|mm|in|px|pt|pc|%|em|ex|ch|rem|vw|vh|vmin|vmax/)) {
         return result;
     }
 

controls/base/styles/_fluent-dark-definition.scss

@@ -0,0 +1,10 @@
+@import 'common/mixin.scss';
+@import 'definition/fluent-dark.scss';
+
+$font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $orange20 !default;
+$success-font-color: $green20 !default;
+$information-font-color: $white !default;

controls/base/styles/_fluent-definition.scss

@@ -0,0 +1,10 @@
+@import 'common/mixin.scss';
+@import 'definition/fluent.scss';
+
+$font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $orange20 !default;
+$success-font-color: $green20 !default;
+$information-font-color: $white !default;

controls/base/styles/common/_core.scss

@@ -7,6 +7,42 @@
     font-weight: $font-weight;
   }
 
+  $white: #fff;
+  $background: #e82824;
+
+  .sf-license-warning {
+    background: $background;
+    color: $white;
+    font-family: 'Segoe UI';
+    font-size: medium;
+    left: 0;
+    line-height: 45px;
+    opacity: .75;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    top: 0;
+    z-index: 999999999;
+  }
+
+  .sf-license-close-btn {
+    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIyMCIgd2lkdGg9IjIwIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+ICA8Zz4gICAgPHBhdGggaWQ9InBhdGgxIiB0cmFuc2Zvcm09InJvdGF0ZSgxLDEyOCwxMjgpIHRyYW5zbGF0ZSg1OS4wMTA3Nzk0NDEwNDU1LDU5KSBzY2FsZSg0LjMxMjUwMDI1NzA0NTA1LDQuMzEyNTAwMjU3MDQ1MDUpIiBmaWxsPSIjZmZmZmZmIiBkPSJNMjkuNTkwODE4LDBDMzAuMjA2OTYzLDAgMzAuODIzMjI3LDAuMjM0NDk5OTMgMzEuMjkyMjI5LDAuNzAzNDk5NzkgMzIuMjI5MjU2LDEuNjQwNTAwMSAzMi4yMjkyNTYsMy4xNjA1MDA1IDMxLjI5MjIyOSw0LjEwMDQ5OTJMMTkuMzk4MDAzLDE1Ljk5ODQ5OCAzMS4yOTIyMjksMjcuODkyNDk1QzMyLjIyOTI1NiwyOC44Mjk0OTkgMzIuMjI5MjU2LDMwLjM0OTQ5NiAzMS4yOTIyMjksMzEuMjk0NDk2IDMwLjM1NDIyNywzMi4yMzE1IDI4LjgyNzE2NCwzMi4yMzE1IDI3Ljg5MDEzOSwzMS4yOTQ0OTZMMTUuOTk3OTg4LDE5LjM5OTQ5OSA0LjEwNDc5OTIsMzEuMjk2NTAyQzMuMTY3NzczNCwzMi4yMzQ0OTggMS42Mzk3MzQ3LDMyLjIzNDQ5OCAwLjcwMjc2OTY5LDMxLjI5NjUwMiAtMC4yMzQyNTY1NiwzMC4zNTI1MDIgLTAuMjM0MjU2NTYsMjguODMyNDk4IDAuNzAyNzY5NjksMjcuODk0NTAyTDEyLjU5NjkzNCwxNS45OTg0OTggMC43MDI3Njk2OSw0LjEwMjQ5ODFDLTAuMjM0MjU2NTYsMy4xNjU0OTc4IC0wLjIzNDI1NjU2LDEuNjQ1NDk3MyAwLjcwMjc2OTY5LDAuNzA1NDk4NyAxLjYzOTczNDcsLTAuMjMxNTAxNTggMy4xNjc3NzM0LC0wLjIzMTUwMTU4IDQuMTA0Nzk5MiwwLjcwNTQ5ODdMMTUuOTk2OTUsMTIuNTk3NDk3IDI3Ljg5MDEzOSwwLjcwMzQ5OTc5QzI4LjM1ODY1LDAuMjM0NDk5OTMsMjguOTc0Njc0LDAsMjkuNTkwODE4LDB6IiAvPiAgPC9nPjwvc3ZnPg==');
+    cursor: pointer;
+    height: 20px;
+    margin-top: 14px;
+    padding-top: 10px;
+    position: absolute;
+    right: 20px;
+    width: 20px;
+  }
+
+  $warning: #ffd800;
+
+  .sf-license-warning a,
+  .sf-license-warning a:hover {
+    color: $warning;
+  }
+
   .e-error {
     color: $error-font-color;
     font-family: $font-family;

controls/base/styles/definition/_bootstrap-dark.scss

@@ -50,6 +50,7 @@ $brand-danger-font: #ac2a2a !default;
 $base-font: #000 !default;
 $shadow: #000 !default;
 $skin-name: 'bootstrap-dark' !default;
+$theme-name: 'bootstrap-dark' !default;
 
 // mapping Bootstrap variables
 $grey-base: $gray-base !default;

controls/base/styles/definition/_bootstrap.scss

@@ -45,6 +45,7 @@ $brand-danger-font: #a94442 !default;
 $base-font: #000 !default;
 $shadow: #000 !default;
 $skin-name: 'bootstrap' !default;
+$theme-name: 'bootstrap' !default;
 
 // mapping Bootstrap variables
 $grey-base: $gray-base  !default;

controls/base/styles/definition/_bootstrap4.scss

@@ -36,3 +36,4 @@ $secondary-font: $white !default;
 $content-bg:    $white !default;
 $content-popup-bg: $white !default;
 $skin-name: 'bootstrap4' !default;
+$theme-name: 'bootstrap4' !default;

controls/base/styles/definition/_bootstrap5-dark.scss

@@ -350,6 +350,7 @@ $series-10: #3bc6cf;
 $series-11: #74b706;
 $series-12: #ea6266;
 $skin-name: 'bootstrap5' !default;
+$theme-name: 'bootstrap5-dark' !default;
 
 //Diagram Palette color
 $diagram-palette-background: $gray-300 !default;