v20.3.49 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,7 +2,23 @@
 
 ## [Unreleased]
 
-## 20.3.48 (2022-10-05)
+## 20.3.49 (2022-10-11)
+
+### Common
+
+#### Bug Fixes
+
+- `#SF395268`, `#SF395314` - The issue "Drag area is not getting properly when setting a value for `margin-top`" has been resolved.
+
+## 20.3.47 (2022-09-29)
+
+### Common
+
+#### Bug Fixes
+
+- The issue with the "React template element is not getting in the Grid `queryCellInfo` event" has been resolved.
+
+## 20.3.47 (2022-09-29)
 
 ### Common
 

controls/base/src/component.ts

@@ -372,7 +372,7 @@ export abstract class Component<ElementType extends HTMLElement> extends Base<El
     }
 
     //tslint:disable-next-line
-    protected renderReactTemplates(): void {
+    protected renderReactTemplates(callback?: any): void {
         //No Code
     }
 

controls/base/src/draggable.ts

@@ -739,11 +739,11 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         let draEleLeft: number;
         if (this.dragArea) {
             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);
+            draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - this.borderWidth.top);
+            draEleLeft = (left - iLeft) < 0 ? this.dragLimit.left : (left - this.borderWidth.left);
         } else {
-            draEleTop = top - iTop;
-            draEleLeft = left - iLeft;
+            draEleTop = top - this.borderWidth.top;
+            draEleLeft = left - this.borderWidth.left;
         }
         let marginTop: number = parseFloat(getComputedStyle(this.element).marginTop);
         // when drag-element has margin-top
@@ -773,6 +773,13 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
                 }
             }
         }
+
+        if (this.dragArea) {
+            let helperHeight: number = helperElement.offsetHeight + (parseFloat(styles.marginTop)
+                    + parseFloat(styles.marginBottom));
+            draEleTop = (draEleTop + helperHeight) > this.dragLimit.bottom ? (this.dragLimit.bottom - helperHeight) : draEleTop;
+        }
+        
         /* istanbul ignore next */
         // if(this.eleTop > 0) {
         //      draEleTop += this.eleTop;
