v22.2.12 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 22.2.12 (2023-09-05)
+
+### Common
+
+#### Bug Fixes
+
+- Resolved the issue with offline material theme have google fonts.
+
 ## 22.2.10 (2023-08-22)
 
 ### Common

controls/base/styles/_material-dark-definition.scss

@@ -3,7 +3,7 @@
 
 @if not variable-exists('is-roboto-loaded') {
   //sass-lint:disable no-url-protocols,no-url-domains
-  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500');// stylelint-disable-line no-invalid-position-at-import-rule
+  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');// stylelint-disable-line no-invalid-position-at-import-rule
 }
 
 $is-roboto-loaded: 'true' !default;

controls/calendars/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 ## [Unreleased]
 
+## 22.2.12 (2023-09-05)
+
+### DatePicker
+
+#### Bug Fixes
+
+- `#I491906` - Fixed an issue where the values were not being cleared or changed while the popup was open and the user focus out.
+
+### DateRangePicker
+
+#### Bug Fixes
+
+- `#I491906` - Fixed an issue where the values were not being cleared or changed while the popup was open and the user focus out.
+
+### DateTimePicker
+
+#### Bug Fixes
+
+- `#I491906` - Fixed an issue where the values were not being cleared or changed while the popup was open and the user focus out.
+
 ## 22.2.11 (2023-08-29)
 
 ### DateRangePicker

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "22.2.10",
+	"version": "22.2.11",
 	"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/datepicker/datepicker.ts

@@ -95,6 +95,7 @@ export class DatePicker extends Calendar implements IInput {
     protected touchStart: boolean;
     protected iconRight: boolean;
     protected isBlur: boolean = false;
+    private isKeyAction: boolean = false;
     /**
      * Specifies the width of the DatePicker component.
      *
@@ -773,6 +774,7 @@ export class DatePicker extends Calendar implements IInput {
         EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);
         EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
         EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
+        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         if (this.enableMask){
             EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);
         }
@@ -832,6 +834,7 @@ export class DatePicker extends Calendar implements IInput {
         EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
         EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
         EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);
+        EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
         if (this.enableMask){
             EventHandler.remove(this.inputElement, 'keydown', this.keydownHandler);
         }
@@ -1523,13 +1526,17 @@ export class DatePicker extends Calendar implements IInput {
                 this.isInteracted = true;
             }
         }
+        this.isKeyAction = false;
     }
 
     protected navigatedEvent(): void {
         this.trigger('navigated', this.navigatedArgs);
     }
+    protected keyupHandler(e: KeyboardEventArgs): void {
+        this.isKeyAction = (this.inputElement.value !== this.previousElementValue) ? true : false;
+    }
     protected changeEvent(event?: MouseEvent | KeyboardEvent | Event): void {
-        if (!this.isIconClicked && !this.isBlur) {
+        if (!this.isIconClicked && !(this.isBlur || this.isKeyAction)) {
             this.selectCalendar(event);
         }
         if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
@@ -1549,6 +1556,7 @@ export class DatePicker extends Calendar implements IInput {
         else if (event) {
             this.hide(event);
         }
+        this.isKeyAction = false;
     }
 
     public requiredModules(): ModuleDeclaration[] {

controls/calendars/src/daterangepicker/daterangepicker.ts

@@ -256,6 +256,7 @@ export class DateRangePicker extends CalendarBase {
     protected touchRangeModule: Touch;
     protected touchRangeStart: boolean;
     protected iconRangeRight: string;
+    private isKeyPressed: boolean = false;
 
     /**
      * Gets or sets the start and end date of the Calendar.
@@ -1060,6 +1061,7 @@ export class DateRangePicker extends CalendarBase {
         EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
         EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
         EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
+        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         if (this.showClearButton && this.inputWrapper.clearButton) {
             EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
         }
@@ -1087,6 +1089,7 @@ export class DateRangePicker extends CalendarBase {
         EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
         EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
         EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);
+        EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
         if (this.showClearButton && this.inputWrapper.clearButton) {
             EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);
         }
@@ -3236,6 +3239,9 @@ export class DateRangePicker extends CalendarBase {
             this.startButton.element.classList.add(ACTIVE);
         }
     }
+    private keyupHandler(e: KeyboardEventArgs): void {
+        this.isKeyPressed = (this.inputElement.value !== this.previousEleValue) ? true : false;
+    }
     private applyFunction(eve?: MouseEvent | KeyboardEventArgs): void {
         let isValueChanged: boolean = false;
         if (eve.type !== 'touchstart') {
@@ -3261,7 +3267,10 @@ export class DateRangePicker extends CalendarBase {
             this.previousStartValue = new Date(+this.startValue);
             this.previousEndValue = new Date(+this.endValue);
             this.previousEleValue = this.inputElement.value;
-            Input.setValue(this.rangeArgs(eve).text, this.inputElement, this.floatLabelType, this.showClearButton);
+            if(!this.isKeyPressed){
+                Input.setValue(this.rangeArgs(eve).text, this.inputElement, this.floatLabelType, this.showClearButton);
+            }
+            this.isKeyPressed = false;
             if (+this.initStartDate !== +this.startValue || +this.initEndDate !== +this.endValue) {
                 isValueChanged = true;
             }

controls/calendars/src/timepicker/timepicker.ts

@@ -1422,7 +1422,7 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
     }
     private inputHandler(event: KeyboardEventArgs): void {
         if (!this.readonly && this.enabled) {
-            if (!((event.action == 'right' || event.action == 'left' || event.action == 'tab') || ((event.action == 'home' || event.action == 'end') && !this.isPopupOpen()))) {
+            if (!((event.action == 'right' || event.action == 'left' || event.action == 'tab') || ((event.action == 'home' || event.action == 'end'  || event.action == 'up' || event.action == 'down') && !this.isPopupOpen() && !this.enableMask))) {
                 event.preventDefault();
             }
             switch (event.action) {
@@ -2212,7 +2212,9 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
         this.isNavigate = true;
         this.setHover(this.selectedElement, NAVIGATION);
         this.setActiveDescendant();
-        this.selectInputText();
+        if (this.enableMask) {
+            this.selectInputText();
+        }
         if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) { this.setScrollPosition(); }
     }
     protected getCultureTimeObject(ld: Object, c: string): Object {

controls/charts/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 22.2.12 (2023-09-05)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F184251` - Fixed an issue in axis label position when label position set to inside for bar series.
+
 ## 22.2.11 (2023-08-29)
 
 ### Accumulation chart

controls/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-charts",
-	"version": "22.2.10",
+	"version": "22.2.11",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/charts/src/chart/axis/cartesian-panel.ts

@@ -873,15 +873,15 @@ export class CartesianAxisLayoutPanel {
             pointY = (valueToCoefficient(axis.visibleLabels[i as number].value, axis) * rect.height) + (chart.stockChart ? 7 : 0);
             pointY = Math.floor((pointY * -1) + (rect.y + rect.height));
             textHeight = ((elementSize.height / 8) * axis.visibleLabels[i as number].text.length / 2);
-            textPadding = ((elementSize.height / 4) * 3) + 3;
+            textPadding = chart.requireInvertedAxis ? 0 : ((elementSize.height / 4) * 3) + 3;
             intervalLength = rect.height / axis.visibleLabels.length;
             labelHeight = ((axis.labelIntersectAction === 'Trim' || axis.labelIntersectAction === 'Wrap') && angle !== 0 &&
                 elementSize.width > intervalLength) ? intervalLength : elementSize.width;
             pointY = (isAxisBreakLabel ? (axis.labelPosition === 'Inside' ? (pointY - (elementSize.height / 2) - textHeight + textPadding)
                 : (pointY - textHeight)) : (axis.labelPosition === 'Inside' ? pointY + textPadding :  pointY));
             if (axis.labelPosition === 'Inside' && ((i === 0 && !axis.isInversed) || (i === len - 1 && axis.isInversed))) {
                 if (chart.stockChart) { pointY -= (textPadding); }
-                else { pointY -= (textPadding - (axis.opposedPosition ? -padding : padding)); }
+                else { pointY -= (textPadding - (chart.requireInvertedAxis ? 0 : (axis.opposedPosition ? -padding : padding))); }
             }
             if (axis.majorGridLines.width > axis.majorTickLines.width) {
                 maxLineWidth = axis.majorGridLines.width;

controls/charts/src/chart/user-interaction/tooltip.ts

@@ -299,7 +299,7 @@ export class Tooltip extends BaseTooltip {
             const point: Points[] = [];
             for (let i: number = 0; i < data.length; i++) {
                 point[i as number] = extend({}, data[i as number].point) as Points;
-                point[i as number].x = this.formatPointValue(data[1].point, data[1].series.xAxis, 'x', true, false);
+                point[i as number].x = this.formatPointValue(data[i as number].point, data[i as number].series.xAxis, 'x', true, false);
                 if ((data[i as number].series.seriesType === 'XY')) {
                     point[i as number].y = this.formatPointValue(data[i as number].point, data[i as number].series.yAxis, 'y', false, true);
                 } else {

controls/diagrams/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## 22.2.12 (2023-09-05)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I469741` - Now, group node rotation and undo working properly.
+- `#F184075` - Now, BPMN node subtype visibles whiles changing the node visibility issue is resolved.
+- `#I489954` - Now, Connectors are routed correctly while enable routing set as true.
+- `#I493510` -Now, Expand and collapse working properly at runtime.
+- `#I490046` - In the positionChange event, during the completed state, old and new values remain identical issue is resolved.
+
 ## 22.2.11 (2023-08-29)
 
 ### Diagram

controls/diagrams/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-diagrams",
-	"version": "22.2.10",
+	"version": "22.2.11",
 	"description": "Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/diagrams/spec/diagram/interaction/events.spec.ts

@@ -1140,6 +1140,54 @@ describe('Mouse Enter, Mouse Over event does not get triggered for selected item
          done();
      });
 });
+describe('positionChange event in completed state', () => {
+    let diagram: Diagram;
+    let ele: HTMLElement;
+    let getNewValue;
+    let getOldValue;
+    let mouseEvents: MouseEvents = new MouseEvents();
+    beforeAll((): void => {
+        const isDef = (o: any) => o !== undefined && o !== null;
+        if (!isDef(window.performance)) {
+            console.log("Unsupported environment, window.performance.memory is unavailable");
+            this.skip(); //Skips test (in Chai)
+            return;
+        }
+        ele = createElement('div', { id: 'positionChange' });
+        document.body.appendChild(ele);
+        let node: NodeModel = {
+            id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
+            annotations: [{ content: 'Node1' }]
+        };
+        diagram = new Diagram({ width: '1000px', height: '1000px', nodes: [node] });
+        diagram.appendTo('#positionChange');
+    });
+
+    afterAll((): void => {
+        diagram.destroy();
+        ele.remove();
+    });
+
+    it('Checking diagram instance creation', (done: Function) => {
+        let diagramCanvas: HTMLElement = document.getElementById(diagram.element.id + 'content');
+        mouseEvents.clickEvent(diagramCanvas, 100, 100);
+        mouseEvents.mouseUpEvent(diagramCanvas, 100, 100);
+        mouseEvents.mouseMoveEvent(diagramCanvas, 120, 100);
+        mouseEvents.mouseMoveEvent(diagramCanvas, 140, 100);
+        mouseEvents.mouseMoveEvent(diagramCanvas, 160, 100);
+        mouseEvents.mouseDownEvent(diagramCanvas, 160, 100);
+        diagram.positionChange = (args : IDraggingEventArgs) =>{
+           if(args.state === "Completed"){
+            expect(args.newValue.offsetX !== args.oldValue.offsetX).toBe(true);
+            expect(args.newValue.offsetY !== args.oldValue.offsetY).toBe(true);
+            expect(args.oldValue.offsetX == 100).toBe(true);
+            expect(args.oldValue.offsetY == 100).toBe(true);
+            expect(args.newValue.offsetX == 160).toBe(true);
+            expect(args.newValue.offsetY == 100).toBe(true);
+           }
+        };
+    });
+});
 describe('SourcePointChange and TargetPointChange Event on node dragging', () => {
     let diagram: Diagram;
     let ele: HTMLElement;

controls/diagrams/spec/diagram/objects/bpmnshapesDataObject.spec.ts

@@ -6,6 +6,7 @@ import { ShadowModel, RadialGradientModel, StopModel } from '../../../src/diagra
 import { Canvas } from '../../../src/diagram/core/containers/canvas';
 import { BpmnDiagrams } from '../../../src/diagram/objects/bpmn';
 import  {profile , inMB, getMemoryProfile} from '../../../spec/common.spec';
+import { BpmnShape, Container } from '../../../src';
 Diagram.Inject(BpmnDiagrams);
 
 /**
@@ -200,7 +201,63 @@ describe('Diagram Control', () => {
         })
     });
 });
+describe('BPMN dataobject node visibility issue', () => {
+    let diagram: Diagram;
+    let ele: HTMLElement;
 
+    beforeAll((): void => {
+        const isDef = (o: any) => o !== undefined && o !== null;
+            if (!isDef(window.performance)) {
+                console.log("Unsupported environment, window.performance.memory is unavailable");
+                this.skip(); //Skips test (in Chai)
+                return;
+            }
+        ele = createElement('div', { id: 'diagram1' });
+        document.body.appendChild(ele);
+         
+        let nodes: NodeModel[] = [
+            {
+                id: 'subProcess', width: 520, height: 250, offsetX: 300, offsetY: 100,
+                shape: { type: 'Bpmn', shape: 'DataObject'}
+            }  ,
+          
+        ];
+           diagram = new Diagram({
+            width: '74%', height: '600px', nodes: nodes,
+         });
+        diagram.appendTo('#diagram1');
+    });
+
+    afterAll((): void => {
+        diagram.destroy();
+        ele.remove();
+    });
+
+    it('BPMN dataObject after visibility true and false', (done: Function) => { 
+       diagram.nodes[0].visible = false;
+       diagram.dataBind();
+       diagram.nodes[0].visible = true;
+       diagram.dataBind();
+        expect((diagram.nodes[0].wrapper.children[0] as Container).children[2].visible === false).toBe(true);
+        expect((diagram.nodes[0].wrapper.children[0] as Container).children[1].visible === false).toBe(true);
+        (diagram.nodes[0].shape as BpmnShape).dataObject = { type : 'Input', collection : false};
+        diagram.dataBind();
+        diagram.nodes[0].visible = false;
+        diagram.dataBind();
+        diagram.nodes[0].visible = true;
+        diagram.dataBind();
+        expect((diagram.nodes[0].wrapper.children[0] as Container).children[2].visible === false).toBe(true);
+        (diagram.nodes[0].shape as BpmnShape).dataObject = { type : 'None', collection : true};
+        diagram.dataBind();
+        diagram.nodes[0].visible = false;
+        diagram.dataBind();
+        diagram.nodes[0].visible = true;
+        diagram.dataBind();
+        expect((diagram.nodes[0].wrapper.children[0] as Container).children[1].visible === false).toBe(true);
+        done();
+    });
+    
+});
 describe('BPMN shapes', () => {
     describe('Changing of BPMN Shapes from one to another', () => {
         let diagram: Diagram;