v17.4.47 is released

Author: pipeline

controls/barcodegenerator/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-barcode-generator",
-	"version": "17.4.43",
+	"version": "17.4.46",
 	"description": "Barcode generator component is a pure JavaScript library which will convert a string to Barcode and show it to the user. This supports major 1D and 2D barcodes including coda bar, code 128, QR Code.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/dist/ej2-base.umd.min.js

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

controls/base/dist/ej2-base.umd.min.js.map

@@ -182,7 +182,8 @@ export function extend(copied: Object, first: Object, second?: Object, deep?: bo
             let src: Object = result[key];
             let copy: Object = obj1[key];
             let clone: Object;
-            let blazorEventExtend: any = isBlazor() ? !(src instanceof Event) : true;
+            let isArrayChanged: Boolean = Array.isArray(copy) && Array.isArray(src) && (copy.length !== src.length);
+            let blazorEventExtend: any = isBlazor() ? (!(src instanceof Event) && !isArrayChanged) : true;
             if (deep && blazorEventExtend && (isObject(copy) || Array.isArray(copy))) {
                 if (isObject(copy)) {
                     clone = src ? src : {};

controls/base/dist/es6/ej2-base.es2015.js

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "17.4.43",
+	"version": "17.4.46",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/dist/es6/ej2-base.es2015.js.map

@@ -519,6 +519,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
      * Click the CheckBox element
      * its native method
      * @public
+     * @deprecated
      */
     public click(): void {
         this.element.click();
@@ -528,6 +529,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
      * Sets the focus to CheckBox
      * its native method
      * @public
+     * @deprecated
      */
     public focusIn(): void {
         this.element.focus();

controls/base/dist/es6/ej2-base.es5.js

@@ -88,7 +88,7 @@ $btn-flat-border-color: $btn-border-color !default;
 $btn-flat-hover-color: $btn-hover-color !default;
 $btn-flat-focus-color: $btn-focus-color !default;
 $btn-flat-active-color: $btn-active-color !default;
-$btn-flat-box-shadow: transparent !default;
+$btn-flat-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5) !default;
 $btn-flat-active-bgcolor: $btn-active-bgcolor !default;
 $btn-flat-bgcolor: $btn-bgcolor !default;
 $btn-flat-hover-bgcolor: $btn-hover-bgcolor !default;

controls/base/dist/es6/ej2-base.es5.js.map

@@ -184,7 +184,7 @@
 
           & .e-icon-left {
             margin-left: 0;
-            margin-right: btn-small-icon-margin;
+            margin-right: $btn-small-icon-margin;
           }
         }
       }
@@ -266,7 +266,7 @@
 
       & .e-icon-left {
         margin-left: 0;
-        margin-right: btn-small-icon-margin;
+        margin-right: $btn-small-icon-margin;
       }
     }
 }

controls/base/dist/global/ej2-base.min.js

@@ -79,7 +79,7 @@
 @mixin outline-active {
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-bgcolor;
-    border-color: none;
+    border-color: transparent;
     $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, .15), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
@@ -104,7 +104,7 @@
 @mixin outline-primary-active {
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-primary-bgcolor;
-    border-color: none;
+    border-color: transparent;
     $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, .15), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
@@ -129,7 +129,7 @@
 @mixin outline-success-active {
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-success-bgcolor;
-    border-color: none;
+    border-color: transparent;
     $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, .15), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
@@ -154,7 +154,7 @@
 @mixin outline-info-active {
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-info-bgcolor;
-    border-color: none;
+    border-color: transparent;
     $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, .15), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
@@ -179,7 +179,7 @@
 @mixin outline-warning-active {
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-warning-bgcolor;
-    border-color: none;
+    border-color: transparent;
     $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, .15), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
@@ -204,7 +204,7 @@
 @mixin outline-danger-active {
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-danger-bgcolor;
-    border-color: none;
+    border-color: transparent;
     $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, .15), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }

controls/base/dist/global/ej2-base.min.js.map

@@ -55,7 +55,7 @@ $cbox-key-focussed-bgcolor: transparent !default;
 $cbox-lineheight: 18px !default;
 $cbox-margin: 8px !default;
 $cbox-padding: 0 !default;
-$cbox-ripple-bgcolor: transperant !default;
+$cbox-ripple-bgcolor: transparent !default;
 $cbox-ripple-size: -9px !default;
 $cbox-ripple-height: 36px !default;
 $cbox-ripple-width: 36px !default;

