@syncfusion/ej2-querybuilder 26.2.11 → 27.1.50

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

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Collection, closest, isNullOrUndefined, extend, remove, getComponent, removeClass, Animation, addClass, select, append, detach, rippleEffect, getInstance, getValue, getNumericObject, Browser, classList, Internationalization, getUniqueID, L10n, Draggable, compile, EventHandler, cldrData, Event, Complex, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, Collection, getComponent, removeClass, isNullOrUndefined, Animation, extend, closest, addClass, select, append, detach, rippleEffect, getInstance, getValue, getNumericObject, Browser, classList, Internationalization, getUniqueID, L10n, Draggable, remove, compile, EventHandler, cldrData, Event, Complex, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
 import { Button, CheckBox, RadioButton } from '@syncfusion/ej2-buttons';
 import { MultiSelect, CheckBoxSelection, DropDownList, DropDownTree } from '@syncfusion/ej2-dropdowns';
 import { Query, DataManager, Deferred, Predicate } from '@syncfusion/ej2-data';
@@ -205,233 +205,6 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         _this.isMiddleGroup = false;
         _this.cloneRuleBtnClick = false;
         _this.isValueEmpty = false;
-        _this.dragStopHandler = function (e) {
-            if (_this.isDragEventPrevent) {
-                return;
-            }
-            var targetGroup = closest(e.target, '.e-rule-container');
-            if (isNullOrUndefined(targetGroup) && e.target.parentElement &&
-                e.target.parentElement.classList.contains('e-btn-group') && _this.enableSeparateConnector) {
-                targetGroup = closest(e.target.parentElement.previousElementSibling, '.e-rule-container');
-            }
-            var isPreventelem = closest(e.helper, '.e-notallowedcur');
-            var prevRule;
-            if (!isPreventelem) {
-                var targetGrp = closest(e.target, '.e-group-container');
-                var dropEventArgs = { cancel: false, dropRuleID: targetGroup !== null ? targetGroup.id
-                        : targetGrp !== null ? targetGrp.id : null, dropGroupID: targetGrp !== null ? targetGrp.id : null };
-                _this.trigger('drop', dropEventArgs);
-                if (dropEventArgs.cancel) {
-                    isPreventelem = true;
-                }
-                prevRule = _this.getValidRules();
-            }
-            _this.prvtEvtTgrDaD = true;
-            var tgrt = _this.enableSeparateConnector && e.target.parentElement &&
-                e.target.parentElement.classList.contains('e-btn-group') ? e.target.parentElement.previousElementSibling : e.target;
-            if (targetGroup && !isPreventelem) {
-                var groupId_1 = targetGroup.id.split(_this.element.id + '_')[1].split('_')[0];
-                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-rule-field') ||
-                    _this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                    var rule = void 0;
-                    if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                        rule = _this.getGroup(_this.draggedRule);
-                        _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
-                    }
-                    else {
-                        rule = _this.getRule(_this.draggedRule);
-                        _this.deleteRule(_this.draggedRule);
-                    }
-                    var groupRule = extend([], _this.getGroup(targetGroup), [], true);
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if (groupRule.properties) {
-                        groupRule = groupRule.properties;
-                    }
-                    var groupElem = closest(targetGroup, '.e-group-container');
-                    var nestGrpElem = groupElem.querySelectorAll('.e-group-container');
-                    nestGrpElem.forEach(function (ele) {
-                        if (_this.element.querySelector('#' + ele.id)) {
-                            _this.deleteGroup(ele);
-                        }
-                    });
-                    var ruleElems = groupElem.querySelectorAll('.e-rule-container');
-                    var ruleIds = [];
-                    var dropInd = void 0;
-                    for (var i = 0; i < ruleElems.length; i++) {
-                        if (ruleElems[i].classList.contains('e-drag-rule-top-line') ||
-                            ruleElems[i].classList.contains('e-drag-rule-bottom-line')) {
-                            dropInd = i;
-                        }
-                        ruleIds.push(ruleElems[i].id.split(_this.element.id + '_')[1]);
-                    }
-                    _this.deleteRules(ruleIds);
-                    if (targetGroup.classList.contains('e-drag-rule-top-line')) {
-                        groupRule.rules.splice(dropInd, 0, rule);
-                    }
-                    else {
-                        groupRule.rules.splice(dropInd + 1, 0, rule);
-                    }
-                    groupRule.rules.forEach(function (rule) {
-                        if (_this.enableSeparateConnector) {
-                            if (!rule.rules) {
-                                _this.addRules([rule], groupId_1);
-                            }
-                            else {
-                                _this.addGroups([rule], groupId_1);
-                            }
-                        }
-                        else {
-                            if (rule.condition) {
-                                _this.addGroups([rule], groupId_1);
-                            }
-                            else {
-                                _this.addRules([rule], groupId_1);
-                            }
-                        }
-                    });
-                }
-            }
-            else if (tgrt.classList.contains('e-rule-list') && tgrt.children.length === 0 && !isPreventelem) {
-                var groupElem = closest(tgrt, '.e-group-container');
-                var groupId = groupElem.id.split(_this.element.id + '_')[1].split('_')[0];
-                var rule = void 0;
-                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                    rule = _this.getGroup(_this.draggedRule);
-                    _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
-                }
-                else {
-                    rule = _this.getRule(_this.draggedRule);
-                    _this.deleteRule(_this.draggedRule);
-                }
-                if (_this.enableSeparateConnector) {
-                    if (!rule.rules) {
-                        _this.addRules([rule], groupId);
-                    }
-                    else {
-                        _this.addGroups([rule], groupId);
-                    }
-                }
-                else {
-                    if (rule.condition) {
-                        _this.addGroups([rule], groupId);
-                    }
-                    else {
-                        _this.addRules([rule], groupId);
-                    }
-                }
-            }
-            else if (tgrt.classList.contains('e-rule-list') && tgrt.children[0].classList.contains('e-group-container') && !isPreventelem) {
-                var groupElem = closest(tgrt, '.e-group-container');
-                var groupId_2 = groupElem.id.split(_this.element.id + '_')[1].split('_')[0];
-                var rule = void 0;
-                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                    rule = _this.getGroup(_this.draggedRule);
-                    _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
-                }
-                else {
-                    rule = _this.getRule(_this.draggedRule);
-                    _this.deleteRule(_this.draggedRule);
-                }
-                var groupRule = extend([], _this.getGroup(tgrt), [], true);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if (groupRule.properties) {
-                    groupRule = groupRule.properties;
-                }
-                var groupElems = tgrt.querySelectorAll('.e-group-container');
-                groupElems.forEach(function (ele) {
-                    if (_this.element.querySelector('#' + ele.id)) {
-                        _this.deleteGroup(ele);
-                    }
-                });
-                var ruleElems = groupElem.querySelectorAll('.e-rule-container');
-                ruleElems.forEach(function (ele) {
-                    if (_this.element.querySelector('#' + ele.id)) {
-                        _this.deleteRule(ele);
-                    }
-                });
-                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                    _this.addGroups([rule], groupId_2);
-                }
-                else {
-                    _this.addRules([rule], groupId_2);
-                }
-                groupRule.rules.forEach(function (rule) {
-                    if (_this.enableSeparateConnector) {
-                        if (!rule.rules) {
-                            _this.addRules([rule], groupId_2);
-                        }
-                        else {
-                            _this.addGroups([rule], groupId_2);
-                        }
-                    }
-                    else {
-                        if (rule.condition) {
-                            _this.addGroups([rule], groupId_2);
-                        }
-                        else {
-                            _this.addRules([rule], groupId_2);
-                        }
-                    }
-                });
-            }
-            else if ((closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) && !isPreventelem) {
-                var rule = void 0;
-                targetGroup = closest(e.target, '.e-group-container');
-                if (!targetGroup && e.target.classList.contains('e-group-container')) {
-                    targetGroup = e.target;
-                }
-                var groupId = targetGroup.id.split(_this.element.id + '_')[1].split('_')[0];
-                if (groupId === 'group0') {
-                    if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                        rule = _this.getGroup(_this.draggedRule);
-                        _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
-                    }
-                    else {
-                        rule = _this.getRule(_this.draggedRule);
-                        _this.deleteRule(_this.draggedRule);
-                    }
-                    if (_this.enableSeparateConnector) {
-                        if (!rule.rules) {
-                            _this.addRules([rule], groupId);
-                        }
-                        else {
-                            _this.addGroups([rule], groupId);
-                        }
-                    }
-                    else {
-                        if (rule.condition) {
-                            _this.addGroups([rule], groupId);
-                        }
-                        else {
-                            _this.addRules([rule], groupId);
-                        }
-                    }
-                }
-            }
-            if (!isPreventelem) {
-                _this.trigger('ruleChange', { previousRule: prevRule, rule: _this.getValidRules(), type: 'drag-and-drop' });
-            }
-            _this.prvtEvtTgrDaD = false;
-            document.body.classList.remove('e-prevent-select');
-            var borderLineElem = _this.element.querySelectorAll('.e-drag-rule-bottom-line');
-            borderLineElem.forEach(function (ele) {
-                ele.classList.remove('e-drag-rule-bottom-line');
-            });
-            borderLineElem = _this.element.querySelectorAll('.e-drag-rule-top-line');
-            borderLineElem.forEach(function (ele) {
-                ele.classList.remove('e-drag-rule-top-line');
-            });
-            borderLineElem = _this.element.querySelectorAll('.e-qb-dragging-rule');
-            borderLineElem.forEach(function (ele) {
-                ele.classList.remove('e-qb-dragging-rule');
-            });
-            if (e.helper.classList.contains('e-cloneproperties') && document.querySelector('.' + e.helper.classList[0])) {
-                remove(e.helper);
-            }
-            if (_this.enableSeparateConnector) {
-                _this.refresh();
-            }
-        };
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -937,7 +710,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                 elem = template;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 append(elem, ruleElem);
-                ruleElem.children[ruleElem.children.length - 1].className += ' e-rule-field';
+                if (ruleElem.children.length) {
+                    ruleElem.children[ruleElem.children.length - 1].className += ' e-rule-field';
+                }
             }
             else {
                 template = this.ruleTemplateFn(args, this, 'Template', templateID)[0];
@@ -1227,11 +1002,14 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                 .filter(function (filteredChild) { return filteredChild !== null; });
             this.changeDataSource(matchedDataSource);
             setTimeout(function () {
-                proxy.ddTree.treeObj.expandAll();
+                if (!isNullOrUndefined(proxy.ddTree) && !isNullOrUndefined(proxy.ddTree.treeObj)) {
+                    proxy.ddTree.treeObj.expandAll();
+                }
             }, 100);
         }
     };
     QueryBuilder.prototype.changeDataSource = function (data) {
+        this.updateDropdowntreeDS(data);
         this.ddTree.treeObj.fields = {
             dataSource: data,
             value: 'field',
@@ -1266,7 +1044,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     };
     QueryBuilder.prototype.dropdownTreeClose = function () {
         if (this.ddTree) {
-            this.changeDataSource(this.columns);
+            this.changeDataSource(extend([], this.columns, [], true));
         }
         this.ddTree = null;
     };
@@ -1970,7 +1748,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         if (this.headerTemplate) {
             args = { requestType: 'header-template-initialize', ruleID: groupElem.id,
                 notCondition: this.enableNotCondition ? not : undefined,
-                condition: condition, rule: this.getRuleCollection(rule, true), groupID: groupID };
+                condition: condition, rule: this.getRuleCollection(rule, false), groupID: groupID };
             this.trigger('actionBegin', args);
             if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
                 args.requestType = 'rule-template-create';
@@ -2006,6 +1784,17 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             }
             else if (this.isVue3) {
                 template = this.headerFn(args, this, groupElem.id, templateID);
+                if (this.enableSeparateConnector && (isInitialRule || groupElem.id.indexOf('rule') !== -1)) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    for (var i = 0; i < template.length; i++) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        if (template[i].nodeName === 'DIV') {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            template = template[i];
+                            break;
+                        }
+                    }
+                }
                 if (this.enableSeparateConnector && isInitialRule) {
                     this.enableSeparateConnectorInitialRule(groupElem, template);
                 }
