v22.2.5 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Common
+
+#### Bug Fixes
+
+- `#479520` - The issue with dragged elements and mouse positions getting misaligned has been resolved.
+
+## 22.1.38 (2023-07-11)
+
+### Common
+
+#### New Features
+
+- Added UTM parameters.
+
+## 22.1.34 (2023-06-21)
+
+### Common
+
+#### New Features
+
+- Provided the TypeScript 5 compatible support for the EJ2 components.
+
+## 21.2.9 (2023-06-06)
+
+### Common
+
+#### Bug Fixes
+
+- `#I461547` - The issue with the "popup showing on the entire page in the Chrome browser on iPad devices" has been resolved.
+
+## 21.1.35 (2023-05-9)
+
+### Common
+
+#### Bug Fixes
+
+- `#I451675` - The issue in the `template engine` when using `boolean` value has been resolved.
+
 ## 21.2.3 (2023-05-03)
 
 ### Common

controls/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-base",
-	"version": "21.2.3",
+	"version": "22.1.38",
 	"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/drag-drop.spec.ts

@@ -556,6 +556,15 @@ describe('draggable', () => {
                 expect(dragEvent).not.toHaveBeenCalled();
                 instance.intDestroy(mousedown);
             });
+            it('Set enableAutoScroll and perform drag operation within the draggable area', () => {
+                instance.enableAutoScroll = true;
+                mousemove = setMouseCordinates(mousemove, 25, 35);
+                mousemove.srcElement = mousemove.targetElement = mousemove.toElement = document.body;
+                EventHandler.trigger(<any>(document), 'mousemove', mousemove);
+                expect(instance.element.style.top).toBe('32px');
+                expect(instance.element.style.left).toBe('18px');
+                instance.intDestroy(mousedown);
+            });
         });
         describe('Drag without draggable area and negative values', () => {
             let instance: any;

controls/base/spec/fetch.spec.ts

@@ -0,0 +1,106 @@
+import { Fetch } from '../src/fetch';
+const link = 'https://api.example.com/data';
+const contentType = 'application/json; charset=utf-8';
+const fetchData = { name: 'John', age: 30 };
+
+describe('fetch', () => {
+    describe('constructor', () => {
+        beforeAll(() => {
+            // Spy on window.fetch method to mock default response object
+            spyOn(window, 'fetch').and.returnValue(Promise.resolve({
+                ok: true, 
+                headers: { get: () => 'application/json' },
+                json: () => Promise.resolve({ message: 'Mock response' })
+            }));
+        });
+
+        it('Different input parameters', function (done) {
+            // Create a new instance of Fetch class as url as string type
+            let fetchObj = new Fetch(link, 'GET');
+            expect(fetchObj.url).toEqual(link);
+            expect(fetchObj.type).toEqual('GET');
+
+            // Create a new instance of Fetch class as url as string type & assign type in instance
+            fetchObj = new Fetch(link);
+            fetchObj.type = 'GET';
+            expect(fetchObj.url).toEqual(link);
+            expect(fetchObj.type).toEqual('GET');
+
+            // Create a new instance of Fetch class as url as object type
+            fetchObj = new Fetch({
+                'url': link,
+                'type': 'POST',
+                'contentType': contentType,
+                'data': fetchData
+            });
+            fetchObj.send();
+            expect(fetchObj.url).toEqual(link);
+            expect(fetchObj.type).toEqual('POST');
+            expect(fetchObj.contentType).toEqual(contentType);
+            expect(fetchObj.data).toEqual(fetchData);
+
+            // Create a new instance of Fetch class using request object
+            let request = new Request(link, { method: 'GET' });
+            fetchObj = new Fetch({'fetchRequest':request});
+            expect(fetchObj.fetchRequest).toEqual(request);
+            done();
+        });
+
+        it('beforeSend event', function (done) { 
+            let doneFn = jasmine.createSpy('beforeSend').and.callFake((e: any) => {
+                expect(doneFn).toHaveBeenCalled();
+                e.cancel = true; done();
+            });
+            let fetchObj = new Fetch(link, 'GET');
+            fetchObj.beforeSend = doneFn;
+            fetchObj.send();
+        });
+    
+        it('onLoad event', function (done) { 
+            let doneFn = jasmine.createSpy('onLoad').and.callFake(() => {
+                expect(doneFn).toHaveBeenCalled();
+                done();
+            }); 
+            let fetchObj = new Fetch(link, 'GET');
+            fetchObj.onLoad = doneFn;
+            fetchObj.send();
+        });
+
+        it('GET method with onSuccess event', function (done) { 
+            let doneFn = jasmine.createSpy('onSuccess').and.callFake((e: any) => {
+                expect(doneFn).toHaveBeenCalled();
+                expect(e.message).toEqual('Mock response');
+                done();
+            });
+            let fetchObj = new Fetch(link, 'GET');
+            fetchObj.onSuccess = doneFn;
+            fetchObj.send();
+        });
+
+        it('POST method with onSuccess event', function (done) { 
+            let doneFn = jasmine.createSpy('onSuccess').and.callFake((e: any) => {
+                expect(doneFn).toHaveBeenCalled();
+                expect(e.message).toEqual('Mock response');
+                done();
+            });
+            let fetchObj = new Fetch(link, 'POST', contentType);
+            fetchObj.onSuccess = doneFn;
+            fetchObj.send(fetchData);
+        });
+    });
+
+    it('onFailure event', function (done) { 
+        spyOn(window, 'fetch').and.returnValue(Promise.resolve({
+            ok: false, 
+            headers: { get: () => 'application/json' },
+            json: () => Promise.resolve({ message: 'Mock response' })
+        }));
+        let doneFn = jasmine.createSpy('onFailure').and.callFake(() => {
+            expect(doneFn).toHaveBeenCalled();
+            done();
+        });
+        let fetchObj = new Fetch(link, 'GET');
+        fetchObj.onFailure = doneFn;
+        fetchObj.send();
+    });
+});

controls/base/spec/internationalization.spec.ts

@@ -193,6 +193,17 @@ describe('Internationalization', () => {
             setCurrencyCode('USD');
         });
     });