controls/base/package.json

@@ -51,7 +51,7 @@ $cbox-indeterminate-lineheight: 18px !default;
 $cbox-lineheight: 18px !default;
 $cbox-margin: 8px !default;
 $cbox-padding: 0 !default;
-$cbox-ripple-bgcolor: transperant !default;
+$cbox-ripple-bgcolor: transparent !default;
 $cbox-small-check-fontsize: 8px !default;
 $cbox-small-font-size: 14px !default;
 $cbox-small-height: 14px !default;

controls/base/src/util.ts

@@ -1,5 +1,5 @@
 //default
-$cbox-bgcolor: none !default;
+$cbox-bgcolor: transparent !default;
 $cbox-bigger-check-fontsize: 16px !default;
 $cbox-bigger-font-size: 14px !default;
 $cbox-bigger-height: 22px !default;
@@ -45,7 +45,7 @@ $cbox-focussed-color: $grey-dark-font !default;
 $cbox-focussed-indeterminate-color: rgba($grey-white, .3) !default;
 $cbox-font-size: 13px !default;
 $cbox-height: 18px !default;
-$cbox-hover-bgcolor: none !default;
+$cbox-hover-bgcolor: transparent !default;
 $cbox-hover-border-color: rgba($grey-white, .7) !default;
 $cbox-hover-color: rgba($grey-white, .7) !default;
 $cbox-indeterminate-bgcolor: transparent !default;

controls/buttons/dist/ej2-buttons.umd.min.js.map

@@ -31,7 +31,7 @@ $switch-transition-delay: .05s !default;
 $switch-inner-border-style: none !default;
 $switch-line-height: 0 !default;
 $switch-handle-margin: auto 0 !default;
-$switch-inner-active: none !default;
+$switch-inner-active: transparent !default;
 $switch-off-active-left: 100% !default;
 $switch-off-text-indent: -9999px !default;
 $switch-on-text-indent: -9999px !default;
@@ -46,7 +46,7 @@ $switch-inner-focus-off-bg: transparent !default;
 $switch-inner-focus-bg-color: transparent !default;
 $switch-checked-ripple-bg-color: rgba($grey-white, .12) !default;
 $switch-inner-bg: initial !default;
-$switch-hover-bg-color: none !default;
+$switch-hover-bg-color: transparent !default;
 $switch-ripple-bg-color: rgba($accent, .12) !default;
 $switch-active-background: $accent !default;
 $switch-on-bg-color: $accent !default;
@@ -64,7 +64,7 @@ $switch-handle-off-hover-bg-color: $grey-500 !default;
 $switch-handle-bg-color: $grey-500 !default;
 $switch-handle-shadow-disabled: none !default;
 $switch-off-bg-color: rgba($grey-white, .42) !default;
-$switch-inner-active-bg: none !default;
+$switch-inner-active-bg: transparent !default;
 $switch-inner-on-font-color: #fff !default;
 $switch-inner-off-font-color: #fff !default;
 $switch-handle-disabled-bg-color: $grey-700 !default;

controls/buttons/dist/es6/ej2-buttons.es2015.js

@@ -30,7 +30,7 @@ $switch-line-height: 0 !default;
 $switch-handle-margin: auto 0 !default;
 $switch-handle-transition: all .2s linear !default;
 $switch-inner-transition: all .08s linear !default;
-$switch-inner-active: none !default;
+$switch-inner-active: transparent !default;
 $switch-off-active-left: 100% !default;
 $switch-off-text-indent: -9999px !default;
 $switch-on-text-indent: -9999px !default;
@@ -42,7 +42,7 @@ $switch-on-off-hover-bg-color: rgba($accent, .54) !default;
 $switch-inner-focus-bg-color: transparent !default;
 $switch-checked-ripple-bg-color: rgba($grey-black, .12) !default;
 $switch-inner-bg: initial !default;
-$switch-hover-bg-color: none !default;
+$switch-hover-bg-color: transparent !default;
 $switch-inner-focus-off-bg: transparent !default;
 $switch-ripple-bg-color: rgba($accent, .12) !default;
 $switch-active-background: $accent !default;

controls/buttons/dist/es6/ej2-buttons.es2015.js.map

@@ -2,14 +2,21 @@
 
 ## [Unreleased]
 
