@syncfusion/ej2-querybuilder 33.2.7 → 34.1.29

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.7
+*  version : 34.1.29
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-querybuilder",
-  "version": "33.2.7",
+  "version": "34.1.29",
   "description": "Essential JS 2 QueryBuilder",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.5",
-    "@syncfusion/ej2-calendars": "~33.2.7",
-    "@syncfusion/ej2-dropdowns": "~33.2.7",
-    "@syncfusion/ej2-inputs": "~33.2.5",
-    "@syncfusion/ej2-splitbuttons": "~33.2.6"
+    "@syncfusion/ej2-base": "~34.1.29",
+    "@syncfusion/ej2-buttons": "~34.1.29",
+    "@syncfusion/ej2-calendars": "~34.1.29",
+    "@syncfusion/ej2-dropdowns": "~34.1.29",
+    "@syncfusion/ej2-inputs": "~34.1.29",
+    "@syncfusion/ej2-splitbuttons": "~34.1.29"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -347,6 +347,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private dragElement;
     private prvtEvtTgrDaD;
     private isDragEventPrevent;
+    private groupConnectorStates;
     private isValueEmpty;
     private isPropChange;
     private isRuleClicked;
@@ -795,6 +796,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private deleteRuleSuccessCallBack;
     private setGroupRules;
     private keyBoardHandler;
+    private restoreGroupConnectorStates;
     private windowResizeHandler;
     private clearQBTemplate;
     private disableRuleCondition;

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

@@ -217,6 +217,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.cloneGrpBtnClick = false;
         _this.isMiddleGroup = false;
         _this.cloneRuleBtnClick = false;
+        _this.groupConnectorStates = {};
         _this.isValueEmpty = false;
         _this.isPropChange = false;
         _this.isRuleClicked = false;
@@ -4866,6 +4867,17 @@ var QueryBuilder = /** @class */ (function (_super) {
         return visualElement;
     };
     QueryBuilder.prototype.dragStartHandler = function (e) {
+        var _this = this;
+        this.groupConnectorStates = {};
+        var allGroupContainers = this.element.querySelectorAll('.e-group-container');
+        allGroupContainers.forEach(function (grpContainer) {
+            if (grpContainer.id !== '') {
+                var groupRule = _this.getGroup(grpContainer);
+                if (groupRule && groupRule.condition) {
+                    _this.groupConnectorStates[grpContainer.id] = groupRule.condition.toUpperCase();
+                }
+            }
+        });
         this.draggedRule = e.target;
         this.isDragEventPrevent = false;
         document.body.classList.add('e-prevent-select');
@@ -4953,6 +4965,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (this.isDragEventPrevent) {
             return;
         }
+        var dropped = false;
         var targetGroup = closest(e.target, '.e-rule-container');
         if (isNullOrUndefined(targetGroup) && e.target.parentElement &&
             e.target.parentElement.classList.contains('e-btn-group') && this.enableSeparateConnector) {
@@ -5057,6 +5070,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                         }
                     }
                 });
+                dropped = true;
             }
         }
         else if (tgrt.classList.contains('e-rule-list') && tgrt.children.length === 0 && !isPreventelem) {
@@ -5087,6 +5101,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     this.addRules([rule], groupId);
                 }
             }
+            dropped = true;
         }
         else if (tgrt.classList.contains('e-rule-list') && tgrt.children[0].classList.contains('e-group-container') && !isPreventelem) {
             var groupElem = closest(tgrt, '.e-group-container');
@@ -5141,6 +5156,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
             });
+            dropped = true;
         }
         else if ((closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) && !isPreventelem) {
             var rule = void 0;
@@ -5175,10 +5191,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
             }
+            dropped = true;
         }
         if (!isPreventelem) {
             this.trigger('ruleChange', { previousRule: prevRule, rule: this.getValidRules(), type: 'drag-and-drop' });
         }
+        if (!dropped) {
+            this.restoreGroupConnectorStates();
+        }
         this.prvtEvtTgrDaD = false;
         document.body.classList.remove('e-prevent-select');
         var borderLineElem = this.element.querySelectorAll('.e-drag-rule-bottom-line');
@@ -5538,11 +5558,38 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (dragElemnet) {
                 remove(dragElemnet);
             }
+            this.restoreGroupConnectorStates();
             if (this.enableSeparateConnector) {
                 this.refresh();
             }
         }
     };