@@ -2209,7 +1998,8 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var element;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (this.isNumInput && typeof args.value === 'number') {
+        if ((this.isNumInput && typeof args.value === 'number') || (args.type === 'input' && args.target && args.target.classList.contains('e-numerictextbox'))
+            && (this.selectedColumn.validation.max !== Number.MAX_VALUE || this.selectedColumn.validation.min > 0)) {
             this.isNumInput = false;
             return;
         }
@@ -2222,7 +2012,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             element = args.event.target;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
-        else if (args.type === 'input' && args.currentTarget) {
+        else if (args.type === 'input' && args.target && args.target.classList.contains('e-numerictextbox')) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             element = args.currentTarget;
         }
@@ -2284,7 +2074,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         else {
             value = args.value;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            if (args.type === 'input' && args.currentTarget) {
+            if (args.type === 'input' && args.target && args.target.classList.contains('e-numerictextbox')) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 value = Number(args.currentTarget.value);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2334,7 +2124,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         this.isFieldClose = true;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var ddl = getComponent(id, 'dropdownlist');
-        var item = ddl.popupObj.element.querySelector('.e-active');
+        var item = ddl.popupObj && ddl.popupObj.element.querySelector('.e-active');
         var itemData = ddl.getItemData();
         ddl.value = itemData.value;
         var customArgs = { element: ddl.element, value: itemData.value, isInteracted: true,
@@ -2673,13 +2463,13 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                 }
                 var height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
                 var operator_2;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                operatorList.forEach(function (obj) {
-                    if ('value' in obj && typeof obj.value === 'string' && obj.value.toLowerCase() === rule.operator.toLowerCase()) {
-                        operator_2 = obj.value;
-                    }
-                });
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (rule.operator) {
+                    operatorList.forEach(function (obj) {
+                        if ('value' in obj && typeof obj.value === 'string' && obj.value.toLowerCase() === rule.operator.toLowerCase()) {
+                            operator_2 = obj.value;
+                        }
+                    });
+                }
                 var value = operator_2 ? operator_2 : operatorList[0].value;
                 var ddlIdx = 0;
                 if (!this.autoSelectOperator) {
@@ -3014,8 +2804,11 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     QueryBuilder.prototype.closePopup = function (i, args) {
         var element = document.getElementById(args.popup.element.id.replace('_popup', ''));
         if (element) {
-            var value = getComponent(element, 'multiselect').value;
-            this.updateRules(element, value, i);
+            var ms = getComponent(element, 'multiselect');
+            if (ms) {
+                var value = ms.value;
+                this.updateRules(element, value, i);
+            }
         }
     };
     QueryBuilder.prototype.processTemplate = function (target, itemData, rule, tempRule) {
@@ -4647,6 +4440,237 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         this.trigger('drag', dragEventArgs);
         this.isDragEventPrevent = dragEventArgs.cancel;
     };
+    QueryBuilder.prototype.dragStopHandler = function (e) {
+        var _this = this;
+        if (this.isDragEventPrevent) {
+            return;
+        }
+        var targetGroup = closest(e.target, '.e-rule-container');
+        if (isNullOrUndefined(targetGroup) && e.target.parentElement &&
+            e.target.parentElement.classList.contains('e-btn-group') && this.enableSeparateConnector) {
+            targetGroup = closest(e.target.parentElement.previousElementSibling, '.e-rule-container');
+        }
+        var isPreventelem;
+        if (!isNullOrUndefined(e.helper)) {
+            isPreventelem = closest(e.helper, '.e-notallowedcur');
+        }
+        var prevRule;
+        if (!isPreventelem) {
+            var targetGrp = closest(e.target, '.e-group-container');
+            var dropEventArgs = { cancel: false, dropRuleID: targetGroup !== null ? targetGroup.id
+                    : targetGrp !== null ? targetGrp.id : null, dropGroupID: targetGrp !== null ? targetGrp.id : null };
+            this.trigger('drop', dropEventArgs);
+            if (dropEventArgs.cancel) {
+                isPreventelem = true;
+            }
+            prevRule = this.getValidRules();
+        }
+        this.prvtEvtTgrDaD = true;
+        var tgrt = this.enableSeparateConnector && e.target.parentElement &&
+            e.target.parentElement.classList.contains('e-btn-group') ? e.target.parentElement.previousElementSibling : e.target;
+        if (targetGroup && !isPreventelem) {
+            var groupId_1 = targetGroup.id.split(this.element.id + '_')[1].split('_')[0];
+            if (this.draggable.currentStateTarget.parentElement.classList.contains('e-rule-field') ||
+                this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                var rule = void 0;
+                if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                    rule = this.getGroup(this.draggedRule);
+                    this.deleteGroup(closest(this.draggedRule, '.e-group-container'));
+                }
+                else {
+                    rule = this.getRule(this.draggedRule);
+                    this.deleteRule(this.draggedRule);
+                }
+                var groupRule = extend([], this.getGroup(targetGroup), [], true);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (groupRule.properties) {
+                    groupRule = groupRule.properties;
+                }
+                var groupElem = closest(targetGroup, '.e-group-container');
+                var nestGrpElem = groupElem.querySelectorAll('.e-group-container');
+                nestGrpElem.forEach(function (ele) {
+                    if (_this.element.querySelector('#' + ele.id)) {
+                        _this.deleteGroup(ele);
+                    }
+                });
+                var ruleElems = groupElem.querySelectorAll('.e-rule-container');
+                var ruleIds = [];
+                var dropInd = void 0;
+                for (var i = 0; i < ruleElems.length; i++) {
+                    if (ruleElems[i].classList.contains('e-drag-rule-top-line') ||
+                        ruleElems[i].classList.contains('e-drag-rule-bottom-line')) {
+                        dropInd = i;
+                    }
+                    ruleIds.push(ruleElems[i].id.split(this.element.id + '_')[1]);
+                }
+                this.deleteRules(ruleIds);
+                if (targetGroup.classList.contains('e-drag-rule-top-line')) {
+                    groupRule.rules.splice(dropInd, 0, rule);
+                }
+                else {
+                    groupRule.rules.splice(dropInd + 1, 0, rule);
+                }
+                groupRule.rules.forEach(function (rule) {
+                    if (_this.enableSeparateConnector) {
+                        if (!rule.rules) {
+                            _this.addRules([rule], groupId_1);
+                        }
+                        else {
+                            _this.addGroups([rule], groupId_1);
+                        }
+                    }
+                    else {
+                        if (rule.condition) {
+                            _this.addGroups([rule], groupId_1);
+                        }
+                        else {
+                            _this.addRules([rule], groupId_1);
+                        }
+                    }
+                });
+            }
+        }
+        else if (tgrt.classList.contains('e-rule-list') && tgrt.children.length === 0 && !isPreventelem) {
+            var groupElem = closest(tgrt, '.e-group-container');
+            var groupId = groupElem.id.split(this.element.id + '_')[1].split('_')[0];
+            var rule = void 0;
+            if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                rule = this.getGroup(this.draggedRule);
+                this.deleteGroup(closest(this.draggedRule, '.e-group-container'));
+            }
+            else {
+                rule = this.getRule(this.draggedRule);
+                this.deleteRule(this.draggedRule);
+            }
+            if (this.enableSeparateConnector) {
+                if (!rule.rules) {
+                    this.addRules([rule], groupId);
+                }
+                else {
+                    this.addGroups([rule], groupId);
+                }
+            }
+            else {
+                if (rule.condition) {
+                    this.addGroups([rule], groupId);
+                }
+                else {
+                    this.addRules([rule], groupId);
+                }
+            }
+        }
+        else if (tgrt.classList.contains('e-rule-list') && tgrt.children[0].classList.contains('e-group-container') && !isPreventelem) {
+            var groupElem = closest(tgrt, '.e-group-container');
+            var groupId_2 = groupElem.id.split(this.element.id + '_')[1].split('_')[0];
+            var rule = void 0;
+            if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                rule = this.getGroup(this.draggedRule);
+                this.deleteGroup(closest(this.draggedRule, '.e-group-container'));
+            }
+            else {
+                rule = this.getRule(this.draggedRule);
+                this.deleteRule(this.draggedRule);
+            }
+            var groupRule = extend([], this.getGroup(tgrt), [], true);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (groupRule.properties) {
+                groupRule = groupRule.properties;
+            }
+            var groupElems = tgrt.querySelectorAll('.e-group-container');
+            groupElems.forEach(function (ele) {
+                if (_this.element.querySelector('#' + ele.id)) {
+                    _this.deleteGroup(ele);
+                }
+            });
+            var ruleElems = groupElem.querySelectorAll('.e-rule-container');
+            ruleElems.forEach(function (ele) {
+                if (_this.element.querySelector('#' + ele.id)) {
+                    _this.deleteRule(ele);
+                }
+            });
+            if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                this.addGroups([rule], groupId_2);
+            }
+            else {
+                this.addRules([rule], groupId_2);
+            }
+            groupRule.rules.forEach(function (rule) {
+                if (_this.enableSeparateConnector) {
+                    if (!rule.rules) {
+                        _this.addRules([rule], groupId_2);
+                    }
+                    else {
+                        _this.addGroups([rule], groupId_2);
+                    }
+                }
+                else {
+                    if (rule.condition) {
+                        _this.addGroups([rule], groupId_2);
+                    }
+                    else {
+                        _this.addRules([rule], groupId_2);
+                    }
+                }
+            });
+        }
+        else if ((closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) && !isPreventelem) {
+            var rule = void 0;
+            targetGroup = closest(e.target, '.e-group-container');
+            if (!targetGroup && e.target.classList.contains('e-group-container')) {
+                targetGroup = e.target;
+            }
+            var groupId = targetGroup.id.split(this.element.id + '_')[1].split('_')[0];
+            if (groupId === 'group0') {
+                if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                    rule = this.getGroup(this.draggedRule);
+                    this.deleteGroup(closest(this.draggedRule, '.e-group-container'));
+                }
+                else {
+                    rule = this.getRule(this.draggedRule);
+                    this.deleteRule(this.draggedRule);
+                }
+                if (this.enableSeparateConnector) {
+                    if (!rule.rules) {
+                        this.addRules([rule], groupId);
+                    }
+                    else {
+                        this.addGroups([rule], groupId);
+                    }
+                }
+                else {
+                    if (rule.condition) {
+                        this.addGroups([rule], groupId);
+                    }
+                    else {
+                        this.addRules([rule], groupId);
+                    }
+                }
+            }
+        }
+        if (!isPreventelem) {
+            this.trigger('ruleChange', { previousRule: prevRule, rule: this.getValidRules(), type: 'drag-and-drop' });
+        }
+        this.prvtEvtTgrDaD = false;
+        document.body.classList.remove('e-prevent-select');
+        var borderLineElem = this.element.querySelectorAll('.e-drag-rule-bottom-line');
+        borderLineElem.forEach(function (ele) {
+            ele.classList.remove('e-drag-rule-bottom-line');
+        });
+        borderLineElem = this.element.querySelectorAll('.e-drag-rule-top-line');
+        borderLineElem.forEach(function (ele) {
+            ele.classList.remove('e-drag-rule-top-line');
+        });
+        borderLineElem = this.element.querySelectorAll('.e-qb-dragging-rule');
+        borderLineElem.forEach(function (ele) {
+            ele.classList.remove('e-qb-dragging-rule');
+        });
+        if (e.helper && e.helper.classList.contains('e-cloneproperties') && document.querySelector('.' + e.helper.classList[0])) {
+            remove(e.helper);
+        }
+        if (this.enableSeparateConnector) {
+            this.refresh();
+        }
+    };
     QueryBuilder.prototype.templateParser = function (template) {
         if (template) {
             try {
@@ -4722,10 +4746,14 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         if (typeof target === 'string') {
             groupId = this.element.id + '_' + target;
             target = document.getElementById(groupId);
+            groupId = groupId.replace(this.element.id + '_', '');
         }
         else {
             groupId = groupElem.id.replace(this.element.id + '_', '');
         }
+        if (groupId === 'group0' || !target) {
+            return;
+        }
         var args = { groupID: groupId, cancel: false, type: 'deleteGroup' };
         if (!this.isImportRules && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, function (observedChangeArgs) {
@@ -5091,7 +5119,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                 }
-                else if (!isNewRuleAdded) {
+                else if (!isNewRuleAdded && !isNullOrUndefined(andElem)) {
                     andElem.checked = false;
                     andElem.disabled = true;
                     orElem.checked = false;
@@ -5309,6 +5337,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         var len = groupIdColl.length;
         var groupID;
         for (i = 0; i < len; i++) {
+            if (groupIdColl[i] === 'group0') {
+                continue;
+            }
             groupID = this.element.id + '_' + groupIdColl[i];
             this.deleteGroup(document.getElementById(groupID));
         }
@@ -6430,9 +6461,13 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             return matchValue.length + 2;
         }
         if (this.checkNumberLiteral(sqlString, sqlLocale)) {
-            matchValue = /^[0-9]+(\.[0-9]+)$/.exec(sqlString)[0];
-            this.parser.push(['Literal', matchValue]);
-            return matchValue.length;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var regExValue = /^[0-9]+(\.[0-9]+)$/.exec(sqlString);
+            if (regExValue) {
+                matchValue = regExValue[0];
+                this.parser.push(['Literal', matchValue]);
+                return matchValue.length;
+            }
         }
         //String
         var singleString = this.getSingleQuoteString(sqlString);
@@ -6846,16 +6881,8 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
      */
     QueryBuilder.prototype.groupClone = function (target) {
         var groupElem = target.closest('.e-rule-list').closest('.e-group-container');
-        var targetGrpId;
-        var groupId;
-        if (typeof target === 'string') {
-            groupId = this.element.id + '_' + target;
-            target = document.getElementById(groupId);
-        }
-        else {
-            targetGrpId = target.id.replace(this.element.id + '_', '');
-            groupId = groupElem.id.replace(this.element.id + '_', '');
-        }
+        var targetGrpId = target.id.replace(this.element.id + '_', '');
+        var groupId = groupElem.id.replace(this.element.id + '_', '');
         var group = this.getGroup(targetGrpId);
         this.groupIndex = Array.prototype.indexOf.call(target.closest('.e-rule-list').children, target.closest('.e-group-container'));
         this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupId);