@syncfusion/ej2-querybuilder 26.2.11 → 27.1.50

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

@@ -1,4 +1,4 @@
-import { ChildProperty, Property, Collection, Component, 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 } from '@syncfusion/ej2-base';
+import { ChildProperty, Property, Collection, Component, 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 } 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';
@@ -160,233 +160,6 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.isMiddleGroup = false;
         this.cloneRuleBtnClick = false;
         this.isValueEmpty = false;
-        this.dragStopHandler = (e) => {
-            if (this.isDragEventPrevent) {
-                return;
-            }
-            let 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');
-            }
-            let isPreventelem = closest(e.helper, '.e-notallowedcur');
-            let prevRule;
-            if (!isPreventelem) {
-                const targetGrp = closest(e.target, '.e-group-container');
-                const 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;
-            const tgrt = this.enableSeparateConnector && e.target.parentElement &&
-                e.target.parentElement.classList.contains('e-btn-group') ? e.target.parentElement.previousElementSibling : e.target;
-            if (targetGroup && !isPreventelem) {
-                const groupId = 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')) {
-                    let rule;
-                    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);
-                    }
-                    let groupRule = extend([], this.getGroup(targetGroup), [], true);
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if (groupRule.properties) {
-                        groupRule = groupRule.properties;
-                    }
-                    const groupElem = closest(targetGroup, '.e-group-container');
-                    const nestGrpElem = groupElem.querySelectorAll('.e-group-container');
-                    nestGrpElem.forEach((ele) => {
-                        if (this.element.querySelector('#' + ele.id)) {
-                            this.deleteGroup(ele);
-                        }
-                    });
-                    const ruleElems = groupElem.querySelectorAll('.e-rule-container');
-                    const ruleIds = [];
-                    let dropInd;
-                    for (let 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((rule) => {
-                        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.length === 0 && !isPreventelem) {
-                const groupElem = closest(tgrt, '.e-group-container');
-                const groupId = groupElem.id.split(this.element.id + '_')[1].split('_')[0];
-                let rule;
-                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) {
-                const groupElem = closest(tgrt, '.e-group-container');
-                const groupId = groupElem.id.split(this.element.id + '_')[1].split('_')[0];
-                let rule;
-                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);
-                }
-                let groupRule = extend([], this.getGroup(tgrt), [], true);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if (groupRule.properties) {
-                    groupRule = groupRule.properties;
-                }
-                const groupElems = tgrt.querySelectorAll('.e-group-container');
-                groupElems.forEach((ele) => {
-                    if (this.element.querySelector('#' + ele.id)) {
-                        this.deleteGroup(ele);
-                    }
-                });
-                const ruleElems = groupElem.querySelectorAll('.e-rule-container');
-                ruleElems.forEach((ele) => {
-                    if (this.element.querySelector('#' + ele.id)) {
-                        this.deleteRule(ele);
-                    }
-                });
-                if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
-                    this.addGroups([rule], groupId);
-                }
-                else {
-                    this.addRules([rule], groupId);
-                }
-                groupRule.rules.forEach((rule) => {
-                    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 ((closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) && !isPreventelem) {
-                let rule;
-                targetGroup = closest(e.target, '.e-group-container');
-                if (!targetGroup && e.target.classList.contains('e-group-container')) {
-                    targetGroup = e.target;
-                }
-                const 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');
-            let borderLineElem = this.element.querySelectorAll('.e-drag-rule-bottom-line');
-            borderLineElem.forEach((ele) => {
-                ele.classList.remove('e-drag-rule-bottom-line');
-            });
-            borderLineElem = this.element.querySelectorAll('.e-drag-rule-top-line');
-            borderLineElem.forEach((ele) => {
-                ele.classList.remove('e-drag-rule-top-line');
-            });
-            borderLineElem = this.element.querySelectorAll('.e-qb-dragging-rule');
-            borderLineElem.forEach((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);
     }
     getPersistData() {
@@ -886,7 +659,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 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];
@@ -1174,11 +949,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                 .filter((filteredChild) => filteredChild !== null);
             this.changeDataSource(matchedDataSource);
             setTimeout(() => {
-                proxy.ddTree.treeObj.expandAll();
+                if (!isNullOrUndefined(proxy.ddTree) && !isNullOrUndefined(proxy.ddTree.treeObj)) {
+                    proxy.ddTree.treeObj.expandAll();
+                }
             }, 100);
         }
     }
     changeDataSource(data) {
+        this.updateDropdowntreeDS(data);
         this.ddTree.treeObj.fields = {
             dataSource: data,
             value: 'field',
@@ -1212,7 +990,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     dropdownTreeClose() {
         if (this.ddTree) {
-            this.changeDataSource(this.columns);
+            this.changeDataSource(extend([], this.columns, [], true));
         }
         this.ddTree = null;
     }
@@ -1914,7 +1692,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         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';
@@ -1950,6 +1728,17 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             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 (let 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);
                 }
@@ -2152,7 +1941,8 @@ let QueryBuilder = class QueryBuilder extends Component {
     changeValue(i, args) {
         let 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;
         }
@@ -2165,7 +1955,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             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;
         }
@@ -2227,7 +2017,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         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
@@ -2276,7 +2066,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.isFieldClose = true;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const ddl = getComponent(id, 'dropdownlist');
-        const item = ddl.popupObj.element.querySelector('.e-active');
+        const item = ddl.popupObj && ddl.popupObj.element.querySelector('.e-active');
         const itemData = ddl.getItemData();
         ddl.value = itemData.value;
         const customArgs = { element: ddl.element, value: itemData.value, isInteracted: true,
@@ -2613,13 +2403,13 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 const height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
                 let operator;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                operatorList.forEach((obj) => {
-                    if ('value' in obj && typeof obj.value === 'string' && obj.value.toLowerCase() === rule.operator.toLowerCase()) {
-                        operator = obj.value;
-                    }
-                });
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (rule.operator) {
+                    operatorList.forEach((obj) => {
+                        if ('value' in obj && typeof obj.value === 'string' && obj.value.toLowerCase() === rule.operator.toLowerCase()) {
+                            operator = obj.value;
+                        }
+                    });
+                }
                 let value = operator ? operator : operatorList[0].value;
                 let ddlIdx = 0;
                 if (!this.autoSelectOperator) {
@@ -2949,8 +2739,11 @@ let QueryBuilder = class QueryBuilder extends Component {
     closePopup(i, args) {
         const element = document.getElementById(args.popup.element.id.replace('_popup', ''));
         if (element) {
-            const value = getComponent(element, 'multiselect').value;
-            this.updateRules(element, value, i);
+            const ms = getComponent(element, 'multiselect');
+            if (ms) {
+                const value = ms.value;
+                this.updateRules(element, value, i);
+            }
         }
     }
     processTemplate(target, itemData, rule, tempRule) {
@@ -4580,6 +4373,236 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.trigger('drag', dragEventArgs);
         this.isDragEventPrevent = dragEventArgs.cancel;
     }
+    dragStopHandler(e) {
+        if (this.isDragEventPrevent) {
+            return;
+        }
+        let 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');
+        }
+        let isPreventelem;
+        if (!isNullOrUndefined(e.helper)) {
+            isPreventelem = closest(e.helper, '.e-notallowedcur');
+        }
+        let prevRule;
+        if (!isPreventelem) {
+            const targetGrp = closest(e.target, '.e-group-container');
+            const 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;
+        const tgrt = this.enableSeparateConnector && e.target.parentElement &&
+            e.target.parentElement.classList.contains('e-btn-group') ? e.target.parentElement.previousElementSibling : e.target;
+        if (targetGroup && !isPreventelem) {
+            const groupId = 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')) {
+                let rule;
+                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);
+                }
+                let groupRule = extend([], this.getGroup(targetGroup), [], true);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (groupRule.properties) {
+                    groupRule = groupRule.properties;
+                }
+                const groupElem = closest(targetGroup, '.e-group-container');
+                const nestGrpElem = groupElem.querySelectorAll('.e-group-container');
+                nestGrpElem.forEach((ele) => {
+                    if (this.element.querySelector('#' + ele.id)) {
+                        this.deleteGroup(ele);
+                    }
+                });
+                const ruleElems = groupElem.querySelectorAll('.e-rule-container');
+                const ruleIds = [];
+                let dropInd;
+                for (let 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((rule) => {
+                    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.length === 0 && !isPreventelem) {
+            const groupElem = closest(tgrt, '.e-group-container');
+            const groupId = groupElem.id.split(this.element.id + '_')[1].split('_')[0];
+            let rule;
+            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) {
+            const groupElem = closest(tgrt, '.e-group-container');
+            const groupId = groupElem.id.split(this.element.id + '_')[1].split('_')[0];
+            let rule;
+            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);
+            }
+            let groupRule = extend([], this.getGroup(tgrt), [], true);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (groupRule.properties) {
+                groupRule = groupRule.properties;
+            }
+            const groupElems = tgrt.querySelectorAll('.e-group-container');
+            groupElems.forEach((ele) => {
+                if (this.element.querySelector('#' + ele.id)) {
+                    this.deleteGroup(ele);
+                }
+            });
+            const ruleElems = groupElem.querySelectorAll('.e-rule-container');
+            ruleElems.forEach((ele) => {
+                if (this.element.querySelector('#' + ele.id)) {
+                    this.deleteRule(ele);
+                }
+            });
+            if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                this.addGroups([rule], groupId);
+            }
+            else {
+                this.addRules([rule], groupId);
+            }
+            groupRule.rules.forEach((rule) => {
+                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 ((closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) && !isPreventelem) {
+            let rule;
+            targetGroup = closest(e.target, '.e-group-container');
+            if (!targetGroup && e.target.classList.contains('e-group-container')) {
+                targetGroup = e.target;
+            }
+            const 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');
+        let borderLineElem = this.element.querySelectorAll('.e-drag-rule-bottom-line');
+        borderLineElem.forEach((ele) => {
+            ele.classList.remove('e-drag-rule-bottom-line');
+        });
+        borderLineElem = this.element.querySelectorAll('.e-drag-rule-top-line');
+        borderLineElem.forEach((ele) => {
+            ele.classList.remove('e-drag-rule-top-line');
+        });
+        borderLineElem = this.element.querySelectorAll('.e-qb-dragging-rule');
+        borderLineElem.forEach((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();
+        }
+    }
     templateParser(template) {
         if (template) {
             try {
@@ -4653,10 +4676,14 @@ let QueryBuilder = class QueryBuilder extends Component {
         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;
+        }
         const args = { groupID: groupId, cancel: false, type: 'deleteGroup' };
         if (!this.isImportRules && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, (observedChangeArgs) => {
@@ -5021,7 +5048,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                         }
                     }
                 }
-                else if (!isNewRuleAdded) {
+                else if (!isNewRuleAdded && !isNullOrUndefined(andElem)) {
                     andElem.checked = false;
                     andElem.disabled = true;
                     orElem.checked = false;
@@ -5239,6 +5266,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         const len = groupIdColl.length;
         let groupID;
         for (i = 0; i < len; i++) {
+            if (groupIdColl[i] === 'group0') {
+                continue;
+            }
             groupID = this.element.id + '_' + groupIdColl[i];
             this.deleteGroup(document.getElementById(groupID));
         }
@@ -6359,9 +6389,13 @@ let QueryBuilder = class QueryBuilder extends Component {
             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
+            const regExValue = /^[0-9]+(\.[0-9]+)$/.exec(sqlString);
+            if (regExValue) {
+                matchValue = regExValue[0];
+                this.parser.push(['Literal', matchValue]);
+                return matchValue.length;
+            }
         }
         //String
         const singleString = this.getSingleQuoteString(sqlString);
@@ -6775,16 +6809,8 @@ let QueryBuilder = class QueryBuilder extends Component {
      */
     groupClone(target) {
         const groupElem = target.closest('.e-rule-list').closest('.e-group-container');
-        let targetGrpId;
-        let 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 + '_', '');
-        }
+        const targetGrpId = target.id.replace(this.element.id + '_', '');
+        const groupId = groupElem.id.replace(this.element.id + '_', '');
         const 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);