v20.4.54 is released

Author: pipeline

controls/base/themestudio/styles/calendars/daterangepicker/_layout.scss

@@ -218,6 +218,7 @@
           overflow: $range-visibility-hidden;
           padding: $range-list-item-padding;
           white-space: $range-text-nowrap;
+          text-overflow: $range-text-overflow;
         }
         #{if(&, '&', '*')} .e-list-parent {
           margin: $range-value-zero;

controls/base/themestudio/styles/grids/grid/_theme.scss

@@ -549,7 +549,8 @@
       }
     }
 
-    .e-ftrchk.e-chkfocus {
+    .e-ftrchk.e-chkfocus,
+    li.e-cclist.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
   }

controls/base/themestudio/styles/navigations/pager/_bootstrap5-definition.scss

@@ -137,7 +137,7 @@ $pager-container-border-radius: 4px !default;
 $pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
 $pager-active-border: 2px !default;
 $pager-active-size: solid !default;
-$pager-active-color: $primary;
+$pager-active-color: $primary !default;
 $pager-numeric-icon-padding-with-margin: 7px 10px 7px 10px !default;
 $pager-focus-bg-color: $table-bg-color-hover !default;
 $pager-focus-tripledot-padding: $pager-tripledot-padding !default;

controls/base/themestudio/styles/navigations/pager/_fusionnew-definition.scss

@@ -137,7 +137,7 @@ $pager-container-border-radius: 4px !default;
 $pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
 $pager-active-border: 2px !default;
 $pager-active-size: solid !default;
-$pager-active-color: $primary;
+$pager-active-color: $primary !default;
 $pager-numeric-icon-padding-with-margin: 7px 10px 7px 10px !default;
 $pager-focus-bg-color: $table-bg-color-hover !default;
 $pager-focus-tripledot-padding: $pager-tripledot-padding !default;

controls/base/themestudio/styles/navigations/pager/_material3-definition.scss

@@ -137,7 +137,7 @@ $pager-container-border-radius: 4px !default;
 $pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
 $pager-active-border: 2px !default;
 $pager-active-size: solid !default;
-$pager-active-color: $primary;
+$pager-active-color: $primary !default;
 $pager-numeric-icon-padding-with-margin: 7px 10px 7px 10px !default;
 $pager-focus-bg-color: $table-bg-color-hover !default;
 $pager-focus-tripledot-padding: $pager-tripledot-padding !default;

controls/buttons/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 20.4.53 (2023-03-07)
+## 20.4.54 (2023-03-14)
 
 ### Checkbox
 

controls/calendars/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+## 20.4.54 (2023-03-14)
+
+- `#SF-443337` - The issue "Bigger mode icon in calendar components was slightly bigger than other components" has been resolved.
+
+- `#SF-440324` - The issue "Unable to enter a time value in the TimePicker when the mask is enabled" has been resolved.
+
 ## 20.4.48 (2023-02-01)
 
 - `#I426149` - The issue "show method target parameter not works as expected" has been resolved.

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "20.4.51",
+	"version": "20.4.52",
 	"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",

controls/calendars/src/maskbase/masked-date-time.ts

@@ -97,7 +97,7 @@ export class MaskedDateTime {
         this.parent.off('clearHandler', this.clearHandler);
     }
 
-    private createMask(dateformat : string): void {
+    private createMask(navigated: boolean = false): void {
         this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;
         this.dateformat = this.getCulturedFormat();
 
@@ -137,6 +137,7 @@ export class MaskedDateTime {
         this.mask = this.previousValue = inputValue;
         this.parent.maskedDateValue = this.mask;
         if (this.parent.value) {
+            this.navigated = navigated;
             this.setDynamicValue();
         }
     }
@@ -168,7 +169,7 @@ export class MaskedDateTime {
         this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = true
         this.updateValue();
         // this.parent.inputElement.selectionStart = start;
-        // this.validCharacterCheck();
+        this.validCharacterCheck();
     }
     private setSelection(validChar : string): void {
         let start: number = -1;

controls/calendars/src/timepicker/timepicker.ts

@@ -1548,8 +1548,8 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
             this.checkValue(li.getAttribute('data-value'));
             if(this.enableMask)
             {
-            this.notify("setMaskSelection", {
-                module: "MaskedDateTime"
+                this.notify('createMask', {
+                    module: 'MaskedDateTime', navigated: true
                 });
             }
             this.selectedElement = li;