v21.1.37 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 21.1.37 (2023-03-29)
+
+### Common
+
+#### Bug Fixes
+
+- `#F41815` - Resolved the dragged `card` element and mouse position mismatch issue in `kanban`.
+
 ## 21.1.35 (2023-03-23)
 
 ### Common

controls/base/package.json

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

controls/base/src/browser.ts

@@ -137,6 +137,18 @@ export class Browser {
         return Browser.getEvent('cancel');
     }
 
+    /**
+     * Check whether the browser on the iPad device is Safari or not
+     *
+     * @returns {boolean}
+     */
+
+    public static isSafari(): boolean {
+        return (Browser.isDevice && Browser.isIos && Browser.isTouch && typeof window !== 'undefined'
+         && window.navigator.userAgent.toLowerCase().indexOf('iphone') === -1
+        && window.navigator.userAgent.toLowerCase().indexOf('safari') > -1);
+    }
+
     /**
      * To get the value based on provided key and regX
      *

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.touchStartEvent, handler);
+            EventHandler.remove(ele || this.element,  Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler);
         } else {
-            EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);
+            EventHandler.add(ele || this.element,  Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler, this);
         }
     }
     /* istanbul ignore next */
@@ -427,14 +427,14 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
                 this.initialize(evt, target);
             },
             this.tapHoldThreshold);
-        EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);
-        EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);
+        EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.removeTapholdTimer, this);
+        EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.removeTapholdTimer, this);
     }
     /* istanbul ignore next */
     private removeTapholdTimer(): void {
         clearTimeout(this.tapHoldTimer);
-        EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);
-        EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);
+        EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.removeTapholdTimer);
+        EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.removeTapholdTimer);
     }
     /* istanbul ignore next */
     private getScrollableParent(element: HTMLElement, axis: string): HTMLElement {
@@ -516,15 +516,15 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         if (this.externalInitialize) {
             this.intDragStart(evt);
         } else {
-            EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);
-            EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);
+            EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDragStart, this);
+            EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDestroy, this);
         }
         this.toggleEvents(true);
         if (evt.type !== 'touchstart' && this.isPreventSelect) {
             document.body.classList.add('e-prevent-select');
         }
         this.externalInitialize = false;
-        EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);
+        EventHandler.trigger(document.documentElement,  Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, evt);
     }
     private intDragStart(evt: MouseEvent & TouchEvent): void {
         this.removeTapholdTimer();
@@ -615,8 +615,8 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
             }
             this.dragElePosition = { top: pos.top, left: pos.left };
             setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));
-            EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);
-            EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);
+            EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDragStart);
+            EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDestroy);
             if (!isBlazor()) {
                 this.bindDragEvents(dragTargetElement);
             }
@@ -625,8 +625,8 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
 
     private bindDragEvents(dragTargetElement: HTMLElement): void {
         if (isVisible(dragTargetElement)) {
-            EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);
-            EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);
+            EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDrag, this);
+            EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDragStop, this);
             this.setGlobalDroppables(false, this.element, dragTargetElement);
         } else {
             this.toggleEvents();
@@ -962,10 +962,10 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         this.toggleEvents();
         document.body.classList.remove('e-prevent-select');
         this.element.setAttribute('aria-grabbed', 'false');
-        EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);
-        EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);
-        EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);
-        EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);
+        EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDragStart);
+        EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDragStop);
+        EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDestroy);
+        EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDrag);
         if (this.isDragStarted()) {
             this.isDragStarted(true);
         }
@@ -1062,7 +1062,7 @@ 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.element && this.element.classList.length > 0 && this.element.classList.value.indexOf("e-dialog") === -1 && document.scrollingElement) {
+        if (!this.element.classList.contains("e-dialog") && !this.element.classList.contains("e-card") && document.scrollingElement) {
             let isVerticalScroll: boolean = document.scrollingElement.scrollHeight > 0 && document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight && document.scrollingElement.scrollTop > 0;
             let isHorrizontalScroll: boolean = document.scrollingElement.scrollWidth > 0 && document.scrollingElement.scrollWidth > document.scrollingElement.clientWidth && document.scrollingElement.scrollLeft > 0;
             pageX = isHorrizontalScroll ? pageX - document.scrollingElement.scrollLeft : pageX;

controls/base/src/droppable.ts

@@ -104,7 +104,7 @@ export class Droppable extends Base<HTMLElement> implements INotifyPropertyChang
         this.wireEvents();
     }
     private wireEvents(): void {
-        EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);
+        EventHandler.add(this.element, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDrop, this);
     }
     // triggers when property changed
     // eslint-disable-next-line
