@syncfusion/ej2-querybuilder 25.2.7 → 26.1.38

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

@@ -31,11 +31,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Query Builder Source
  */
-import { Component, NotifyPropertyChanges, getComponent, Browser, compile, append } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, getComponent, Browser, compile, append, Draggable, remove } from '@syncfusion/ej2-base';
 import { Property, ChildProperty, Complex, L10n, closest, extend, isNullOrUndefined, Collection, cldrData } from '@syncfusion/ej2-base';
 import { getInstance, addClass, removeClass, rippleEffect, detach, classList } from '@syncfusion/ej2-base';
 import { Internationalization, getUniqueID, select } from '@syncfusion/ej2-base';
-import { Button, RadioButton } from '@syncfusion/ej2-buttons';
+import { Button, CheckBox, RadioButton } from '@syncfusion/ej2-buttons';
 import { DropDownList, CheckBoxSelection, DropDownTree } from '@syncfusion/ej2-dropdowns';
 import { MultiSelect } from '@syncfusion/ej2-dropdowns';
 import { Event, EventHandler, getValue, Animation } from '@syncfusion/ej2-base';
@@ -216,6 +216,233 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.cloneGrpBtnClick = false;
         _this.isMiddleGroup = false;
         _this.cloneRuleBtnClick = false;
+        _this.dragStopHandler = function (e) {
+            if (_this.isDragEventPrevent) {
+                return;
+            }
+            var targetGroup = closest(e.target, '.e-rule-container');
+            if (isNullOrUndefined(targetGroup) && e.target.parentElement &&
+                e.target.parentElement.classList.contains('e-btn-group') && _this.enableSeparateConnector) {
+                targetGroup = closest(e.target.parentElement.previousElementSibling, '.e-rule-container');
+            }
+            var isPreventelem = closest(e.helper, '.e-notallowedcur');
+            var prevRule;
+            if (!isPreventelem) {
+                var targetGrp = closest(e.target, '.e-group-container');
+                var dropEventArgs = { cancel: false, dropRuleID: targetGroup !== null ? targetGroup.id
+                        : targetGrp !== null ? targetGrp.id : null, dropGroupID: targetGrp !== null ? targetGrp.id : null };
+                _this.trigger('drop', dropEventArgs);
+                if (dropEventArgs.cancel) {
+                    isPreventelem = true;
+                }
+                prevRule = _this.getValidRules();
+            }
+            _this.prvtEvtTgrDaD = true;
+            var tgrt = _this.enableSeparateConnector && e.target.parentElement &&
+                e.target.parentElement.classList.contains('e-btn-group') ? e.target.parentElement.previousElementSibling : e.target;
+            if (targetGroup && !isPreventelem) {
+                var groupId_1 = targetGroup.id.split(_this.element.id + '_')[1].split('_')[0];
+                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-rule-field') ||
+                    _this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                    var rule = void 0;
+                    if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                        rule = _this.getGroup(_this.draggedRule);
+                        _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
+                    }
+                    else {
+                        rule = _this.getRule(_this.draggedRule);
+                        _this.deleteRule(_this.draggedRule);
+                    }
+                    var groupRule = extend([], _this.getGroup(targetGroup), [], true);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (groupRule.properties) {
+                        groupRule = groupRule.properties;
+                    }
+                    var groupElem = closest(targetGroup, '.e-group-container');
+                    var nestGrpElem = groupElem.querySelectorAll('.e-group-container');
+                    nestGrpElem.forEach(function (ele) {
+                        if (_this.element.querySelector('#' + ele.id)) {
+                            _this.deleteGroup(ele);
+                        }
+                    });
+                    var ruleElems = groupElem.querySelectorAll('.e-rule-container');
+                    var ruleIds = [];
+                    var dropInd = void 0;
+                    for (var i = 0; i < ruleElems.length; i++) {
+                        if (ruleElems[i].classList.contains('e-drag-rule-top-line') ||
+                            ruleElems[i].classList.contains('e-drag-rule-bottom-line')) {
+                            dropInd = i;
+                        }
+                        ruleIds.push(ruleElems[i].id.split(_this.element.id + '_')[1]);
+                    }
+                    _this.deleteRules(ruleIds);
+                    if (targetGroup.classList.contains('e-drag-rule-top-line')) {
+                        groupRule.rules.splice(dropInd, 0, rule);
+                    }
+                    else {
+                        groupRule.rules.splice(dropInd + 1, 0, rule);
+                    }
+                    groupRule.rules.forEach(function (rule) {
+                        if (_this.enableSeparateConnector) {
+                            if (!rule.rules) {
+                                _this.addRules([rule], groupId_1);
+                            }
+                            else {
+                                _this.addGroups([rule], groupId_1);
+                            }
+                        }
+                        else {
+                            if (rule.condition) {
+                                _this.addGroups([rule], groupId_1);
+                            }
+                            else {
+                                _this.addRules([rule], groupId_1);
+                            }
+                        }
+                    });
+                }
+            }
+            else if (tgrt.classList.contains('e-rule-list') && tgrt.children.length === 0 && !isPreventelem) {
+                var groupElem = closest(tgrt, '.e-group-container');
+                var groupId = groupElem.id.split(_this.element.id + '_')[1].split('_')[0];
+                var rule = void 0;
+                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                    rule = _this.getGroup(_this.draggedRule);
+                    _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
+                }
+                else {
+                    rule = _this.getRule(_this.draggedRule);
+                    _this.deleteRule(_this.draggedRule);
+                }
+                if (_this.enableSeparateConnector) {
+                    if (!rule.rules) {
+                        _this.addRules([rule], groupId);
+                    }
+                    else {
+                        _this.addGroups([rule], groupId);
+                    }
+                }
+                else {
+                    if (rule.condition) {
+                        _this.addGroups([rule], groupId);
+                    }
+                    else {
+                        _this.addRules([rule], groupId);
+                    }
+                }
+            }
+            else if (tgrt.classList.contains('e-rule-list') && tgrt.children[0].classList.contains('e-group-container') && !isPreventelem) {
+                var groupElem = closest(tgrt, '.e-group-container');
+                var groupId_2 = groupElem.id.split(_this.element.id + '_')[1].split('_')[0];
+                var rule = void 0;
+                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                    rule = _this.getGroup(_this.draggedRule);
+                    _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
+                }
+                else {
+                    rule = _this.getRule(_this.draggedRule);
+                    _this.deleteRule(_this.draggedRule);
+                }
+                var groupRule = extend([], _this.getGroup(tgrt), [], true);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (groupRule.properties) {
+                    groupRule = groupRule.properties;
+                }
+                var groupElems = tgrt.querySelectorAll('.e-group-container');
+                groupElems.forEach(function (ele) {
+                    if (_this.element.querySelector('#' + ele.id)) {
+                        _this.deleteGroup(ele);
+                    }
+                });
+                var ruleElems = groupElem.querySelectorAll('.e-rule-container');
+                ruleElems.forEach(function (ele) {
+                    if (_this.element.querySelector('#' + ele.id)) {
+                        _this.deleteRule(ele);
+                    }
+                });
+                if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                    _this.addGroups([rule], groupId_2);
+                }
+                else {
+                    _this.addRules([rule], groupId_2);
+                }
+                groupRule.rules.forEach(function (rule) {
+                    if (_this.enableSeparateConnector) {
+                        if (!rule.rules) {
+                            _this.addRules([rule], groupId_2);
+                        }
+                        else {
+                            _this.addGroups([rule], groupId_2);
+                        }
+                    }
+                    else {
+                        if (rule.condition) {
+                            _this.addGroups([rule], groupId_2);
+                        }
+                        else {
+                            _this.addRules([rule], groupId_2);
+                        }
+                    }
+                });
+            }
+            else if ((closest(e.target, '.e-group-container') || e.target.classList.contains('e-group-container')) && !isPreventelem) {
+                var rule = void 0;
+                targetGroup = closest(e.target, '.e-group-container');
+                if (!targetGroup && e.target.classList.contains('e-group-container')) {
+                    targetGroup = e.target;
+                }
+                var groupId = targetGroup.id.split(_this.element.id + '_')[1].split('_')[0];
+                if (groupId === 'group0') {
+                    if (_this.draggable.currentStateTarget.parentElement.classList.contains('e-group-header')) {
+                        rule = _this.getGroup(_this.draggedRule);
+                        _this.deleteGroup(closest(_this.draggedRule, '.e-group-container'));
+                    }
+                    else {
+                        rule = _this.getRule(_this.draggedRule);
+                        _this.deleteRule(_this.draggedRule);
+                    }
+                    if (_this.enableSeparateConnector) {
+                        if (!rule.rules) {
+                            _this.addRules([rule], groupId);
+                        }
+                        else {
+                            _this.addGroups([rule], groupId);
+                        }
+                    }
+                    else {
+                        if (rule.condition) {
+                            _this.addGroups([rule], groupId);
+                        }
+                        else {
+                            _this.addRules([rule], groupId);
+                        }
+                    }
+                }
+            }
+            if (!isPreventelem) {
+                _this.trigger('ruleChange', { previousRule: prevRule, rule: _this.getValidRules(), type: 'drag-and-drop' });
+            }
+            _this.prvtEvtTgrDaD = false;
+            document.body.classList.remove('e-prevent-select');
+            var borderLineElem = _this.element.querySelectorAll('.e-drag-rule-bottom-line');
+            borderLineElem.forEach(function (ele) {
+                ele.classList.remove('e-drag-rule-bottom-line');
+            });
+            borderLineElem = _this.element.querySelectorAll('.e-drag-rule-top-line');
+            borderLineElem.forEach(function (ele) {
+                ele.classList.remove('e-drag-rule-top-line');
+            });
+            borderLineElem = _this.element.querySelectorAll('.e-qb-dragging-rule');
+            borderLineElem.forEach(function (ele) {
+                ele.classList.remove('e-qb-dragging-rule');
+            });
+            if (e.helper.classList.contains('e-cloneproperties') && document.querySelector('.' + e.helper.classList[0])) {
+                remove(e.helper);
+            }
+            if (_this.enableSeparateConnector) {
+                _this.refresh();
+            }
+        };
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -354,7 +581,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 this.columns = cols;
             }
         }
