@syncfusion/ej2-querybuilder 25.2.7 → 26.1.38

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

@@ -1,11 +1,11 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, addClass, append, classList, cldrData, closest, compile, detach, extend, getComponent, getInstance, getUniqueID, getValue, isNullOrUndefined, removeClass, rippleEffect, select } from '@syncfusion/ej2-base';
-import { Button, RadioButton } from '@syncfusion/ej2-buttons';
-import { CheckBoxSelection, DropDownList, DropDownTree, MultiSelect } from '@syncfusion/ej2-dropdowns';
-import { DataManager, Deferred, Predicate, Query } from '@syncfusion/ej2-data';
+import { ChildProperty, Property, Collection, Component, closest, isNullOrUndefined, extend, remove, getComponent, removeClass, Animation, addClass, select, append, detach, rippleEffect, getInstance, getValue, Browser, classList, Internationalization, getUniqueID, L10n, Draggable, 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';
 import { NumericTextBox, TextBox } from '@syncfusion/ej2-inputs';
 import { DatePicker } from '@syncfusion/ej2-calendars';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { Tooltip, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import { Tooltip, showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -13,9 +13,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/**
- * Query Builder Source
- */
 /**
  * Defines the Columns of Query Builder
  */
@@ -162,6 +159,233 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.cloneGrpBtnClick = false;
         this.isMiddleGroup = false;
         this.cloneRuleBtnClick = 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() {
@@ -299,7 +523,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 this.columns = cols;
             }
         }
-        else if (this.columns.length) {
+        else if (this.columns && this.columns.length) {
             const columns = this.columns;
             for (let i = 0, len = columns.length; i < len; i++) {
                 if (columns[i].category) {
@@ -409,6 +633,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             txtareaElem.style.height = txtareaElem.scrollHeight + 'px';
         }
         if (target.tagName === 'BUTTON' && target.className.indexOf('e-qb-toggle') < 0) {
+            const animation = new Animation({ duration: 1000, delay: 0 });
             switch (true) {
                 case target.className.indexOf('e-removerule') > -1:
                     this.actionButton = target;
@@ -437,7 +662,6 @@ let QueryBuilder = class QueryBuilder extends Component {
                     this.deleteGroup(closest(target, '.e-group-container'));
                     break;
                 case target.className.indexOf('e-edit-rule') > -1:
-                    const animation = new Animation({ duration: 1000, delay: 0 });
                     animation.animate('.e-query-builder', { name: 'SlideLeftIn' });
                     document.getElementById(this.element.id + '_summary_content').style.display = 'none';
                     if (this.element.querySelectorAll('.e-group-container').length < 1) {
@@ -465,6 +689,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 if (forIdValue) {
                     targetValue = document.getElementById(forIdValue).getAttribute('value');
                 }
+                else if (this.enableSeparateConnector) {
+                    targetValue = target.textContent;
+                }
                 groupID = element.id.replace(this.element.id + '_', '');
                 const group = this.getGroup(groupID);
                 let ariaChecked;
@@ -504,18 +731,59 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     beforeSuccessCallBack(args, target) {
         if (args && !args.cancel) {
-            const element = closest(target, '.e-group-container');
+            let element = closest(target, '.e-group-container');
             const groupID = element.id.replace(this.element.id + '_', '');
             const beforeRules = this.getValidRules(this.rule);
-            const rule = this.getParentGroup(element);
-            rule.condition = args.value;
-            if (this.enableNotCondition) {
-                rule.not = args.not;
+            let rule = this.getParentGroup(element);
+            if (this.enableSeparateConnector) {
+                if (isNullOrUndefined(closest(target, '.e-rule-container')) &&
+                    element.classList.contains('e-group-container')) {
+                    element = target.parentElement.previousElementSibling !== null ?
+                        target.parentElement.previousElementSibling : element;
+                }
+                else {
+                    element = closest(target, '.e-rule-container');
+                }
+                const id = element.id.replace(this.element.id + '_', '');
+                if (element.classList.contains('e-rule-container')) {
+                    rule = this.getRule(element);
+                    rule.condition = args.value;
+                }
+                else if (element.classList.contains('e-group-container')) {
+                    rule = this.getGroup(element);
+                    rule.condition = args.value;
+                }
+                if (this.enableNotCondition) {
+                    rule.not = args.not;
+                }
+                if (!this.isImportRules) {
+                    this.trigger('change', { groupID: groupID, ruleID: id, type: 'condition', value: rule.condition });
+                }
             }
-            if (!this.isImportRules) {
-                this.trigger('change', { groupID: groupID, type: 'condition', value: rule.condition });
+            else {
+                rule.condition = args.value;
+                if (this.enableNotCondition) {
+                    rule.not = args.not;
+                }
+                if (!this.isImportRules) {
+                    this.trigger('change', { groupID: groupID, type: 'condition', value: rule.condition });
+                }
             }
             this.filterRules(beforeRules, this.getValidRules(this.rule), 'condition');
+            if (this.enableSeparateConnector) {
+                const andElem = target.parentElement.querySelector('.e-btngroup-and');
+                const orElem = target.parentElement.querySelector('.e-btngroup-or');
+                if (andElem && orElem) {
+                    if (args.value === 'and') {
+                        andElem.checked = true;
+                        orElem.checked = false;
+                    }
+                    else if (args.value === 'or') {
+                        orElem.checked = true;
+                        andElem.checked = false;
+                    }
+                }
+            }
         }
     }
     selectBtn(target, event) {
@@ -558,7 +826,23 @@ let QueryBuilder = class QueryBuilder extends Component {
                     ruleListElem.appendChild(ruleElem);
                 }
                 else {
-                    ruleListElem.insertBefore(ruleElem, ruleListElem.children[this.ruleIndex + 1]); // added clone rule to next position
+                    if (this.enableSeparateConnector) {
+                        let index = -1;
+                        let tempRuleIndex = this.ruleIndex + 1;
+                        for (let i = 0; i < tempRuleIndex; i++) {
+                            if (i === ruleListElem.children.length) {
+                                break;
+                            }
+                            if (ruleListElem.children[i].classList.contains('e-rule-container')) {
+                                tempRuleIndex++;
+                                index++;
+                            }
+                        }
+                        ruleListElem.insertBefore(ruleElem, ruleListElem.children[this.ruleIndex + index + 1]); // added clone rule to next position
+                    }
+                    else {
+                        ruleListElem.insertBefore(ruleElem, ruleListElem.children[this.ruleIndex + 1]); // added clone rule to next position
+                    }
                 }
                 this.cloneRuleBtnClick = false;
             }
@@ -629,6 +913,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (this.showButtons.ruleDelete) {
             removeClass(ruleElem.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
         }
+        if (this.allowDragAndDrop) {
+            removeClass(ruleElem.querySelectorAll('.e-drag-qb-rule'), 'e-hidden');
+        }
         if (column && column.ruleTemplate && rule) {
             this.renderReactTemplates();
         }
@@ -639,7 +926,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             return;
         }
         const args = { groupID: target.id.replace(this.element.id + '_', ''), cancel: false, type: 'insertRule' };
-        if (!this.isImportRules && !this.isInitialLoad) {
+        if (!this.isImportRules && !this.isInitialLoad && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, (observedChangeArgs) => {
                 this.addRuleSuccessCallBack(observedChangeArgs, target, rule, column, action, parentId, isRuleTemplate);
             });
@@ -694,20 +981,54 @@ let QueryBuilder = class QueryBuilder extends Component {
             else {
                 ruleElem.className = 'e-rule-container e-horizontal-mode';
             }
-            if (ruleElem.previousElementSibling && ruleElem.previousElementSibling.className.indexOf('e-rule-container') > -1) {
-                if (ruleElem.className.indexOf('e-joined-rule') < 0) {
-                    ruleElem.className += ' e-joined-rule';
+            let previousRuleElem = ruleElem.previousElementSibling;
+            if (this.enableSeparateConnector) {
+                let prevRule;
+                let ruleContainer;
+                if (previousRuleElem && previousRuleElem.classList.contains('e-group-container')) {
+                    ruleContainer = previousRuleElem.querySelectorAll('.e-rule-container');
+                    previousRuleElem = ruleContainer[ruleContainer.length - 1];
+                }
+                if (previousRuleElem && previousRuleElem.classList.contains('e-rule-container')) {
+                    prevRule = this.getRule(previousRuleElem);
+                }
+                if (this.headerTemplate && previousRuleElem && prevRule) {
+                    this.headerTemplateFn(previousRuleElem, false, prevRule.condition, prevRule, previousRuleElem.id);
+                }
+                else if (isNullOrUndefined(previousRuleElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+                    const group = ruleElem.closest('.e-group-container');
+                    if (group && group.previousElementSibling) {
+                        let prevElem = group.previousElementSibling;
+                        const prevRuleContainer = prevElem.querySelectorAll('.e-rule-container');
+                        if (prevElem.classList.contains('e-group-container')) {
+                            prevElem = prevRuleContainer[prevRuleContainer.length - 1];
+                        }
+                        if (prevElem.classList.contains('e-rule-container')) {
+                            const prevRule = this.getRule(prevElem);
+                            this.headerTemplateFn(prevElem, false, prevRule.condition, prevRule, prevElem.id, true);
+                        }
+                    }
+                    else {
+                        this.headerTemplateFn(ruleElem, false, rule.condition, rule, ruleElem.id, true);
+                    }
                 }
-                if (ruleElem.previousElementSibling.className.indexOf('e-prev-joined-rule') < 0) {
-                    ruleElem.previousElementSibling.className += ' e-prev-joined-rule';
+            }
+            else {
+                if (previousRuleElem && previousRuleElem.className.indexOf('e-rule-container') > -1) {
+                    if (ruleElem.className.indexOf('e-joined-rule') < 0) {
+                        ruleElem.className += ' e-joined-rule';
+                    }
+                    if (previousRuleElem.className.indexOf('e-prev-joined-rule') < 0) {
+                        previousRuleElem.className += ' e-prev-joined-rule';
+                    }
                 }
             }
-            if (ruleElem.previousElementSibling && ruleElem.previousElementSibling.className.indexOf('e-group-container') > -1 &&
+            if (previousRuleElem && previousRuleElem.className.indexOf('e-group-container') > -1 &&
                 ruleElem.className.indexOf('e-separate-rule') < 0) {
                 ruleElem.className += ' e-separate-rule';
             }
             if (!this.isImportRules) {
-                this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId);
+                this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId, this.enableSeparateConnector ? true : null);
             }
             if (!column || (column && !column.ruleTemplate) || !rule.field) {
                 if (this.fieldMode === 'Default') {
@@ -738,7 +1059,8 @@ let QueryBuilder = class QueryBuilder extends Component {
                         ddlVal = this.GetRootColumnName(rule.field);
                     }
                     else {
-                        ddlVal = this.isImportRules ? this.GetRootColumnName(rule.field) : dropDownList.value;
+                        ddlVal = this.isImportRules ? this.GetRootColumnName(rule.field) :
+                            dropDownList.value;
                     }
                     this.selectedColumn = dropDownList.getDataByValue(ddlVal);
                     if (Object.keys(rule).length) {
@@ -782,20 +1104,68 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
             ruleID = ruleElem.id.replace(this.element.id + '_', '');
-            if (!this.isImportRules) {
+            if (rule && rule.isLocked) {
+                const lockRuleTarget = ruleElem.querySelector('.e-lock-rule-btn');
+                this.ruleLock(lockRuleTarget);
+            }
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('change', { groupID: trgt.id.replace(this.element.id + '_', ''), ruleID: ruleID, type: 'insertRule' });
             }
         }
+        if (this.enableSeparateConnector && isNullOrUndefined(rule.condition) && ruleID) {
+            rule = this.getRule(ruleID);
+        }
+        if (this.enableSeparateConnector) {
+            let prevElem = ruleElem.previousElementSibling;
+            let ruleContainer;
+            while (prevElem && !prevElem.classList.contains('e-rule-container')) {
+                if (prevElem.classList.contains('e-group-container')) {
+                    ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                    prevElem = ruleContainer[ruleContainer.length - 1];
+                    break;
+                }
+                prevElem = prevElem.previousElementSibling;
+            }
+            if (this.headerTemplate && prevElem) {
+                const prevRule = this.getRule(prevElem);
+                const args = { requestType: 'rule-template-create', ruleID: prevElem.id, condition: prevRule.condition,
+                    notCondition: this.enableNotCondition ? true : undefined };
+                this.trigger('actionBegin', args);
+            }
+            else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+                const group = ruleElem.closest('.e-group-container');
+                if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
+                    let prevElem = group.previousElementSibling.previousElementSibling;
+                    if (prevElem.classList.contains('e-group-container')) {
+                        const ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                        prevElem = ruleContainer[ruleContainer.length - 1];
+                    }
+                    if (prevElem.classList.contains('e-rule-container')) {
+                        const prevRule = this.getRule(prevElem);
+                        const args = { requestType: 'rule-template-create', ruleID: prevElem.id,
+                            condition: prevRule.condition, notCondition: this.enableNotCondition ? true : undefined };
+                        this.trigger('actionBegin', args);
+                    }
+                }
+            }
+            this.setMultiConnector(ruleElem);
+        }
     }
     updateDropdowntreeDS(columns) {
         for (let i = 0; i < columns.length; i++) {
             if (columns[parseInt(i.toString(), 10)].type === 'object') {
+                if (this.isAngular && columns[parseInt(i.toString(), 10)].template) {
+                    delete columns[parseInt(i.toString(), 10)].template;
+                }
                 columns[parseInt(i.toString(), 10)].selectable = false;
                 this.updateDropdowntreeDS(columns[parseInt(i.toString(), 10)].columns);
             }
+            else if (this.isAngular && columns[parseInt(i.toString(), 10)].template) {
+                delete columns[parseInt(i.toString(), 10)].template;
+            }
         }
     }
-    updateAddedRule(target, rule, newRule, isRuleTemplate, pId) {
+    updateAddedRule(target, rule, newRule, isRuleTemplate, pId, isNewRuleAdded) {
         let ruleElem;
         let index = 0;
         let groupElem;
@@ -806,7 +1176,12 @@ let QueryBuilder = class QueryBuilder extends Component {
             rules = this.getParentGroup(groupElem);
             while (ruleElem && ruleElem.previousElementSibling !== null) {
                 ruleElem = ruleElem.previousElementSibling;
-                index++;
+                const enableSeparateCondition = this.enableSeparateConnector && ((!this.headerTemplate && !ruleElem.classList.contains('e-btn-group')) ||
+                    (this.headerTemplate && (ruleElem.classList.contains('e-rule-container') ||
+                        ruleElem.classList.contains('e-group-container'))));
+                if (!this.enableSeparateConnector || enableSeparateCondition) {
+                    index++;
+                }
             }
             rules.rules[index] = rule;
         }
@@ -824,6 +1199,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         rules.rules[rules.rules.length - 1].custom = custom;
                     }
+                    if (this.enableSeparateConnector) {
+                        rules.rules[rules.rules.length - 1].condition = rule.condition ? rule.condition : newRule.condition;
+                    }
                 }
                 else {
                     rules.rules.splice(this.ruleIndex + 1, 0, {
@@ -833,6 +1211,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         rules.rules[this.ruleIndex + 1].custom = custom;
                     }
+                    if (this.enableSeparateConnector) {
+                        rules.rules[this.ruleIndex + 1].condition = rule.condition ? rule.condition : newRule.condition;
+                    }
                 }
             }
             else {
@@ -846,7 +1227,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 rules.rules.push(newRule);
             }
         }
-        this.disableRuleCondition(target, rules);
+        this.disableRuleCondition(target, rules, isNewRuleAdded);
     }
     changeRuleTemplate(column, element) {
         const operVal = this.selectedColumn.operators;
@@ -924,7 +1305,11 @@ let QueryBuilder = class QueryBuilder extends Component {
                 if (validateRule && validateRule.isRequired) {
                     while (indexElem && indexElem.previousElementSibling !== null) {
                         indexElem = indexElem.previousElementSibling;
-                        index++;
+                        const separateCondition = this.enableSeparateConnector && ((!this.headerTemplate && !indexElem.classList.contains('e-btn-group')) ||
+                            (this.headerTemplate && (indexElem.classList.contains('e-rule-container') || indexElem.classList.contains('e-group-container'))));
+                        if (!this.enableSeparateConnector || separateCondition) {
+                            index++;
+                        }
                     }
                     fieldElem = tempElem.querySelector('.e-rule-operator .e-control');
                     if (!rule.rules[index].operator) {
@@ -1001,9 +1386,10 @@ let QueryBuilder = class QueryBuilder extends Component {
         obj.level = this.levelColl[obj.groupElement.id].slice();
         return obj;
     }
-    groupTemplate() {
+    groupTemplate(isConnector) {
         let glueElem;
         let inputElem;
+        let dragClsName;
         let labelElem;
         let grpActElem;
         let groupBtn;
@@ -1016,9 +1402,27 @@ let QueryBuilder = class QueryBuilder extends Component {
         groupElem.appendChild(grpBodyElem);
         // create button group in OR and AND process
         if (!this.headerTemplate) {
-            glueElem = this.createElement('div', { attrs: { class: 'e-lib e-btn-group', role: 'group' } });
+            if (this.allowDragAndDrop) {
+                dragClsName = 'e-icons e-drag-qb-rule';
+            }
+            else {
+                dragClsName = 'e-icons e-drag-qb-rule e-hidden';
+            }
+            const spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+                    title: 'drag handle' } });
+            groupHdrElem.appendChild(spanDragElement);
+            const className = this.enableSeparateConnector && !isConnector ? 'e-lib e-btn-group e-qb-toggle-btn' : 'e-lib e-btn-group';
+            glueElem = this.createElement('div', { attrs: { class: className, role: 'group' } });
+            if (this.enableSeparateConnector) {
+                glueElem.classList.add('e-multi-connector');
+            }
             if (this.enableNotCondition) {
-                inputElem = this.createElement('button', { attrs: { type: 'button', class: 'e-qb-toggle' } });
+                if (this.enableSeparateConnector) {
+                    inputElem = this.createElement('input', { attrs: { type: 'checkbox', class: 'e-qb-toggle' } });
+                }
+                else {
+                    inputElem = this.createElement('button', { attrs: { type: 'button', class: 'e-qb-toggle' } });
+                }
                 glueElem.appendChild(inputElem);
             }
             inputElem = this.createElement('input', { attrs: { type: 'radio', class: 'e-btngroup-and', value: 'AND' } });
@@ -1033,8 +1437,16 @@ let QueryBuilder = class QueryBuilder extends Component {
             glueElem.appendChild(labelElem);
             groupHdrElem.appendChild(glueElem);
             grpActElem = this.createElement('div', { attrs: { class: 'e-group-action' } });
-            groupBtn = this.createElement('button', { attrs: { type: 'button', class: 'e-add-btn' } });
-            grpActElem.appendChild(groupBtn);
+            if (this.enableSeparateConnector) {
+                groupBtn = this.createElement('button', { attrs: { type: 'button', class: 'e-add-condition-btn' } });
+                grpActElem.appendChild(groupBtn);
+                groupBtn = this.createElement('button', { attrs: { type: 'button', class: 'e-add-group-btn' } });
+                grpActElem.appendChild(groupBtn);
+            }
+            else {
+                groupBtn = this.createElement('button', { attrs: { type: 'button', class: 'e-add-btn' } });
+                grpActElem.appendChild(groupBtn);
+            }
             groupHdrElem.appendChild(grpActElem);
         }
         return groupElem;
@@ -1044,9 +1456,19 @@ let QueryBuilder = class QueryBuilder extends Component {
         let clsName;
         let cloneClsName;
         let lockClsName;
+        let dragClsName;
         const ruleElem = this.createElement('div');
         const fieldElem = this.createElement('div', { attrs: { class: 'e-rule-field' } });
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-filter' } });
+        if (this.allowDragAndDrop) {
+            dragClsName = 'e-icons e-drag-qb-rule';
+        }
+        else {
+            dragClsName = 'e-icons e-drag-qb-rule e-hidden';
+        }
+        const spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+                title: 'drag handle' } });
+        fieldElem.appendChild(spanDragElement);
         const filterElem = this.createElement('input', { attrs: { type: 'text', class: 'e-filter-input' } });
         tempElem.appendChild(filterElem);
         fieldElem.appendChild(tempElem);
@@ -1089,7 +1511,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     addGroupElement(isGroup, target, condition, isBtnClick, not, isRoot, rule) {
         const args = { groupID: target.id.replace(this.element.id + '_', ''), cancel: false, type: 'insertGroup' };
-        if (!this.isImportRules && !this.isInitialLoad) {
+        if (!this.isImportRules && !this.isInitialLoad && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, (observedChangeArgs) => {
                 this.addGroupSuccess(observedChangeArgs, isGroup, target, condition, isBtnClick, not, isRoot, rule);
             });
@@ -1110,8 +1532,17 @@ let QueryBuilder = class QueryBuilder extends Component {
             else {
                 groupID = target.id;
             }
+            if (this.enableSeparateConnector) {
+                this.groupElem = this.groupTemplate();
+            }
             const groupElem = this.groupElem.cloneNode(true);
             groupElem.setAttribute('id', this.element.id + '_group' + this.groupIdCounter);
+            if (this.groupIdCounter === 0 && this.allowDragAndDrop && groupElem.querySelector('.e-drag-qb-rule')) {
+                if (groupElem && groupElem.children[0]) {
+                    groupElem.children[0].classList.add('e-parent-header');
+                }
+                addClass([groupElem.querySelector('.e-drag-qb-rule')], 'e-hidden');
+            }
             if (this.headerTemplate) {
                 if (isRoot) {
                     isGroup = false;
@@ -1164,7 +1595,25 @@ let QueryBuilder = class QueryBuilder extends Component {
                         this.isLastGroup = true;
                     }
                     else {
-                        childElems[this.groupIndex + 1].parentNode.insertBefore(groupElem, childElems[this.groupIndex + 1]); // clone the element to nxt element
+                        if (this.enableSeparateConnector) {
+                            let index = 0;
+                            let tempGroupIndex = this.groupIndex + 1;
+                            for (let i = 0; i < tempGroupIndex; i++) {
+                                if (childElems[i].classList.contains('e-rule-container')) {
+                                    tempGroupIndex++;
+                                    index++;
+                                }
+                            }
+                            if (index > 0) {
+                                index--;
+                            }
+                            const idx = this.groupIndex + index + 1;
+                            childElems[idx].parentNode.insertBefore(groupElem, childElems[idx]);
+                        }
+                        else {
+                            const idx = this.groupIndex + 1;
+                            childElems[idx].parentNode.insertBefore(groupElem, childElems[idx]);
+                        }
                         this.isMiddleGroup = true;
                     }
                 }
@@ -1230,7 +1679,14 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (this.enableNotCondition) {
                 if (!this.headerTemplate) {
                     const notElem = groupElem.querySelector('.e-qb-toggle');
-                    const tglBtn = new Button({ content: this.l10n.getConstant('NOT'), cssClass: 'e-btn e-small' });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    let tglBtn;
+                    if (this.enableSeparateConnector) {
+                        tglBtn = new CheckBox({ label: this.l10n.getConstant('NOT'), cssClass: 'e-qb-toggle' });
+                    }
+                    else {
+                        tglBtn = new Button({ content: this.l10n.getConstant('NOT'), cssClass: 'e-btn e-small' });
+                    }
                     tglBtn.appendTo(notElem);
                     groupElem.querySelector('.e-btngroup-and-lbl').classList.add('e-not');
                     if (this.updatedRule && this.updatedRule.not) {
@@ -1238,6 +1694,56 @@ let QueryBuilder = class QueryBuilder extends Component {
                     }
                 }
             }
+            if (this.enableSeparateConnector && !this.headerTemplate) {
+                let andElem = groupElem.querySelector('.e-btngroup-and');
+                let orElem = groupElem.querySelector('.e-btngroup-or');
+                const btnGroup = groupElem.querySelector('.e-btn-group');
+                for (let i = 0; i < btnGroup.childNodes.length; i++) {
+                    if (groupElem.querySelector('.e-btn-group').childNodes[i].textContent.toLowerCase() === 'not') {
+                        if (!this.enableNotCondition) {
+                            btnGroup.childNodes[i].style.display = 'none';
+                        }
+                        else {
+                            btnGroup.childNodes[i].classList.add('e-multiconnector');
+                        }
+                    }
+                    else {
+                        btnGroup.childNodes[i].style.display = 'none';
+                    }
+                }
+                const prevSibling = groupElem.previousElementSibling;
+                if (prevSibling) {
+                    if (isNullOrUndefined(this.headerTemplate)) {
+                        groupElem.parentElement.insertBefore(this.groupTemplate(true).querySelector('.e-btn-group'), groupElem);
+                        const notElem = groupElem.previousElementSibling.childNodes[0];
+                        if (notElem.classList.contains('e-qb-toggle')) {
+                            notElem.style.display = 'none';
+                        }
+                    }
+                    if (!this.isImportRules) {
+                        const groupElement = groupElem.previousElementSibling;
+                        const newAndElem = groupElement.querySelector('.e-btngroup-and');
+                        const newOrElem = groupElement.querySelector('.e-btngroup-or');
+                        if (!andElem.checked && !orElem.checked) {
+                            const nextSibling = groupElem.nextElementSibling;
+                            if (nextSibling && nextSibling.classList.contains('e-btn-group')) {
+                                andElem = nextSibling.querySelector('.e-btngroup-and');
+                                orElem = nextSibling.querySelector('.e-btngroup-or');
+                                newAndElem.checked = andElem.checked;
+                                newOrElem.checked = orElem.checked;
+                            }
+                        }
+                        else if (this.enableSeparateConnector) {
+                            if (andElem.checked) {
+                                newAndElem.checked = true;
+                            }
+                            if (orElem.checked) {
+                                newOrElem.checked = true;
+                            }
+                        }
+                    }
+                }
+            }
             this.updatedRule = null;
             if (this.headerTemplate) {
                 const args = { requestType: 'header-template-create', ruleID: groupElem.id, condition: condition,
@@ -1245,60 +1751,161 @@ let QueryBuilder = class QueryBuilder extends Component {
                 this.trigger('actionBegin', args);
             }
             else {
-                const groupBtn = groupElem.querySelector('.e-add-btn');
-                const btnObj = new DropDownButton({
-                    items: this.items,
-                    cssClass: 'e-round e-small e-caret-hide e-addrulegroup',
-                    iconCss: 'e-icons e-add-icon',
-                    beforeOpen: this.selectBtn.bind(this, groupBtn),
-                    select: this.selectBtn.bind(this, groupBtn)
-                });
-                btnObj.appendTo(groupBtn);
-                groupBtn.setAttribute('title', this.l10n.getConstant('AddButton'));
+                if (this.enableSeparateConnector) {
+                    const conditionBtn = groupElem.querySelector('.e-add-condition-btn');
+                    let btnObj = new Button({ cssClass: this.element.id + '_addConditionbtn', content: this.l10n.getConstant('AddCondition') });
+                    btnObj.appendTo(conditionBtn);
+                    btnObj.element.onclick = () => {
+                        this.addRuleElement(closest(conditionBtn, '.e-group-container'), {});
+                    };
+                    const groupBtn = groupElem.querySelector('.e-add-group-btn');
+                    btnObj = new Button({ cssClass: this.element.id + '_addGroupbtn', content: this.l10n.getConstant('AddGroup') });
+                    btnObj.appendTo(groupBtn);
+                    btnObj.element.onclick = () => {
+                        this.addGroupElement(true, closest(groupBtn, '.e-group-container'), '', true);
+                    };
+                }
+                else {
+                    const groupBtn = groupElem.querySelector('.e-add-btn');
+                    const btnObj = new DropDownButton({
+                        items: this.items,
+                        cssClass: 'e-round e-small e-caret-hide e-addrulegroup',
+                        iconCss: 'e-icons e-add-icon',
+                        beforeOpen: this.selectBtn.bind(this, groupBtn),
+                        select: this.selectBtn.bind(this, groupBtn)
+                    });
+                    btnObj.appendTo(groupBtn);
+                    groupBtn.setAttribute('title', this.l10n.getConstant('AddButton'));
+                }
             }
-            if (!this.isImportRules) {
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 const grpId = target.id.replace(this.element.id + '_', '');
                 const chgrpId = groupElem.id.replace(this.element.id + '_', '');
                 this.trigger('change', { groupID: grpId, type: 'insertGroup', childGroupID: chgrpId });
             }
         }
     }
-    headerTemplateFn(groupElem, not, condition, rule, groupID) {
+    setMultiConnector(trgt) {
+        if (this.enableSeparateConnector && !this.headerTemplate) {
+            if (trgt.previousElementSibling && this.groupElem.querySelector('.e-btn-group')) {
+                trgt.parentElement.insertBefore(this.groupTemplate(true).querySelector('.e-btn-group'), trgt);
+                const notElem = trgt.previousElementSibling.childNodes[0];
+                if (notElem.classList.contains('e-qb-toggle')) {
+                    notElem.style.display = 'none';
+                }
+                this.addHeaderDiv(trgt);
+            }
+        }
+    }
+    addHeaderDiv(elem) {
+        let prevRule;
+        const prevElem = elem.previousElementSibling.previousElementSibling;
+        if (prevElem) {
+            if (prevElem.id.indexOf('rule') > -1) {
+                prevRule = this.getRule(prevElem);
+            }
+            else {
+                prevRule = this.getGroup(prevElem);
+            }
+            if (isNullOrUndefined(prevRule.condition)) {
+                prevRule.condition = 'and';
+            }
+            const orElem = elem.previousElementSibling.querySelector('.e-btngroup-or');
+            const andElem = elem.previousElementSibling.querySelector('.e-btngroup-and');
+            orElem.disabled = false;
+            andElem.disabled = false;
+            if (prevRule.condition === 'or') {
+                orElem.checked = true;
+            }
+            else {
+                andElem.checked = true;
+            }
+        }
+    }
+    headerTemplateFn(groupElem, not, condition, rule, groupID, isInitialRule) {
         let template;
         const templateID = this.element.id + '_header';
         let args;
-        const groupHdr = groupElem.querySelector('.e-group-header');
+        let groupHdr = groupElem.querySelector('.e-group-header');
+        if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
+            groupHdr = groupElem;
+        }
         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 };
             this.trigger('actionBegin', args);
+            if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
+                args.requestType = 'rule-template-create';
+            }
             this.headerFn = this.templateParser(this.headerTemplate);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 template = this.headerFn(args, this, groupElem.id, templateID)[0];
-                groupHdr.appendChild(template);
+                if (this.enableSeparateConnector && isInitialRule) {
+                    this.enableSeparateConnectorInitialRule(groupElem, template);
+                }
+                else if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
+                    groupHdr.parentElement.insertBefore(template, groupHdr.nextElementSibling);
+                }
+                else {
+                    groupHdr.appendChild(template);
+                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isAngular) {
                 const templateColl = this.headerFn(args, this, groupElem.id, templateID);
                 template = (templateColl[0].nodeType === 3) ? templateColl[1] : templateColl[0];
-                groupHdr.appendChild(template);
+                if (this.enableSeparateConnector && isInitialRule) {
+                    this.enableSeparateConnectorInitialRule(groupElem, template);
+                }
+                else if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
+                    groupHdr.parentElement.insertBefore(template, groupHdr.nextElementSibling);
+                }
+                else {
+                    groupHdr.appendChild(template);
+                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isVue3) {
                 template = this.headerFn(args, this, groupElem.id, templateID);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                append(template, groupHdr);
+                if (this.enableSeparateConnector && isInitialRule) {
+                    this.enableSeparateConnectorInitialRule(groupElem, template);
+                }
+                else if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
+                    groupHdr.parentElement.insertBefore(template, groupHdr.nextElementSibling);
+                }
+                else {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    append(template, groupHdr);
+                }
             }
             else {
                 template = this.headerFn(args, this, 'Template', templateID)[0];
-                groupHdr.appendChild(template);
+                if (this.enableSeparateConnector && isInitialRule) {
+                    this.enableSeparateConnectorInitialRule(groupElem, template);
+                }
+                else if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
+                    groupHdr.parentElement.insertBefore(template, groupHdr.nextElementSibling);
+                }
+                else {
+                    groupHdr.appendChild(template);
+                }
             }
             this.renderReactTemplates();
         }
         return groupElem;
     }
+    enableSeparateConnectorInitialRule(groupElem, template) {
+        const elem = groupElem.nextElementSibling ? groupElem.nextElementSibling : groupElem;
+        let group = elem.closest('.e-group-container');
+        if (!groupElem.nextElementSibling && group) {
+            group = group.nextElementSibling ? group.nextElementSibling : group;
+        }
+        if (group) {
+            group.parentElement.insertBefore(template, group);
+        }
+    }
     /**
      * Notify the changes to component.
      *
@@ -1309,7 +1916,7 @@ let QueryBuilder = class QueryBuilder extends Component {
      */
     notifyChange(value, element, type) {
         const grpElement = closest(element, '.e-group-container');
-        const rules = this.getParentGroup(grpElement);
+        let rules = this.getParentGroup(grpElement);
         let ruleElement = closest(element, '.e-rule-container');
         let index = 0;
         if (type === 'not') {
@@ -1317,12 +1924,29 @@ let QueryBuilder = class QueryBuilder extends Component {
             return;
         }
         if (type === 'condition') {
-            rules.condition = value;
+            if (this.enableSeparateConnector) {
+                ruleElement = element.parentElement.previousElementSibling;
+                if (ruleElement && ruleElement.classList.contains('e-group-container')) {
+                    ruleElement = ruleElement.querySelectorAll('.e-rule-container')[ruleElement.querySelectorAll('.e-rule-container').length - 1];
+                }
+                if (ruleElement && ruleElement.classList.contains('e-rule-container')) {
+                    rules = this.getRule(ruleElement);
+                }
+                rules.condition = value;
+            }
+            else {
+                rules.condition = value;
+            }
             return;
         }
         while (ruleElement && ruleElement.previousElementSibling !== null) {
             ruleElement = ruleElement.previousElementSibling;
-            index++;
+            if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                ((!this.headerTemplate && !ruleElement.classList.contains('e-btn-group')) ||
+                    this.headerTemplate && (ruleElement.classList.contains('e-rule-container') ||
+                        ruleElement.classList.contains('e-group-container'))))) {
+                index++;
+            }
         }
         const rule = rules.rules[index];
         const column = this.getColumn(rule.field);
@@ -1359,7 +1983,12 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         while (ruleElem && ruleElem.previousElementSibling !== null) {
             ruleElem = ruleElem.previousElementSibling;
-            index++;
+            if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                ((!this.headerTemplate && !ruleElem.classList.contains('e-btn-group')) ||
+                    this.headerTemplate && (ruleElem.classList.contains('e-rule-container') ||
+                        ruleElem.classList.contains('e-group-container'))))) {
+                index++;
+            }
         }
         const rule = rules.rules[index];
         if (type === 'field') {
@@ -1416,12 +2045,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                 else {
                     ruleElement.className = 'e-rule-container e-horizontal-mode';
                 }
-                if (ruleElement.previousElementSibling && ruleElement.previousElementSibling.className.indexOf('e-rule-container') > -1) {
-                    if (ruleElement.className.indexOf('e-joined-rule') < 0) {
-                        ruleElement.className += ' e-joined-rule';
-                    }
-                    if (ruleElement.previousElementSibling.className.indexOf('e-prev-joined-rule') < 0) {
-                        ruleElement.previousElementSibling.className += ' e-prev-joined-rule';
+                if (!this.enableSeparateConnector) {
+                    if (ruleElement.previousElementSibling && ruleElement.previousElementSibling.className.indexOf('e-rule-container') > -1) {
+                        if (ruleElement.className.indexOf('e-joined-rule') < 0) {
+                            ruleElement.className += ' e-joined-rule';
+                        }
+                        if (ruleElement.previousElementSibling.className.indexOf('e-prev-joined-rule') < 0) {
+                            ruleElement.previousElementSibling.className += ' e-prev-joined-rule';
+                        }
                     }
                 }
                 if (ruleElement.previousElementSibling && ruleElement.previousElementSibling.className.indexOf('e-group-container') > -1 &&
@@ -1485,8 +2116,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         let value;
         let rbValue;
         if (element.className.indexOf('e-radio') > -1) {
-            // eslint-disable-next-line
-            rbValue = parseInt(element.id.split('valuekey')[1], 0);
+            rbValue = parseInt(element.id.split('valuekey')[1], 10);
             if (this.fieldMode === 'Default') {
                 dropDownObj = getComponent(closest(element, '.e-rule-container').querySelector('.e-filter-input'), 'dropdownlist');
                 this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
@@ -1516,7 +2146,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (args.type === 'input' && args.currentTarget) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 value = Number(args.currentTarget.value);
-                const numericTextBoxObj = getInstance(args.currentTarget, NumericTextBox);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const elem = args.currentTarget;
+                const numericTextBoxObj = getInstance(elem, NumericTextBox);
                 numericTextBoxObj.value = value;
                 this.isNumInput = true;
             }
@@ -1624,7 +2256,12 @@ let QueryBuilder = class QueryBuilder extends Component {
                 let index = 0;
                 while (ruleElem && ruleElem.previousElementSibling !== null) {
                     ruleElem = ruleElem.previousElementSibling;
-                    index++;
+                    if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                        ((!this.headerTemplate && !ruleElem.classList.contains('e-btn-group')) ||
+                            this.headerTemplate && (ruleElem.classList.contains('e-rule-container') ||
+                                ruleElem.classList.contains('e-group-container'))))) {
+                        index++;
+                    }
                 }
                 rules.rules[index].value = '';
                 this.changeRule(rules.rules[index], args);
@@ -1669,7 +2306,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             const ruleID = ruleElem.id.replace(this.element.id + '_', '');
             const eventsArgs = { groupID: grID, ruleID: ruleID, selectedField: this.fieldMode === 'DropdownTree' ?
                     dl.value[0] : dl.value, cancel: false, type: 'field' };
-            if (!this.isImportRules) {
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('beforeChange', eventsArgs, (observedChangeArgs) => {
                     this.fieldChangeSuccess(observedChangeArgs, tmpRl, flt, rl, dArg);
                 });
@@ -1839,7 +2476,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (valElem && this.getColumn(rule.field).template) {
                 filterElem = operatorElem.previousElementSibling;
             }
-            if (valElem.children.length == 0) {
+            if (valElem.children.length === 0) {
                 filterElem = operatorElem.previousElementSibling;
             }
             this.changeRuleValues(filterElem, rule, tempRule, ddlArgs);
@@ -1893,7 +2530,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     value = '';
                     ddlIdx = -1;
                 }
-                if (this.isImportRules || (this.ruleIndex > -1 || this.groupIndex > -1)) {
+                if (this.isImportRules || (this.ruleIndex > -1 || this.groupIndex > -1 || this.prvtEvtTgrDaD)) {
                     value = rule ? (rule.operator ? rule.operator : value) : value;
                 }
                 let ddlOperator;
@@ -2273,14 +2910,15 @@ let QueryBuilder = class QueryBuilder extends Component {
         const columnData = this.getItemData(parentId);
         let selectedValue;
         const isTemplate = (typeof columnData.template === 'string');
-        if (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate || rule.value != '') {
+        if (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate || rule.value !== '') {
             selectedValue = rule.value;
         }
         else {
             selectedValue = this.setDefaultValue(parentId, false, false);
         }
         if ((operator === 'in' || operator === 'notin') && (this.dataColl.length || columnData.values)) {
-            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic) ? rule.value :
+                this.setDefaultValue(parentId, true, false);
             this.renderMultiSelect(columnData, parentId, idx, selectedVal, columnData.values);
             if (this.displayMode === 'Vertical' || this.element.className.indexOf('e-device') > -1) {
                 ruleValElem.style.width = '100%';
@@ -2292,7 +2930,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         else {
             if (operator === 'in' || operator === 'notin') {
-                selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
+                selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value :
+                    this.setDefaultValue(parentId, true, false);
                 selectedValue = selectedVal.join(',');
             }
             let txtBox;
@@ -2312,9 +2951,11 @@ let QueryBuilder = class QueryBuilder extends Component {
     renderNumberValue(parentId, rule, operator, idx, ruleValElem, itemData, length) {
         const columnData = this.getItemData(parentId);
         const isTemplate = (typeof columnData.template === 'string');
-        let selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate || typeof rule.value === 'number') ? rule.value : this.setDefaultValue(parentId, false, true);
+        let selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate ||
+            typeof rule.value === 'number') ? rule.value : this.setDefaultValue(parentId, false, true);
         if ((operator === 'in' || operator === 'notin') && (this.dataColl.length || columnData.values)) {
-            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic) ? rule.value :
+                this.setDefaultValue(parentId, true, false);
             this.renderMultiSelect(columnData, parentId, idx, selectedVal, columnData.values);
             if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
                 ruleValElem.style.width = '100%';
@@ -2325,7 +2966,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
         }
         else if (operator === 'in' || operator === 'notin') {
-            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value :
+                this.setDefaultValue(parentId, true, false);
             const selVal = selectedVal.join(',');
             let txtInp;
             txtInp = {
@@ -2786,10 +3428,14 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         const controlName = element.className.split(' e-')[idx];
         const i = parseInt(element.id.slice(-1), 2);
+        let column;
+        let format;
+        let selectedDate;
+        let value;
+        let radioBtnObj;
         switch (controlName) {
             case 'checkbox':
-                // eslint-disable-next-line
-                const value = getComponent(element, controlName).value;
+                value = getComponent(element, controlName).value;
                 rule.value = (value !== '') ? value : undefined;
                 break;
             case 'textbox':
@@ -2799,8 +3445,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 rule.value = getComponent(element, controlName).value;
                 break;
             case 'radio':
-                // eslint-disable-next-line
-                const radioBtnObj = getComponent(element, controlName);
+                radioBtnObj = getComponent(element, controlName);
                 if (radioBtnObj.checked) {
                     if (typeof rule.value === 'boolean') {
                         rule.value = radioBtnObj.value === 'true';
@@ -2828,12 +3473,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 break;
             case 'datepicker':
-                // eslint-disable-next-line
-                const column = this.getColumn(rule.field);
-                // eslint-disable-next-line
-                const format = this.getFormat(column.format);
-                // eslint-disable-next-line
-                const selectedDate = getComponent(element, controlName).value;
+                column = this.getColumn(rule.field);
+                format = this.getFormat(column.format);
+                selectedDate = getComponent(element, controlName).value;
                 if (rule.operator.indexOf('between') > -1) {
                     if (typeof rule.value === 'string') {
                         rule.value = [];
@@ -2866,7 +3508,12 @@ let QueryBuilder = class QueryBuilder extends Component {
         const beforeRules = this.getValidRules(this.rule);
         while (ruleElem && ruleElem.previousElementSibling !== null) {
             ruleElem = ruleElem.previousElementSibling;
-            index++;
+            if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                ((!this.headerTemplate && !ruleElem.classList.contains('e-btn-group')) ||
+                    this.headerTemplate && (ruleElem.classList.contains('e-rule-container') ||
+                        ruleElem.classList.contains('e-group-container'))))) {
+                index++;
+            }
         }
         let operator = rule.rules[index].operator ? rule.rules[index].operator.toString() : '';
         ruleElem = closest(target, '.e-rule-container');
@@ -2915,7 +3562,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 this.updateValues(elementCln[i], rule.rules[index]);
             }
-            if (!this.isImportRules) {
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('change', eventsArgs);
             }
             if (this.allowValidation && rule.rules[index].field && target.parentElement.className.indexOf('e-tooltip') > -1) {
@@ -2960,7 +3607,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         const beforeRuleStr = JSON.stringify({ condition: beforeRule.condition, not: beforeRule.not, rule: beforeRule.rules });
         const afetrRuleStr = JSON.stringify({ condition: afterRule.condition, not: afterRule.not, rule: afterRule.rules });
         if (beforeRuleStr !== afetrRuleStr) {
-            if (!this.isImportRules) {
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('ruleChange', { previousRule: beforeRule, rule: afterRule, type: type });
             }
         }
@@ -3127,7 +3774,6 @@ let QueryBuilder = class QueryBuilder extends Component {
         let len;
         let tooltip;
         super.destroy();
-        let popupElement;
         element = this.element.querySelectorAll('.e-addrulegroup');
         len = element.length;
         for (i = 0; i < len; i++) {
@@ -3173,7 +3819,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (this.portals && this.portals.length) {
             this.clearQBTemplate();
         }
-        popupElement = document.querySelectorAll('.qb-dropdownlist.e-popup');
+        const popupElement = document.querySelectorAll('.qb-dropdownlist.e-popup');
         if (popupElement) {
             for (i = 0; i < popupElement.length; i++) {
                 popupElement[i].remove();
@@ -3246,7 +3892,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
             if (!this.headerTemplate) {
-                this.disableRuleCondition(groupElem, rule);
+                this.disableRuleCondition(groupElem, rule, null, this.enableSeparateConnector ? true : null);
             }
         }
     }
@@ -3255,6 +3901,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (this.cssClass) {
             addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
+        if (this.enableSeparateConnector) {
+            addClass([this.element], 'e-multi-connector');
+        }
         if (this.enableRtl) {
             addClass([this.element], 'e-rtl');
         }
@@ -3291,14 +3940,14 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
         }
         else {
-            if (this.columns.length && this.isImportRules) {
+            if (this.columns && this.columns.length && this.isImportRules) {
                 this.addGroupElement(false, this.element, this.rule.condition, false, this.rule.not, false, this.rule);
                 const mRules = extend({}, this.rule, {}, true);
                 this.isRefreshed = true;
                 this.setGroupRules(mRules);
                 this.isRefreshed = false;
             }
-            else if (this.columns.length) {
+            else if (this.columns && this.columns.length) {
                 this.addRuleElement(this.element.querySelector('.e-group-container'), {});
             }
             this.notGroupRtl();
@@ -3352,8 +4001,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.groupIdCounter = 0;
         if (!this.headerTemplate) {
             if (this.enableNotCondition) {
-                if (this.enableNotCondition) {
-                    const inputElem = this.createElement('button', { attrs: { type: 'button', class: 'e-qb-toggle' } });
+                const inputElem = this.createElement('button', { attrs: { type: 'button', class: 'e-qb-toggle' } });
+                if (this.groupElem.querySelector('.e-btn-group')) {
                     this.groupElem.querySelector('.e-btn-group').insertBefore(inputElem, this.groupElem.querySelector('.e-btngroup-and'));
                 }
             }
@@ -3394,13 +4043,11 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     onPropertyChanged(newProp, oldProp) {
         const properties = Object.keys(newProp);
+        const groupElem = this.element.querySelector('.e-group-container');
+        let summaryElem = this.element.querySelector('.e-summary-content');
         for (const prop of properties) {
             switch (prop) {
                 case 'summaryView':
-                    // eslint-disable-next-line
-                    const groupElem = this.element.querySelector('.e-group-container');
-                    // eslint-disable-next-line
-                    let summaryElem = this.element.querySelector('.e-summary-content');
                     if (newProp.summaryView) {
                         groupElem.style.display = 'none';
                         if (this.element.querySelectorAll('.e-summary-content').length < 1) {
@@ -3540,6 +4187,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                     this.isReadonly = newProp.readonly;
                     this.enableReadonly();
                     break;
+                case 'allowDragAndDrop':
+                    this.allowDragAndDrop = newProp.allowDragAndDrop;
+                    this.refresh();
+                    break;
+                case 'enableSeparateConnector':
+                    this.enableSeparateConnector = newProp.enableSeparateConnector;
+                    this.refresh();
+                    break;
             }
         }
     }
@@ -3697,6 +4352,134 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.initControl();
         }
         this.renderComplete();
+        if (this.allowDragAndDrop) {
+            this.initializeDrag();
+        }
+    }
+    initializeDrag() {
+        this.draggable = new Draggable(this.element, {
+            dragTarget: '.e-drag-qb-rule',
+            distance: 5,
+            helper: this.helper.bind(this),
+            dragStart: this.dragStartHandler.bind(this),
+            drag: this.dragHandler.bind(this),
+            dragStop: this.dragStopHandler.bind(this),
+            isReplaceDragEle: true,
+            isPreventSelect: false,
+            abort: '.e-parent-header',
+            isDragScroll: true
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    helper(e) {
+        const target = this.draggable.currentStateTarget;
+        if (!target.classList.contains('e-drag-qb-rule') || (target.classList.contains('e-drag-qb-rule') && closest(target, '.e-disable'))) {
+            return false;
+        }
+        const visualElement = this.createElement('div', {
+            className: 'e-cloneproperties e-draganddrop e-dragclone',
+            styles: 'height:"auto", z-index:2, width:' + this.element.offsetWidth
+        });
+        let cloneElement;
+        if (this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+            cloneElement = closest(target, '.e-group-container').cloneNode(true);
+            closest(target, '.e-group-container').classList.add('e-qb-dragging-rule');
+        }
+        else {
+            visualElement.classList.add('e-group-body');
+            cloneElement = this.createElement('div', { className: 'e-rule-container' });
+            const ruleElement = closest(target, '.e-rule-field').cloneNode(true);
+            cloneElement.appendChild(ruleElement);
+            closest(target, '.e-rule-field').classList.add('e-qb-dragging-rule');
+        }
+        visualElement.appendChild(cloneElement);
+        const childElements = visualElement.querySelectorAll('*');
+        childElements.forEach((child) => {
+            child.removeAttribute('id');
+        });
+        this.element.appendChild(visualElement);
+        return visualElement;
+    }
+    dragStartHandler(e) {
+        this.draggedRule = e.target;
+        this.isDragEventPrevent = false;
+        document.body.classList.add('e-prevent-select');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.dragElement = e.dragElement;
+        const rule = closest(e.target, '.e-rule-container');
+        const group = closest(e.target, '.e-group-container');
+        const dragEventArgs = { dragRuleID: rule !== null ? rule.id : group.id, dragGroupID: group.id, cancel: false };
+        this.trigger('dragStart', dragEventArgs);
+        this.isDragEventPrevent = dragEventArgs.cancel;
+    }
+    dragHandler(e) {
+        if (this.isDragEventPrevent) {
+            return;
+        }
+        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');
+        });
+        if (isNullOrUndefined(e.target)) {
+            return;
+        }
+        if (e.target.nodeName === 'HTML' || closest(e.target, '.e-qb-dragging-rule') || closest(e.target, '.e-group-header') ||
+            !closest(e.target, '#' + this.element.id) || closest(e.target, '.e-disable') || (e.target.parentElement && e.target.parentElement.classList.contains('e-btn-group') && this.enableSeparateConnector)) {
+            this.dragElement.classList.add('e-notallowedcur');
+            return;
+        }
+        else {
+            this.dragElement.classList.remove('e-notallowedcur');
+        }
+        const targetElem = closest(e.target, '.e-rule-container');
+        let grpElem = closest(e.target, '.e-group-container');
+        if (targetElem) {
+            const rect = targetElem.getBoundingClientRect();
+            const mouseY = e.event.clientY || e.event.changedTouches[0].clientY;
+            const distanceToTop = mouseY - rect.top;
+            const distanceToBottom = rect.bottom - mouseY;
+            const threshold = 20; // Adjust as needed
+            if (distanceToTop < threshold) {
+                targetElem.classList.add('e-drag-rule-top-line');
+            }
+            else if (distanceToBottom < threshold) {
+                targetElem.classList.add('e-drag-rule-bottom-line');
+            }
+        }
+        else if (e.target.classList.contains('e-rule-list') && e.target.children.length === 0) {
+            e.target.classList.add('e-drag-rule-bottom-line');
+        }
+        else if (e.target.classList.contains('e-rule-list') && e.target.children[0].classList.contains('e-group-container')) {
+            const rect = e.target.children[0].getBoundingClientRect();
+            const mouseY = e.event.clientY || e.event.changedTouches[0].clientY;
+            const distanceToTop = mouseY - rect.top;
+            const threshold = 20; // Adjust as needed
+            if (distanceToTop < threshold) {
+                e.target.classList.add('e-drag-rule-top-line');
+            }
+        }
+        else if (closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) {
+            if (!grpElem) {
+                grpElem = e.target;
+            }
+            if (grpElem.id.indexOf('group0') > -1) {
+                const rect = e.target.getBoundingClientRect();
+                const mouseY = e.event.clientY || e.event.changedTouches[0].clientY;
+                const distanceToBottom = rect.bottom - mouseY;
+                const threshold = 20; // Adjust as needed
+                if (distanceToBottom < threshold) {
+                    e.target.classList.add('e-drag-rule-bottom-line');
+                }
+            }
+        }
+        const dragEventArgs = { dragRuleID: targetElem !== null ? targetElem.id : grpElem !== null ? grpElem.id : null,
+            dragGroupID: grpElem !== null ? grpElem.id : null, cancel: false };
+        this.trigger('drag', dragEventArgs);
+        this.isDragEventPrevent = dragEventArgs.cancel;
     }
     templateParser(template) {
         if (template) {
@@ -3740,6 +4523,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         EventHandler.add(wrapper, 'focusout', this.focusEventHandler, this);
         EventHandler.add(wrapper, 'focusin', this.focusEventHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
+        EventHandler.add(document, 'keydown', this.keyBoardHandler, this);
     }
     unWireEvents() {
         const wrapper = this.getWrapper();
@@ -3747,6 +4531,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         EventHandler.remove(wrapper, 'focusout', this.focusEventHandler);
         EventHandler.remove(wrapper, 'focusin', this.focusEventHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
+        EventHandler.remove(document, 'keydown', this.keyBoardHandler);
     }
     getParentGroup(target, isParent) {
         const groupLevel = (target instanceof Element) ? this.levelColl[target.id] : this.levelColl[`${target}`];
@@ -3774,7 +4559,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             groupId = groupElem.id.replace(this.element.id + '_', '');
         }
         const args = { groupID: groupId, cancel: false, type: 'deleteGroup' };
-        if (!this.isImportRules) {
+        if (!this.isImportRules && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, (observedChangeArgs) => {
                 this.deleteGroupSuccessCallBack(observedChangeArgs, target);
             });
@@ -3804,13 +4589,20 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             while (groupElem.previousElementSibling !== null) {
                 groupElem = groupElem.previousElementSibling;
-                index++;
+                if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                    ((!this.headerTemplate && !groupElem.classList.contains('e-btn-group')) ||
+                        this.headerTemplate && (groupElem.classList.contains('e-rule-container') ||
+                            groupElem.classList.contains('e-group-container'))))) {
+                    index++;
+                }
             }
-            if (nextElem && nextElem.className.indexOf('e-separate-rule') > -1) {
-                removeClass([nextElem], 'e-separate-rule');
-                addClass([nextElem], 'e-joined-rule');
-                if (prevElem && prevElem.className.indexOf('e-rule-container') > -1) {
-                    addClass([prevElem], 'e-prev-joined-rule');
+            if (!this.enableSeparateConnector) {
+                if (nextElem && nextElem.className.indexOf('e-separate-rule') > -1) {
+                    removeClass([nextElem], 'e-separate-rule');
+                    addClass([nextElem], 'e-joined-rule');
+                    if (prevElem && prevElem.className.indexOf('e-rule-container') > -1) {
+                        addClass([prevElem], 'e-prev-joined-rule');
+                    }
                 }
             }
             const elem = groupElem.parentElement.parentElement.parentElement;
@@ -3842,7 +4634,11 @@ let QueryBuilder = class QueryBuilder extends Component {
             delete this.levelColl[args.groupID];
             this.refreshLevelColl();
             this.disableRuleCondition(elem, rule);
-            if (!this.isImportRules) {
+            if (this.enableSeparateConnector && prevElem && ((!this.headerTemplate && prevElem.classList.contains('e-btn-group')) ||
+                (this.headerTemplate && prevElem.classList.contains('e-custom-group-btn')))) {
+                detach(prevElem);
+            }
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('change', args);
             }
             this.filterRules(beforeRules, this.getValidRules(this.rule), 'deleteGroup');
@@ -3858,7 +4654,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         const groupID = groupElem.id.replace(this.element.id + '_', '');
         const ruleID = closest(target, '.e-rule-container').id.replace(this.element.id + '_', '');
         const args = { groupID: groupID, ruleID: ruleID, cancel: false, type: 'deleteRule' };
-        if (!this.isImportRules) {
+        if (!this.isImportRules && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, (observedChangeArgs) => {
                 this.deleteRuleSuccessCallBack(observedChangeArgs, target);
             });
@@ -3873,10 +4669,10 @@ let QueryBuilder = class QueryBuilder extends Component {
             const rule = this.getParentGroup(groupElem);
             let ruleElem = closest(target, '.e-rule-container');
             const beforeRules = this.getValidRules(this.rule);
-            const clnruleElem = ruleElem;
-            const nextElem = ruleElem.nextElementSibling;
             const prevElem = ruleElem.previousElementSibling;
             let index = 0;
+            const clnruleElem = ruleElem;
+            const nextElem = ruleElem.nextElementSibling;
             const valElem = ruleElem.querySelectorAll('.e-tooltip');
             let i;
             const len = valElem.length;
@@ -3885,7 +4681,12 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             while (ruleElem.previousElementSibling !== null) {
                 ruleElem = ruleElem.previousElementSibling;
-                index++;
+                if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                    ((!this.headerTemplate && !ruleElem.classList.contains('e-btn-group')) ||
+                        this.headerTemplate && (ruleElem.classList.contains('e-rule-container') ||
+                            ruleElem.classList.contains('e-group-container'))))) {
+                    index++;
+                }
             }
             const column = this.getColumn(rule.rules[index].field);
             if (column && column.template && clnruleElem.querySelector('.e-template')) {
@@ -3904,17 +4705,27 @@ let QueryBuilder = class QueryBuilder extends Component {
             const isTemplateRendered = clnruleElem.querySelector('.e-template-value');
             // eslint-disable
             try {
+                if (this.enableSeparateConnector && (clnruleElem.previousElementSibling || clnruleElem.nextElementSibling)) {
+                    const previousElem = clnruleElem.previousElementSibling;
+                    const nextElem = clnruleElem.nextElementSibling;
+                    if (isNullOrUndefined(nextElem) && ((!this.headerTemplate && previousElem.classList.contains('e-btn-group'))
+                        || (this.headerTemplate && previousElem.classList.contains('e-custom-group-btn')))) {
+                        if (previousElem && previousElem.previousElementSibling && previousElem.previousElementSibling.classList.contains('e-rule-container')) {
+                            const rule = this.getRule(previousElem.previousElementSibling);
+                            rule.condition = null;
+                        }
+                        detach(previousElem);
+                    }
+                    else if ((!this.headerTemplate && nextElem.classList.contains('e-btn-group'))
+                        || (this.headerTemplate && nextElem.classList.contains('e-custom-group-btn'))) {
+                        detach(nextElem);
+                    }
+                }
                 detach(clnruleElem);
             }
             catch (err) {
-                // eslint-disable-next-line no-ex-assign
-                err = [];
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const error = 'error';
-                // eslint-disable-next-line
-                err[error] = error;
+                return;
             }
-            // eslint-enable
             if (column && column.ruleTemplate) {
                 this.clearQBTemplate([clnruleElem.id]);
             }
@@ -3923,13 +4734,13 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             rule.rules.splice(index, 1);
             if (!(rule.rules[0] && rule.rules[0].rules)) {
-                this.disableRuleCondition(groupElem, rule);
+                this.disableRuleCondition(groupElem, rule, this.enableSeparateConnector ? true : false);
             }
             const tooltipElem = this.element.querySelectorAll('.e-tooltip');
             for (let i = 0; i < tooltipElem.length; i++) {
                 getComponent(tooltipElem[i], 'tooltip').refresh(tooltipElem[i]);
             }
-            if (!this.isImportRules) {
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('change', args);
             }
             this.filterRules(beforeRules, this.getValidRules(this.rule), 'deleteRule');
@@ -3953,9 +4764,32 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.isImportRules = false;
     }
     keyBoardHandler(e) {
-        if (this.readonly && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) {
+        if (e.currentTarget === this.element && this.readonly && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) {
             e.preventDefault();
         }
+        else if (e.code === 'Escape' && this.allowDragAndDrop) {
+            this.isDragEventPrevent = true;
+            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');
+            });
+            const dragElemnet = this.element.querySelector('.e-cloneproperties');
+            if (dragElemnet) {
+                remove(dragElemnet);
+            }
+            if (this.enableSeparateConnector) {
+                this.refresh();
+            }
+        }
     }
     clearQBTemplate(ruleElemColl) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3963,14 +4797,14 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.clearTemplate(ruleElemColl);
         }
     }
-    disableRuleCondition(groupElem, rules) {
+    disableRuleCondition(groupElem, rules, isNewRuleAdded, isNewGroup) {
         if (!this.headerTemplate) {
             if (this.readonly) {
                 return;
             }
             const count = groupElem.querySelector('.e-rule-list').childElementCount;
-            const andElem = groupElem.querySelector('.e-btngroup-and');
-            const orElem = groupElem.querySelector('.e-btngroup-or');
+            let andElem = groupElem.querySelector('.e-btngroup-and');
+            let orElem = groupElem.querySelector('.e-btngroup-or');
             if (count > 1) {
                 andElem.disabled = false;
                 orElem.disabled = false;
@@ -3979,21 +4813,124 @@ let QueryBuilder = class QueryBuilder extends Component {
                     orElem.nextElementSibling.classList.remove('e-btn-disable');
                     andElem.nextElementSibling.classList.remove('e-btn-disable');
                 }
-                if (rules && rules.condition === 'or') {
-                    orElem.checked = true;
+                if (this.enableSeparateConnector && !isNewRuleAdded) {
+                    let index = 0;
+                    let element;
+                    // eslint-disable-next-line no-constant-condition
+                    while (true) {
+                        const andGroup = groupElem.parentElement.querySelectorAll('.e-btngroup-and');
+                        const orGroup = groupElem.parentElement.querySelectorAll('.e-btngroup-or');
+                        andElem = andGroup[andGroup.length - (1 + index)];
+                        orElem = orGroup[orGroup.length - (1 + index)];
+                        element = andGroup[andGroup.length - (1 + index)];
+                        if (element && element.parentElement && element.parentElement.style.display === 'none') {
+                            index++;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    let elem = groupElem.previousElementSibling;
+                    while (elem && !elem.classList.contains('e-rule-container')) {
+                        if (elem.classList.contains('e-group-container')) {
+                            elem = elem.querySelectorAll('.e-rule-container')[elem.querySelectorAll('.e-rule-container').length - 1];
+                            break;
+                        }
+                        elem = elem.previousElementSibling;
+                    }
+                    if (isNewGroup && groupElem.classList.contains('e-group-container')) {
+                        elem = groupElem;
+                        const prevRule = this.getGroup(elem);
+                        if (prevRule.condition === 'or') {
+                            orElem.checked = true;
+                        }
+                        else {
+                            andElem.checked = true;
+                        }
+                    }
+                    else if (elem && elem.classList.contains('e-rule-container')) {
+                        const ruleID = elem.id.replace(this.element.id + '_', '');
+                        const prevRule = this.getRule(ruleID);
+                        if (prevRule.condition === 'or') {
+                            orElem.checked = true;
+                        }
+                        else {
+                            andElem.checked = true;
+                        }
+                    }
                 }
-                else {
-                    andElem.checked = true;
+                else if (!isNewRuleAdded) {
+                    if (rules && rules.condition === 'or') {
+                        orElem.checked = true;
+                    }
+                    else {
+                        andElem.checked = true;
+                    }
                 }
             }
             else {
-                andElem.checked = false;
-                andElem.disabled = true;
-                orElem.checked = false;
-                orElem.disabled = true;
-                if (rules) {
-                    orElem.nextElementSibling.classList.add('e-btn-disable');
-                    andElem.nextElementSibling.classList.add('e-btn-disable');
+                if (this.enableSeparateConnector && !isNewRuleAdded) {
+                    let index = 0;
+                    let element;
+                    // eslint-disable-next-line no-constant-condition
+                    while (true) {
+                        const andGroup = groupElem.parentElement.querySelectorAll('.e-btngroup-and');
+                        const orGroup = groupElem.parentElement.querySelectorAll('.e-btngroup-or');
+                        andElem = andGroup[andGroup.length - (1 + index)];
+                        orElem = orGroup[orGroup.length - (1 + index)];
+                        element = andGroup[andGroup.length - (1 + index)];
+                        if (element && element.parentElement && element.parentElement.style.display === 'none') {
+                            index++;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    let elem;
+                    let tempElem = groupElem.previousElementSibling;
+                    while (tempElem) {
+                        if (tempElem.classList.contains('e-group-container')) {
+                            tempElem = tempElem.querySelectorAll('.e-rule-container')[tempElem.querySelectorAll('.e-rule-container').length - 1];
+                        }
+                        if (tempElem.classList.contains('e-rule-container')) {
+                            elem = tempElem;
+                            break;
+                        }
+                        tempElem = tempElem.previousElementSibling;
+                    }
+                    if (isNullOrUndefined(elem) && groupElem.querySelectorAll('.e-rule-container')[groupElem.querySelectorAll('.e-rule-container').length - 1]) {
+                        elem = groupElem.querySelectorAll('.e-rule-container')[groupElem.querySelectorAll('.e-rule-container').length - 1];
+                    }
+                    if (isNewGroup && groupElem.classList.contains('e-group-container')) {
+                        elem = groupElem;
+                        const prevRule = this.getGroup(elem);
+                        if (prevRule.condition === 'or') {
+                            orElem.checked = true;
+                        }
+                        else {
+                            andElem.checked = true;
+                        }
+                    }
+                    else if (elem) {
+                        const ruleID = elem.id.replace(this.element.id + '_', '');
+                        const prevRule = this.getRule(ruleID);
+                        if (prevRule.condition === 'or' && orElem) {
+                            orElem.checked = true;
+                        }
+                        else if (andElem) {
+                            andElem.checked = true;
+                        }
+                    }
+                }
+                else if (!isNewRuleAdded) {
+                    andElem.checked = false;
+                    andElem.disabled = true;
+                    orElem.checked = false;
+                    orElem.disabled = true;
+                    if (rules) {
+                        orElem.nextElementSibling.classList.add('e-btn-disable');
+                        andElem.nextElementSibling.classList.add('e-btn-disable');
+                    }
                 }
             }
         }
@@ -4097,7 +5034,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     rule.custom = customObj;
                 }
-                if (rule.rules.length === 0) {
+                if (rule.rules && rule.rules.length === 0) {
                     rule = {};
                 }
             }
@@ -4166,7 +5103,12 @@ let QueryBuilder = class QueryBuilder extends Component {
         const rule = this.getParentGroup(groupElem);
         while (ruleElem.previousElementSibling !== null) {
             ruleElem = ruleElem.previousElementSibling;
-            index++;
+            if (!this.enableSeparateConnector || (this.enableSeparateConnector &&
+                ((!this.headerTemplate && !ruleElem.classList.contains('e-btn-group')) ||
+                    this.headerTemplate && (ruleElem.classList.contains('e-rule-container') ||
+                        ruleElem.classList.contains('e-group-container'))))) {
+                index++;
+            }
         }
         return rule.rules[index];
     }
@@ -4576,13 +5518,10 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (value.indexOf(':') > -1 && (value.indexOf('/') < 0 && value.indexOf(',') < 0
             && value.indexOf('-') < 0)) {
             currDate = new Date();
-            // eslint-disable-next-line
-            currDate.setHours(parseInt(value.split(':')[0]));
-            // eslint-disable-next-line
-            currDate.setMinutes(parseInt(value.split(':')[1]));
+            currDate.setHours(parseInt(value.split(':')[0], 10));
+            currDate.setMinutes(parseInt(value.split(':')[1], 10));
             if (value.split(':')[2]) {
-                // eslint-disable-next-line
-                currDate.setSeconds(parseInt(value.split(':')[2]));
+                currDate.setSeconds(parseInt(value.split(':')[2], 10));
             }
         }
         return currDate;
@@ -4598,17 +5537,43 @@ let QueryBuilder = class QueryBuilder extends Component {
             parentElem = this.renderGroup(rule, rule.condition, parentElem, not);
         }
         else {
-            if (rule.rules.length > 1 && !this.headerTemplate) {
+            if (rule.rules && rule.rules.length > 1 && !this.headerTemplate) {
                 // enable/disable conditions when rule group is added
-                const orElem = parentElem.querySelector('.e-btngroup-or');
-                const andElem = parentElem.querySelector('.e-btngroup-and');
+                let orElem = parentElem.querySelector('.e-btngroup-or');
+                let andElem = parentElem.querySelector('.e-btngroup-and');
+                if (this.enableSeparateConnector && parentElem.previousElementSibling) {
+                    orElem = parentElem.previousElementSibling.querySelector('.e-btngroup-or');
+                    andElem = parentElem.previousElementSibling.querySelector('.e-btngroup-and');
+                }
                 orElem.disabled = false;
                 andElem.disabled = false;
-                if (rule.condition === 'or') {
-                    orElem.checked = true;
+                if (this.enableSeparateConnector) {
+                    let elem = parentElem.previousElementSibling;
+                    while (elem && !elem.classList.contains('e-rule-container')) {
+                        if (elem.classList.contains('e-group-container')) {
+                            elem = elem.querySelectorAll('.e-rule-container')[elem.querySelectorAll('.e-rule-container').length - 1];
+                            break;
+                        }
+                        elem = elem.previousElementSibling;
+                    }
+                    if (elem && elem.classList.contains('e-rule-container')) {
+                        const ruleID = elem.id.replace(this.element.id + '_', '');
+                        const prevRule = this.getRule(ruleID);
+                        if (prevRule.condition === 'or') {
+                            orElem.checked = true;
+                        }
+                        else {
+                            andElem.checked = true;
+                        }
+                    }
                 }
                 else {
-                    andElem.checked = true;
+                    if (rule.condition === 'or') {
+                        orElem.checked = true;
+                    }
+                    else {
+                        andElem.checked = true;
+                    }
                 }
             }
             else {
@@ -4628,7 +5593,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
         }
-        if (rule.rules.length === 0 && this.headerTemplate) {
+        if (rule.rules && rule.rules.length === 0 && this.headerTemplate) {
             rule.rules[0] = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
         }
         const ruleColl = rule.rules;
@@ -4649,10 +5614,6 @@ let QueryBuilder = class QueryBuilder extends Component {
                     const lockGrpTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-grp-btn');
                     this.groupLock(lockGrpTarget);
                 }
-                if (isNullOrUndefined(ruleColl[i].rules) && ruleColl[i].isLocked) {
-                    const lockRuleTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-rule-btn');
-                    this.ruleLock(lockRuleTarget);
-                }
             }
         }
         if (parentElem) {
@@ -4670,7 +5631,17 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isMiddleGroup) {
             this.isMiddleGroup = false;
             this.cloneGrpBtnClick = false;
-            return cloneElem[this.groupIndex + 1]; // group added in the middle
+            let index = 0;
+            let tempGroupIndex = this.groupIndex + 1;
+            if (this.enableSeparateConnector) {
+                for (let i = 0; i < tempGroupIndex; i++) {
+                    if (cloneElem[i].classList.contains('e-rule-container')) {
+                        tempGroupIndex++;
+                        index++;
+                    }
+                }
+            }
+            return cloneElem[this.groupIndex + index + 1]; // group added in the middle
         }
         else if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isLastGroup) {
             this.isLastGroup = false;
@@ -4796,9 +5767,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     }
                 }
             }
-            else if (elem.classList.contains('e-btn-disable')) {
-                // do nothing
-            }
+            else if (elem.classList.contains('e-btn-disable')) ;
             else {
                 elem.classList.add('e-readonly');
             }
@@ -4838,6 +5807,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             for (let j = 0, jLen = rules.rules.length; j < jLen; j++) {
                 if (rules.rules[j].rules) {
                     queryStr = this.getSqlString(rules.rules[j], enableEscape, queryStr, sqlLocale);
+                    if (this.enableSeparateConnector) {
+                        condition = rules.rules[j].condition;
+                    }
                 }
                 else {
                     const rule = rules.rules[j];
@@ -4929,8 +5901,10 @@ let QueryBuilder = class QueryBuilder extends Component {
                     if (condition === '' || (rule && rule.condition !== '' && rule.custom && rule.custom.isCustom)) {
                         condition = rule.condition;
                     }
-                    condition = sqlLocale ? this.l10n.getConstant(condition.toUpperCase()).toUpperCase() : condition.toUpperCase();
-                    queryStr += ' ' + condition + ' ';
+                    if (condition) {
+                        condition = sqlLocale ? this.l10n.getConstant(condition.toUpperCase()).toUpperCase() : condition.toUpperCase();
+                        queryStr += ' ' + condition + ' ';
+                    }
                 }
             }
         }
@@ -4996,12 +5970,19 @@ let QueryBuilder = class QueryBuilder extends Component {
      * @returns {ParameterizedSql} – Parameterized SQL query from rules.
      */
     getParameterizedSql(rule) {
-        if (!rule) {
-            rule = this.getValidRules();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.moduleLoader.loadedModules.length) {
+            if (!rule) {
+                rule = this.getValidRules();
+            }
+            const obj = { sql: null };
+            this.notify('query-library', { prop: 'getParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+            return obj['sql'];
+        }
+        else {
+            console.warn('[WARNING] :: Module "query-library" is not available in QueryBuilder component! You either misspelled the module name or forgot to load it.');
         }
-        const obj = { sql: null };
-        this.notify('query-library', { prop: 'getParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
-        return obj['sql'];
+        return null;
     }
     /**
      * Sets the rules from the parameter sql query.
@@ -5010,13 +5991,19 @@ let QueryBuilder = class QueryBuilder extends Component {
      * @returns {void}
      */
     setParameterizedSql(sqlQuery) {
-        const obj = { sql: null };
-        this.notify('query-library', { prop: 'convertParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
-        let sql = obj['sql'];
-        if (sql) {
-            sql = sql.replace(/`/g, '');
-            const ruleModel = this.getRulesFromSql(sql);
-            this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.moduleLoader.loadedModules.length) {
+            const obj = { sql: null };
+            this.notify('query-library', { prop: 'convertParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+            let sql = obj['sql'];
+            if (sql) {
+                sql = sql.replace(/`/g, '');
+                const ruleModel = this.getRulesFromSql(sql);
+                this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+            }
+        }
+        else {
+            console.warn('[WARNING] :: Module "query-library" is not available in QueryBuilder component! You either misspelled the module name or forgot to load it.');
         }
     }
     /**
@@ -5026,12 +6013,19 @@ let QueryBuilder = class QueryBuilder extends Component {
      * @returns {ParameterizedNamedSql} – Parameterized Named SQL query from rules.
      */
     getParameterizedNamedSql(rule) {
-        if (!rule) {
-            rule = this.getValidRules();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.moduleLoader.loadedModules.length) {
+            if (!rule) {
+                rule = this.getValidRules();
+            }
+            const obj = { sql: null };
+            this.notify('query-library', { prop: 'getNamedParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+            return obj['sql'];
+        }
+        else {
+            console.warn('[WARNING] :: Module "query-library" is not available in QueryBuilder component! You either misspelled the module name or forgot to load it.');
         }
-        const obj = { sql: null };
-        this.notify('query-library', { prop: 'getNamedParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
-        return obj['sql'];
+        return null;
     }
     /**
      * Sets the rules from the named parameter SQL query.
@@ -5040,13 +6034,19 @@ let QueryBuilder = class QueryBuilder extends Component {
      * @returns {void}
      */
     setParameterizedNamedSql(sqlQuery) {
-        const obj = { sql: null };
-        this.notify('query-library', { prop: 'convertNamedParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
-        let sql = obj['sql'];
-        if (sql) {
-            sql = sql.replace(/`/g, '');
-            const ruleModel = this.getRulesFromSql(sql);
-            this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.moduleLoader.loadedModules.length) {
+            const obj = { sql: null };
+            this.notify('query-library', { prop: 'convertNamedParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+            let sql = obj['sql'];
+            if (sql) {
+                sql = sql.replace(/`/g, '');
+                const ruleModel = this.getRulesFromSql(sql);
+                this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+            }
+        }
+        else {
+            console.warn('[WARNING] :: Module "query-library" is not available in QueryBuilder component! You either misspelled the module name or forgot to load it.');
         }
     }
     /**
@@ -5057,8 +6057,14 @@ let QueryBuilder = class QueryBuilder extends Component {
      * @returns {void}
      */
     setMongoQuery(mongoQuery, mongoLocale) {
-        this.rule = { condition: 'and', not: false, rules: [] };
-        this.notify('query-library', { prop: 'mongoParser', onPropertyChange: false, value: { mongoQuery: JSON.parse(mongoQuery), rule: this.rule, mongoLocale: mongoLocale } });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.moduleLoader.loadedModules.length) {
+            this.rule = { condition: 'and', not: false, rules: [] };
+            this.notify('query-library', { prop: 'mongoParser', onPropertyChange: false, value: { mongoQuery: JSON.parse(mongoQuery), rule: this.rule, mongoLocale: mongoLocale } });
+        }
+        else {
+            console.warn('[WARNING] :: Module "query-library" is not available in QueryBuilder component! You either misspelled the module name or forgot to load it.');
+        }
     }
     /**
      * Gets the Mongo query from rules.
@@ -5067,12 +6073,19 @@ let QueryBuilder = class QueryBuilder extends Component {
      * @returns {object} - Sql query from rules.
      */
     getMongoQuery(rule) {
-        if (!rule) {
-            rule = this.getValidRules();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.moduleLoader.loadedModules.length) {
+            if (!rule) {
+                rule = this.getValidRules();
+            }
+            const obj = { mongoQuery: null };
+            this.notify('query-library', { prop: 'getMongoFromRules', onPropertyChange: false, value: { rule: rule, mongoQuery: '', obj: obj } });
+            return obj['mongoQuery'];
+        }
+        else {
+            console.warn('[WARNING] :: Module "query-library" is not available in QueryBuilder component! You either misspelled the module name or forgot to load it.');
         }
-        const obj = { mongoQuery: null };
-        this.notify('query-library', { prop: 'getMongoFromRules', onPropertyChange: false, value: { rule: rule, mongoQuery: '', obj: obj } });
-        return obj['mongoQuery'];
+        return '';
     }
     /**
      * Clones the rule based on the rule ID to the specific group.
@@ -5091,7 +6104,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.showButtons.cloneRule = true;
         this.addRules([{
                 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
-                'value': getRule.value
+                'value': getRule.value, 'condition': getRule.condition
             }], groupID);
         this.ruleIndex = -1;
         this.cloneRuleBtnClick = false;
@@ -5180,8 +6193,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         let matchValue;
         for (let i = 0, iLen = operators.length; i < iLen; i++) {
             regexStr = /^\w+$/.test(operators[i]) ? '\\b' : '';
-            // eslint-disable-next-line
-            regex = new RegExp('^(' + operators[i] + ')' + regexStr, 'ig');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const regExp = RegExp;
+            regex = new regExp('^(' + operators[i] + ')' + regexStr, 'ig');
             if (regex.exec(sqlString)) {
                 this.parser.push(['Operators', operators[i].toLowerCase()]);
                 return operators[i].length;
@@ -5191,8 +6205,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (!lastPasrser || (lastPasrser && lastPasrser[0] !== 'Literal')) {
             for (let i = 0, iLen = conditions.length; i < iLen; i++) {
                 regexStr = /^\w+$/.test(conditions[i]) ? '\\b' : '';
-                // eslint-disable-next-line
-                regex = new RegExp('^(' + conditions[i] + ')' + regexStr, 'ig');
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const regExp = RegExp;
+                regex = new regExp('^(' + conditions[i] + ')' + regexStr, 'ig');
                 if (regex.exec(sqlString)) {
                     this.parser.push(['Conditions', conditions[i].toLowerCase()]);
                     return conditions[i].length;
@@ -5201,8 +6216,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         for (let i = 0, iLen = subOp.length; i < iLen; i++) {
             regexStr = /^\w+$/.test(subOp[i]) ? '\\b' : '';
-            // eslint-disable-next-line
-            regex = new RegExp('^(' + subOp[i] + ')' + regexStr, 'ig');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const regExp = RegExp;
+            regex = new regExp('^(' + subOp[i] + ')' + regexStr, 'ig');
             if (regex.exec(sqlString)) {
                 this.parser.push(['SubOperators', subOp[i].toLowerCase()]);
                 return subOp[i].length;
@@ -5230,31 +6246,25 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.parser.push(['String', null]);
             return matchValue.length;
         }
-        // eslint-disable-next-line
-        if (/^`?([a-z_][a-z0-9_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)) {
-            // eslint-disable-next-line
-            matchValue = /^`?([a-zåäö_][a-z0-9åäö_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)[1];
+        if (/^`?([a-z_][a-z0-9_.\\[\]\\(\\)]{0,}(\\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)) {
+            matchValue = /^`?([a-z_][a-z0-9_.\\[\]\\(\\)]{0,}(\\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)[1];
             this.parser.push(['Literal', matchValue]);
             return matchValue.length;
         }
-        // eslint-disable-next-line
-        if (this.checkLiteral() && /^'?([a-z_][a-z0-9 _.\[\]\(\)-]{0,}(\:(number|float|string|date|boolean))?)'?/i.exec(sqlString)) {
-            // eslint-disable-next-line
-            matchValue = /^'?([a-z_][a-z0-9 _.\[\]\(\)-]{0,}(\:(number|float|string|date|boolean))?)'?/i.exec(sqlString)[1];
+        if (this.checkLiteral() && /^'?([a-z_][a-z0-9 _.\\[\]\\(\\)-]{0,}(\\:(number|float|string|date|boolean))?)'?/i.exec(sqlString)) {
+            matchValue = /^'?([a-z_][a-z0-9 _.\\[\]\\(\\)-]{0,}(\\:(number|float|string|date|boolean))?)'?/i.exec(sqlString)[1];
             this.parser.push(['Literal', matchValue]);
             return matchValue.length + 2;
         }
         if (this.checkNumberLiteral(sqlString, sqlLocale)) {
-            // eslint-disable-next-line
-            matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
+            matchValue = /^[0-9]+(\.[0-9]+)$/.exec(sqlString)[0];
             this.parser.push(['Literal', matchValue]);
             return matchValue.length;
         }
         //String
-        // eslint-disable-next-line
-        if (/^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(sqlString)) {
-            // eslint-disable-next-line
-            matchValue = /^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(sqlString)[0];
+        const singleString = this.getSingleQuoteString(sqlString);
+        if (singleString !== '') {
+            matchValue = singleString;
             if (matchValue[matchValue.length - 2] === '(') {
                 let isClosed = false;
                 for (let j = matchValue.length; j < sqlString.length; j++) {
@@ -5269,38 +6279,43 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             else if (sqlString[matchValue.length] && (sqlString[matchValue.length] !== ')') &&
                 !this.checkCondition(sqlString, matchValue)) {
-                matchValue = this.getSingleQuoteString(sqlString, matchValue);
+                matchValue = this.combineSingleQuoteString(sqlString, matchValue);
             }
             // end
             this.parser.push(['String', matchValue]);
             return matchValue.length;
         }
         // Double String
-        // eslint-disable-next-line
-        if (/^"([^\\"]*(?:\\.[^\\"]*)*)"/.exec(sqlString)) {
-            // eslint-disable-next-line
-            matchValue = /^"([^\\"]*(?:\\.[^\\"]*)*)"/.exec(sqlString)[0];
+        const doubleString = this.getDoubleQuoteString(sqlString);
+        if (doubleString !== '') {
+            matchValue = doubleString;
             this.parser.push(['DoubleString', matchValue]);
             return matchValue.length;
         }
         //Number
-        // eslint-disable-next-line
-        if (/^[0-9]+(\.[0-9]+)?/.exec(sqlString)) {
-            // eslint-disable-next-line
-            matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
+        if (/^\d*\.?\d+/.exec(sqlString)) {
+            matchValue = /^\d*\.?\d+/.exec(sqlString)[0];
             this.parser.push(['Number', matchValue]);
             return matchValue.length;
         }
         //Negative Number
-        // eslint-disable-next-line
-        if (/^-?[0-9]+(\.[0-9]+)?/.exec(sqlString)) {
-            // eslint-disable-next-line
-            matchValue = /^-?[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
+        if (/^-?\d*\.?\d+/.exec(sqlString)) {
+            matchValue = /^-?\d*\.?\d+/.exec(sqlString)[0];
             this.parser.push(['Number', matchValue]);
             return matchValue.length;
         }
         return 1;
     }
+    getDoubleQuoteString(sqlString) {
+        const start = sqlString.indexOf('"');
+        if (start === 0) {
+            const end = sqlString.indexOf('"', start + 1);
+            if (end !== -1) {
+                return sqlString.substring(start, end + 1);
+            }
+        }
+        return '';
+    }
     checkCondition(sqlString, matchValue) {
         if (sqlString.slice(matchValue.length + 1, matchValue.length + 4) === 'AND' ||
             sqlString.slice(matchValue.length + 1, matchValue.length + 3) === 'OR') {
@@ -5308,16 +6323,26 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         return false;
     }
-    getSingleQuoteString(sqlString, matchValue) {
+    getSingleQuoteString(sqlString, isBetween) {
+        const start = sqlString.indexOf('\'');
+        if ((start !== -1 && isBetween) || (start === 0 && !isBetween)) {
+            const end = sqlString.indexOf('\'', start + 1);
+            if (end !== -1) {
+                return sqlString.substring(start, end + 1);
+            }
+        }
+        return '';
+    }
+    combineSingleQuoteString(sqlString, matchValue) {
         if (sqlString[matchValue.length] && (sqlString[matchValue.length] !== ')') &&
             !this.checkCondition(sqlString, matchValue) && sqlString[matchValue.length] !== ',') {
-            const tempStr = sqlString.replace(matchValue, '');
-            // eslint-disable-next-line
-            if (isNullOrUndefined(/^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(tempStr))) {
-                // eslint-disable-next-line
-                let parsedValue = /^((?:[^\\']+?|\\.|'')*)'(?!')/.exec(tempStr)[0];
+            const tempMatchValue = matchValue.substring(0, matchValue.length - 1);
+            const tempStr = sqlString.replace(tempMatchValue, '');
+            const singleString = this.getSingleQuoteString(tempStr, true);
+            if (singleString !== '') {
+                const parsedValue = singleString.substring(1, singleString.length);
                 matchValue += parsedValue;
-                matchValue = this.getSingleQuoteString(sqlString, matchValue);
+                matchValue = this.combineSingleQuoteString(sqlString, matchValue);
             }
         }
         return matchValue;
@@ -5346,8 +6371,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             return true;
         }
         else {
-            // eslint-disable-next-line
-            if (/^[0-9]+(\.[0-9]+)?/.exec(sqlString)) {
+            if (/^[0-9]+(?:\.[0-9]+)$/.exec(sqlString)) {
                 const secParser = this.parser[this.parser.length - 2];
                 const betweenParser = this.parser[this.parser.length - 3];
                 if (lastParser[0] === 'Left' && (secParser && secParser[0] === 'Conditions')) {
@@ -5560,16 +6584,17 @@ let QueryBuilder = class QueryBuilder extends Component {
                         strVal = [];
                         rule.type = this.getTypeFromColumn(rule);
                     }
+                    if (this.enableSeparateConnector && parser[i + 1][0] === 'Conditions') {
+                        rule.condition = parser[i + 1][1];
+                    }
                 }
                 else if (parser[i + 1][0] === 'Operators') {
                     rule.operator = this.getOperator(parser[i + 2][1], parser[i + 1][1], sqlLocale);
-                    if (rule.operator == "equal" && parser[i + 2][0] === "String" && parser[i + 2][1] === "''") {
-                        rule.operator = "isempty";
-                        
+                    if (rule.operator === 'equal' && parser[i + 2][0] === 'String' && parser[i + 2][1] === '\'\'') {
+                        rule.operator = 'isempty';
                     }
-                    else if (rule.operator == "notequal" && parser[i + 2][0] === "String" && parser[i + 2][1] === "''") {
-                        rule.operator = "isnotempty";
-                        
+                    else if (rule.operator === 'notequal' && parser[i + 2][0] === 'String' && parser[i + 2][1] === '\'\'') {
+                        rule.operator = 'isnotempty';
                     }
                     if (parser[i + 2][0] === 'Number') {
                         rule.type = 'number';
@@ -5583,6 +6608,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                         }
                         rule.value = val;
                     }
+                    if (this.enableSeparateConnector && parser[i + 3][0] === 'Conditions') {
+                        rule.condition = parser[i + 3][1];
+                    }
                     rule.type = this.getTypeFromColumn(rule);
                 }
                 rules.rules.push(rule);
@@ -5610,7 +6638,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 subRules = this.processParser(this.parser, subRules, levelColl, sqlLocale);
                 return rules;
             }
-            else if (parser[i][0] === 'Conditions') {
+            else if (parser[i][0] === 'Conditions' && !this.enableSeparateConnector) {
                 if (parser[i][1] === 'not' || (sqlLocale && this.l10n.getConstant('NOT').toLowerCase() === parser[i][1])) {
                     rules.not = true;
                 }
@@ -5631,27 +6659,6 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         return rules;
     }
-    getValueFromParser(parser, idx) {
-        let value = '';
-        let k;
-        for (k = idx; k < parser.length; k++) {
-            if (parser[k][0] !== 'String' || parser[k][1] === ',' || parser[k][1] === ', ') {
-                break;
-            }
-            else {
-                if (value !== '') {
-                    idx += 1;
-                }
-                if (parser[k][1] !== null) {
-                    value += parser[k][1];
-                }
-                else {
-                    value = null;
-                }
-            }
-        }
-        return { value: value, idx: idx };
-    }
     /**
      * Clone the Group
      *
@@ -5686,8 +6693,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                 this.ruleIndex = i;
             }
         }
-        this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
-                'value': getRule.value }], groupId);
+        if (this.enableSeparateConnector) {
+            this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                    'value': getRule.value, 'condition': getRule.condition }], groupId);
+        }
+        else {
+            this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                    'value': getRule.value }], groupId);
+        }
         this.ruleIndex = -1;
     }
     ruleLock(target) {
@@ -5695,7 +6708,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         const rule = this.getRule(ruleElem.id.replace(this.element.id + '_', ''));
         if (ruleElem.classList.contains('e-disable')) {
             rule.isLocked = false;
-            this.lockItems = this.lockItems.filter(lockItem => lockItem !== ruleElem.id);
+            this.lockItems = this.lockItems.filter((lockItem) => lockItem !== ruleElem.id);
             ruleElem.classList.remove('e-disable');
             this.disableRuleControls(target, ruleElem, false);
             target.children[0].classList.add('e-unlock');
@@ -5716,7 +6729,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     groupLock(target) {
         const groupElem = closest(target, '.e-group-container');
-        let group = this.getGroup(groupElem.id.replace(this.element.id + '_', ''));
+        const group = this.getGroup(groupElem.id.replace(this.element.id + '_', ''));
         const isRoot = groupElem.id.indexOf('group0') > -1;
         if (groupElem.classList.contains('e-disable')) {
             if (isRoot) {
@@ -5729,7 +6742,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             else {
                 group.isLocked = false;
             }
-            this.lockItems = this.lockItems.filter(lockItem => lockItem !== groupElem.id);
+            this.lockItems = this.lockItems.filter((lockItem) => lockItem !== groupElem.id);
             groupElem.classList.remove('e-disable');
             this.disableHeaderControls(target, groupElem, false);
             target.children[0].classList.add('e-unlock');
@@ -5788,6 +6801,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         const lockElem = groupElem.querySelectorAll('.e-lock-grp-btn');
         const cloneElem = groupElem.querySelectorAll('.e-clone-grp-btn');
         const groupContElem = groupElem.querySelectorAll('.e-group-container');
+        const addCondition = groupElem.querySelectorAll('.e-add-condition-btn');
+        const addGroup = groupElem.querySelectorAll('.e-add-group-btn');
         for (let i = 0; i < andElem.length; i++) {
             if (isDisabled) {
                 if (groupContElem[i] && groupContElem[i].classList.contains('e-disable')) {
@@ -5795,7 +6810,15 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 andElem[i].disabled = true;
                 orElem[i].disabled = true;
-                addElem[i].disabled = true;
+                if (addElem[i]) {
+                    addElem[i].disabled = true;
+                }
+                if (addCondition[i]) {
+                    addCondition[i].disabled = true;
+                }
+                if (addGroup[i]) {
+                    addGroup[i].disabled = true;
+                }
                 if (notElem[i]) {
                     notElem[i].disabled = true;
                 }
@@ -5806,7 +6829,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     cloneElem[i].disabled = true;
                 }
                 andElem[i].parentElement.classList.add('e-disabled');
-                if (lockElem[i] !== target) {
+                if (lockElem[i] && lockElem[i] !== target) {
                     lockElem[i].disabled = true;
                     lockElem[i].children[0].classList.remove('e-unlock');
                     lockElem[i].children[0].classList.add('e-lock');
@@ -5818,8 +6841,18 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 andElem[i].disabled = false;
                 orElem[i].disabled = false;
-                addElem[i].disabled = false;
-                lockElem[i].disabled = false;
+                if (addElem[i]) {
+                    addElem[i].disabled = false;
+                }
+                if (addCondition[i]) {
+                    addCondition[i].disabled = false;
+                }
+                if (addGroup[i]) {
+                    addGroup[i].disabled = false;
+                }
+                if (lockElem[i]) {
+                    lockElem[i].disabled = false;
+                }
                 if (notElem[i]) {
                     notElem[i].disabled = false;
                 }
@@ -5830,8 +6863,12 @@ let QueryBuilder = class QueryBuilder extends Component {
                     cloneElem[i].disabled = false;
                 }
                 andElem[i].parentElement.classList.remove('e-disabled');
-                lockElem[i].children[0].classList.remove('e-lock');
-                lockElem[i].children[0].classList.add('e-unlock');
+                if (lockElem[i]) {
+                    lockElem[i].children[0].classList.remove('e-lock');
+                }
+                if (lockElem[i]) {
+                    lockElem[i].children[0].classList.add('e-unlock');
+                }
             }
         }
         this.disableRuleControls(target, groupElem, isDisabled);
@@ -5966,6 +7003,15 @@ __decorate([
 __decorate([
     Event()
 ], QueryBuilder.prototype, "ruleChange", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "dragStart", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "drag", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "drop", void 0);
 __decorate([
     Complex({}, ShowButtons)
 ], QueryBuilder.prototype, "showButtons", void 0);
@@ -6041,9 +7087,15 @@ __decorate([
 __decorate([
     Property('')
 ], QueryBuilder.prototype, "separator", void 0);
+__decorate([
+    Property(false)
+], QueryBuilder.prototype, "enableSeparateConnector", void 0);
 __decorate([
     Complex({ condition: 'and', rules: [] }, Rule)
 ], QueryBuilder.prototype, "rule", void 0);
+__decorate([
+    Property(false)
+], QueryBuilder.prototype, "allowDragAndDrop", void 0);
 QueryBuilder = __decorate([
     NotifyPropertyChanges
 ], QueryBuilder);
@@ -6348,13 +7400,13 @@ class QueryLibrary {
             }
             else if (condition === '$or') {
                 let notBetween;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let innerObject = [];
                 let keys = [];
                 let firstKey = [];
                 let secondKey = [];
                 let innerKeys = [];
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let firstValue = [];
                 let secondValue = [];
                 let innerFirstValue = [];
@@ -6734,13 +7786,5 @@ class QueryLibrary {
     }
 }
 
-/**
- * QueryBuilder modules
- */
-
-/**
- * QueryBuilder all modules
- */
-
-export { Columns, Rule, Value, ShowButtons, QueryBuilder, QueryLibrary };
+export { Columns, QueryBuilder, QueryLibrary, Rule, ShowButtons, Value };
 //# sourceMappingURL=ej2-querybuilder.es2015.js.map