@syncfusion/ej2-querybuilder 29.2.5 → 29.2.10

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.5
+*  version : 29.2.10
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,48 +1,21 @@
 {
-  "_from": "@syncfusion/ej2-querybuilder@*",
-  "_id": "@syncfusion/ej2-querybuilder@29.2.4",
-  "_inBundle": false,
-  "_integrity": "sha512-INW2Ti7GMWa8435F3pENYpA6jWuXpSSe48C7w5rFgf/M9ZFkNbZ8MPOVwRBLcpnIJg6xY+SUpRtbd/mWxSAWAg==",
-  "_location": "/@syncfusion/ej2-querybuilder",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-querybuilder@*",
-    "name": "@syncfusion/ej2-querybuilder",
-    "escapedName": "@syncfusion%2fej2-querybuilder",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-querybuilder",
-    "/@syncfusion/ej2-react-querybuilder",
-    "/@syncfusion/ej2-vue-querybuilder"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-29.2.4.tgz",
-  "_shasum": "162fd0eb971c49c9ed56cf87a7fe73050ea46f05",
-  "_spec": "@syncfusion/ej2-querybuilder@*",
-  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-querybuilder",
+  "version": "29.2.10",
+  "description": "Essential JS 2 QueryBuilder",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-querybuilder.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~29.2.4",
     "@syncfusion/ej2-buttons": "~29.2.5",
-    "@syncfusion/ej2-calendars": "~29.2.5",
-    "@syncfusion/ej2-dropdowns": "~29.2.5",
+    "@syncfusion/ej2-calendars": "~29.2.10",
+    "@syncfusion/ej2-dropdowns": "~29.2.10",
     "@syncfusion/ej2-inputs": "~29.2.5",
     "@syncfusion/ej2-splitbuttons": "~29.2.4"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 QueryBuilder",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -57,16 +30,11 @@
     "typescript query builder",
     "syncfusion query builder"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-querybuilder.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-querybuilder",
   "repository": {
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "29.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/query-builder/query-builder.d.ts

@@ -347,6 +347,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private prvtEvtTgrDaD;
     private isDragEventPrevent;
     private isValueEmpty;
+    private isPropChange;
     private ddTree;
     /**
      * Triggers when the component is created.
@@ -768,6 +769,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private deleteRuleSuccessCallBack;
     private setGroupRules;
     private keyBoardHandler;
+    private windowResizeHandler;
     private clearQBTemplate;
     private disableRuleCondition;
     /**

package/src/query-builder/query-builder.js

@@ -218,6 +218,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.isMiddleGroup = false;
         _this.cloneRuleBtnClick = false;
         _this.isValueEmpty = false;
+        _this.isPropChange = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -1342,7 +1343,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             else {
                 dragClsName = 'e-icons e-drag-qb-rule e-hidden';
             }
-            var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+            var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-label': 'drag handle',
                     title: 'drag handle' } });
             groupHdrElem.appendChild(spanDragElement);
             var className = this.enableSeparateConnector && !isConnector ? 'e-lib e-btn-group e-qb-toggle-btn' : 'e-lib e-btn-group';
@@ -1400,7 +1401,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             dragClsName = 'e-icons e-drag-qb-rule e-hidden';
         }
-        var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+        var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-label': 'drag handle',
                 title: 'drag handle' } });
         fieldElem.appendChild(spanDragElement);
         var filterElem = this.createElement('input', { attrs: { type: 'text', class: 'e-filter-input' } });
@@ -3956,8 +3957,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         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');
             }
@@ -4080,6 +4081,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.onPropertyChanged = function (newProp, oldProp) {
         var properties = Object.keys(newProp);
+        this.isPropChange = true;
         var groupElem = this.element.querySelector('.e-group-container');
         var summaryElem = this.element.querySelector('.e-summary-content');
         for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
@@ -4235,6 +4237,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     break;
             }
         }
+        this.isPropChange = false;
     };
     QueryBuilder.prototype.preRender = function () {
         this.element.id = this.element.id || getUniqueID('ej2-querybuilder');
@@ -4794,6 +4797,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         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));
     };
     QueryBuilder.prototype.unWireEvents = function () {
         var wrapper = this.getWrapper();
@@ -4802,6 +4806,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         EventHandler.remove(wrapper, 'focusin', this.focusEventHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         EventHandler.remove(document, 'keydown', this.keyBoardHandler);
+        window.removeEventListener('resize', this.windowResizeHandler);
     };
     QueryBuilder.prototype.getParentGroup = function (target, isParent) {
         var groupLevel = (target instanceof Element) ? this.levelColl[target.id] : this.levelColl["" + target];
@@ -5067,6 +5072,14 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
     };
+    QueryBuilder.prototype.windowResizeHandler = function () {
+        if (Browser.isDevice || window.innerWidth < 768) {
+            this.displayMode = 'Vertical';
+        }
+        else {
+            this.displayMode = 'Horizontal';
+        }
+    };
     QueryBuilder.prototype.clearQBTemplate = function (ruleElemColl) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact || this.isAngular) {