@@ -835,16 +842,16 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
     }
     private getScrollPosition(nodeEle: HTMLElement, draEleTop: number): void {
         if (nodeEle && nodeEle === document.scrollingElement) {
-            if ((nodeEle.clientHeight - nodeEle.getBoundingClientRect().top - this.helperElement.clientHeight) < draEleTop
-                && nodeEle.getBoundingClientRect().height > draEleTop) {
+            if ((nodeEle.clientHeight + document.scrollingElement.scrollTop - this.helperElement.clientHeight) < draEleTop
+                && nodeEle.getBoundingClientRect().height + this.parentClientRect.top > draEleTop) {
                 nodeEle.scrollTop += this.helperElement.clientHeight;
-            }else if (nodeEle.scrollHeight - nodeEle.clientHeight  > draEleTop) {
+            }else if (nodeEle.scrollTop > draEleTop - this.helperElement.clientHeight) {
                 nodeEle.scrollTop -= this.helperElement.clientHeight;
             }
         }else if (nodeEle && nodeEle !== document.scrollingElement) {
-            if ((nodeEle.clientHeight + nodeEle.getBoundingClientRect().top - this.helperElement.clientHeight) < draEleTop) {
+            if ((nodeEle.clientHeight + nodeEle.getBoundingClientRect().top - this.helperElement.clientHeight + document.scrollingElement.scrollTop - this.borderWidth.top - this.borderWidth.bottom) <= draEleTop) {
                 nodeEle.scrollTop += this.helperElement.clientHeight;
-            }else if (nodeEle.getBoundingClientRect().top  > (draEleTop - this.helperElement.clientHeight)) {
+            }else if (nodeEle.getBoundingClientRect().top  > (draEleTop - this.helperElement.clientHeight - document.scrollingElement.scrollTop)) {
                 nodeEle.scrollTop -= this.helperElement.clientHeight;
             }
         }
@@ -952,7 +959,7 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         if (ele) {
             let elementArea: ClientRect = ele.getBoundingClientRect();
             eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;
-            eleHeightBound = ele.scrollHeight ? ele.scrollHeight : elementArea.bottom - elementArea.top;
+            eleHeightBound = ele.scrollHeight ? (this.dragArea && this.helperElement.classList.contains('e-treeview')) ? ele.clientHeight : ele.scrollHeight : elementArea.bottom - elementArea.top;
             let keys: string[] = ['Top', 'Left', 'Bottom', 'Right'];
             let styles: any = getComputedStyle(ele);
             for (let i: number = 0; i < keys.length; i++) {
@@ -963,7 +970,7 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
                 (<any>this.borderWidth)[lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);
                 (<any>this.padding)[lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);
             }
-            top = elementArea.top;
+            top = elementArea.top + document.scrollingElement.scrollTop;
             left = elementArea.left;
             this.dragLimit.left = left + this.borderWidth.left + this.padding.left;
             this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;
@@ -1072,4 +1079,4 @@ export class Draggable extends Base<HTMLElement> implements INotifyPropertyChang
         this.toggleEvents(true);
         super.destroy();
     }
-}
+}

controls/base/themestudio/styles/dropdowns/multi-select/_bootstrap-dark-definition.scss

@@ -38,7 +38,9 @@ $ddl-closer-margin-top-bigger: -4em !default;
 $ddl-chip-close-top: 9px !default;
 $ddl-chip-close-left: 10px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 30px !default;
+$ddl-chip-close-width: 30px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 28px !default;
 $ddl-chip-mobile-height: 32px !default;
@@ -53,6 +55,7 @@ $ddl-delimviewheight: 32px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-closer-hooker-color: $grey-dark-font !default;
 $ddl-chip-hooker-square: 40px !default;
+$ddl-chip-hooker-width: 40px !default;
 $ddl-sel-hover-chip-bg-color: $grey-99 !default;
 $ddl-sel-chip-hover-font-color: $grey-dark-font !default;
 $ddl-chip-hooker-right: 0 !default;
@@ -136,19 +139,22 @@ $ddl-select-all-height-small: 22px !default;
 $ddl-small-chip-height: 22px !default;
 $ddl-chip-small-font-size: 13px !default;
 $ddl-small-chip-close-square: 24px !default;
+$ddl-small-chip-close-width: 24px !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 13px !default;
 $ddl-small-closer-margin-top: -3.5em !default;
 $ddl-chip-close-hooker-small-left: 8px !default;
+$ddl-chip-close-hooker-small-bigger-left: 8px !default;
 $ddl-delimviewheight-small: 26px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 34px !default;
 $ddl-bigger-small-chip-height: 28px !default;
 $ddl-chip-bigger-small-font-size: 15px !default;
 $ddl-bigger-small-chip-close-square: 30px !default;
+$ddl-bigger-small-chip-close-width: 30px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 30px !default;
 $ddl-bigger-small-input-height: 34px !default;

controls/base/themestudio/styles/dropdowns/multi-select/_bootstrap-definition.scss

@@ -37,7 +37,9 @@ $ddl-closer-margin-top-bigger: -4em !default;
 $ddl-chip-close-top: 9px !default;
 $ddl-chip-close-left: 10px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 30px !default;
+$ddl-chip-close-width: 30px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 28px !default;
 $ddl-chip-mobile-height: 32px !default;
@@ -52,6 +54,7 @@ $ddl-delimviewheight: 32px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-closer-hooker-color: $grey-light-font !default;
 $ddl-chip-hooker-square: 40px !default;
+$ddl-chip-hooker-width: 40px !default;
 $ddl-sel-hover-chip-bg-color: $grey-dd !default;
 $ddl-sel-chip-hover-font-color: $grey-light-font !default;
 $ddl-chip-hooker-right: 0 !default;
@@ -134,19 +137,22 @@ $ddl-select-all-height-small: 22px !default;
 $ddl-small-chip-height: 22px !default;
 $ddl-chip-small-font-size: 13px !default;
 $ddl-small-chip-close-square: 24px !default;
+$ddl-small-chip-close-width: 24px !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 13px !default;
 $ddl-small-closer-margin-top: -3.5em !default;
 $ddl-chip-close-hooker-small-left: 8px !default;
+$ddl-chip-close-hooker-small-bigger-left: 8px !default;
 $ddl-delimviewheight-small: 26px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 34px !default;
 $ddl-bigger-small-chip-height: 28px !default;
 $ddl-chip-bigger-small-font-size: 15px !default;
 $ddl-bigger-small-chip-close-square: 30px !default;
+$ddl-bigger-small-chip-close-width: 30px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 30px !default;
 $ddl-bigger-small-input-height: 34px !default;

controls/base/themestudio/styles/dropdowns/multi-select/_bootstrap4-definition.scss

@@ -35,9 +35,11 @@ $ddl-icon-margin-top-bigger: -2.25em !default;
 $ddl-clear-margin-top: -2.9em !default;
 $ddl-closer-margin-top-bigger: -3.5em !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 10px !default;
-$ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 10px 10px 10px 0 !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-close-square: 24px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-close-font: 8px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 28px !default;
@@ -52,6 +54,7 @@ $ddl-delimviewheight: 29px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-closer-hooker-font-bigger: 12px !default;
 $ddl-chip-hooker-square: 29px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-sel-hover-chip-bg-color: $gray-600 !default;
 $ddl-sel-chip-hover-font-color: $white !default;
 $ddl-chip-hooker-right: 0 !default;
@@ -74,7 +77,7 @@ $ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
 $ddl-rtl-chip-padding: 0 8px 0 0 !default;
 $ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
 $ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-overall-close-top: 10px !default;
 
 //$ddl-overall-bigger-close-top: 15px !default;
@@ -126,6 +129,7 @@ $ddl-chip-close-rtl-left: -15px !default;
 $ddl-close-icon-color: $gray-700 !default;
 $ddl-bigger-chip-close-font: 10px !default;
 $ddl-bigger-chip-close-square: 30px !default;
+$ddl-bigger-chip-close-width: auto !default;
 $ddl-bigger-close-top: 9px !default;
 $ddl-multi-checkbox-bgcolor: $primary-font !default;
 $ddl-multi-checkbox-border-color: $primary-font !default;
@@ -144,15 +148,17 @@ $ddl-select-all-height-small: 22px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 18px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 22px !default;
 $ddl-small-input-height: 22px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2.4em !default;
 $ddl-chip-small-content-padding: 0 8px 0 8px !default;
-$ddl-chip-close-small-left: 6px !default;
+$ddl-chip-close-small-left: 0 !default;
 $ddl-chip-close-small-top: 5px !default;
 $ddl-chip-close-hooker-small-left: 4px !default;
+$ddl-chip-close-hooker-small-bigger-left: 4px !default;
 $ddl-chip-close-hooker-small-top: 7px !default;
 $ddl-delimviewheight-small: 22px !default;
 
@@ -161,15 +167,16 @@ $ddl-select-all-height-bigger-small: 34px !default;
 $ddl-bigger-small-chip-height: 30px !default;
 $ddl-chip-bigger-small-font-size: 15px !default;
 $ddl-bigger-small-chip-close-square: 24px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 30px !default;
 $ddl-bigger-small-input-height: 34px !default;
 $ddl-delim-bigger-small-font-size: 14px !default;
-$ddl-chip-close-bigger-left: 13px !default;
+$ddl-chip-close-bigger-left: 0 !default;
 $ddl-chip-close-bigger-top: 11px !default;
 $ddl-chip-bigger-content-padding: 7px 8px 7px 12px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
-$ddl-closer-margin-top-bigger-small: -2.9em !default;
+$ddl-closer-margin-top-bigger-small: -2.5em !default;
 $multiselect-closer-bigger-height: 36px !default;
 $multiselect-closer--bigger-margin-top: -3em !default;
 $multiselect-closer-bigger-width: 0 !default;
@@ -198,7 +205,7 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
 
   .e-bigger .e-multi-select-wrapper .e-chips-close {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 
   .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus.e-hover {

controls/base/themestudio/styles/dropdowns/multi-select/_bootstrap5-definition.scss

@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 6px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 14px !default;
+$ddl-chip-close-width: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 14px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -122,12 +125,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 12px !default;
+$ddl-small-chip-close-width: 12px !default;
 $ddl-small-chip-close-font: 12px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
+$ddl-chip-close-hooker-small-bigger-left: 0 !default;
 $ddl-delimviewheight-small: 24px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -140,12 +145,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-close-width: 14px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
+$ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 14px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;

controls/base/themestudio/styles/dropdowns/multi-select/_fabric-dark-definition.scss

@@ -32,11 +32,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
 $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
 $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 8px !default;
-$ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 8px 8px 8px 8px !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -77,7 +80,7 @@ $ddl-rtl-hooker-left: -4px !default;
 $ddl-chip-close-mob-top: 0 !default;
 $ddl-control-placholder-padding: 0 32px 0 2px !default;
 $ddl-overall-close-top: 10px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -133,19 +136,22 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 22px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 13px !default;
-$ddl-small-closer-margin-top: -2.8em !default;
+$ddl-small-closer-margin-top: -3em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: -35px !default;
 $ddl-delimviewheight-small: 24px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;