+    QueryBuilder.prototype.restoreGroupConnectorStates = function () {
+        var _this = this;
+        var updatedGroupContainers = this.element.querySelectorAll('.e-group-container');
+        updatedGroupContainers.forEach(function (grpContainer) {
+            var groupId = grpContainer.id;
+            if (_this.groupConnectorStates.hasOwnProperty(groupId)) {
+                var savedCondition = _this.groupConnectorStates[groupId];
+                var groupRule = _this.getGroup(grpContainer);
+                if (groupRule) {
+                    groupRule.condition = savedCondition.toLowerCase();
+                }
+                var andElem = grpContainer.querySelector('.e-btngroup-and');
+                var orElem = grpContainer.querySelector('.e-btngroup-or');
+                if (andElem && orElem) {
+                    if (savedCondition === 'AND') {
+                        andElem.checked = true;
+                        orElem.checked = false;
+                    }
+                    else {
+                        orElem.checked = true;
+                        andElem.checked = false;
+                    }
+                }
+            }
+        });
+    };
     QueryBuilder.prototype.windowResizeHandler = function () {
         if (Browser.isDevice || window.innerWidth < 768) {
             this.displayMode = 'Vertical';
@@ -6401,8 +6448,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     if (this.element.querySelectorAll('.e-group-container').length > this.maxGroupCount) {
                         return null;
                     }
-                    if (isNullOrUndefined(this.updatedRule) && this.allowDragAndDrop && this.dragElement &&
-                        this.dragElement.querySelector('.e-rule-list') && this.dragElement.querySelector('.e-rule-list').querySelector('.e-group-container')) {
+                    if (isNullOrUndefined(this.updatedRule) && this.allowDragAndDrop && this.dragElement) {
                         this.updatedRule = {
                             isLocked: ruleColl[i].isLocked, condition: ruleColl[i].condition,
                             not: ruleColl[i].not

package/styles/bds-lite.css

@@ -2,246 +2,6 @@
 
 
 
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  overflow: hidden;
-  padding: 4px 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  white-space: nowrap;
-}
-.e-dropdown-popup ul .e-item {
-  cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 12px;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
-.e-ddl.e-control-wrapper .e-ddl-icon::before {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  color: var(--color-sf-text-primary);
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
-.e-input-group:not(.e-disabled) .e-back-icon:active,
-.e-input-group:not(.e-disabled) .e-back-icon:hover,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
-  background: transparent;
-}
-
-.e-input-group .e-ddl-icon:not(:active)::after {
-  -webkit-animation: none;
-          animation: none;
-}
-
-.e-ddl.e-popup {
-  border: 0;
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  margin-top: 4px;
-}
-
-.e-small .e-ddl.e-popup,
-.e-small.e-ddl.e-popup {
-  border-radius: 4px;
-  margin-top: 2px;
-}
-
-.e-popup.e-ddl .e-dropdownbase {
-  min-height: 26px;
-  padding: 4px 6px;
-}
-
-.e-input-group.e-ddl,
-.e-input-group.e-ddl .e-input,
-.e-input-group.e-ddl .e-ddl-icon {
-  background: var(--color-sf-bg-primary);
-}
-
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
-  border-bottom-width: 0;
-}
-
-.e-ddl.e-popup.e-outline .e-filter-parent {
-  padding: 4px 8px;
-}
-
-.e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
-  line-height: 30px;
-  top: 0;
-}
-
-.e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
-  border-right-width: 0;
-}
-
-.e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
-  border-left-width: 0;
-  border-radius: 4px 0 0 4px;
-  border-right-width: 0;
-}
-
-.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  height: 32px;
-  width: 32px;
-}
-
-.e-multi-select-wrapper .e-searcher input[type=text],
-.e-multi-select-wrapper .e-multi-searcher input[type=text] {
-  color: var(--color-sf-text-primary);
-  height: 100%;
-}
-
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
 .e-query-builder .e-collapse-rule::before {
   content: "\e80e";
 }
@@ -249,10 +9,6 @@
   content: "\e726";
 }
 
-
-
-
-
 .e-query-builder {
   border: 1px solid;
   border-radius: 4px;
@@ -764,10 +520,6 @@
   height: 29px;
 }
 
-
-
-
-
 .e-query-builder {
   background: transparent;
   border-color: var(--color-sf-border-secondary);

package/styles/bds-lite.scss

@@ -1,14 +1,3 @@
-@use 'ej2-buttons/styles/button/bds-definition' as *;
-@use 'ej2-buttons/styles/radio-button/bds-definition' as *;
-@use 'ej2-splitbuttons/styles/button-group/bds-definition' as *;
-@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
-@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
-@use 'ej2-dropdowns/styles/multi-select/bds-definition' as *;
-@use 'ej2-calendars/styles/datepicker/bds-definition' as *;
-@use 'ej2-inputs/styles/numerictextbox/bds-definition' as *;
-@use 'ej2-inputs/styles/textbox/bds-definition' as *;
-@use 'ej2-popups/styles/tooltip/bds-definition' as *;
-@use 'ej2-popups/styles/spinner/bds-definition' as *;
 @use 'query-builder/bds-definition' as *;
 @use 'query-builder/icons/bds' as *;
-@use 'query-builder/all.bds' as *;
+@use 'query-builder/all' as *;