-        else if (this.columns.length) {
+        else if (this.columns && this.columns.length) {
             var columns = this.columns;
             for (var i = 0, len = columns.length; i < len; i++) {
                 if (columns[i].category) {
@@ -469,6 +696,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             txtareaElem.style.height = txtareaElem.scrollHeight + 'px';
         }
         if (target.tagName === 'BUTTON' && target.className.indexOf('e-qb-toggle') < 0) {
+            var animation = new Animation({ duration: 1000, delay: 0 });
             switch (true) {
                 case target.className.indexOf('e-removerule') > -1:
                     this.actionButton = target;
@@ -497,7 +725,6 @@ var QueryBuilder = /** @class */ (function (_super) {
                     this.deleteGroup(closest(target, '.e-group-container'));
                     break;
                 case target.className.indexOf('e-edit-rule') > -1:
-                    var 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) {
@@ -525,6 +752,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (forIdValue) {
                     targetValue = document.getElementById(forIdValue).getAttribute('value');
                 }
+                else if (this.enableSeparateConnector) {
+                    targetValue = target.textContent;
+                }
                 groupID = element.id.replace(this.element.id + '_', '');
                 var group = this.getGroup(groupID);
                 var ariaChecked = void 0;
@@ -568,14 +798,55 @@ var QueryBuilder = /** @class */ (function (_super) {
             var groupID = element.id.replace(this.element.id + '_', '');
             var beforeRules = this.getValidRules(this.rule);
             var rule = this.getParentGroup(element);
-            rule.condition = args.value;
-            if (this.enableNotCondition) {
-                rule.not = args.not;
+            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');
+                }
+                var 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) {
+                var andElem = target.parentElement.querySelector('.e-btngroup-and');
+                var 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;
+                    }
+                }
+            }
         }
     };
     QueryBuilder.prototype.selectBtn = function (target, event) {
@@ -618,7 +889,23 @@ var QueryBuilder = /** @class */ (function (_super) {
                     ruleListElem.appendChild(ruleElem);
                 }
                 else {
-                    ruleListElem.insertBefore(ruleElem, ruleListElem.children[this.ruleIndex + 1]); // added clone rule to next position
+                    if (this.enableSeparateConnector) {
+                        var index = -1;
+                        var tempRuleIndex = this.ruleIndex + 1;
+                        for (var 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;
             }
@@ -689,6 +976,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         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();
         }
@@ -700,7 +990,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             return;
         }
         var 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, function (observedChangeArgs) {
                 _this.addRuleSuccessCallBack(observedChangeArgs, target, rule, column, action, parentId, isRuleTemplate);
             });
@@ -755,20 +1045,54 @@ var QueryBuilder = /** @class */ (function (_super) {
             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';
+            var previousRuleElem = ruleElem.previousElementSibling;
+            if (this.enableSeparateConnector) {
+                var prevRule = void 0;
+                var ruleContainer = void 0;
+                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') {
+                    var group = ruleElem.closest('.e-group-container');
+                    if (group && group.previousElementSibling) {
+                        var prevElem = group.previousElementSibling;
+                        var 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')) {
+                            var prevRule_1 = this.getRule(prevElem);
+                            this.headerTemplateFn(prevElem, false, prevRule_1.condition, prevRule_1, 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') {
@@ -799,7 +1123,8 @@ var QueryBuilder = /** @class */ (function (_super) {
                         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) {
@@ -843,20 +1168,68 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             ruleID = ruleElem.id.replace(this.element.id + '_', '');
-            if (!this.isImportRules) {
+            if (rule && rule.isLocked) {
+                var 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) {
+            var prevElem = ruleElem.previousElementSibling;
+            var ruleContainer = void 0;
+            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) {
+                var prevRule = this.getRule(prevElem);
+                var args_2 = { requestType: 'rule-template-create', ruleID: prevElem.id, condition: prevRule.condition,
+                    notCondition: this.enableNotCondition ? true : undefined };
+                this.trigger('actionBegin', args_2);
+            }
+            else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+                var group = ruleElem.closest('.e-group-container');
+                if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
+                    var prevElem_1 = group.previousElementSibling.previousElementSibling;
+                    if (prevElem_1.classList.contains('e-group-container')) {
+                        var ruleContainer_1 = prevElem_1.querySelectorAll('.e-rule-container');
+                        prevElem_1 = ruleContainer_1[ruleContainer_1.length - 1];
+                    }
+                    if (prevElem_1.classList.contains('e-rule-container')) {
+                        var prevRule = this.getRule(prevElem_1);
+                        var args_3 = { requestType: 'rule-template-create', ruleID: prevElem_1.id,
+                            condition: prevRule.condition, notCondition: this.enableNotCondition ? true : undefined };
+                        this.trigger('actionBegin', args_3);
+                    }
+                }
+            }
+            this.setMultiConnector(ruleElem);
+        }
     };
     QueryBuilder.prototype.updateDropdowntreeDS = function (columns) {
         for (var 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;
+            }
         }
     };
-    QueryBuilder.prototype.updateAddedRule = function (target, rule, newRule, isRuleTemplate, pId) {
+    QueryBuilder.prototype.updateAddedRule = function (target, rule, newRule, isRuleTemplate, pId, isNewRuleAdded) {
         var ruleElem;
         var index = 0;
         var groupElem;
@@ -867,7 +1240,12 @@ var QueryBuilder = /** @class */ (function (_super) {
             rules = this.getParentGroup(groupElem);
             while (ruleElem && ruleElem.previousElementSibling !== null) {
                 ruleElem = ruleElem.previousElementSibling;
-                index++;
+                var 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;
         }
@@ -885,6 +1263,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                         // 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, {
@@ -894,6 +1275,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                         // 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 {
@@ -907,7 +1291,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 rules.rules.push(newRule);
             }
         }
-        this.disableRuleCondition(target, rules);
+        this.disableRuleCondition(target, rules, isNewRuleAdded);
     };
     QueryBuilder.prototype.changeRuleTemplate = function (column, element) {
         var operVal = this.selectedColumn.operators;
@@ -985,7 +1369,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (validateRule && validateRule.isRequired) {
                     while (indexElem && indexElem.previousElementSibling !== null) {
                         indexElem = indexElem.previousElementSibling;
-                        index++;
+                        var 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) {
@@ -1062,9 +1450,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         obj.level = this.levelColl[obj.groupElement.id].slice();
         return obj;
     };
-    QueryBuilder.prototype.groupTemplate = function () {
+    QueryBuilder.prototype.groupTemplate = function (isConnector) {
         var glueElem;
         var inputElem;
+        var dragClsName;
         var labelElem;
         var grpActElem;
         var groupBtn;
@@ -1077,9 +1466,27 @@ var QueryBuilder = /** @class */ (function (_super) {
         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';
+            }
+            var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+                    title: 'drag handle' } });
+            groupHdrElem.appendChild(spanDragElement);
+            var className = this.enableSeparateConnector && !isConnector ? 'e-lib e-btn-group e-qb-toggle-btn' : 'e-lib e-btn-group';
+            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' } });
@@ -1094,8 +1501,16 @@ var QueryBuilder = /** @class */ (function (_super) {
             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;
@@ -1105,9 +1520,19 @@ var QueryBuilder = /** @class */ (function (_super) {
         var clsName;
         var cloneClsName;
         var lockClsName;
+        var dragClsName;
         var ruleElem = this.createElement('div');
         var 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';
+        }
+        var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+                title: 'drag handle' } });
+        fieldElem.appendChild(spanDragElement);
         var filterElem = this.createElement('input', { attrs: { type: 'text', class: 'e-filter-input' } });
         tempElem.appendChild(filterElem);
         fieldElem.appendChild(tempElem);
@@ -1151,7 +1576,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.addGroupElement = function (isGroup, target, condition, isBtnClick, not, isRoot, rule) {
         var _this = this;
         var 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, function (observedChangeArgs) {
                 _this.addGroupSuccess(observedChangeArgs, isGroup, target, condition, isBtnClick, not, isRoot, rule);
             });
@@ -1162,6 +1587,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.addGroupSuccess = function (args, isGroup, eventTarget, condition, isBtnClick, not, isRoot, rule) {
+        var _this = this;
         if (!args.cancel && (this.element.querySelectorAll('.e-group-container').length <= this.maxGroupCount)) {
             var target = eventTarget;
             var dltGroupBtn = void 0;
@@ -1172,8 +1598,17 @@ var QueryBuilder = /** @class */ (function (_super) {
             else {
                 groupID = target.id;
             }
+            if (this.enableSeparateConnector) {
+                this.groupElem = this.groupTemplate();
+            }
             var 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;
@@ -1226,7 +1661,25 @@ var QueryBuilder = /** @class */ (function (_super) {
                         this.isLastGroup = true;
                     }
                     else {
-                        childElems[this.groupIndex + 1].parentNode.insertBefore(groupElem, childElems[this.groupIndex + 1]); // clone the element to nxt element
+                        if (this.enableSeparateConnector) {
+                            var index = 0;
+                            var tempGroupIndex = this.groupIndex + 1;
+                            for (var i = 0; i < tempGroupIndex; i++) {
+                                if (childElems[i].classList.contains('e-rule-container')) {
+                                    tempGroupIndex++;
+                                    index++;
+                                }
+                            }
+                            if (index > 0) {
+                                index--;
+                            }
+                            var idx = this.groupIndex + index + 1;
+                            childElems[idx].parentNode.insertBefore(groupElem, childElems[idx]);
+                        }
+                        else {
+                            var idx = this.groupIndex + 1;
+                            childElems[idx].parentNode.insertBefore(groupElem, childElems[idx]);
+                        }
                         this.isMiddleGroup = true;
                     }
                 }
@@ -1292,7 +1745,14 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (this.enableNotCondition) {
                 if (!this.headerTemplate) {
                     var notElem = groupElem.querySelector('.e-qb-toggle');
-                    var tglBtn = new Button({ content: this.l10n.getConstant('NOT'), cssClass: 'e-btn e-small' });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var tglBtn = void 0;
+                    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) {
@@ -1300,67 +1760,218 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
             }
+            if (this.enableSeparateConnector && !this.headerTemplate) {
+                var andElem = groupElem.querySelector('.e-btngroup-and');
+                var orElem = groupElem.querySelector('.e-btngroup-or');
+                var btnGroup = groupElem.querySelector('.e-btn-group');
+                for (var 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';
+                    }
+                }
+                var prevSibling = groupElem.previousElementSibling;
+                if (prevSibling) {
+                    if (isNullOrUndefined(this.headerTemplate)) {
+                        groupElem.parentElement.insertBefore(this.groupTemplate(true).querySelector('.e-btn-group'), groupElem);
+                        var notElem = groupElem.previousElementSibling.childNodes[0];
+                        if (notElem.classList.contains('e-qb-toggle')) {
+                            notElem.style.display = 'none';
+                        }
+                    }
+                    if (!this.isImportRules) {
+                        var groupElement = groupElem.previousElementSibling;
+                        var newAndElem = groupElement.querySelector('.e-btngroup-and');
+                        var newOrElem = groupElement.querySelector('.e-btngroup-or');
+                        if (!andElem.checked && !orElem.checked) {
+                            var 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) {
-                var args_2 = { requestType: 'header-template-create', ruleID: groupElem.id, condition: condition,
+                var args_4 = { requestType: 'header-template-create', ruleID: groupElem.id, condition: condition,
                     notCondition: this.enableNotCondition ? not : undefined };
-                this.trigger('actionBegin', args_2);
+                this.trigger('actionBegin', args_4);
             }
             else {
-                var groupBtn = groupElem.querySelector('.e-add-btn');
-                var 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) {
+                    var conditionBtn_1 = groupElem.querySelector('.e-add-condition-btn');
+                    var btnObj = new Button({ cssClass: this.element.id + '_addConditionbtn', content: this.l10n.getConstant('AddCondition') });
+                    btnObj.appendTo(conditionBtn_1);
+                    btnObj.element.onclick = function () {
+                        _this.addRuleElement(closest(conditionBtn_1, '.e-group-container'), {});
+                    };
+                    var groupBtn_1 = groupElem.querySelector('.e-add-group-btn');
+                    btnObj = new Button({ cssClass: this.element.id + '_addGroupbtn', content: this.l10n.getConstant('AddGroup') });
+                    btnObj.appendTo(groupBtn_1);
+                    btnObj.element.onclick = function () {
+                        _this.addGroupElement(true, closest(groupBtn_1, '.e-group-container'), '', true);
+                    };
+                }
+                else {
+                    var groupBtn = groupElem.querySelector('.e-add-btn');
+                    var 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) {
                 var grpId = target.id.replace(this.element.id + '_', '');
                 var chgrpId = groupElem.id.replace(this.element.id + '_', '');
                 this.trigger('change', { groupID: grpId, type: 'insertGroup', childGroupID: chgrpId });
             }
         }
     };
-    QueryBuilder.prototype.headerTemplateFn = function (groupElem, not, condition, rule, groupID) {
+    QueryBuilder.prototype.setMultiConnector = function (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);
+                var notElem = trgt.previousElementSibling.childNodes[0];
+                if (notElem.classList.contains('e-qb-toggle')) {
+                    notElem.style.display = 'none';
+                }
+                this.addHeaderDiv(trgt);
+            }
+        }
+    };
+    QueryBuilder.prototype.addHeaderDiv = function (elem) {
+        var prevRule;
+        var 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';
+            }
+            var orElem = elem.previousElementSibling.querySelector('.e-btngroup-or');
+            var andElem = elem.previousElementSibling.querySelector('.e-btngroup-and');
+            orElem.disabled = false;
+            andElem.disabled = false;
+            if (prevRule.condition === 'or') {
+                orElem.checked = true;
+            }
+            else {
+                andElem.checked = true;
+            }
+        }
+    };
+    QueryBuilder.prototype.headerTemplateFn = function (groupElem, not, condition, rule, groupID, isInitialRule) {
         var template;
         var templateID = this.element.id + '_header';
         var args;
         var 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) {
                 var 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;
     };
+    QueryBuilder.prototype.enableSeparateConnectorInitialRule = function (groupElem, template) {
+        var elem = groupElem.nextElementSibling ? groupElem.nextElementSibling : groupElem;
+        var 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.
      *
@@ -1379,12 +1990,29 @@ var QueryBuilder = /** @class */ (function (_super) {
             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++;
+            }
         }
         var rule = rules.rules[index];
         var column = this.getColumn(rule.field);
@@ -1421,7 +2049,12 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         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++;
+            }
         }
         var rule = rules.rules[index];
         if (type === 'field') {
@@ -1478,12 +2111,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                 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 &&
@@ -1548,8 +2183,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var value;
         var 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);
@@ -1579,7 +2213,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (args.type === 'input' && args.currentTarget) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 value = Number(args.currentTarget.value);
-                var numericTextBoxObj = getInstance(args.currentTarget, NumericTextBox);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var elem = args.currentTarget;
+                var numericTextBoxObj = getInstance(elem, NumericTextBox);
                 numericTextBoxObj.value = value;
                 this.isNumInput = true;
             }
@@ -1688,7 +2324,12 @@ var QueryBuilder = /** @class */ (function (_super) {
                 var 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);
@@ -1734,7 +2375,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             var ruleID = ruleElem.id.replace(this.element.id + '_', '');
             var 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, function (observedChangeArgs) {
                     _this.fieldChangeSuccess(observedChangeArgs, tmpRl, flt, rl, dArg);
                 });
@@ -1905,7 +2546,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             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);
@@ -1959,7 +2600,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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;
                 }
                 var ddlOperator = void 0;
@@ -2344,14 +2985,15 @@ var QueryBuilder = /** @class */ (function (_super) {
         var columnData = this.getItemData(parentId);
         var selectedValue;
         var 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%';
@@ -2363,7 +3005,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         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(',');
             }
             var txtBox = void 0;
@@ -2383,9 +3026,11 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.renderNumberValue = function (parentId, rule, operator, idx, ruleValElem, itemData, length) {
         var columnData = this.getItemData(parentId);
         var isTemplate = (typeof columnData.template === 'string');
-        var selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate || typeof rule.value === 'number') ? rule.value : this.setDefaultValue(parentId, false, true);
+        var 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%';
@@ -2396,7 +3041,8 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
         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);
             var selVal = selectedVal.join(',');
             var txtInp = void 0;
             txtInp = {
@@ -2858,10 +3504,14 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         var controlName = element.className.split(' e-')[idx];
         var i = parseInt(element.id.slice(-1), 2);
+        var column;
+        var format;
+        var selectedDate;
+        var value;
+        var radioBtnObj;
         switch (controlName) {
             case 'checkbox':
-                // eslint-disable-next-line
-                var value = getComponent(element, controlName).value;
+                value = getComponent(element, controlName).value;
                 rule.value = (value !== '') ? value : undefined;
                 break;
             case 'textbox':
@@ -2871,8 +3521,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 rule.value = getComponent(element, controlName).value;
                 break;
             case 'radio':
-                // eslint-disable-next-line
-                var radioBtnObj = getComponent(element, controlName);
+                radioBtnObj = getComponent(element, controlName);
                 if (radioBtnObj.checked) {
                     if (typeof rule.value === 'boolean') {
                         rule.value = radioBtnObj.value === 'true';
@@ -2900,12 +3549,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 break;
             case 'datepicker':
-                // eslint-disable-next-line
-                var column = this.getColumn(rule.field);
-                // eslint-disable-next-line
-                var format = this.getFormat(column.format);
-                // eslint-disable-next-line
-                var 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 = [];
@@ -2938,7 +3584,12 @@ var QueryBuilder = /** @class */ (function (_super) {
         var 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++;
+            }
         }
         var operator = rule.rules[index].operator ? rule.rules[index].operator.toString() : '';
         ruleElem = closest(target, '.e-rule-container');
@@ -2987,7 +3638,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 this.updateValues(elementCln[i_1], 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) {
@@ -3032,7 +3683,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var beforeRuleStr = JSON.stringify({ condition: beforeRule.condition, not: beforeRule.not, rule: beforeRule.rules });
         var 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 });
             }
         }
@@ -3199,7 +3850,6 @@ var QueryBuilder = /** @class */ (function (_super) {
         var len;
         var tooltip;
         _super.prototype.destroy.call(this);
-        var popupElement;
         element = this.element.querySelectorAll('.e-addrulegroup');
         len = element.length;
         for (i = 0; i < len; i++) {
@@ -3245,7 +3895,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (this.portals && this.portals.length) {
             this.clearQBTemplate();
         }
-        popupElement = document.querySelectorAll('.qb-dropdownlist.e-popup');
+        var popupElement = document.querySelectorAll('.qb-dropdownlist.e-popup');
         if (popupElement) {
             for (i = 0; i < popupElement.length; i++) {
                 popupElement[i].remove();
@@ -3318,7 +3968,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             if (!this.headerTemplate) {
-                this.disableRuleCondition(groupElem, rule);
+                this.disableRuleCondition(groupElem, rule, null, this.enableSeparateConnector ? true : null);
             }
         }
     };
@@ -3327,6 +3977,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         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');
         }
@@ -3363,14 +4016,14 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
         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);
                 var 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();
@@ -3424,8 +4077,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.groupIdCounter = 0;
         if (!this.headerTemplate) {
             if (this.enableNotCondition) {
-                if (this.enableNotCondition) {
-                    var inputElem = this.createElement('button', { attrs: { type: 'button', class: 'e-qb-toggle' } });
+                var 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'));
                 }
             }
@@ -3466,14 +4119,12 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.onPropertyChanged = function (newProp, oldProp) {
         var properties = Object.keys(newProp);
+        var groupElem = this.element.querySelector('.e-group-container');
+        var summaryElem = this.element.querySelector('.e-summary-content');
         for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
             var prop = properties_1[_i];
             switch (prop) {
                 case 'summaryView':
-                    // eslint-disable-next-line
-                    var groupElem = this.element.querySelector('.e-group-container');
-                    // eslint-disable-next-line
-                    var summaryElem = this.element.querySelector('.e-summary-content');
                     if (newProp.summaryView) {
                         groupElem.style.display = 'none';
                         if (this.element.querySelectorAll('.e-summary-content').length < 1) {
@@ -3613,6 +4264,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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;
             }
         }
     };
@@ -3770,6 +4429,134 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.initControl();
         }
         this.renderComplete();
+        if (this.allowDragAndDrop) {
+            this.initializeDrag();
+        }
+    };
+    QueryBuilder.prototype.initializeDrag = function () {
+        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
+    QueryBuilder.prototype.helper = function (e) {
+        var 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;
+        }
+        var visualElement = this.createElement('div', {
+            className: 'e-cloneproperties e-draganddrop e-dragclone',
+            styles: 'height:"auto", z-index:2, width:' + this.element.offsetWidth
+        });
+        var 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' });
+            var 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);
+        var childElements = visualElement.querySelectorAll('*');
+        childElements.forEach(function (child) {
+            child.removeAttribute('id');
+        });
+        this.element.appendChild(visualElement);
+        return visualElement;
+    };
+    QueryBuilder.prototype.dragStartHandler = function (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;
+        var rule = closest(e.target, '.e-rule-container');
+        var group = closest(e.target, '.e-group-container');
+        var dragEventArgs = { dragRuleID: rule !== null ? rule.id : group.id, dragGroupID: group.id, cancel: false };
+        this.trigger('dragStart', dragEventArgs);
+        this.isDragEventPrevent = dragEventArgs.cancel;
+    };
+    QueryBuilder.prototype.dragHandler = function (e) {
+        if (this.isDragEventPrevent) {
+            return;
+        }
+        var borderLineElem = this.element.querySelectorAll('.e-drag-rule-bottom-line');
+        borderLineElem.forEach(function (ele) {
+            ele.classList.remove('e-drag-rule-bottom-line');
+        });
+        borderLineElem = this.element.querySelectorAll('.e-drag-rule-top-line');
+        borderLineElem.forEach(function (ele) {
+            ele.classList.remove('e-drag-rule-top-line');
+        });
+        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');
+        }
+        var targetElem = closest(e.target, '.e-rule-container');
+        var grpElem = closest(e.target, '.e-group-container');
+        if (targetElem) {
+            var rect = targetElem.getBoundingClientRect();
+            var mouseY = e.event.clientY || e.event.changedTouches[0].clientY;
+            var distanceToTop = mouseY - rect.top;
+            var distanceToBottom = rect.bottom - mouseY;
+            var 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')) {
+            var rect = e.target.children[0].getBoundingClientRect();
+            var mouseY = e.event.clientY || e.event.changedTouches[0].clientY;
+            var distanceToTop = mouseY - rect.top;
+            var 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) {
+                var rect = e.target.getBoundingClientRect();
+                var mouseY = e.event.clientY || e.event.changedTouches[0].clientY;
+                var distanceToBottom = rect.bottom - mouseY;
+                var threshold = 20; // Adjust as needed
+                if (distanceToBottom < threshold) {
+                    e.target.classList.add('e-drag-rule-bottom-line');
+                }
+            }
+        }
+        var 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;
     };
     QueryBuilder.prototype.templateParser = function (template) {
         if (template) {
@@ -3814,6 +4601,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         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);
     };
     QueryBuilder.prototype.unWireEvents = function () {
         var wrapper = this.getWrapper();
@@ -3821,6 +4609,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         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);
     };
     QueryBuilder.prototype.getParentGroup = function (target, isParent) {
         var groupLevel = (target instanceof Element) ? this.levelColl[target.id] : this.levelColl["" + target];
@@ -3849,7 +4638,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             groupId = groupElem.id.replace(this.element.id + '_', '');
         }
         var args = { groupID: groupId, cancel: false, type: 'deleteGroup' };
-        if (!this.isImportRules) {
+        if (!this.isImportRules && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, function (observedChangeArgs) {
                 _this.deleteGroupSuccessCallBack(observedChangeArgs, target);
             });
@@ -3879,13 +4668,20 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             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');
+                    }
                 }
             }
             var elem = groupElem.parentElement.parentElement.parentElement;
@@ -3917,7 +4713,11 @@ var QueryBuilder = /** @class */ (function (_super) {
             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');
@@ -3934,7 +4734,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var groupID = groupElem.id.replace(this.element.id + '_', '');
         var ruleID = closest(target, '.e-rule-container').id.replace(this.element.id + '_', '');
         var args = { groupID: groupID, ruleID: ruleID, cancel: false, type: 'deleteRule' };
-        if (!this.isImportRules) {
+        if (!this.isImportRules && !this.prvtEvtTgrDaD) {
             this.trigger('beforeChange', args, function (observedChangeArgs) {
                 _this.deleteRuleSuccessCallBack(observedChangeArgs, target);
             });
@@ -3949,10 +4749,10 @@ var QueryBuilder = /** @class */ (function (_super) {
             var rule = this.getParentGroup(groupElem);
             var ruleElem = closest(target, '.e-rule-container');
             var beforeRules = this.getValidRules(this.rule);
-            var clnruleElem = ruleElem;
-            var nextElem = ruleElem.nextElementSibling;
             var prevElem = ruleElem.previousElementSibling;
             var index = 0;
+            var clnruleElem = ruleElem;
+            var nextElem = ruleElem.nextElementSibling;
             var valElem = ruleElem.querySelectorAll('.e-tooltip');
             var i = void 0;
             var len = valElem.length;
@@ -3961,7 +4761,12 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             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++;
+                }
             }
             var column = this.getColumn(rule.rules[index].field);
             if (column && column.template && clnruleElem.querySelector('.e-template')) {
@@ -3980,17 +4785,27 @@ var QueryBuilder = /** @class */ (function (_super) {
             var isTemplateRendered = clnruleElem.querySelector('.e-template-value');
             // eslint-disable
             try {
+                if (this.enableSeparateConnector && (clnruleElem.previousElementSibling || clnruleElem.nextElementSibling)) {
+                    var previousElem = clnruleElem.previousElementSibling;
+                    var nextElem_1 = clnruleElem.nextElementSibling;
+                    if (isNullOrUndefined(nextElem_1) && ((!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')) {
+                            var rule_1 = this.getRule(previousElem.previousElementSibling);
+                            rule_1.condition = null;
+                        }
+                        detach(previousElem);
+                    }
+                    else if ((!this.headerTemplate && nextElem_1.classList.contains('e-btn-group'))
+                        || (this.headerTemplate && nextElem_1.classList.contains('e-custom-group-btn'))) {
+                        detach(nextElem_1);
+                    }
+                }
                 detach(clnruleElem);
             }
             catch (err) {
-                // eslint-disable-next-line no-ex-assign
-                err = [];
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var error = 'error';
-                // eslint-disable-next-line
-                err[error] = error;
+                return;
             }
-            // eslint-enable
             if (column && column.ruleTemplate) {
                 this.clearQBTemplate([clnruleElem.id]);
             }
@@ -3999,13 +4814,13 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             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);
             }
             var tooltipElem = this.element.querySelectorAll('.e-tooltip');
             for (var i_3 = 0; i_3 < tooltipElem.length; i_3++) {
                 getComponent(tooltipElem[i_3], 'tooltip').refresh(tooltipElem[i_3]);
             }
-            if (!this.isImportRules) {
+            if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('change', args);
             }
             this.filterRules(beforeRules, this.getValidRules(this.rule), 'deleteRule');
@@ -4029,9 +4844,32 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.isImportRules = false;
     };
     QueryBuilder.prototype.keyBoardHandler = function (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');
+            var borderLineElem = this.element.querySelectorAll('.e-drag-rule-bottom-line');
+            borderLineElem.forEach(function (ele) {
+                ele.classList.remove('e-drag-rule-bottom-line');
+            });
+            borderLineElem = this.element.querySelectorAll('.e-drag-rule-top-line');
+            borderLineElem.forEach(function (ele) {
+                ele.classList.remove('e-drag-rule-top-line');
+            });
+            borderLineElem = this.element.querySelectorAll('.e-qb-dragging-rule');
+            borderLineElem.forEach(function (ele) {
+                ele.classList.remove('e-qb-dragging-rule');
+            });
+            var dragElemnet = this.element.querySelector('.e-cloneproperties');
+            if (dragElemnet) {
+                remove(dragElemnet);
+            }
+            if (this.enableSeparateConnector) {
+                this.refresh();
+            }
+        }
     };
     QueryBuilder.prototype.clearQBTemplate = function (ruleElemColl) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4039,7 +4877,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.clearTemplate(ruleElemColl);
         }
     };
-    QueryBuilder.prototype.disableRuleCondition = function (groupElem, rules) {
+    QueryBuilder.prototype.disableRuleCondition = function (groupElem, rules, isNewRuleAdded, isNewGroup) {
         if (!this.headerTemplate) {
             if (this.readonly) {
                 return;
@@ -4055,21 +4893,124 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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) {
+                    var index = 0;
+                    var element = void 0;
+                    // eslint-disable-next-line no-constant-condition
+                    while (true) {
+                        var andGroup = groupElem.parentElement.querySelectorAll('.e-btngroup-and');
+                        var 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;
+                        }
+                    }
+                    var 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;
+                        var prevRule = this.getGroup(elem);
+                        if (prevRule.condition === 'or') {
+                            orElem.checked = true;
+                        }
+                        else {
+                            andElem.checked = true;
+                        }
+                    }
+                    else if (elem && elem.classList.contains('e-rule-container')) {
+                        var ruleID = elem.id.replace(this.element.id + '_', '');
+                        var 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) {
+                    var index = 0;
+                    var element = void 0;
+                    // eslint-disable-next-line no-constant-condition
+                    while (true) {
+                        var andGroup = groupElem.parentElement.querySelectorAll('.e-btngroup-and');
+                        var 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;
+                        }
+                    }
+                    var elem = void 0;
+                    var 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;
+                        var prevRule = this.getGroup(elem);
+                        if (prevRule.condition === 'or') {
+                            orElem.checked = true;
+                        }
+                        else {
+                            andElem.checked = true;
+                        }
+                    }
+                    else if (elem) {
+                        var ruleID = elem.id.replace(this.element.id + '_', '');
+                        var 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');
+                    }
                 }
             }
         }
@@ -4173,7 +5114,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     // 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 = {};
                 }
             }
@@ -4242,7 +5183,12 @@ var QueryBuilder = /** @class */ (function (_super) {
         var 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];
     };
@@ -4652,13 +5598,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         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;
@@ -4674,17 +5617,43 @@ var QueryBuilder = /** @class */ (function (_super) {
             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
                 var orElem = parentElem.querySelector('.e-btngroup-or');
                 var 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) {
+                    var 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')) {
+                        var ruleID = elem.id.replace(this.element.id + '_', '');
+                        var 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 {
@@ -4704,7 +5673,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
         }
-        if (rule.rules.length === 0 && this.headerTemplate) {
+        if (rule.rules && rule.rules.length === 0 && this.headerTemplate) {
             rule.rules[0] = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
         }
         var ruleColl = rule.rules;
@@ -4725,10 +5694,6 @@ var QueryBuilder = /** @class */ (function (_super) {
                     var lockGrpTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-grp-btn');
                     this.groupLock(lockGrpTarget);
                 }
-                if (isNullOrUndefined(ruleColl[i].rules) && ruleColl[i].isLocked) {
-                    var lockRuleTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-rule-btn');
-                    this.ruleLock(lockRuleTarget);
-                }
             }
         }
         if (parentElem) {
@@ -4746,7 +5711,17 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isMiddleGroup) {
             this.isMiddleGroup = false;
             this.cloneGrpBtnClick = false;
-            return cloneElem[this.groupIndex + 1]; // group added in the middle
+            var index = 0;
+            var tempGroupIndex = this.groupIndex + 1;
+            if (this.enableSeparateConnector) {
+                for (var 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;
@@ -4915,6 +5890,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             for (var 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 {
                     var rule = rules.rules[j];
@@ -5006,8 +5984,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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 + ' ';
+                    }
                 }
             }
         }
@@ -5073,12 +6053,19 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {ParameterizedSql} – Parameterized SQL query from rules.
      */
     QueryBuilder.prototype.getParameterizedSql = function (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();
+            }
+            var obj = { sql: null };
+            this.notify('query-library', { prop: 'getParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+            return obj['sql'];
         }
-        var 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.');
+        }
+        return null;
     };
     /**
      * Sets the rules from the parameter sql query.
@@ -5087,13 +6074,19 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {void}
      */
     QueryBuilder.prototype.setParameterizedSql = function (sqlQuery) {
-        var obj = { sql: null };
-        this.notify('query-library', { prop: 'convertParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
-        var sql = obj['sql'];
-        if (sql) {
-            sql = sql.replace(/`/g, '');
-            var 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) {
+            var obj = { sql: null };
+            this.notify('query-library', { prop: 'convertParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+            var sql = obj['sql'];
+            if (sql) {
+                sql = sql.replace(/`/g, '');
+                var 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.');
         }
     };
     /**
@@ -5103,12 +6096,19 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {ParameterizedNamedSql} – Parameterized Named SQL query from rules.
      */
     QueryBuilder.prototype.getParameterizedNamedSql = function (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();
+            }
+            var obj = { sql: null };
+            this.notify('query-library', { prop: 'getNamedParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+            return obj['sql'];
         }
-        var 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.');
+        }
+        return null;
     };
     /**
      * Sets the rules from the named parameter SQL query.
@@ -5117,13 +6117,19 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {void}
      */
     QueryBuilder.prototype.setParameterizedNamedSql = function (sqlQuery) {
-        var obj = { sql: null };
-        this.notify('query-library', { prop: 'convertNamedParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
-        var sql = obj['sql'];
-        if (sql) {
-            sql = sql.replace(/`/g, '');
-            var 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) {
+            var obj = { sql: null };
+            this.notify('query-library', { prop: 'convertNamedParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+            var sql = obj['sql'];
+            if (sql) {
+                sql = sql.replace(/`/g, '');
+                var 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.');
         }
     };
     /**
@@ -5134,8 +6140,14 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {void}
      */
     QueryBuilder.prototype.setMongoQuery = function (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.
@@ -5144,12 +6156,19 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {object} - Sql query from rules.
      */
     QueryBuilder.prototype.getMongoQuery = function (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();
+            }
+            var 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.');
         }
-        var 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.
@@ -5168,7 +6187,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         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;
@@ -5257,8 +6276,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         var matchValue;
         for (var 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
+            var regExp = RegExp;
+            regex = new regExp('^(' + operators[i] + ')' + regexStr, 'ig');
             if (regex.exec(sqlString)) {
                 this.parser.push(['Operators', operators[i].toLowerCase()]);
                 return operators[i].length;
@@ -5268,8 +6288,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!lastPasrser || (lastPasrser && lastPasrser[0] !== 'Literal')) {
             for (var 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
+                var regExp = RegExp;
+                regex = new regExp('^(' + conditions[i] + ')' + regexStr, 'ig');
                 if (regex.exec(sqlString)) {
                     this.parser.push(['Conditions', conditions[i].toLowerCase()]);
                     return conditions[i].length;
@@ -5278,8 +6299,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         for (var 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
+            var regExp = RegExp;
+            regex = new regExp('^(' + subOp[i] + ')' + regexStr, 'ig');
             if (regex.exec(sqlString)) {
                 this.parser.push(['SubOperators', subOp[i].toLowerCase()]);
                 return subOp[i].length;
@@ -5307,31 +6329,25 @@ var QueryBuilder = /** @class */ (function (_super) {
             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];
+        var singleString = this.getSingleQuoteString(sqlString);
+        if (singleString !== '') {
+            matchValue = singleString;
             if (matchValue[matchValue.length - 2] === '(') {
                 var isClosed = false;
                 for (var j = matchValue.length; j < sqlString.length; j++) {
@@ -5346,38 +6362,43 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             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];
+        var 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;
     };
+    QueryBuilder.prototype.getDoubleQuoteString = function (sqlString) {
+        var start = sqlString.indexOf('"');
+        if (start === 0) {
+            var end = sqlString.indexOf('"', start + 1);
+            if (end !== -1) {
+                return sqlString.substring(start, end + 1);
+            }
+        }
+        return '';
+    };
     QueryBuilder.prototype.checkCondition = function (sqlString, matchValue) {
         if (sqlString.slice(matchValue.length + 1, matchValue.length + 4) === 'AND' ||
             sqlString.slice(matchValue.length + 1, matchValue.length + 3) === 'OR') {
@@ -5385,16 +6406,26 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         return false;
     };
-    QueryBuilder.prototype.getSingleQuoteString = function (sqlString, matchValue) {
+    QueryBuilder.prototype.getSingleQuoteString = function (sqlString, isBetween) {
+        var start = sqlString.indexOf('\'');
+        if ((start !== -1 && isBetween) || (start === 0 && !isBetween)) {
+            var end = sqlString.indexOf('\'', start + 1);
+            if (end !== -1) {
+                return sqlString.substring(start, end + 1);
+            }
+        }
+        return '';
+    };
+    QueryBuilder.prototype.combineSingleQuoteString = function (sqlString, matchValue) {
         if (sqlString[matchValue.length] && (sqlString[matchValue.length] !== ')') &&
             !this.checkCondition(sqlString, matchValue) && sqlString[matchValue.length] !== ',') {
-            var tempStr = sqlString.replace(matchValue, '');
-            // eslint-disable-next-line
-            if (isNullOrUndefined(/^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(tempStr))) {
-                // eslint-disable-next-line
-                var parsedValue = /^((?:[^\\']+?|\\.|'')*)'(?!')/.exec(tempStr)[0];
+            var tempMatchValue = matchValue.substring(0, matchValue.length - 1);
+            var tempStr = sqlString.replace(tempMatchValue, '');
+            var singleString = this.getSingleQuoteString(tempStr, true);
+            if (singleString !== '') {
+                var parsedValue = singleString.substring(1, singleString.length);
                 matchValue += parsedValue;
-                matchValue = this.getSingleQuoteString(sqlString, matchValue);
+                matchValue = this.combineSingleQuoteString(sqlString, matchValue);
             }
         }
         return matchValue;
@@ -5423,8 +6454,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             return true;
         }
         else {
-            // eslint-disable-next-line
-            if (/^[0-9]+(\.[0-9]+)?/.exec(sqlString)) {
+            if (/^[0-9]+(?:\.[0-9]+)$/.exec(sqlString)) {
                 var secParser = this.parser[this.parser.length - 2];
                 var betweenParser = this.parser[this.parser.length - 3];
                 if (lastParser[0] === 'Left' && (secParser && secParser[0] === 'Conditions')) {
@@ -5637,17 +6667,17 @@ var QueryBuilder = /** @class */ (function (_super) {
                         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);
-                    var isEmptyOper = false;
-                    if (rule.operator == "equal" && parser[i + 2][0] === "String" && parser[i + 2][1] === "''") {
-                        rule.operator = "isempty";
-                        isEmptyOper = true;
+                    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";
-                        isEmptyOper = true;
+                    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';
@@ -5661,6 +6691,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                         }
                         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);
@@ -5688,7 +6721,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 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;
                 }
@@ -5709,27 +6742,6 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         return rules;
     };
-    QueryBuilder.prototype.getValueFromParser = function (parser, idx) {
-        var value = '';
-        var 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
      *
@@ -5764,8 +6776,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                 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;
     };
     QueryBuilder.prototype.ruleLock = function (target) {
@@ -5866,6 +6884,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         var lockElem = groupElem.querySelectorAll('.e-lock-grp-btn');
         var cloneElem = groupElem.querySelectorAll('.e-clone-grp-btn');
         var groupContElem = groupElem.querySelectorAll('.e-group-container');
+        var addCondition = groupElem.querySelectorAll('.e-add-condition-btn');
+        var addGroup = groupElem.querySelectorAll('.e-add-group-btn');
         for (var i = 0; i < andElem.length; i++) {
             if (isDisabled) {
                 if (groupContElem[i] && groupContElem[i].classList.contains('e-disable')) {
@@ -5873,7 +6893,15 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 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;
                 }
@@ -5884,7 +6912,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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');
@@ -5896,8 +6924,18 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 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;
                 }
@@ -5908,8 +6946,12 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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);
@@ -6043,6 +7085,15 @@ var QueryBuilder = /** @class */ (function (_super) {
     __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);
@@ -6118,9 +7169,15 @@ var QueryBuilder = /** @class */ (function (_super) {
     __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);