@@ -166,7 +166,7 @@ export class Droppable extends Base<HTMLElement> implements INotifyPropertyChang
         return area;
     }
     public destroy(): void {
-        EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);
+        EventHandler.remove(this.element, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDrop);
         super.destroy();
     }
 }

controls/base/themestudio/styles/grids/excel-filter/_bootstrap-dark-definition.scss

@@ -15,6 +15,7 @@ $grid-xlfltable-border-spacing: 0 !default;
 $grid-xlfl-dropdown-padding-right: 11.25px !default;
 $grid-xlfl-min-height: 318px !default;
 $grid-exlfltr-ctxtmnu-max-height: 298px !default;
+$grid-bigger-exlfltr-ctxtmnu-max-height: 355px !default;
 $grid-xlfl-li-left-padding: 25px !default;
 $grid-xlfl-li-icon-margin-right: 10px !default;
 $grid-xlfl-dlg-padding-bottom: 5px !default;

controls/base/themestudio/styles/grids/excel-filter/_bootstrap-definition.scss

@@ -14,6 +14,7 @@ $grid-xlfltable-border-spacing: 0 !default;
 $grid-xlfl-dropdown-padding-right: 11.25px !default;
 $grid-xlfl-min-height: 318px !default;
 $grid-exlfltr-ctxtmnu-max-height: 298px !default;
+$grid-bigger-exlfltr-ctxtmnu-max-height: 355px !default;
 $grid-xlfl-li-left-padding: 25px !default;
 $grid-xlfl-li-icon-margin-right: 10px !default;
 $grid-xlfl-dlg-padding-bottom: 5px !default;

controls/base/themestudio/styles/grids/excel-filter/_bootstrap4-definition.scss

@@ -20,6 +20,7 @@ $grid-xlfltable-border-spacing: 0 !default;
 $grid-xlfl-dropdown-padding-right: 11.25px !default;
 $grid-xlfl-min-height: 318px !default;
 $grid-exlfltr-ctxtmnu-max-height: 298px !default;
+$grid-bigger-exlfltr-ctxtmnu-max-height: 355px !default;
 $grid-xlfl-li-left-padding: 25px !default;
 $grid-xlfl-li-icon-margin-right: 10px !default;
 $grid-xlfl-dlg-padding-bottom: 5px !default;

controls/base/themestudio/styles/grids/excel-filter/_bootstrap5-definition.scss

@@ -22,6 +22,7 @@ $grid-xlfltable-border-spacing: 0 !default;
 $grid-xlfl-dropdown-padding-right: 11.25px !default;
 $grid-xlfl-min-height: 318px !default;
 $grid-exlfltr-ctxtmnu-max-height: 298px !default;
+$grid-bigger-exlfltr-ctxtmnu-max-height: 355px !default;
 $grid-xlfl-li-left-padding: 25px !default;
 $grid-xlfl-li-icon-margin-right: 10px !default;
 $grid-xlfl-dlg-padding-bottom: 5px !default;

controls/base/themestudio/styles/grids/excel-filter/_fabric-dark-definition.scss

@@ -4,6 +4,7 @@ $grid-xlfltable-border-spacing: 0 !default;
 $grid-xlfl-dropdown-padding-right: 12px !default;
 $grid-xlfl-min-height: 314px !default;
 $grid-exlfltr-ctxtmnu-max-height: 298px !default;
+$grid-bigger-exlfltr-ctxtmnu-max-height: 355px !default;
 $grid-xlfl-li-left-padding: 35px !default;
 $grid-xlfl-li-icon-margin-right: 10px !default;
 $grid-xlfl-dlg-padding-bottom: 5px !default;