+    describe('Number Fromatting with local culture set', () => {
+        let numIntl: Internationalization = new Internationalization('ja');
+        it('numberfromatting using the formatNumber with option', () => {
+            let result: string = numIntl.formatNumber(0.45,{format:'###.00'});
+            expect(result).toBe('.45');
+        });
+        it('numberfromatting using the formatNumber with option', () => {
+            let result: string = numIntl.formatNumber(-0.45,{format:'0'});
+            expect(result).toBe('0');
+        });
+    });
     describe('Date Parser', () => {
         let dParseIntl: Internationalization = new Internationalization();
         let parseDate: Date = new Date();

controls/base/spec/intl/date-parser.spec.ts

@@ -867,7 +867,7 @@ describe('DateParser', () => {
             });
             it('year only format input returns correct year value',()=>{
                 let tFormatter: Date = DateParser.dateParser('en', { format:'yy',calendar:'islamic' }, cldrData)('40');
-                let iFormatter: Date = DateParser.dateParser('en', { format:'y',calendar:'islamic' }, cldrData)('1444');
+                let iFormatter: Date = DateParser.dateParser('en', { format:'y',calendar:'islamic' }, cldrData)('1445');
                 expect(iFormatter.getFullYear()).toBe(new Date().getFullYear());
             });
             it('full  skeletom eleton returns proper value',()=>{

controls/base/spec/santize-helper.spec.ts

@@ -58,7 +58,7 @@ describe('Sanitize Html Helper', () => {
         it('check the div element attribute while inline event bind', () => {
             expect(htmlObject.querySelector('#inline-event').hasAttribute('onmouseover')).toBe(false);
         });
-        
+
         it('should remove onpropertychange attribute', () => {
             expect(htmlObject.querySelector('#onpropertychange').hasAttribute('onpropertychange')).toBe(false);
         });

controls/base/spec/template-engine.spec.ts

@@ -199,6 +199,21 @@ describe('Template Engine', () => {
         expect(outDOM(template.compile(templateStr, cHelper), dsJSONArray)).toEqual(result);
     });
 
+    
+    it('Check initializeCSPTemplate method', () => {
+        let cHelper: any = {
+            uCase: (str: string) => {
+                return str.toUpperCase();
+            }
+        };
+        function templateStr(data: any) {
+            return `<div>${cHelper.uCase(data[0].name)}${data[0].info.id}</div>`
+        }
+        template.initializeCSPTemplate(templateStr, cHelper);
+        let result: string = templateStr(dsJSONArray);
+        expect(result).toEqual('<div>ONE01</div>');
+    });
+
     it('custom engine', () => {
         let spyCompiler = jasmine.createSpy("compile");
         class CustomEngine implements template.ITemplateEngine {

controls/base/spec/template.spec.ts

@@ -31,6 +31,7 @@ let arrayOfObj = [
     }
 ];
 let specialCharValue = [{'@ShipCountry': 'France'}];
+let dsJSONArrayBoolean: any=[{name: true,info:{ id:'01'} }, { name: false, info: { id:'02'} }];
 let dsJSONArray: any = [{ name: 'one', info: { id: '01' } }, { name: 'two', info: { id: '02' } }];
 let dsSubArray: any = [{ name: 'one', items: ['AR Item1', 'AR Item2'] }, { name: 'two', items: ['AR Item1', 'AR Item2'] }];
 let dsJSONSubArray: any = [{ name: 'one', info: { id: '01', items: ['AR Item1', 'AR Item2'] } }, { name: 'two', info: { id: '02', items: ['AR Item1', 'AR Item2'] } }];
@@ -255,6 +256,14 @@ describe('Template', () => {
         expect(outDOM(template.compile(templateStr), dsJSONArray)).toEqual(result);
     });
 
+    it('JSON Array Input With IF ELSE Condition Boolean', () => {
+        let templateStr: string = '<div>${if(name===true)}${info.id}${else}${name}${/if}</div>';
+        let result: Element[] = [];
+        result.push(createElement('div', { innerHTML: '01' }));
+        result.push(createElement('div', { innerHTML: 'false' }));
+        expect(outDOM(template.compile(templateStr), dsJSONArrayBoolean)).toEqual(result);
+    });
+    
     it('JSON Array Input With Multiple IF Condition', () => {
         let templateStr: string = '<div>${if(name=="one" && info.id != "01")}${info.id}${/if}</div>';
         let result: Element[] = [];
@@ -412,4 +421,50 @@ describe('Template', () => {
         expect(outDOM(template.compile(templateStr), arrayOfObj)).toEqual(result);
     });
 
+    it('JSON Array Input with function template', () => {
+        let templateFunc: Function = (data: any) => `<span>${data['IDPRATICA']}</span>`;
+        let result: HTMLElement = document.createElement('span');
+        result.textContent = '700';
+        expect(outDOM(template.compile(templateFunc), arrayOfObj)[0]).toEqual(result);
+    });
+
+    it('JSON Array Input with function template with if condition', () => {;
+        let templateFunc: Function = (data: any) => `${data['IDPRATICA'] === 700 ? `<span>${data['IDPRATICA']}</span>` : ''}`;
+        let result: HTMLElement = document.createElement('span');
+        result.textContent = '700';        
+        expect(outDOM(template.compile(templateFunc), arrayOfObj)[0]).toEqual(result);
+    });
+
+    it('JSON Array Input with complex function template', () => {
+        let data: any = {
+            people: [
+                { firstName: "Todd", age: 16 },
+                { firstName: "Mike", age: 23, driver: true },
+                { firstName: "Amanda", age: 21 },
+                { firstName: "Stacy", age: 19 }
+            ]
+        };
+        let output: string = "<ul><li style='color: red;'>Name: Todd Age: 16</li><li style='color: green;'>Name: Mike Age: 23 is a driver.</li><li style='color: blue;'>Name: Amanda Age: 21</li><li style='color: red;'>Name: Stacy Age: 19</li></ul>";
+        var templateFunc: (data: any) => string = ({ people }) => {
+            var result = "<ul>";
+            for (let i = 0; i < people.length; i++) {
+                let person = people[i];
+
+                if (person.age > 20) {
+                    if (person.driver) {
+                        result += `<li style='color: green;'>Name: ${person.firstName} Age: ${person.age} is a driver.</li>`;
+                    } else {
+                        result += `<li style='color: blue;'>Name: ${person.firstName} Age: ${person.age}</li>`;
+                    }
+                } else {
+                    result += `<li style='color: red;'>Name: ${person.firstName} Age: ${person.age}</li>`;
+                }
+            }
+            result += "</ul>";
+            return result;
+        };
+        let outputDOM: Function = template.compile(templateFunc);
+        expect(outputDOM(data)).toEqual(output);
+    });
+
 });

controls/base/src/browser.ts

@@ -159,7 +159,7 @@ export class Browser {
 
     private static getValue(key: string, regX: RegExp): Object {
         const browserDetails: {} = typeof window !== 'undefined' ? window.browserDetails : {};
-        if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true) {
+        if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true && !REGX_BROWSER.CHROME.test(navigator.userAgent)) {
             browserDetails['isIos'] = true;
             browserDetails['isDevice'] = true;
             browserDetails['isTouch'] = true;

controls/base/src/draggable.ts

@@ -412,9 +412,9 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         }
         const handler: Function = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;
         if (isUnWire) {
-            EventHandler.remove(ele || this.element,  Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler);
+            EventHandler.remove(ele || this.element, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler);
         } else {
-            EventHandler.add(ele || this.element,  Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler, this);
+            EventHandler.add(ele || this.element, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler, this);
         }
     }
     /* istanbul ignore next */
@@ -524,7 +524,7 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
             document.body.classList.add('e-prevent-select');
         }
         this.externalInitialize = false;
-        EventHandler.trigger(document.documentElement,  Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, evt);
+        EventHandler.trigger(document.documentElement, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, evt);
     }
     private intDragStart(evt: MouseEvent & TouchEvent): void {
         this.removeTapholdTimer();
@@ -725,6 +725,9 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         const dTop: number = this.position.top - this.diffY;
         const styles: CSSStyleDeclaration = getComputedStyle(helperElement);
         if (this.dragArea) {
+            if (this.enableAutoScroll) {
+                this.setDragArea();
+            }
             if (this.pageX !== pagex || this.skipDistanceCheck) {
                 const helperWidth: number = helperElement.offsetWidth + (parseFloat(styles.marginLeft)
                     + parseFloat(styles.marginRight));
@@ -797,7 +800,9 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
                         draEleTop -= marginTop;
                     }
                 }
-                draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;
+                if (this.dragArea) {
+                    draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;
+                }
             }
             if ((top - iTop) < 0) {
                 if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {