@syncfusion/ej2-querybuilder 29.2.5 → 29.2.8

package/dist/es6/ej2-querybuilder.es2015.js

@@ -160,6 +160,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.isMiddleGroup = false;
         this.cloneRuleBtnClick = false;
         this.isValueEmpty = false;
+        this.isPropChange = false;
         MultiSelect.Inject(CheckBoxSelection);
     }
     getPersistData() {
@@ -3877,8 +3878,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         else {
             this.addGroupElement(false, this.element);
         }
-        if (Browser.isDevice || this.displayMode === 'Vertical') {
-            if (Browser.isDevice) {
+        if (Browser.isDevice || (window.innerWidth < 768 && !this.isPropChange) || this.displayMode === 'Vertical') {
+            if (Browser.isDevice || window.innerWidth < 768) {
                 this.element.style.width = '100%';
                 this.element.classList.add('e-device');
             }
@@ -4001,6 +4002,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     onPropertyChanged(newProp, oldProp) {
         const properties = Object.keys(newProp);
+        this.isPropChange = true;
         const groupElem = this.element.querySelector('.e-group-container');
         let summaryElem = this.element.querySelector('.e-summary-content');
         for (const prop of properties) {
@@ -4155,6 +4157,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     break;
             }
         }
+        this.isPropChange = false;
     }
     preRender() {
         this.element.id = this.element.id || getUniqueID('ej2-querybuilder');
@@ -4712,6 +4715,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         EventHandler.add(wrapper, 'focusin', this.focusEventHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
         EventHandler.add(document, 'keydown', this.keyBoardHandler, this);
+        window.addEventListener('resize', this.windowResizeHandler.bind(this));
     }
     unWireEvents() {
         const wrapper = this.getWrapper();
@@ -4720,6 +4724,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         EventHandler.remove(wrapper, 'focusin', this.focusEventHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         EventHandler.remove(document, 'keydown', this.keyBoardHandler);
+        window.removeEventListener('resize', this.windowResizeHandler);
     }
     getParentGroup(target, isParent) {
         const groupLevel = (target instanceof Element) ? this.levelColl[target.id] : this.levelColl[`${target}`];
@@ -4983,6 +4988,14 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
         }
     }
+    windowResizeHandler() {
+        if (Browser.isDevice || window.innerWidth < 768) {
+            this.displayMode = 'Vertical';
+        }
+        else {
+            this.displayMode = 'Horizontal';
+        }
+    }
     clearQBTemplate(ruleElemColl) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact || this.isAngular) {