@syncfusion/ej2-querybuilder 29.2.4 → 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() {
@@ -1674,14 +1675,14 @@ let QueryBuilder = class QueryBuilder extends Component {
             else {
                 prevRule = this.getGroup(prevElem);
             }
-            if (isNullOrUndefined(prevRule.condition)) {
+            if (!isNullOrUndefined(prevRule) && isNullOrUndefined(prevRule.condition)) {
                 prevRule.condition = 'and';
             }
             const orElem = elem.previousElementSibling.querySelector('.e-btngroup-or');
             const andElem = elem.previousElementSibling.querySelector('.e-btngroup-and');
             orElem.disabled = false;
             andElem.disabled = false;
-            if (prevRule.condition === 'or') {
+            if (!isNullOrUndefined(prevRule) && prevRule.condition === 'or') {
                 orElem.checked = true;
             }
             else {
@@ -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) {
@@ -5809,6 +5822,13 @@ let QueryBuilder = class QueryBuilder extends Component {
                     parentElem = this.renderGroup(ruleColl[i], ruleColl[i].condition, parentElem, ruleColl[i].not);
                     parentElem = this.importRules(ruleColl[i], parentElem, true);
                 }
+                else if (!isNullOrUndefined(ruleColl[i].rules)) {
+                    parentElem = this.renderGroup(ruleColl[i], ruleColl[i].condition, parentElem, ruleColl[i].not);
+                    const andElem = parentElem.querySelector('.e-btngroup-and');
+                    const orElem = parentElem.querySelector('.e-btngroup-or');
+                    andElem.disabled = true;
+                    orElem.disabled = true;
+                }
                 else {
                     this.renderRule(ruleColl[i], parentElem);
                 }
@@ -6700,8 +6720,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                         rule.type = this.getTypeFromColumn(rule);
                     }
                     else {
-                        const oper = parser[i + 3][1] ? parser[i + 3][1].replace(/'/g, '') : parser[i + 3][1];
-                        rule.operator = this.getOperator(oper, parser[i + 1][1], sqlLocale);
+                        if (parser.length === 3 && parser[2][0] === 'String' && (parser[2][1]).indexOf('%') !== -1) {
+                            const oper = parser[i + 2][1] ? parser[i + 2][1].replace(/'/g, '') : parser[i + 2][1];
+                            rule.operator = this.getOperator(oper, parser[i + 1][1], sqlLocale);
+                        }
+                        else {
+                            const oper = parser[i + 3][1] ? parser[i + 3][1].replace(/'/g, '') : parser[i + 3][1];
+                            rule.operator = this.getOperator(oper, parser[i + 1][1], sqlLocale);
+                        }
                     }
                     operator = parser[i + 1][1];
                     i++;