+## 17.4.47 (2020-02-05)
+
+### DatePicker
+
+#### Bug Fixes
+
+- `#260342` - Issue with "input not focus while already opened the another datepicker" has been resolved.
+
 ## 17.4.46 (2020-01-30)
 
 ### DatePicker
 
 #### Bug Fixes
 
 - `#260342` - Issue with "datepicker popup not closed while use `shift+tab`" has been resolved.
-- `#260342` - Issue with "input not getting focus while opened the another datepicker popup" has been resolved.
 
 ## 17.4.43 (2020-01-14)
 

controls/buttons/dist/es6/ej2-buttons.es5.js

@@ -408,6 +408,12 @@ let CalendarBase = class CalendarBase extends Component {
             }
         }
     }
+    checkDeviceMode(ref) {
+        if (Browser.isDevice && isBlazor() && ref) {
+            // tslint:disable-next-line
+            ref.invokeMethodAsync('OnDevice', true);
+        }
+    }
     // tslint:disable-next-line:max-func-body-length
     keyActionHandle(e, value, multiSelection) {
         if (isBlazor() && this.blazorRef) {
@@ -3445,7 +3451,8 @@ let DatePicker = class DatePicker extends Calendar {
         this.isPopupClicked = false;
     }
     documentHandler(e) {
-        if ((!isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(e.target)) && e.type !== 'touchstart') {
+        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) ||
+            (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
             e.preventDefault();
         }
         let target = e.target;
@@ -10568,11 +10575,11 @@ let TimePicker = class TimePicker extends Component {
         append([this.listTag], this.listWrapper);
     }
     documentClickHandler(event) {
-        if ((!isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(event.target)) &&
-            event.type !== 'touchstart') {
+        let target = event.target;
+        if ((isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(target) || (this.popupObj.element
+            && this.popupObj.element.contains(target))) && event.type !== 'touchstart') {
             event.preventDefault();
         }
-        let target = event.target;
         if (!(closest(target, '#' + this.popupObj.element.id)) && target !== this.inputElement
             && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&
             target !== (this.inputWrapper && this.inputWrapper.clearButton) &&
@@ -10585,10 +10592,6 @@ let TimePicker = class TimePicker extends Component {
         else if (target !== this.inputElement) {
             if (!Browser.isDevice) {
                 this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);
-                if ((!isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(event.target)) &&
-                    event.type !== 'touchstart') {
-                    event.preventDefault();
-                }
             }
         }
     }

controls/buttons/dist/es6/ej2-buttons.es5.js.map

@@ -424,6 +424,12 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    CalendarBase.prototype.checkDeviceMode = function (ref) {
+        if (Browser.isDevice && isBlazor() && ref) {
+            // tslint:disable-next-line
+            ref.invokeMethodAsync('OnDevice', true);
+        }
+    };
     // tslint:disable-next-line:max-func-body-length
     CalendarBase.prototype.keyActionHandle = function (e, value, multiSelection) {
         if (isBlazor() && this.blazorRef) {
@@ -3486,7 +3492,8 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         this.isPopupClicked = false;
     };
     DatePicker.prototype.documentHandler = function (e) {
-        if ((!isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(e.target)) && e.type !== 'touchstart') {
+        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) ||
+            (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
             e.preventDefault();
         }
         var target = e.target;
@@ -10680,11 +10687,11 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         append([this.listTag], this.listWrapper);
     };
     TimePicker.prototype.documentClickHandler = function (event) {
-        if ((!isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(event.target)) &&
-            event.type !== 'touchstart') {
+        var target = event.target;
+        if ((isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(target) || (this.popupObj.element
+            && this.popupObj.element.contains(target))) && event.type !== 'touchstart') {
             event.preventDefault();
         }
-        var target = event.target;
         if (!(closest(target, '#' + this.popupObj.element.id)) && target !== this.inputElement
             && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&
             target !== (this.inputWrapper && this.inputWrapper.clearButton) &&
@@ -10697,10 +10704,6 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         else if (target !== this.inputElement) {
             if (!Browser.isDevice) {
                 this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);
-                if ((!isNullOrUndefined(this.popupObj) && this.inputWrapper.container.contains(event.target)) &&
-                    event.type !== 'touchstart') {
-                    event.preventDefault();
-                }
             }
         }
     };

controls/buttons/dist/global/ej2-buttons.min.js.map

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "17.4.44",
+	"version": "17.4.46",
 	"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",