v19.2.46 is released

Author: pipeline

controls/barcodegenerator/README.md

@@ -1,3 +1,5 @@
+[![coverage](http://ej2.syncfusion.com/badges/ej2-barcode-generator/coverage.svg)](http://ej2.syncfusion.com/badges/ej2-barcode-generator)
+
 # ej2-barcode-generator
 
 > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).

controls/barcodegenerator/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-barcode-generator",
-	"version": "19.1.63",
+	"version": "19.2.44",
 	"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/buttons/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.2.44 (2021-06-30)
+## 19.2.46 (2021-07-06)
 
 ### Chips
 

controls/buttons/spec/radio-button.spec.ts

@@ -70,7 +70,7 @@ describe('RadioButton', () => {
 
         it('RadioButton with cssClass', () => {
             radio = new RadioButton({ cssClass: 'class' }, '#radio');
-            expect(element.nextElementSibling.classList.contains('class')).toEqual(true);
+            expect(element.parentElement.classList.contains('class')).toEqual(true);
         });
 
         it('RadioButton with change event', () => {
@@ -231,10 +231,10 @@ describe('RadioButton', () => {
             radio = new RadioButton({}, '#radio');
             radio.cssClass = 'class';
             radio.dataBind();
-            expect(element.nextElementSibling.classList.contains('class')).toEqual(true);
+            expect(element.parentElement.classList.contains('class')).toEqual(true);
             radio.cssClass = 'newClass';
             radio.dataBind();
-            expect(element.nextElementSibling.classList.contains('newClass')).toEqual(true);
+            expect(element.parentElement.classList.contains('newClass')).toEqual(true);
         });
     });
 

controls/buttons/src/radio-button/radio-button.ts

@@ -236,6 +236,14 @@ export class RadioButton extends Component<HTMLInputElement> implements INotifyP
         return this.addOnPersist(['checked']);
     }
 
+    private getWrapper(): Element {
+        if (this.element) {
+            return this.element.parentElement;
+        } else {
+            return null;
+        }
+    }
+
     private getLabel(): Element {
         if (this.element) {
             return this.element.nextElementSibling;
@@ -291,7 +299,7 @@ export class RadioButton extends Component<HTMLInputElement> implements INotifyP
             label.classList.add(RTL);
         }
         if (this.cssClass) {
-            addClass([label], this.cssClass.split(' '));
+            addClass([wrapper], this.cssClass.split(' '));
         }
         if (this.label) {
             this.setText(this.label);
@@ -325,6 +333,7 @@ export class RadioButton extends Component<HTMLInputElement> implements INotifyP
      * @returns {void}
      */
     public onPropertyChanged(newProp: RadioButtonModel, oldProp: RadioButtonModel): void {
+        const wrap: Element = this.getWrapper();
         const label: Element = this.getLabel();
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
@@ -345,10 +354,10 @@ export class RadioButton extends Component<HTMLInputElement> implements INotifyP
                 break;
             case 'cssClass':
                 if (oldProp.cssClass) {
-                    removeClass([label], oldProp.cssClass.split(' '));
+                    removeClass([wrap], oldProp.cssClass.split(' '));
                 }
                 if (newProp.cssClass) {
-                    addClass([label], newProp.cssClass.split(' '));
+                    addClass([wrap], newProp.cssClass.split(' '));
                 }
                 break;
             case 'enableRtl':

controls/calendars/CHANGELOG.md

@@ -8,19 +8,19 @@
 
 #### New Features
 
-- `#245933` , `#F147808` -  Now, you can enable the masked input using `enableMask` property
+- `#I245933` , `#F147808` -  Now, you can enable the masked input using `enableMask` property.
 
 ### DateTimePicker
 
 #### New Features
 
-- `#299471` -  Now, you can enable the masked input using `enableMask` property
+- `#I299471` -  Now, you can enable the masked input using `enableMask` property.
 
 ### TimePicker
 
 #### New Features
 
-- Now, you can enable the masked input using `enableMask` property
+- Now, you can enable the masked input using `enableMask` property.
 
 ## 18.4.34 (2021-01-12)
 

controls/calendars/spec/datepicker/datepicker.spec.ts

@@ -4260,16 +4260,16 @@ function loadCultureFiles_mask(name: string, base?: boolean): void {
 
 L10n.load({
     'en': {
-        'MaskedDateTime': { day: 'day' , month: 'month', year: 'year' }
+        'datepicker': { day: 'day' , month: 'month', year: 'year' }
     },
     'de': {
-        'MaskedDateTime': { day: 'Tag' , month: 'Monat', year: 'Jahr' }
+        'datepicker': { day: 'Tag' , month: 'Monat', year: 'Jahr' }
     },
     'zh': {
-        'MaskedDateTime': { day: '日' , month: '月', year: '年' }
+        'datepicker': { day: '日' , month: '月', year: '年' }
     },
     'ja': {
-        'MaskedDateTime': { day: '日' , month: '月', year: '年'}
+        'datepicker': { day: '日' , month: '月', year: '年'}
     },
 });
 
@@ -4323,15 +4323,15 @@ describe('Masked DatePicker', () => {
             document.body.appendChild(inputEle);
             datepicker = new DatePicker({enableMask: true});
             datepicker.appendTo('#datepicker');
-            expect(datepicker.element.value).toBe('day/month/year');
+            expect(datepicker.element.value).toBe('month/day/year');
             expect(datepicker.value).toBe(null);
         });
         it('Rendering with maskPlaceholder as custom type ', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datepicker' });
             document.body.appendChild(inputEle);
             datepicker = new DatePicker({enableMask: true , maskPlaceholder: {day: 'd.',month: 'M.' ,year: 'y.'}});
             datepicker.appendTo('#datepicker');
-            expect(datepicker.element.value).toBe('d./M./y.');
+            expect(datepicker.element.value).toBe('M./d./y.');
             expect(datepicker.value).toBe(null);
         });
         it('With format property -1 ', () => { 
@@ -4369,7 +4369,7 @@ describe('Masked DatePicker', () => {
         it('with format property -5', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datepicker' });
             document.body.appendChild(inputEle);
-            datepicker = new DatePicker({enableMask: true , format: 'dd/MM/yy ddd'});
+            datepicker = new DatePicker({enableMask: true , format: 'dd/MM/yy E'});
             datepicker.appendTo('#datepicker');
             expect(datepicker.element.value).toBe('day/month/year day of the week');
             expect(datepicker.value).toBe(null);
@@ -4440,7 +4440,7 @@ describe('Masked DatePicker', () => {
         it('Increment and decrement of date using arrow keys', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datepicker' });
             document.body.appendChild(inputEle);
-            datepicker = new DatePicker({enableMask: true , format: 'dd/MM/yyyy'});
+            datepicker = new DatePicker({enableMask: true , format: 'd/MM/yyyy'});
             datepicker.appendTo('#datepicker');
             datepicker.focusIn();
             expect(datepicker.element.value).toBe('day/month/year');
@@ -4896,7 +4896,7 @@ describe('Masked DatePicker', () => {
             });
             datepicker.appendTo('#date');
             expect(datepicker.locale).toBe('ja');
-            datepicker.focusIn();
+            datepicker.inputFocusHandler();
             expect(datepicker.element.value).toBe('日/月/年');
         });
         // it('culture(de) test case', () => {

controls/calendars/spec/datetimepicker/datetimepicker.spec.ts

@@ -3351,16 +3351,16 @@ function loadCultureFiles_mask(name: string, base?: boolean): void {
 
 L10n.load({
     'en': {
-        'MaskedDateTime': { day: 'day' , month: 'month', year: 'year', hour: 'hour' ,minute: 'minute', second:'second' }
+        'datetimepicker': { day: 'day' , month: 'month', year: 'year', hour: 'hour' ,minute: 'minute', second:'second' }
     },
     'de': {
-        'MaskedDateTime': { day: 'Tag' , month: 'Monat', year: 'Jahr', hour: 'Stunde' ,minute: 'Minute', second:'Sekunden' }
+        'datetimepicker': { day: 'Tag' , month: 'Monat', year: 'Jahr', hour: 'Stunde' ,minute: 'Minute', second:'Sekunden' }
     },
     'zh': {
-        'MaskedDateTime': { day: '日' , month: '月', year: '年', hour: '小時' ,minute: '分鐘', second:'第二' }
+        'datetimepicker': { day: '日' , month: '月', year: '年', hour: '小時' ,minute: '分鐘', second:'第二' }
     },
     'ja': {
-        'MaskedDateTime': { day: '日' , month: '月', year: '年', hour: '時間' ,minute: '分', second:'秒'}
+        'datetimepicker': { day: '日' , month: '月', year: '年', hour: '時間' ,minute: '分', second:'秒'}
     },
 });
 
@@ -3412,7 +3412,7 @@ describe('Datetimepicker', () => {
             document.body.appendChild(inputEle);
             datetimepicker = new DateTimePicker({enableMask: true});
             datetimepicker.appendTo('#datetimepicker');
-            expect(datetimepicker.element.value).toBe('day/month/year');
+            expect(datetimepicker.element.value).toBe('month/day/year hour:minute AM');
             expect(datetimepicker.value).toBe(null);
         });
         it('Rendering with maskPlaceholder as custom type ', () => { 
@@ -3426,25 +3426,25 @@ describe('Datetimepicker', () => {
         it('With format property ', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datetimepicker' });
             document.body.appendChild(inputEle);
-            datetimepicker = new DateTimePicker({enableMask: true , format: 'd:M:yyyy dddd'});
+            datetimepicker = new DateTimePicker({enableMask: true , format: 'd:M:yyyy E'});
             datetimepicker.appendTo('#datetimepicker');
             expect(datetimepicker.element.value).toBe('day:month:year day of the week');
             expect(datetimepicker.value).toBe(null);
         });
         it('With format property -1 ', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datetimepicker' });
             document.body.appendChild(inputEle);
-            datetimepicker = new DateTimePicker({enableMask: true , format: 'MM yyyy'});
+            datetimepicker = new DateTimePicker({enableMask: true , format: 'MM yyyy EEEE'});
             datetimepicker.appendTo('#datetimepicker');
-            expect(datetimepicker.element.value).toBe('month year');
+            expect(datetimepicker.element.value).toBe('month year day of the week');
             expect(datetimepicker.value).toBe(null);
         });
         it('with format property -2', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datetimepicker' });
             document.body.appendChild(inputEle);
-            datetimepicker = new DateTimePicker({enableMask: true , format: 'MM/dd/yyyy'});
+            datetimepicker = new DateTimePicker({enableMask: true , format: 'MM/dd/yyyy EEEEE'});
             datetimepicker.appendTo('#datetimepicker');
-            expect(datetimepicker.element.value).toBe('month/day/year');
+            expect(datetimepicker.element.value).toBe('month/day/year day of the week');
             expect(datetimepicker.value).toBe(null);
         });
         it('with format property -3', () => { 
@@ -3466,7 +3466,7 @@ describe('Datetimepicker', () => {
         it('with format property -5', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datetimepicker' });
             document.body.appendChild(inputEle);
-            datetimepicker = new DateTimePicker({enableMask: true , format: 'dd/MM/yy ddd'});
+            datetimepicker = new DateTimePicker({enableMask: true , format: 'dd/MM/yy E'});
             datetimepicker.appendTo('#datetimepicker');
             expect(datetimepicker.element.value).toBe('day/month/year day of the week');
             expect(datetimepicker.value).toBe(null);
@@ -3518,6 +3518,17 @@ describe('Datetimepicker', () => {
             datetimepicker.keydownHandler(keyEventArgs);
             expect(datetimepicker.element.selectionStart).toBe(10);
             expect(datetimepicker.element.selectionEnd).toBe(14);
+            keyEventArgs.action = keyEventArgs.key = keyEventArgs.code =  'Home';
+            datetimepicker.keydownHandler(keyEventArgs);
+            expect(datetimepicker.element.selectionStart).toBe(0);
+            expect(datetimepicker.element.selectionEnd).toBe(3);
+            keyEventArgs.action = keyEventArgs.key = keyEventArgs.code =  'End';
+            datetimepicker.keydownHandler(keyEventArgs);
+            expect(datetimepicker.element.selectionStart).toBe(10);
+            expect(datetimepicker.element.selectionEnd).toBe(14);
+
+
+
         });
         it('Selection navigation using tab and shiftTab ', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datetimepicker' });
@@ -3548,7 +3559,7 @@ describe('Datetimepicker', () => {
         it('Increment and decrement of date using up arrow', () => { 
             let inputEle: HTMLElement = createElement('input', { id: 'datetimepicker' });
             document.body.appendChild(inputEle);
-            datetimepicker = new DateTimePicker({enableMask: true , format: 'dd/MM/yyyy hh:mm:ss'});
+            datetimepicker = new DateTimePicker({enableMask: true , format: 'd/MM/yyyy hh:mm:ss'});
             datetimepicker.appendTo('#datetimepicker');
             datetimepicker.focusIn();
             expect(datetimepicker.element.value).toBe('day/month/year hour:minute:second');

controls/calendars/spec/timepicker/masked-timepicker.spec.ts

@@ -25,16 +25,16 @@ function loadCultureFiles(name: string, base?: boolean): void {
 
 L10n.load({
     'en': {
-        'MaskedDateTime': { day: 'day' , month: 'month', year: 'year', hour: 'hour' ,minute: 'minute', second:'second' }
+        'timepicker': { day: 'day' , month: 'month', year: 'year', hour: 'hour' ,minute: 'minute', second:'second' }
     },
     'de': {
-        'MaskedDateTime': { day: 'Tag' , month: 'Monat', year: 'Jahr', hour: 'Stunde' ,minute: 'Minute', second:'Sekunden' }
+        'timepicker': { day: 'Tag' , month: 'Monat', year: 'Jahr', hour: 'Stunde' ,minute: 'Minute', second:'Sekunden' }
     },
     'zh': {
-        'MaskedDateTime': { day: '日' , month: '月', year: '年', hour: '小時' ,minute: '分鐘', second:'第二' }
+        'timepicker': { day: '日' , month: '月', year: '年', hour: '小時' ,minute: '分鐘', second:'第二' }
     },
     'ja': {
-        'MaskedDateTime': { day: '日' , month: '月', year: '年', hour: '時間' ,minute: '分', second:'秒'}
+        'timepicker': { day: '日' , month: '月', year: '年', hour: '時間' ,minute: '分', second:'秒'}
     },
 });
 
@@ -282,6 +282,8 @@ describe('Timepicker', () => {
             timepicker.element.value = ':minute:second PM';
             timepicker.element.selectionStart = 0;
             timepicker.element.selectionEnd = 2;
+            keyEventArgs.action = keyEventArgs.key = keyEventArgs.code = 'Delete'
+            timepicker.keydownHandler(keyEventArgs);
             timepicker.inputEventHandler();
             expect(timepicker.element.value).toBe('hour:minute:second PM');
             expect(timepicker.value).toBe(null);
@@ -490,18 +492,21 @@ describe('Timepicker', () => {
         //     expect(timepicker.element.value).toBe('Stunde:Minute:Sekunden');
         // });
 
-        // it('dynamic mask module ', () => { 
-        //     let inputEle: HTMLElement = createElement('input', { id: 'timepicker' });
-        //     document.body.appendChild(inputEle);
-        //     timepicker = new TimePicker({format: 'hh:mm:ss'});
-        //     timepicker.appendTo('#timepicker');
-        //     expect(timepicker.element.value).toBe('');
-        //     expect(timepicker.value).toBe(null);
-        //     timepicker.enableMask = true;
-        //     timepicker.dataBind();
-        //     expect(timepicker.element.value).toBe('hour:minute:second');
-        //     expect(timepicker.value).toBe(null);
-        // });
+        it('dynamic mask module ', () => { 
+            let inputEle: HTMLElement = createElement('input', { id: 'timepicker' });
+            document.body.appendChild(inputEle);
+            timepicker = new TimePicker({format: 'hh:mm:ss'});
+            timepicker.appendTo('#timepicker');
+            expect(timepicker.element.value).toBe('');
+            expect(timepicker.value).toBe(null);
+            timepicker.enableMask = true;
+            timepicker.dataBind();
+            expect(timepicker.element.value).toBe('hour:minute:second');
+            expect(timepicker.value).toBe(null);
+            timepicker.enableMask = false;
+            timepicker.dataBind();
+            expect(timepicker.element.value).toBe('');
+        });
         // it('ChangeEvent ', () => { 
         //     let inputEle: HTMLElement = createElement('input', { id: 'timepicker' });
         //     document.body.appendChild(inputEle);