@syncfusion/ej2-querybuilder 24.2.8 → 25.1.35

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

@@ -89,6 +89,9 @@ __decorate([
 __decorate([
     Property(false)
 ], Rule.prototype, "not", void 0);
+__decorate([
+    Property(false)
+], Rule.prototype, "isLocked", void 0);
 /**
  * Defines the property for value.
  */
@@ -114,6 +117,18 @@ __decorate([
  */
 class ShowButtons extends ChildProperty {
 }
+__decorate([
+    Property(false)
+], ShowButtons.prototype, "cloneRule", void 0);
+__decorate([
+    Property(false)
+], ShowButtons.prototype, "cloneGroup", void 0);
+__decorate([
+    Property(false)
+], ShowButtons.prototype, "lockRule", void 0);
+__decorate([
+    Property(false)
+], ShowButtons.prototype, "lockGroup", void 0);
 __decorate([
     Property(true)
 ], ShowButtons.prototype, "ruleDelete", void 0);
@@ -128,7 +143,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         super(options, element);
         this.isReadonly = true;
         this.fields = { text: 'label', value: 'field' };
-        this.updatedRule = { not: false, condition: 'and' };
+        this.updatedRule = { not: false, condition: 'and', isLocked: false };
         this.isLocale = false;
         this.isRefreshed = false;
         this.isNotified = false;
@@ -139,6 +154,14 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.isDestroy = false;
         this.isGetNestedData = false;
         this.isCustomOprCols = [];
+        this.groupCounter = 0;
+        this.lockItems = [];
+        this.groupIndex = -1;
+        this.ruleIndex = -1;
+        this.isLastGroup = false;
+        this.cloneGrpBtnClick = false;
+        this.isMiddleGroup = false;
+        this.cloneRuleBtnClick = false;
         MultiSelect.Inject(CheckBoxSelection);
     }
     getPersistData() {
@@ -190,6 +213,14 @@ let QueryBuilder = class QueryBuilder extends Component {
     getModuleName() {
         return 'query-builder';
     }
+    requiredModules() {
+        const modules = [];
+        modules.push({
+            member: 'query-library',
+            args: [this]
+        });
+        return modules;
+    }
     GetRootColumnName(field) {
         return this.separator ? field.split(this.separator)[0] : field;
     }
@@ -378,31 +409,51 @@ let QueryBuilder = class QueryBuilder extends Component {
             txtareaElem.style.height = txtareaElem.scrollHeight + 'px';
         }
         if (target.tagName === 'BUTTON' && target.className.indexOf('e-qb-toggle') < 0) {
-            if (target.className.indexOf('e-removerule') > -1) {
-                this.actionButton = target;
-                this.deleteRule(target);
-            }
-            else if (target.className.indexOf('e-deletegroup') > -1) {
-                this.actionButton = target;
-                this.deleteGroup(closest(target, '.e-group-container'));
-            }
-            else if (target.className.indexOf('e-edit-rule') > -1) {
-                const animation = new Animation({ duration: 1000, delay: 0 });
-                animation.animate('.e-query-builder', { name: 'SlideLeftIn' });
-                document.getElementById(this.element.id + '_summary_content').style.display = 'none';
-                if (this.element.querySelectorAll('.e-group-container').length < 1) {
-                    this.addGroupElement(false, this.element, this.rule.condition, false, this.rule.not);
-                    const mRules = extend({}, this.rule, {}, true);
-                    this.setGroupRules(mRules);
-                    this.renderSummaryCollapse();
-                }
-                else {
-                    const groupElem = this.element.querySelector('.e-group-container');
-                    if (groupElem.querySelectorAll('.e-collapse-rule').length < 1) {
+            switch (true) {
+                case target.className.indexOf('e-removerule') > -1:
+                    this.actionButton = target;
+                    this.deleteRule(target);
+                    break;
+                case target.className.indexOf('e-clone-rule-btn') > -1:
+                    this.actionButton = target;
+                    this.cloneRuleBtnClick = true;
+                    this.ruleClone(target);
+                    break;
+                case target.className.indexOf('e-lock-rule-btn') > -1:
+                    this.actionButton = target;
+                    this.ruleLock(target);
+                    break;
+                case target.className.indexOf('e-lock-grp-btn') > -1:
+                    this.actionButton = target;
+                    this.groupLock(target);
+                    break;
+                case target.className.indexOf('e-clone-grp-btn') > -1:
+                    this.actionButton = target;
+                    this.cloneGrpBtnClick = true;
+                    this.groupClone(closest(target, '.e-group-container'));
+                    break;
+                case target.className.indexOf('e-deletegroup') > -1:
+                    this.actionButton = target;
+                    this.deleteGroup(closest(target, '.e-group-container'));
+                    break;
+                case target.className.indexOf('e-edit-rule') > -1:
+                    const animation = new Animation({ duration: 1000, delay: 0 });
+                    animation.animate('.e-query-builder', { name: 'SlideLeftIn' });
+                    document.getElementById(this.element.id + '_summary_content').style.display = 'none';
+                    if (this.element.querySelectorAll('.e-group-container').length < 1) {
+                        this.addGroupElement(false, this.element, this.rule.condition, false, this.rule.not);
+                        const mRules = extend({}, this.rule, {}, true);
+                        this.setGroupRules(mRules);
                         this.renderSummaryCollapse();
                     }
-                    groupElem.style.display = 'block';
-                }
+                    else {
+                        const groupElem = this.element.querySelector('.e-group-container');
+                        if (groupElem.querySelectorAll('.e-collapse-rule').length < 1) {
+                            this.renderSummaryCollapse();
+                        }
+                        groupElem.style.display = 'block';
+                    }
+                    break;
             }
         }
         else if ((target.tagName === 'LABEL' && target.parentElement.className.indexOf('e-btn-group') > -1) ||
@@ -502,7 +553,18 @@ let QueryBuilder = class QueryBuilder extends Component {
         else {
             ruleElem = this.createElement('div', { attrs: { class: 'e-rule-container' } });
             ruleElem.setAttribute('id', target.id + '_rule' + this.ruleIdCounter);
-            ruleListElem.appendChild(ruleElem);
+            if (this.showButtons.cloneRule && this.cloneRuleBtnClick) {
+                if (this.ruleIndex < 0) {
+                    ruleListElem.appendChild(ruleElem);
+                }
+                else {
+                    ruleListElem.insertBefore(ruleElem, ruleListElem.children[this.ruleIndex + 1]); // added clone rule to next position
+                }
+                this.cloneRuleBtnClick = false;
+            }
+            else {
+                ruleListElem.appendChild(ruleElem);
+            }
             this.ruleIdCounter++;
         }
         if (column && column.ruleTemplate && rule) {
@@ -552,6 +614,21 @@ let QueryBuilder = class QueryBuilder extends Component {
             elem = this.ruleElem.querySelector('.e-rule-field').cloneNode(true);
             ruleElem.appendChild(elem);
         }
+        if (this.showButtons.lockGroup) {
+            removeClass(ruleElem.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.lockRule) {
+            removeClass(ruleElem.querySelectorAll('.e-lock-rule-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.cloneGroup) {
+            removeClass(ruleElem.querySelectorAll('.e-clone-grp-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.cloneRule) {
+            removeClass(ruleElem.querySelectorAll('.e-clone-rule-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.ruleDelete) {
+            removeClass(ruleElem.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+        }
         if (column && column.ruleTemplate && rule) {
             this.renderReactTemplates();
         }
@@ -594,7 +671,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             else {
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field');
                 ruleElem.querySelector('.e-filter-input').setAttribute('id', ruleElem.id + '_filterkey');
-                let element = ruleElem.querySelector('button');
+                const element = ruleElem.querySelector('.e-rule-delete');
                 if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
                     element.textContent = this.l10n.getConstant('Remove');
                     addClass([element], 'e-flat');
@@ -604,8 +681,11 @@ let QueryBuilder = class QueryBuilder extends Component {
                     addClass([element], 'e-round');
                     addClass([element], 'e-icon-btn');
                     element.setAttribute('title', this.l10n.getConstant('DeleteRule'));
-                    element = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
-                    ruleElem.querySelector('button').appendChild(element);
+                    const spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
+                    ruleElem.querySelector('.e-rule-delete').appendChild(spanElement);
+                }
+                if (!this.showButtons.ruleDelete) {
+                    element.classList.add('e-button-hide');
                 }
             }
             if (this.displayMode === 'Vertical' || this.element.className.indexOf('e-device') > -1) {
@@ -636,6 +716,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                     if (this.separator && rule.field) {
                         ddlValue = this.GetRootColumnName(rule.field);
                     }
+                    else if (this.autoSelectField) {
+                        ddlValue = this.GetRootColumnName(rule.field);
+                    }
                     else {
                         ddlValue = this.isImportRules ? this.GetRootColumnName(rule.field) : rule.field;
                     }
@@ -643,8 +726,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                         dataSource: this.columns,
                         fields: this.fields, placeholder: this.l10n.getConstant('SelectField'),
                         popupHeight: ((this.columns.length > 5) ? height : 'auto'), close: this.fieldClose.bind(this, ruleElem.id + '_filterkey'),
-                        change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this, true),
-                        cssClass: 'qb-dropdownlist'
+                        change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this, true), cssClass: 'qb-dropdownlist'
                     };
                     if (this.fieldModel) {
                         ddlField = Object.assign({}, ddlField, this.fieldModel);
@@ -734,12 +816,23 @@ let QueryBuilder = class QueryBuilder extends Component {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const custom = rule.custom;
             if (Object.keys(rule).length) {
-                rules.rules.push({
-                    'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
-                });
-                if (custom) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    rules.rules[rules.rules.length - 1].custom = custom;
+                if (this.ruleIndex < 0) {
+                    rules.rules.push({
+                        'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
+                    });
+                    if (custom) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        rules.rules[rules.rules.length - 1].custom = custom;
+                    }
+                }
+                else {
+                    rules.rules.splice(this.ruleIndex + 1, 0, {
+                        'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
+                    });
+                    if (custom) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        rules.rules[this.ruleIndex + 1].custom = custom;
+                    }
                 }
             }
             else {
@@ -747,6 +840,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     newRule.custom = custom;
                 }
+                if (this.autoSelectField) {
+                    rule.field = newRule.field = this.rule.rules[0].field;
+                }
                 rules.rules.push(newRule);
             }
         }
@@ -946,6 +1042,8 @@ let QueryBuilder = class QueryBuilder extends Component {
     ruleTemplate() {
         let tempElem;
         let clsName;
+        let cloneClsName;
+        let lockClsName;
         const ruleElem = this.createElement('div');
         const fieldElem = this.createElement('div', { attrs: { class: 'e-rule-field' } });
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-filter' } });
@@ -957,6 +1055,24 @@ let QueryBuilder = class QueryBuilder extends Component {
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-value' } });
         fieldElem.appendChild(tempElem);
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-value-delete' } });
+        if (this.showButtons.cloneRule) {
+            cloneClsName = 'e-clone-rule-btn e-clone-rule e-css e-btn e-small e-round e-icon-btn';
+        }
+        else {
+            cloneClsName = 'e-clone-rule-btn e-clone-rule e-css e-btn e-small e-round e-icon-btn e-button-hide';
+        }
+        if (this.showButtons.lockRule) {
+            lockClsName = 'e-lock-rule-btn e-lock-rule e-css e-btn e-small e-round e-icons e-icon-btn';
+        }
+        else {
+            lockClsName = 'e-lock-rule-btn e-lock-rule e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+        }
+        const cloneRuleBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('CloneRule'), type: 'button', class: cloneClsName } });
+        let spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-copy' } });
+        cloneRuleBtnElem.appendChild(spanElement);
+        const cloneLockBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('LockRule'), type: 'button', class: lockClsName } });
+        spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-unlock' } });
+        cloneLockBtnElem.appendChild(spanElement);
         if (this.showButtons.ruleDelete || isNullOrUndefined(this.showButtons.ruleDelete)) {
             clsName = 'e-removerule e-rule-delete e-css e-btn e-small';
         }
@@ -964,6 +1080,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             clsName = 'e-removerule e-rule-delete e-css e-btn e-small e-button-hide';
         }
         const delBtnElem = this.createElement('button', { attrs: { type: 'button', class: clsName } });
+        tempElem.appendChild(cloneRuleBtnElem);
+        tempElem.appendChild(cloneLockBtnElem);
         tempElem.appendChild(delBtnElem);
         fieldElem.appendChild(tempElem);
         ruleElem.appendChild(fieldElem);
@@ -1032,9 +1150,6 @@ let QueryBuilder = class QueryBuilder extends Component {
                 button.appendTo(dltGroupBtn);
                 dltGroupBtn.setAttribute('title', this.l10n.getConstant('DeleteGroup'));
                 rippleEffect(dltGroupBtn, { selector: '.deletegroup' });
-                if (!this.headerTemplate) {
-                    groupElem.querySelector('.e-group-action').appendChild(dltGroupBtn);
-                }
                 const ruleList = target.querySelector('.e-rule-list');
                 const childElems = ruleList.children;
                 let grpLen = 0;
@@ -1043,20 +1158,72 @@ let QueryBuilder = class QueryBuilder extends Component {
                         grpLen += 1;
                     }
                 }
-                ruleList.appendChild(groupElem);
+                if (this.showButtons.cloneGroup && this.cloneGrpBtnClick) {
+                    if (this.groupIndex === (childElems.length - 1)) {
+                        ruleList.appendChild(groupElem);
+                        this.isLastGroup = true;
+                    }
+                    else {
+                        childElems[this.groupIndex + 1].parentNode.insertBefore(groupElem, childElems[this.groupIndex + 1]); // clone the element to nxt element
+                        this.isMiddleGroup = true;
+                    }
+                }
+                else {
+                    ruleList.appendChild(groupElem);
+                }
                 const level = this.levelColl[target.id].slice(0);
                 level.push(grpLen);
                 this.levelColl[groupElem.id] = level;
+                if (this.groupIndex > -1) {
+                    this.refreshLevelColl();
+                }
                 if (!this.isImportRules) {
                     this.isAddSuccess = true;
                     this.addGroups([], target.id.replace(this.element.id + '_', ''));
                     this.isAddSuccess = false;
-                    if (isBtnClick) {
+                    if (isBtnClick && this.addRuleToNewGroups) {
                         this.addRuleElement(groupElem, {});
                     }
                 }
+                if (!this.headerTemplate) {
+                    let lockClsName = '';
+                    if (this.showButtons.cloneGroup) {
+                        lockClsName = 'e-clone-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn';
+                    }
+                    else {
+                        lockClsName = 'e-clone-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+                    }
+                    const cloneBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('CloneGroup'), type: 'button', class: lockClsName } });
+                    const spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-copy' } });
+                    cloneBtnElem.appendChild(spanElement);
+                    groupElem.querySelector('.e-group-action').appendChild(cloneBtnElem);
+                    if (this.showButtons.lockGroup) {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn';
+                    }
+                    else {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+                    }
+                    const lockBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('LockGroup'), type: 'button', class: lockClsName } });
+                    const lockSpanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-unlock' } });
+                    lockBtnElem.appendChild(lockSpanElement);
+                    groupElem.querySelector('.e-group-action').appendChild(lockBtnElem);
+                    groupElem.querySelector('.e-group-action').appendChild(dltGroupBtn);
+                }
             }
             else {
+                if (!this.headerTemplate) {
+                    let lockClsName = '';
+                    if (this.showButtons.lockGroup) {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn';
+                    }
+                    else {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+                    }
+                    const lockBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('LockGroup'), type: 'button', class: lockClsName } });
+                    const spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-unlock' } });
+                    lockBtnElem.appendChild(spanElement);
+                    groupElem.querySelector('.e-group-action').appendChild(lockBtnElem);
+                }
                 target.appendChild(groupElem);
                 this.levelColl[groupElem.id] = [0];
             }
@@ -1313,6 +1480,10 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (this.fieldMode === 'Default') {
                 dropDownObj = getComponent(closest(element, '.e-rule-container').querySelector('.e-filter-input'), 'dropdownlist');
                 this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
+                if (this.selectedColumn.columns) {
+                    dropDownObj = getComponent(closest(element, '.e-rule-container').querySelector('.e-rule-sub-filter .e-dropdownlist'), 'dropdownlist');
+                    this.selectedColumn = this.getColumn(dropDownObj.value);
+                }
             }
             else {
                 dropDownObj = getComponent(closest(element, '.e-rule-container').querySelector('.e-filter-input'), 'dropdowntree');
@@ -1386,7 +1557,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.prevItemData = args.itemData;
             const fieldElem = closest(args.element, '.e-rule-filter') || closest(args.element, '.e-rule-sub-filter');
             const column = this.fieldMode === 'DropdownTree' ? this.getColumn(args.value[0]) : this.getColumn(args.value);
-            if (this.fieldMode === 'DropdownTree' && fieldElem != null) {
+            if (this.fieldMode === 'DropdownTree' && fieldElem !== null) {
                 const ddtElem = fieldElem.querySelector('.e-dropdowntree.e-control');
                 const ddt = getComponent(ddtElem, 'dropdowntree');
                 if (column) {
@@ -1458,7 +1629,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         let filterElem = closest(ddlArgs.element, '.e-rule-filter');
         filterElem = filterElem ? filterElem : closest(ddlArgs.element, '.e-rule-sub-filter');
         let ddlObj = getComponent(ddlArgs.element, 'dropdownlist');
-        if (this.fieldMode === 'DropdownTree' && filterElem != null) {
+        if (this.fieldMode === 'DropdownTree' && filterElem !== null) {
             ddlObj = getComponent(ddlArgs.element, 'dropdowntree');
         }
         const element = closest(ddlArgs.element, '.e-group-container');
@@ -1585,7 +1756,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.GetRootColumnName(rule.field) === this.GetRootColumnName(this.previousColumn.field))) {
             const subField = this.selectedColumn.columns;
             for (let i = 0; i < subField.length; i++) {
-                if (rule.field === subField[i].field || rule.field.indexOf(subField[i].field) > -1) {
+                if (rule.field === subField[i].field) {
                     dropDownList.value = subField[i].field;
                     this.selectedColumn = subField[i];
                     subFieldValue = true;
@@ -1624,7 +1795,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     rule.value = [];
                 }
             }
-            else if (typeof rule.value === 'object' && rule.value != null) {
+            else if (typeof rule.value === 'object' && rule.value !== null) {
                 rule.value = rule.value.length > 0 ? rule.value[0] : rule.type === 'number' ? 0 : '';
             }
             if (ddlArgs.previousItemData) {
@@ -1651,6 +1822,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (valElem && this.getColumn(rule.field).template) {
                 filterElem = operatorElem.previousElementSibling;
             }
+            if (valElem.children.length == 0) {
+                filterElem = operatorElem.previousElementSibling;
+            }
             this.changeRuleValues(filterElem, rule, tempRule, ddlArgs);
         }
     }
@@ -1681,7 +1855,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 tempRule.type = this.fieldMode === 'DropdownTree' ? this.getColumn(fieldObj.value[0]).type :
                     this.getColumn(fieldObj.value).type;
                 const itemData = ddlArgs.itemData;
-                this.renderValues(operatorElem, itemData, ddlArgs.previousItemData, true, rule, tempRule, ddlArgs.element);
+                if (ddlObj.value !== '') {
+                    this.renderValues(operatorElem, itemData, ddlArgs.previousItemData, true, rule, tempRule, ddlArgs.element);
+                }
             }
             else {
                 const ruleId = closest(operatorElem, '.e-rule-container').id;
@@ -1695,7 +1871,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 const height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
                 let value = operatorList[0].value;
-                value = rule ? (rule.operator !== '' ? rule.operator : value) : value;
+                let ddlIdx = 0;
+                if (!this.autoSelectOperator) {
+                    value = '';
+                    ddlIdx = -1;
+                }
+                if (this.isImportRules || (this.ruleIndex > -1 || this.groupIndex > -1)) {
+                    value = rule ? (rule.operator ? rule.operator : value) : value;
+                }
                 let ddlOperator;
                 ddlOperator = {
                     dataSource: operatorList,
@@ -1703,7 +1886,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     placeholder: this.l10n.getConstant('SelectOperator'),
                     popupHeight: ((operatorList.length > 5) ? height : 'auto'),
                     change: this.changeField.bind(this),
-                    index: 0,
+                    index: ddlIdx,
                     value: value,
                     open: this.popupOpen.bind(this, false)
                 };
@@ -1717,7 +1900,12 @@ let QueryBuilder = class QueryBuilder extends Component {
                     tempRule.type = this.selectedColumn.type;
                     tempRule.operator = rule.operator;
                 }
-                this.renderValues(operatorElem, this.selectedColumn, ddlArgs.previousItemData, false, rule, tempRule, ddlArgs.element);
+                if (!isNullOrUndefined(value) && value !== '') {
+                    this.renderValues(operatorElem, this.selectedColumn, ddlArgs.previousItemData, false, rule, tempRule, ddlArgs.element);
+                }
+                else if (this.autoSelectField && this.autoSelectOperator) {
+                    this.renderValues(operatorElem, this.selectedColumn, ddlArgs.previousItemData, false, rule, tempRule, ddlArgs.element);
+                }
             }
         }
         if (!this.isImportRules) {
@@ -2074,14 +2262,14 @@ let QueryBuilder = class QueryBuilder extends Component {
         const columnData = this.getItemData(parentId);
         let selectedValue;
         const isTemplate = (typeof columnData.template === 'string');
-        if (this.isImportRules || this.isPublic || isTemplate) {
+        if (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate) {
             selectedValue = rule.value;
         }
         else {
             selectedValue = this.setDefaultValue(parentId, false, false);
         }
         if ((operator === 'in' || operator === 'notin') && (this.dataColl.length || columnData.values)) {
-            selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? 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%';
@@ -2093,7 +2281,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         else {
             if (operator === 'in' || operator === 'notin') {
-                selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+                selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
                 selectedValue = selectedVal.join(',');
             }
             let txtBox;
@@ -2113,9 +2301,9 @@ let QueryBuilder = class QueryBuilder extends Component {
     renderNumberValue(parentId, rule, operator, idx, ruleValElem, itemData, length) {
         const columnData = this.getItemData(parentId);
         const isTemplate = (typeof columnData.template === 'string');
-        let selectedVal = (this.isImportRules || this.isPublic || isTemplate) ? rule.value : this.setDefaultValue(parentId, false, true);
+        let selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate) ? rule.value : this.setDefaultValue(parentId, false, true);
         if ((operator === 'in' || operator === 'notin') && (this.dataColl.length || columnData.values)) {
-            selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? 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%';
@@ -2126,7 +2314,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
         }
         else if (operator === 'in' || operator === 'notin') {
-            selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
             const selVal = selectedVal.join(',');
             let txtInp;
             txtInp = {
@@ -2399,8 +2587,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             : this.getColumn(filtObj.value);
         this.selectedRule = column;
+        const ddlObj = getComponent(target.querySelector('input'), 'dropdownlist');
         if (isRender) {
-            const ddlObj = getComponent(target.querySelector('input'), 'dropdownlist');
             itemData = element.id.indexOf('operator') > -1 ? itemData : this.selectedRule;
             if (itemData.operators) {
                 ddlObj.value = null;
@@ -2408,7 +2596,13 @@ let QueryBuilder = class QueryBuilder extends Component {
                 ddlObj.dataSource = itemData.operators;
                 ddlObj.index = this.getOperatorIndex(ddlObj, rule);
                 ddlObj.value = tempRule.operator = ddlObj.dataSource[ddlObj.index].value;
-                ddlObj.dataBind();
+                if (!this.autoSelectOperator) {
+                    ddlObj.index = -1;
+                    tempRule.operator = ddlObj.value = '';
+                }
+                else {
+                    ddlObj.dataBind();
+                }
             }
         }
         const operator = tempRule.operator.toString();
@@ -2441,39 +2635,41 @@ let QueryBuilder = class QueryBuilder extends Component {
                 this.validateValue(rule, closest(target, '.e-rule-container'));
                 this.destroyControls(target);
             }
-            if (column) {
-                itemData.template = column.template;
-            }
-            if (itemData.template) {
-                addClass([target.nextElementSibling], 'e-template-value');
-                itemData.template = column.template;
-                isTempRendered = this.setColumnTemplate(itemData, parentId, column.field, itemData.value ||
-                    operator, target, rule);
-            }
-            if (isTempRendered) {
-                const parentElem = target.parentElement.querySelector('.e-rule-value');
-                if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
-                    parentElem.style.width = '100%';
-                }
-                else {
-                    parentElem.style.width = '200px';
-                }
-            }
-            else {
-                removeClass([target.nextElementSibling], 'e-template-value');
-                let inputLen = 1;
-                if (tempRule.type === 'boolean') {
-                    inputLen = this.selectedColumn.values ? this.selectedColumn.values.length : 2;
+            if (this.isImportRules || (ddlObj && ddlObj.value !== '')) {
+                if (column) {
+                    itemData.template = column.template;
+                }
+                if (itemData.template) {
+                    addClass([target.nextElementSibling], 'e-template-value');
+                    itemData.template = column.template;
+                    isTempRendered = this.setColumnTemplate(itemData, parentId, column.field, itemData.value ||
+                        operator, target, rule);
+                }
+                if (isTempRendered) {
+                    const parentElem = target.parentElement.querySelector('.e-rule-value');
+                    if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
+                        parentElem.style.width = '100%';
+                    }
+                    else {
+                        parentElem.style.width = '200px';
+                    }
                 }
                 else {
-                    inputLen = (operator && operator.toLowerCase().indexOf('between') > -1) ? 2 : 1;
-                }
-                for (let i = 0; i < inputLen; i++) {
-                    const valElem = this.createElement('input', { attrs: { type: 'text', id: parentId + '_valuekey' + i } });
-                    target.nextElementSibling.appendChild(valElem);
+                    removeClass([target.nextElementSibling], 'e-template-value');
+                    let inputLen = 1;
+                    if (tempRule.type === 'boolean') {
+                        inputLen = this.selectedColumn.values ? this.selectedColumn.values.length : 2;
+                    }
+                    else {
+                        inputLen = (operator && operator.toLowerCase().indexOf('between') > -1) ? 2 : 1;
+                    }
+                    for (let i = 0; i < inputLen; i++) {
+                        const valElem = this.createElement('input', { attrs: { type: 'text', id: parentId + '_valuekey' + i } });
+                        target.nextElementSibling.appendChild(valElem);
+                    }
                 }
+                this.renderControls(target, itemData, rule, tempRule, isTempRendered);
             }
-            this.renderControls(target, itemData, rule, tempRule, isTempRendered);
         }
         else {
             const parentElem = target.parentElement.querySelector('.e-rule-value');
@@ -2906,8 +3102,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         let i;
         let len;
         let tooltip;
-        let popupElement;
         super.destroy();
+        let popupElement;
         element = this.element.querySelectorAll('.e-addrulegroup');
         len = element.length;
         for (i = 0; i < len; i++) {
@@ -2993,7 +3189,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (grouplen) {
                 this.isPublic = true;
                 for (let i = 0, len = groups.length; i < len; i++) {
-                    this.updatedRule = { condition: groups[i].condition, not: groups[i].not };
+                    this.updatedRule = { isLocked: groups[i].isLocked, condition: groups[i].condition,
+                        not: groups[i].not };
                     this.importRules(groups[i], groupElem, false, groups[i].not);
                 }
                 this.isPublic = false;
@@ -3001,15 +3198,27 @@ let QueryBuilder = class QueryBuilder extends Component {
             else {
                 let condition = 'and';
                 let not = false;
+                let isLocked = false;
                 if (this.updatedRule) {
                     condition = this.updatedRule.condition;
                     not = this.updatedRule.not;
+                    isLocked = this.updatedRule.isLocked;
                 }
-                if (this.enableNotCondition) {
-                    rule.rules.push({ 'condition': condition, 'not': not, rules: [] });
+                if (this.groupIndex < 0) {
+                    if (this.enableNotCondition) {
+                        rule.rules.push({ 'condition': condition, 'not': not, rules: [] });
+                    }
+                    else {
+                        rule.rules.push({ 'condition': condition, rules: [] });
+                    }
                 }
                 else {
-                    rule.rules.push({ 'condition': condition, rules: [] });
+                    if (this.enableNotCondition) {
+                        rule.rules.splice(this.groupIndex + 1, 0, { condition: condition, not: not, rules: [], isLocked: isLocked });
+                    }
+                    else {
+                        rule.rules.splice(this.groupIndex + 1, 0, { condition: condition, rules: [], isLocked: isLocked });
+                    }
                 }
             }
             if (!this.headerTemplate) {
@@ -3191,17 +3400,53 @@ let QueryBuilder = class QueryBuilder extends Component {
                     this.refresh();
                     break;
                 case 'showButtons':
-                    if (newProp.showButtons.ruleDelete) {
-                        removeClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.lockGroup)) {
+                        if (newProp.showButtons.lockGroup) {
+                            removeClass(this.element.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+                        }
                     }
-                    else {
-                        addClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.lockRule)) {
+                        if (newProp.showButtons.lockRule) {
+                            removeClass(this.element.querySelectorAll('.e-lock-rule-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-lock-rule-btn'), 'e-button-hide');
+                        }
                     }
-                    if (newProp.showButtons.groupDelete) {
-                        removeClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.cloneGroup)) {
+                        if (newProp.showButtons.cloneGroup) {
+                            removeClass(this.element.querySelectorAll('.e-clone-grp-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-clone-grp-btn'), 'e-button-hide');
+                        }
                     }
-                    else {
-                        addClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.cloneRule)) {
+                        if (newProp.showButtons.cloneRule) {
+                            removeClass(this.element.querySelectorAll('.e-clone-rule-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-clone-rule-btn'), 'e-button-hide');
+                        }
+                    }
+                    if (!isNullOrUndefined(newProp.showButtons.ruleDelete)) {
+                        if (newProp.showButtons.ruleDelete) {
+                            removeClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                        }
+                    }
+                    if (!isNullOrUndefined(newProp.showButtons.groupDelete)) {
+                        if (newProp.showButtons.groupDelete) {
+                            removeClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                        }
                     }
                     break;
                 case 'cssClass':
@@ -3278,8 +3523,11 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.element.id = this.element.id || getUniqueID('ej2-querybuilder');
         this.defaultLocale = {
             StartsWith: 'Starts With',
+            DoesNotStartWith: 'Does Not Start With',
             EndsWith: 'Ends With',
+            DoesNotEndWith: 'Does Not End With',
             Contains: 'Contains',
+            DoesNotContain: 'Does Not Contain',
             NotLike: 'Not Like',
             Like: 'Like',
             Equal: 'Equal',
@@ -3313,7 +3561,13 @@ let QueryBuilder = class QueryBuilder extends Component {
             IsNotNull: 'Is Not Null',
             True: 'true',
             False: 'false',
-            AddButton: 'Add Group/Condition'
+            AddButton: 'Add Group/Condition',
+            CloneGroup: 'Clone Group',
+            LockGroup: 'Lock Group',
+            CloneRule: 'Clone Rule',
+            LockRule: 'Lock Rule',
+            UnlockRule: 'Unlock Rule',
+            UnlockGroup: 'Unlock Group'
         };
         this.l10n = new L10n('querybuilder', this.defaultLocale, this.locale);
         this.intl = new Internationalization(this.locale);
@@ -3326,8 +3580,11 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.customOperators = {
             stringOperator: [
                 { value: 'startswith', key: this.l10n.getConstant('StartsWith') },
+                { value: 'notstartswith', key: this.l10n.getConstant('DoesNotStartWith') },
                 { value: 'endswith', key: this.l10n.getConstant('EndsWith') },
+                { value: 'notendswith', key: this.l10n.getConstant('DoesNotEndWith') },
                 { value: 'contains', key: this.l10n.getConstant('Contains') },
+                { value: 'notcontains', key: this.l10n.getConstant('DoesNotContain') },
                 { value: 'equal', key: this.l10n.getConstant('Equal') },
                 { value: 'notequal', key: this.l10n.getConstant('NotEqual') },
                 { value: 'in', key: this.l10n.getConstant('In') },
@@ -3341,7 +3598,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 { value: 'greaterthanorequal', key: this.l10n.getConstant('GreaterThanOrEqual') },
                 { value: 'lessthan', key: this.l10n.getConstant('LessThan') },
                 { value: 'lessthanorequal', key: this.l10n.getConstant('LessThanOrEqual') },
-                { value: 'notequal', key: this.l10n.getConstant('NotEqual') }
+                { value: 'notequal', key: this.l10n.getConstant('NotEqual') },
+                { value: 'between', key: this.l10n.getConstant('Between') },
+                { value: 'notbetween', key: this.l10n.getConstant('NotBetween') }
             ],
             booleanOperator: [
                 { value: 'equal', key: this.l10n.getConstant('Equal') },
@@ -3642,6 +3901,10 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (!(rule.rules[0] && rule.rules[0].rules)) {
                 this.disableRuleCondition(groupElem, rule);
             }
+            const tooltipElem = this.element.querySelectorAll('.e-tooltip');
+            for (let i = 0; i < tooltipElem.length; i++) {
+                getComponent(tooltipElem[i], 'tooltip').refresh(tooltipElem[i]);
+            }
             if (!this.isImportRules) {
                 this.trigger('change', args);
             }
@@ -3659,6 +3922,10 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.setProperties({ rule: rule }, true);
         rule = this.getRuleCollection(this.rule, false);
         this.importRules(this.rule, this.element.querySelector('.e-group-container'), true, this.rule.not, isRoot);
+        if (rule.isLocked) {
+            const lockGrpTarget = this.element.querySelector('.e-group-container').querySelector('.e-lock-grp-btn');
+            this.groupLock(lockGrpTarget);
+        }
         this.isImportRules = false;
     }
     keyBoardHandler(e) {
@@ -3754,7 +4021,8 @@ let QueryBuilder = class QueryBuilder extends Component {
                 rule.value !== undefined)) || (customObj && customObj.isQuestion)) {
                 const condition = rule.condition;
                 rule = {
-                    'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value
+                    'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value,
+                    'isLocked': rule.isLocked
                 };
                 if (condition) {
                     rule.condition = condition;
@@ -3763,6 +4031,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     rule.custom = customObj;
                 }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if ((rule.operator === 'in' || rule.operator === 'notin') && rule.value && rule.value.length === 0) {
                     rule = {};
                 }
@@ -3788,10 +4057,10 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             else {
                 if (this.enableNotCondition) {
-                    rule = { 'condition': rule.condition, 'rules': rule.rules, 'not': rule.not };
+                    rule = { 'condition': rule.condition, 'rules': rule.rules, 'not': rule.not, 'isLocked': rule.isLocked };
                 }
                 else {
-                    rule = { 'condition': rule.condition, 'rules': rule.rules };
+                    rule = { 'condition': rule.condition, 'rules': rule.rules, 'isLocked': rule.isLocked };
                 }
                 if (customObj) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3956,11 +4225,20 @@ let QueryBuilder = class QueryBuilder extends Component {
         let ruleValue;
         let ignoreCase = false;
         let column;
-        const ignoreOper = ['notcontains', 'notstartswith', 'notendswith'];
         if (!ruleColl) {
             return pred;
         }
         for (let i = 0, len = ruleColl.length; i < len; i++) {
+            let operator = ruleColl[i].operator;
+            if (operator === 'notstartswith') {
+                operator = 'doesnotstartwith';
+            }
+            else if (operator === 'notendswith') {
+                operator = 'doesnotendwith';
+            }
+            else if (operator === 'notcontains') {
+                operator = 'doesnotcontain';
+            }
             const keys = Object.keys(ruleColl[i]);
             ignoreCase = false;
             if (keys.indexOf('rules') > -1 && ruleColl[i].rules) {
@@ -3979,7 +4257,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     }
                 }
             }
-            else if (!isNullOrUndefined(ruleColl[i].operator) && !isNullOrUndefined(ruleColl[i].operator.length)) {
+            else if (!isNullOrUndefined(operator) && !isNullOrUndefined(operator.length)) {
                 const oper = ruleColl[i].operator.toLowerCase();
                 let isDateFilter = false;
                 const dateOperColl = ['equal', 'notequal', 'greaterthan', 'greaterthanorequal', 'lessthan', 'lessthanorequal'];
@@ -4010,23 +4288,20 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 if (i === 0) {
                     if (isDateFilter || (oper.indexOf('in') > -1 || oper.indexOf('between') > -1 || oper.indexOf('null') > -1 ||
-                        oper.indexOf('empty') > -1) && oper.indexOf('contains') < 0) {
+                        oper.indexOf('empty') > -1) && (oper.indexOf('contain') < 0)) {
                         pred = isDateFilter ? this.datePredicate(ruleColl[i], ruleValue) :
                             this.arrayPredicate(ruleColl[i]);
                     }
                     else {
                         const value = ruleValue;
-                        if (value !== '' && ignoreOper.indexOf(oper) < 0) {
-                            pred = new Predicate(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                        if (value !== '') {
+                            pred = new Predicate(ruleColl[i].field, operator, ruleValue, ignoreCase);
                         }
                     }
                 }
                 else {
-                    if (ignoreOper.indexOf(oper) > -1) {
-                        continue;
-                    }
                     if (isDateFilter || (oper.indexOf('in') > -1 || oper.indexOf('between') > -1 ||
-                        oper.indexOf('null') > -1 || oper.indexOf('empty') > -1) && oper.indexOf('contains') < 0) {
+                        oper.indexOf('null') > -1 || oper.indexOf('empty') > -1) && oper.indexOf('contain') < 0) {
                         pred = isDateFilter ? this.datePredicate(ruleColl[i], ruleValue, pred, rule.condition) :
                             this.arrayPredicate(ruleColl[i], pred, rule.condition);
                     }
@@ -4035,19 +4310,19 @@ let QueryBuilder = class QueryBuilder extends Component {
                             const value = ruleValue;
                             if (pred && value !== '') {
                                 pred
-                                    = pred.and(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                    = pred.and(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                             else if (value !== '') {
-                                pred = new Predicate(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                pred = new Predicate(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                         }
                         else {
                             const value = ruleValue;
                             if (pred && value !== '') {
-                                pred = pred.or(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                pred = pred.or(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                             else if (value !== '') {
-                                pred = new Predicate(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                pred = new Predicate(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                         }
                     }
@@ -4327,15 +4602,28 @@ let QueryBuilder = class QueryBuilder extends Component {
             for (let i = 0, len = ruleColl.length; i < len; i++) {
                 const keys = Object.keys(ruleColl[i]);
                 if (!isNullOrUndefined(ruleColl[i].rules) && keys.indexOf('rules') > -1 && (ruleColl[i].rules.length !== 0)) {
+                    if (this.element.querySelectorAll('.e-group-container').length > this.maxGroupCount) {
+                        return null;
+                    }
                     parentElem = this.renderGroup(ruleColl[i], ruleColl[i].condition, parentElem, ruleColl[i].not);
                     parentElem = this.importRules(ruleColl[i], parentElem, true);
                 }
                 else {
                     this.renderRule(ruleColl[i], parentElem);
                 }
+                if (!isNullOrUndefined(ruleColl[i].rules) && ruleColl[i].isLocked) {
+                    const lockGrpTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-grp-btn');
+                    this.groupLock(lockGrpTarget);
+                }
+                if (isNullOrUndefined(ruleColl[i].rules) && ruleColl[i].isLocked) {
+                    const lockRuleTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-rule-btn');
+                    this.ruleLock(lockRuleTarget);
+                }
             }
         }
-        parentElem = closest(parentElem, '.e-rule-list');
+        if (parentElem) {
+            parentElem = closest(parentElem, '.e-rule-list');
+        }
         if (parentElem) {
             parentElem = closest(parentElem, '.e-group-container');
         }
@@ -4344,7 +4632,20 @@ let QueryBuilder = class QueryBuilder extends Component {
     renderGroup(rule, condition, parentElem, not, isRoot) {
         this.addGroupElement(true, parentElem, condition, false, not, isRoot, rule); //Child group
         const element = parentElem.querySelectorAll('.e-group-container');
-        return element[element.length - 1];
+        const cloneElem = parentElem.querySelector('.e-rule-list').children;
+        if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isMiddleGroup) {
+            this.isMiddleGroup = false;
+            this.cloneGrpBtnClick = false;
+            return cloneElem[this.groupIndex + 1]; // group added in the middle
+        }
+        else if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isLastGroup) {
+            this.isLastGroup = false;
+            this.cloneGrpBtnClick = false;
+            return cloneElem[cloneElem.length - 1]; // group added in the end
+        }
+        else {
+            return element[element.length - 1];
+        }
     }
     renderRule(rule, parentElem) {
         if (parentElem.className.indexOf('e-group-container') > -1) {
@@ -4542,15 +4843,19 @@ let QueryBuilder = class QueryBuilder extends Component {
                             valueStr += rule.value ? '("%' + rule.value + '%")' : '(' + rule.value + ')';
                         }
                         else {
-                            if (rule.type === 'number' || typeof rule.value === 'boolean' || rule.value === null) {
+                            if (rule.type === 'number' || typeof rule.value === 'boolean' ||
+                                (rule.value === null && (rule.operator.toString().indexOf('empty') < -1))) {
                                 valueStr += rule.value;
                             }
+                            else if (rule.operator.toString().indexOf('empty') > -1) {
+                                valueStr += '""';
+                            }
                             else {
                                 valueStr += '"' + rule.value + '"';
                             }
                         }
                     }
-                    if (rule.operator.toString().indexOf('null') > -1 || (rule.operator.toString().indexOf('empty') > -1)) {
+                    if (rule.operator.toString().indexOf('null') > -1) {
                         if (enableEscape) {
                             rule.field = '`' + rule.field + '`';
                         }
@@ -4562,6 +4867,13 @@ let QueryBuilder = class QueryBuilder extends Component {
                         queryStr += rule.field + ' ' + ruleOpertor;
                     }
                     else {
+                        let custOper = ruleOpertor;
+                        if (rule.operator === 'isempty') {
+                            custOper = '=';
+                        }
+                        else if (rule.operator === 'isnotempty') {
+                            custOper = '!=';
+                        }
                         if (enableEscape) {
                             rule.field = '`' + rule.field + '`';
                         }
@@ -4570,7 +4882,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                                 rule.field = '"' + rule.field + '"';
                             }
                         }
-                        queryStr += rule.field + ' ' + ruleOpertor + ' ' + valueStr;
+                        queryStr += rule.field + ' ' + custOper + ' ' + valueStr;
                     }
                     if (rule.condition && rule.condition !== '') {
                         condition = rule.condition;
@@ -4600,7 +4912,7 @@ let QueryBuilder = class QueryBuilder extends Component {
      * Sets the rules from the sql query.
      *
      * @param {string} sqlString - 'sql String' to be passed to set the rule.
-     * @param {boolean} sqlLocale -  Set `true` if Localization for Sql query.
+     * @param {boolean} sqlLocale - Optional. Set `true` if Localization for Sql query.
      * @returns {void}
      */
     setRulesFromSql(sqlString, sqlLocale) {
@@ -4632,15 +4944,163 @@ let QueryBuilder = class QueryBuilder extends Component {
      *
      * @param {RuleModel} rule - 'rule' to be passed to get the sql.
      * @param {boolean} allowEscape - Set `true` if it exclude the escape character.
-     *  @param {boolean} sqlLocale - Set `true` if Localization for Sql query.
-     * @returns {object} - Sql query from rules.
+     * @param {boolean} sqlLocale - Set `true` if Localization for Sql query.
+     * @returns {string} - Sql query from rules.
      */
     getSqlFromRules(rule, allowEscape, sqlLocale) {
         if (!rule) {
             rule = this.getValidRules();
         }
         rule = this.getRuleCollection(rule, false);
-        return this.getSqlString(this.getValidRules(rule), allowEscape, null, sqlLocale).replace(/"/g, '\'');
+        const sqlString = this.getSqlString(this.getValidRules(rule), allowEscape, null, sqlLocale).replace(/"/g, '\'');
+        return sqlString;
+    }
+    /**
+     * Gets the parameter SQL query from rules.
+     *
+     * @param {RuleModel} rule – Specify the rule to be passed to get the parameter sql string.
+     * @returns {ParameterizedSql} – Parameterized SQL query from rules.
+     */
+    getParameterizedSql(rule) {
+        if (!rule) {
+            rule = this.getValidRules();
+        }
+        const obj = { sql: null };
+        this.notify('query-library', { prop: 'getParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+        return obj['sql'];
+    }
+    /**
+     * Sets the rules from the parameter sql query.
+     *
+     * @param { ParameterizedSql} sqlQuery – Specifies the parameter SQL to be passed to set the rule and load it to the query builder.
+     * @returns {void}
+     */
+    setParameterizedSql(sqlQuery) {
+        const obj = { sql: null };
+        this.notify('query-library', { prop: 'convertParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+        let sql = obj['sql'];
+        if (sql) {
+            sql = sql.replace(/`/g, '');
+            const ruleModel = this.getRulesFromSql(sql);
+            this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+        }
+    }
+    /**
+     * Gets the named parameter SQL query from rules.
+     *
+     * @param {RuleModel} rule – Specify the rule to be passed to get the named parameter SQL string.
+     * @returns {ParameterizedNamedSql} – Parameterized Named SQL query from rules.
+     */
+    getParameterizedNamedSql(rule) {
+        if (!rule) {
+            rule = this.getValidRules();
+        }
+        const obj = { sql: null };
+        this.notify('query-library', { prop: 'getNamedParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+        return obj['sql'];
+    }
+    /**
+     * Sets the rules from the named parameter SQL query.
+     *
+     * @param { ParameterizedNamedSql } sqlQuery – Specifies the named parameter SQL to be passed to set the rule and load it to the query builder.
+     * @returns {void}
+     */
+    setParameterizedNamedSql(sqlQuery) {
+        const obj = { sql: null };
+        this.notify('query-library', { prop: 'convertNamedParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+        let sql = obj['sql'];
+        if (sql) {
+            sql = sql.replace(/`/g, '');
+            const ruleModel = this.getRulesFromSql(sql);
+            this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+        }
+    }
+    /**
+     * Set the rules from Mongo query.
+     *
+     * @param {string} mongoQuery - 'sql String' to be passed to get the rule.
+     * @param {boolean} mongoLocale - Set `true` if Localization for Mongo query.
+     * @returns {void}
+     */
+    setMongoQuery(mongoQuery, mongoLocale) {
+        this.rule = { condition: 'and', not: false, rules: [] };
+        this.notify('query-library', { prop: 'mongoParser', onPropertyChange: false, value: { mongoQuery: JSON.parse(mongoQuery), rule: this.rule, mongoLocale: mongoLocale } });
+    }
+    /**
+     * Gets the Mongo query from rules.
+     *
+     * @param {RuleModel} rule - 'rule' to be passed to get the sql.
+     * @returns {object} - Sql query from rules.
+     */
+    getMongoQuery(rule) {
+        if (!rule) {
+            rule = this.getValidRules();
+        }
+        const obj = { mongoQuery: null };
+        this.notify('query-library', { prop: 'getMongoFromRules', onPropertyChange: false, value: { rule: rule, mongoQuery: '', obj: obj } });
+        return obj['mongoQuery'];
+    }
+    /**
+     * Clones the rule based on the rule ID to the specific group.
+     *
+     * @param {string} ruleID - Specifies the ruleID that needs to be cloned.
+     * @param {string} groupID - Specifies the groupID in which the rule to be cloned.
+     * @param {number} index - Specifies the index to insert the cloned rule inside the group.
+     * @returns {void}
+     */
+    cloneRule(ruleID, groupID, index) {
+        const getRule = this.getRule(ruleID.replace(this.element.id + '_', ''));
+        groupID = groupID.replace(this.element.id + '_', '');
+        this.ruleIndex = index;
+        this.cloneRuleBtnClick = true;
+        this.showButtons.cloneRule = true;
+        this.addRules([{
+                'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                'value': getRule.value
+            }], groupID);
+        this.ruleIndex = -1;
+        this.cloneRuleBtnClick = false;
+        this.showButtons.cloneRule = false;
+    }
+    /**
+     * Clones the group based on the group ID to the specific group.
+     *
+     * @param {string} groupID - Specifies the groupID that needs to be cloned.
+     * @param {string} parentGroupID - Specifies the parentGroupID in which the group to be cloned.
+     * @param {number} index - Specifies the index to insert the cloned group inside the parent group.
+     * @returns {void}
+     */
+    cloneGroup(groupID, parentGroupID, index) {
+        parentGroupID = parentGroupID.replace(this.element.id + '_', '');
+        const group = this.getGroup(parentGroupID);
+        groupID = groupID.replace(this.element.id + '_', '');
+        this.groupIndex = index;
+        this.cloneGrpBtnClick = true;
+        this.showButtons.cloneGroup = true;
+        this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupID);
+        this.groupIndex = -1;
+        this.cloneGrpBtnClick = false;
+        this.showButtons.cloneGroup = false;
+    }
+    /**
+     * Locks the rule based on the rule ID.
+     *
+     * @param {string} ruleID - Specifies the ruleID that needs to be locked.
+     * @returns {void}
+     */
+    lockRule(ruleID) {
+        const target = document.getElementById(ruleID).querySelectorAll('.e-lock-rule-btn')[0];
+        this.ruleLock(target);
+    }
+    /**
+     * Locks the group based on the group ID
+     *
+     * @param {string} groupID - Specifies the groupID that needs to be locked.
+     * @returns {void}
+     */
+    lockGroup(groupID) {
+        const target = document.getElementById(groupID).querySelectorAll('.e-lock-grp-btn')[0];
+        this.groupLock(target);
     }
     sqlParser(sqlString, sqlLocale) {
         let st = 0;
@@ -4842,13 +5302,13 @@ let QueryBuilder = class QueryBuilder extends Component {
             for (let i = 0; i < localeOperator.length; i++) {
                 if (this.sqlOperators[localeOperator[i]] === operator.toUpperCase()) {
                     if (value && value.indexOf('%') === 0 && value[value.length - 1] === '%') {
-                        return (localeOperator[i] === 'notcontains') ? 'notcontains' : 'contains';
+                        return (operator.toUpperCase() === 'NOT LIKE') ? 'notcontains' : 'contains';
                     }
                     else if (value && value.indexOf('%') !== 0 && value.indexOf('%') === value.length - 1) {
-                        return (localeOperator[i] === 'notstartswith') ? 'notstartswith' : 'startswith';
+                        return (operator.toUpperCase() === 'NOT LIKE') ? 'notstartswith' : 'startswith';
                     }
                     else if (value && value.indexOf('%') === 0 && value.indexOf('%') !== value.length - 1) {
-                        return (localeOperator[i] === 'notendswith') ? 'notendswith' : 'endswith';
+                        return (operator.toUpperCase() === 'NOT LIKE') ? 'notendswith' : 'endswith';
                     }
                     return localeOperator[i];
                 }
@@ -5033,6 +5493,14 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
                 else if (parser[i + 1][0] === 'Operators') {
                     rule.operator = this.getOperator(parser[i + 2][1], parser[i + 1][1], sqlLocale);
+                    if (rule.operator == "equal" && parser[i + 2][0] === "String" && parser[i + 2][1] === "''") {
+                        rule.operator = "isempty";
+                        
+                    }
+                    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';
                         rule.value = Number(parser[i + 2][1]);
@@ -5089,33 +5557,328 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         return rules;
     }
-};
-__decorate([
-    Event()
-], QueryBuilder.prototype, "created", void 0);
-__decorate([
-    Event()
-], QueryBuilder.prototype, "actionBegin", void 0);
-__decorate([
-    Event()
-], QueryBuilder.prototype, "beforeChange", void 0);
-__decorate([
-    Event()
-], QueryBuilder.prototype, "change", void 0);
-__decorate([
-    Event()
-], QueryBuilder.prototype, "dataBound", void 0);
-__decorate([
-    Event()
-], QueryBuilder.prototype, "ruleChange", void 0);
-__decorate([
-    Property({ ruleDelete: true, groupInsert: true, groupDelete: true })
-], QueryBuilder.prototype, "showButtons", void 0);
-__decorate([
-    Property(false)
-], QueryBuilder.prototype, "summaryView", void 0);
-__decorate([
-    Property(false)
+    /**
+     * Clone the Group
+     *
+     * @param {Element | string} target - 'target' to be passed to clone the group.
+     * @returns {void}
+     */
+    groupClone(target) {
+        const groupElem = target.closest('.e-rule-list').closest('.e-group-container');
+        let targetGrpId;
+        let groupId;
+        if (typeof target === 'string') {
+            groupId = this.element.id + '_' + target;
+            target = document.getElementById(groupId);
+        }
+        else {
+            targetGrpId = target.id.replace(this.element.id + '_', '');
+            groupId = groupElem.id.replace(this.element.id + '_', '');
+        }
+        const group = this.getGroup(targetGrpId);
+        this.groupIndex = Array.prototype.indexOf.call(target.closest('.e-rule-list').children, target.closest('.e-group-container'));
+        this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupId);
+        this.groupIndex = -1;
+    }
+    ruleClone(target) {
+        const ruleElem = closest(target, '.e-rule-container');
+        const groupElem = target.closest('.e-rule-list').closest('.e-group-container');
+        const getRule = this.getRule(target);
+        const groupId = groupElem.id.replace(this.element.id + '_', '');
+        const ruleElemColl = groupElem.querySelectorAll('.e-rule-container');
+        for (let i = 0, iLen = ruleElemColl.length; i < iLen; i++) {
+            if (ruleElem.id === ruleElemColl[i].id) {
+                this.ruleIndex = i;
+            }
+        }
+        this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                'value': getRule.value }], groupId);
+        this.ruleIndex = -1;
+    }
+    ruleLock(target) {
+        const ruleElem = closest(target, '.e-rule-container');
+        const rule = this.getRule(ruleElem.id.replace(this.element.id + '_', ''));
+        if (ruleElem.classList.contains('e-disable')) {
+            rule.isLocked = false;
+            this.lockItems = this.lockItems.filter(lockItem => lockItem !== ruleElem.id);
+            ruleElem.classList.remove('e-disable');
+            this.disableRuleControls(target, ruleElem, false);
+            target.children[0].classList.add('e-unlock');
+            target.children[0].classList.remove('e-lock');
+            target.setAttribute('title', this.l10n.getConstant('LockRule'));
+        }
+        else {
+            rule.isLocked = true;
+            if (this.lockItems.indexOf(ruleElem.id) < 0) {
+                this.lockItems.splice(this.lockItems.length - 1, 0, ruleElem.id);
+            }
+            ruleElem.classList.add('e-disable');
+            this.disableRuleControls(target, ruleElem, true);
+            target.children[0].classList.add('e-lock');
+            target.children[0].classList.remove('e-unlock');
+            target.setAttribute('title', this.l10n.getConstant('UnlockRule'));
+        }
+    }
+    groupLock(target) {
+        const groupElem = closest(target, '.e-group-container');
+        let group = this.getGroup(groupElem.id.replace(this.element.id + '_', ''));
+        const isRoot = groupElem.id.indexOf('group0') > -1;
+        if (groupElem.classList.contains('e-disable')) {
+            if (isRoot) {
+                const newGroup = {};
+                newGroup.condition = group.condition;
+                newGroup.not = group.not;
+                newGroup.isLocked = false;
+                this.setProperties({ rule: newGroup }, true);
+            }
+            else {
+                group.isLocked = false;
+            }
+            this.lockItems = this.lockItems.filter(lockItem => lockItem !== groupElem.id);
+            groupElem.classList.remove('e-disable');
+            this.disableHeaderControls(target, groupElem, false);
+            target.children[0].classList.add('e-unlock');
+            target.children[0].classList.remove('e-lock');
+            target.setAttribute('title', this.l10n.getConstant('LockGroup'));
+            this.updateLockItems();
+        }
+        else {
+            if (isRoot) {
+                const newGroup = {};
+                newGroup.condition = group.condition;
+                newGroup.not = group.not;
+                newGroup.isLocked = true;
+                this.setProperties({ rule: newGroup }, true);
+            }
+            else {
+                group.isLocked = true;
+            }
+            if (this.lockItems.indexOf(groupElem.id) < 0) {
+                this.lockItems.splice(this.lockItems.length - 1, 0, groupElem.id);
+            }
+            groupElem.classList.add('e-disable');
+            this.disableHeaderControls(target, groupElem, true);
+            target.children[0].classList.add('e-lock');
+            target.children[0].classList.remove('e-unlock');
+            target.setAttribute('title', this.l10n.getConstant('UnlockGroup'));
+        }
+    }
+    updateLockItems() {
+        for (let i = 0; i < this.lockItems.length; i++) {
+            const idColl = this.lockItems[i].split('_');
+            if (idColl.length > 2) {
+                let ruleElem = this.element.querySelector('#' + this.lockItems[i]);
+                const target = ruleElem.querySelector('.e-lock-rule-btn');
+                ruleElem = closest(target, '.e-rule-container');
+                if (!ruleElem.classList.contains('e-disable')) {
+                    this.ruleLock(target);
+                }
+            }
+            else {
+                let groupElem = this.element.querySelector('#' + this.lockItems[i]);
+                const target = groupElem.querySelector('.e-lock-grp-btn');
+                groupElem = closest(target, '.e-group-container');
+                if (!groupElem.classList.contains('e-disable')) {
+                    this.groupLock(target);
+                }
+            }
+        }
+    }
+    disableHeaderControls(target, groupElem, isDisabled) {
+        const andElem = groupElem.querySelectorAll('.e-btngroup-and');
+        const orElem = groupElem.querySelectorAll('.e-btngroup-or');
+        const notElem = groupElem.querySelectorAll('.e-qb-toggle');
+        const addElem = groupElem.querySelectorAll('.e-add-btn');
+        const deleteGrpElem = groupElem.querySelectorAll('.e-deletegroup');
+        const lockElem = groupElem.querySelectorAll('.e-lock-grp-btn');
+        const cloneElem = groupElem.querySelectorAll('.e-clone-grp-btn');
+        const groupContElem = groupElem.querySelectorAll('.e-group-container');
+        for (let i = 0; i < andElem.length; i++) {
+            if (isDisabled) {
+                if (groupContElem[i] && groupContElem[i].classList.contains('e-disable')) {
+                    groupContElem[i].classList.add('e-disable');
+                }
+                andElem[i].disabled = true;
+                orElem[i].disabled = true;
+                addElem[i].disabled = true;
+                if (notElem[i]) {
+                    notElem[i].disabled = true;
+                }
+                if (deleteGrpElem[i]) {
+                    deleteGrpElem[i].disabled = true;
+                }
+                if (cloneElem[i]) {
+                    cloneElem[i].disabled = true;
+                }
+                andElem[i].parentElement.classList.add('e-disabled');
+                if (lockElem[i] !== target) {
+                    lockElem[i].disabled = true;
+                    lockElem[i].children[0].classList.remove('e-unlock');
+                    lockElem[i].children[0].classList.add('e-lock');
+                }
+            }
+            else {
+                if (groupContElem[i]) {
+                    groupContElem[i].classList.remove('e-disable');
+                }
+                andElem[i].disabled = false;
+                orElem[i].disabled = false;
+                addElem[i].disabled = false;
+                lockElem[i].disabled = false;
+                if (notElem[i]) {
+                    notElem[i].disabled = false;
+                }
+                if (deleteGrpElem[i]) {
+                    deleteGrpElem[i].disabled = false;
+                }
+                if (cloneElem[i]) {
+                    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');
+            }
+        }
+        this.disableRuleControls(target, groupElem, isDisabled);
+    }
+    disableRuleControls(target, groupElem, isDisabled) {
+        const ddlElement = groupElem.querySelectorAll('.e-control.e-dropdownlist');
+        const numericElement = groupElem.querySelectorAll('.e-control.e-numerictextbox');
+        const textElement = groupElem.querySelectorAll('.e-control.e-textbox');
+        const dateElement = groupElem.querySelectorAll('.e-control.e-datepicker');
+        const checkboxElement = groupElem.querySelectorAll('.e-control.e-checkbox');
+        const radioBtnElement = groupElem.querySelectorAll('.e-control.e-radio');
+        const multiSelectElement = groupElem.querySelectorAll('.e-control.e-multiselect');
+        const deleteElem = groupElem.querySelectorAll('.e-rule-delete');
+        const lockElem = groupElem.querySelectorAll('.e-lock-rule');
+        const cloneElem = groupElem.querySelectorAll('.e-clone-rule');
+        const ruleElem = groupElem.querySelectorAll('.e-rule-container');
+        for (let i = 0; i < deleteElem.length; i++) {
+            if (isDisabled) {
+                if (ruleElem[i] && ruleElem[i].classList.contains('e-disable')) {
+                    ruleElem[i].classList.add('e-disable');
+                }
+                deleteElem[i].disabled = true;
+                if (cloneElem[i]) {
+                    cloneElem[i].disabled = true;
+                }
+                if (lockElem[i] !== target) {
+                    lockElem[i].disabled = true;
+                    lockElem[i].children[0].classList.remove('e-unlock');
+                    lockElem[i].children[0].classList.add('e-lock');
+                }
+            }
+            else {
+                if (ruleElem[i]) {
+                    ruleElem[i].classList.remove('e-disable');
+                }
+                if (cloneElem[i]) {
+                    cloneElem[i].disabled = false;
+                }
+                deleteElem[i].disabled = false;
+                lockElem[i].disabled = false;
+                lockElem[i].children[0].classList.remove('e-lock');
+                lockElem[i].children[0].classList.add('e-unlock');
+            }
+        }
+        let dropDownObj;
+        let numericObj;
+        let textObj;
+        let dateObj;
+        let checkBoxObj;
+        let radioBtnObj;
+        let multiSelectObj;
+        for (let i = 0; i < ddlElement.length; i++) {
+            dropDownObj = getComponent(ddlElement[i], 'dropdownlist');
+            if (isDisabled) {
+                dropDownObj.enabled = false;
+            }
+            else {
+                dropDownObj.enabled = true;
+            }
+        }
+        for (let i = 0; i < numericElement.length; i++) {
+            numericObj = getComponent(numericElement[i], 'numerictextbox');
+            if (isDisabled) {
+                numericObj.enabled = false;
+            }
+            else {
+                numericObj.enabled = true;
+            }
+        }
+        for (let i = 0; i < textElement.length; i++) {
+            textObj = getComponent(textElement[i], 'textbox');
+            if (isDisabled) {
+                textObj.enabled = false;
+            }
+            else {
+                textObj.enabled = true;
+            }
+        }
+        for (let i = 0; i < dateElement.length; i++) {
+            dateObj = getComponent(dateElement[i], 'datepicker');
+            if (isDisabled) {
+                dateObj.enabled = false;
+            }
+            else {
+                dateObj.enabled = true;
+            }
+        }
+        for (let i = 0; i < checkboxElement.length; i++) {
+            checkBoxObj = getComponent(checkboxElement[i], 'checkbox');
+            if (isDisabled) {
+                checkBoxObj.disabled = true;
+            }
+            else {
+                checkBoxObj.disabled = false;
+            }
+        }
+        for (let i = 0; i < radioBtnElement.length; i++) {
+            radioBtnObj = getComponent(radioBtnElement[i], 'radio');
+            if (isDisabled) {
+                radioBtnObj.disabled = true;
+            }
+            else {
+                radioBtnObj.disabled = false;
+            }
+        }
+        for (let i = 0; i < multiSelectElement.length; i++) {
+            multiSelectObj = getComponent(multiSelectElement[i], 'multiselect');
+            if (isDisabled) {
+                multiSelectObj.enabled = false;
+            }
+            else {
+                multiSelectObj.enabled = true;
+            }
+        }
+    }
+};
+__decorate([
+    Event()
+], QueryBuilder.prototype, "created", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "actionBegin", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "beforeChange", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "change", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "dataBound", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "ruleChange", void 0);
+__decorate([
+    Complex({}, ShowButtons)
+], QueryBuilder.prototype, "showButtons", void 0);
+__decorate([
+    Property(false)
+], QueryBuilder.prototype, "summaryView", void 0);
+__decorate([
+    Property(false)
 ], QueryBuilder.prototype, "allowValidation", void 0);
 __decorate([
     Property('Default')
@@ -5171,6 +5934,15 @@ __decorate([
 __decorate([
     Property(false)
 ], QueryBuilder.prototype, "readonly", void 0);
+__decorate([
+    Property(true)
+], QueryBuilder.prototype, "addRuleToNewGroups", void 0);
+__decorate([
+    Property(false)
+], QueryBuilder.prototype, "autoSelectField", void 0);
+__decorate([
+    Property(true)
+], QueryBuilder.prototype, "autoSelectOperator", void 0);
 __decorate([
     Property('')
 ], QueryBuilder.prototype, "separator", void 0);
@@ -5181,6 +5953,692 @@ QueryBuilder = __decorate([
     NotifyPropertyChanges
 ], QueryBuilder);
 
+class QueryLibrary {
+    constructor(parent) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+    destroy() {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.removeEventListener();
+    }
+    addEventListener() {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.on('query-library', this.queryLibrary, this);
+        this.parent.on('destroyed', this.destroy, this);
+    }
+    removeEventListener() {
+        this.parent.off('query-library', this.queryLibrary);
+        this.parent.off('destroyed', this.destroy);
+    }
+    queryLibrary(args) {
+        switch (args.prop) {
+            case 'getMongoFromRules':
+                args.value['obj']['mongoQuery'] = this.getMongoFromRules(args.value['rule'], args.value['mongoQuery']);
+                break;
+            case 'mongoParser':
+                this.mongoParser(args.value['mongoQuery'], args.value['rule'], args.value['mongoLocale']);
+                break;
+            case 'getParameterSql':
+                args.value['obj']['sql'] = this.getParameterSql(args.value['rule']);
+                break;
+            case 'getNamedParameterSql':
+                args.value['obj']['sql'] = this.getNamedParameterSql(args.value['rule']);
+                break;
+            case 'convertParamSqlToSql':
+                args.value['obj']['sql'] = this.convertParamSqlToSql(args.value['sql']);
+                break;
+            case 'convertNamedParamSqlToSql':
+                args.value['obj']['sql'] = this.convertNamedParamSqlToSql(args.value['sql']);
+                break;
+        }
+    }
+    getMongoFromRules(rule, mongoQuery) {
+        mongoQuery = '{';
+        if (rule.condition === 'or') {
+            mongoQuery += '"$or":[';
+            mongoQuery = this.convertMongoQuery(rule.rules, mongoQuery) + ']';
+        }
+        else {
+            mongoQuery += '"$and":[';
+            mongoQuery = this.convertMongoQuery(rule.rules, mongoQuery) + ']';
+        }
+        mongoQuery += '}';
+        return mongoQuery;
+    }
+    getOperatorFromMongoOperator(operator) {
+        let operatorValue;
+        switch (operator) {
+            case '$ne':
+                operatorValue = 'notequal';
+                break;
+            case '$gt':
+                operatorValue = 'greaterthan';
+                break;
+            case '$gte':
+                operatorValue = 'greaterthanorequal';
+                break;
+            case '$lt':
+                operatorValue = 'lessthan';
+                break;
+            case '$lte':
+                operatorValue = 'lessthanorequal';
+                break;
+            case '$nin':
+                operatorValue = 'notin';
+                break;
+        }
+        return operatorValue;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    convertMongoQuery(rules, mongoQuery) {
+        let i = 0;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        rules.forEach((item) => {
+            i++;
+            mongoQuery += '{';
+            if (item.rules !== undefined) {
+                if (item.condition === 'or') {
+                    mongoQuery += ' "$or":[';
+                    mongoQuery = this.convertMongoQuery(item.rules, mongoQuery) + ']';
+                }
+                else {
+                    mongoQuery += ' "$and":[';
+                    mongoQuery = this.convertMongoQuery(item.rules, mongoQuery) + ']';
+                }
+            }
+            let itVal = item.type === 'string' && item.operator !== 'in' && item.operator !== 'notin' && item.value && item.value.trim() !== '' ? item.value.replace(/'/g, '\\') : '';
+            if (item.type === 'string' && (item.operator === 'in' || item.operator === 'notin') && item.value && item.value.length === 1) {
+                itVal = item.value[0].replace(/'/g, '\\');
+            }
+            const field = item.field ? item.field.substring(0) : '';
+            switch (item.operator) {
+                case 'contains':
+                    mongoQuery += '"' + field + '":{"$regex":"' + itVal + '"}';
+                    break;
+                case 'notcontains':
+                    mongoQuery += '"' + field + '":{"$not":{"$regex":"' + item.value + '"}}';
+                    break;
+                case 'startswith':
+                    mongoQuery += '"' + field + '":{"$regex":"^' + itVal + '"}';
+                    break;
+                case 'notstartswith':
+                    mongoQuery += '"' + field + '":{"$not":{"$regex":"^' + item.value + '"}}';
+                    break;
+                case 'endswith':
+                    mongoQuery += '"' + field + '":{"$regex":"' + itVal + '$"}';
+                    break;
+                case 'notendswith':
+                    mongoQuery += '"' + field + '":{"$not":{"$regex":"' + item.value + '$"}}';
+                    break;
+                case 'isnull':
+                    mongoQuery += '"' + field + '": null';
+                    break;
+                case 'isnotnull':
+                    mongoQuery += '"' + field + '":{"$ne": null}';
+                    break;
+                case 'isempty':
+                    mongoQuery += '"' + field + '": ""';
+                    break;
+                case 'isnotempty':
+                    mongoQuery += '"' + field + '":{"$ne": ""}';
+                    break;
+                case 'equal':
+                    if (item.type === 'string') {
+                        mongoQuery += '"' + field + '":"' + itVal + '"';
+                    }
+                    else if (item.type === 'date') {
+                        mongoQuery += '"' + field + '":"' + item.value + '"';
+                    }
+                    else if (item.type === 'boolean') {
+                        mongoQuery += '"' + field + '":' + item.value + '';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '":' + item.value + '';
+                    }
+                    break;
+                case 'notequal':
+                    if (item.type === 'string') {
+                        mongoQuery += '"' + field + '":{"$ne":"' + itVal + '"}';
+                    }
+                    else if (item.type === 'date') {
+                        mongoQuery += '"' + field + '":{"$ne":"' + item.value + '"}';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '":{"$ne":' + item.value + '}';
+                    }
+                    break;
+                case 'in':
+                    if (item.type === 'string') {
+                        if (item.value.length > 1) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            let s = item.value.map((x, j) => (j < item.value.length ? `"${x}"` : '')).toString();
+                            s = s.endsWith(',') ? s.substring(0, s.length - 1) : s;
+                            mongoQuery += '"' + field + '": { "$in": [' + s + ']}';
+                        }
+                        else {
+                            mongoQuery += '"' + field + '": { "$in": ["' + itVal + '"]}';
+                        }
+                    }
+                    else if (item.type === 'number') {
+                        if (item.value.length > 1) {
+                            mongoQuery += '"' + field + '": { "$in": [' + item.value.toString() + ']}';
+                        }
+                        else {
+                            mongoQuery += '"' + field + '": { "$in": [' + item.value + ']}';
+                        }
+                    }
+                    break;
+                case 'notin':
+                    if (item.type === 'string') {
+                        if (item.value.length > 1) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            let s = item.value.map((x, j) => (j < item.value.length ? `"${x}"` : '')).toString();
+                            s = s.endsWith(',') ? s.substring(0, s.length - 1) : s;
+                            mongoQuery += '"' + field + '": { "$nin": [' + s + ']}';
+                        }
+                        else {
+                            mongoQuery += '"' + field + '": { "$nin": ["' + itVal + '"]}';
+                        }
+                    }
+                    else if (item.type === 'number') {
+                        if (item.value.length > 1) {
+                            mongoQuery += '"' + field + '": { "$nin": [' + item.value.toString() + ']}';
+                        }
+                        else {
+                            mongoQuery += '"' + field + '": { "$nin": [' + item.value + ']}';
+                        }
+                    }
+                    break;
+                case 'greaterthan':
+                    if (item.type === 'number') {
+                        mongoQuery += '"' + field + '": { "$gt": ' + item.value + '}';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '": { "$gt": "' + item.value + '"}';
+                    }
+                    break;
+                case 'greaterthanorequal':
+                    if (item.type === 'number') {
+                        mongoQuery += '"' + field + '": { "$gte": ' + item.value + '}';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '": { "$gte": "' + item.value + '"}';
+                    }
+                    break;
+                case 'between':
+                    if (item.type === 'number') {
+                        mongoQuery += '"' + field + '": {"$gte":' + item.value[0] + ', "$lte":' + item.value[1] + '}';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '": {"$gte": "' + item.value[0] + '", "$lte": "' + item.value[1] + '"}';
+                    }
+                    break;
+                case 'notbetween':
+                    if (item.type === 'number') {
+                        mongoQuery += '"$or":[{"' + field + '": {"$lt":' + item.value[0] + '}}, {"' + field + '": {"$gt":' + item.value[1] + '}}]';
+                    }
+                    else {
+                        mongoQuery += '"$or":[{"' + field + '": {"$lt": "' + item.value[0] + '"}}, {"' + field + '": {"$gt": "' + item.value[1] + '"}}]';
+                    }
+                    break;
+                case 'lessthan':
+                    if (item.type === 'number') {
+                        mongoQuery += '"' + field + '": { "$lt": ' + item.value + '}';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '": { "$lt": "' + item.value + '"}';
+                    }
+                    break;
+                case 'lessthanorequal':
+                    if (item.type === 'number') {
+                        mongoQuery += '"' + field + '": { "$lte": ' + item.value + '}';
+                    }
+                    else {
+                        mongoQuery += '"' + field + '": { "$lte": "' + item.value + '"}';
+                    }
+                    break;
+            }
+            mongoQuery += '}';
+            if (rules.length !== i) {
+                mongoQuery += ',';
+            }
+        });
+        return mongoQuery;
+    }
+    mongoParser(mongoQuery, rule, mongoLocale) {
+        let mongoList;
+        if (Object.keys(mongoQuery).indexOf('$and') > -1) {
+            mongoList = mongoQuery['$and'];
+            rule.condition = 'and';
+        }
+        else if (Object.keys(mongoQuery).indexOf('$or') > -1) {
+            mongoList = mongoQuery['$or'];
+            rule.condition = 'or';
+        }
+        rule.rules = [];
+        this.mongoRecursion(mongoList, rule.rules, mongoLocale);
+    }
+    mongoRecursion(mongoList, rules, mongoLocale) {
+        let operatorValue;
+        let type;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let stringValue;
+        let key;
+        let betweenValue;
+        let condition;
+        let value;
+        let subRules;
+        let rule;
+        let keyObj;
+        let ruleValue;
+        for (let i = 0, len = mongoList.length; i < len; i++) {
+            const betweenOperatorArray = [];
+            let inOperatorArray = [];
+            condition = Object.keys(mongoList[i])[0];
+            value = mongoList[i][condition];
+            if (condition === '$and') {
+                if (this.parent.enableNotCondition) {
+                    subRules = { condition: condition.replace('$', ''), rules: [], not: false };
+                }
+                else {
+                    subRules = { condition: condition.replace('$', ''), rules: [] };
+                }
+                rules.push(subRules);
+                this.mongoRecursion(mongoList[i][condition], rules[rules.length - 1].rules, mongoLocale);
+            }
+            else if (condition === '$or') {
+                let notBetween;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
+                let innerObject = [];
+                let keys = [];
+                let firstKey = [];
+                let secondKey = [];
+                let innerKeys = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
+                let firstValue = [];
+                let secondValue = [];
+                let innerFirstValue = [];
+                let innerSecondValue = [];
+                if (Array.isArray(value) && value.length === 2) {
+                    keys = Object.keys(value);
+                    innerFirstValue = value[keys[0]];
+                    innerSecondValue = value[keys[1]];
+                    if (typeof innerFirstValue === 'object') {
+                        innerObject = Object.keys(innerFirstValue)[0];
+                        innerKeys = Object.keys(innerFirstValue[Object.keys(innerFirstValue)[0]]);
+                        firstKey = innerKeys[0];
+                        secondKey = Object.keys(innerSecondValue[Object.keys(innerSecondValue)[0]])[0];
+                        if (firstKey === '$lt' && secondKey === '$gt') {
+                            operatorValue = 'notbetween';
+                            // eslint-disable-next-line security/detect-object-injection
+                            firstValue = innerFirstValue[innerObject][firstKey];
+                            // eslint-disable-next-line security/detect-object-injection
+                            secondValue = innerSecondValue[innerObject][secondKey];
+                            type = typeof firstValue === 'number' ? 'number' : 'date';
+                            ruleValue = [firstValue, secondValue];
+                            rule = { field: innerObject, label: innerObject, value: ruleValue, operator: operatorValue, type: type };
+                            rules.push(rule);
+                            notBetween = true;
+                        }
+                    }
+                }
+                if (!notBetween) {
+                    if (this.parent.enableNotCondition) {
+                        subRules = { condition: condition.replace('$', ''), rules: [], not: false };
+                    }
+                    else {
+                        subRules = { condition: condition.replace('$', ''), rules: [] };
+                    }
+                    rules.push(subRules);
+                    this.mongoRecursion(mongoList[i][condition], rules[rules.length - 1].rules, mongoLocale);
+                }
+            }
+            else {
+                value = mongoList[i][condition];
+                if (value === null) { // isnull operator
+                    operatorValue = 'isnull';
+                }
+                if (typeof value === 'boolean') { // boolean type values
+                    operatorValue = 'equal';
+                    type = 'boolean';
+                    ruleValue = value;
+                }
+                if (typeof (value) === 'number') {
+                    ruleValue = value;
+                    type = 'number';
+                    operatorValue = 'equal';
+                }
+                else if (typeof (value) === 'object' && value !== null) {
+                    keyObj = Object.keys(value);
+                    for (let i = 0; i < keyObj.length; i++) {
+                        key = keyObj[i];
+                        stringValue = (value)[keyObj[i]];
+                        if (key === '$ne' && isNullOrUndefined(stringValue)) { // not null operator
+                            operatorValue = 'isnotnull';
+                            ruleValue = null;
+                        }
+                        if (key === '$ne' && typeof stringValue === 'boolean') { // not equal operator for boolean
+                            operatorValue = 'notequal';
+                            ruleValue = stringValue;
+                            type = 'boolean';
+                        }
+                        if (keyObj.length >= 2 && keyObj[i]) {
+                            if (typeof (stringValue) == 'object') { // between and notbetween operators
+                                operatorValue = 'notbetween';
+                                condition = Object.keys(stringValue)[0];
+                                betweenValue = [Object.keys(stringValue[condition])[0]];
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                betweenOperatorArray.push(stringValue[condition][betweenValue]);
+                                type = 'number';
+                            }
+                            else {
+                                operatorValue = 'between';
+                                betweenOperatorArray.push(stringValue);
+                            }
+                            if (typeof (stringValue) === 'number') {
+                                type = 'number';
+                            }
+                        }
+                        else if (typeof (stringValue) === 'object' && stringValue !== null) { // "in" and "notin" operator
+                            if (key === '$not' && Object.keys(stringValue)[0] === '$regex') {
+                                if (stringValue['$regex'].indexOf('^') > -1) {
+                                    operatorValue = 'notstartswith';
+                                    ruleValue = stringValue['$regex'].replace('^', '');
+                                }
+                                else if (stringValue['$regex'].indexOf('$') > -1) {
+                                    operatorValue = 'notendswith';
+                                    ruleValue = stringValue['$regex'].replace('$', '');
+                                }
+                                else {
+                                    operatorValue = 'notcontains';
+                                    ruleValue = stringValue['$regex'];
+                                }
+                            }
+                            else {
+                                operatorValue = key === '$in' ? 'in' : 'notin';
+                                inOperatorArray = stringValue;
+                                type = typeof (stringValue[0]) === 'number' ? 'number' : 'string';
+                            }
+                        }
+                        else if (typeof (stringValue) === 'number') { // number type values
+                            operatorValue = this.getOperatorFromMongoOperator(key);
+                            type = 'number';
+                            ruleValue = stringValue;
+                        }
+                        if (typeof (stringValue) === 'string') { // string type values
+                            if (key === '$regex') {
+                                operatorValue = 'contains';
+                                ruleValue = stringValue;
+                                type = 'string';
+                            }
+                            if (key === '$ne') { // not equal
+                                if (stringValue !== null && stringValue.length > 0 && isNaN(Date.parse(stringValue))) {
+                                    operatorValue = 'notequal';
+                                    ruleValue = stringValue;
+                                }
+                                else if (isNullOrUndefined(stringValue)) { // is not null operator
+                                    operatorValue = 'isnotnull';
+                                    ruleValue = stringValue;
+                                }
+                                else if (stringValue === '') { // is not empty operator
+                                    operatorValue = 'isnotempty';
+                                    ruleValue = stringValue;
+                                }
+                                type = 'string';
+                            }
+                            if (stringValue.indexOf('^') > -1) {
+                                operatorValue = 'startswith';
+                                ruleValue = stringValue.replace('^', '');
+                                type = 'string';
+                            }
+                            if (stringValue.indexOf('$') > -1 && key !== '$not') {
+                                operatorValue = 'endswith';
+                                ruleValue = stringValue.replace('$', '');
+                                type = 'string';
+                            }
+                            if (!isNaN(Date.parse(stringValue))) { // Date type operators
+                                operatorValue = operatorValue || this.getOperatorFromMongoOperator(key);
+                                type = 'date';
+                                ruleValue = stringValue;
+                            }
+                        }
+                    }
+                }
+                else if (value && typeof (value) === 'string' && !isNaN(Date.parse(value))) {
+                    operatorValue = 'equal';
+                    ruleValue = value;
+                    type = 'date';
+                }
+                else if (typeof (value) === 'string' && value !== '' && value !== 'true' && value !== 'false') {
+                    operatorValue = 'equal';
+                    ruleValue = value;
+                    type = 'string';
+                }
+                else if (typeof (value) === 'string' && value === '') {
+                    operatorValue = 'isempty';
+                    ruleValue = value;
+                    type = 'string';
+                }
+                if (betweenOperatorArray && betweenOperatorArray.length > 1) { // between opertor value
+                    rule = { field: condition, label: condition, value: betweenOperatorArray, operator: operatorValue, type: type };
+                }
+                else if (inOperatorArray && inOperatorArray.length > 1) { // in operator value
+                    rule = { field: condition, label: condition, value: inOperatorArray, operator: operatorValue, type: type };
+                }
+                else {
+                    rule = { field: condition, label: condition, value: ruleValue, operator: operatorValue, type: type };
+                }
+                rules.push(rule);
+                operatorValue = '';
+            }
+        }
+    }
+    convertParamSqlToSql(sql) {
+        const paramSql = sql.sql;
+        const paramValues = sql.params;
+        const parts = paramSql.split('?');
+        let normalSql = parts[0];
+        for (let i = 0; i < paramValues.length; i++) {
+            normalSql += (typeof (paramValues[i]) === 'string' ? `'${paramValues[i]}'` + parts[i + 1] : paramValues[i] + parts[i + 1]);
+        }
+        if (normalSql.length >= 2 && normalSql[0] === '(' && normalSql[normalSql.length - 1] === ')') {
+            normalSql = normalSql.slice(1, -1);
+        }
+        normalSql = normalSql.replace(/!= ''(?! =)/g, 'IS NOT EMPTY').replace(/= ''/g, 'IS EMPTY');
+        return normalSql;
+    }
+    convertNamedParamSqlToSql(sql) {
+        const namedParamSql = sql.sql;
+        const params = sql.params;
+        let normalSql = namedParamSql;
+        Object.keys(params).forEach((paramName) => {
+            const paramValue = params[paramName];
+            paramName = ':' + paramName;
+            normalSql = normalSql.replace(paramName, typeof (paramValue) === 'string' ? `'${paramValue}'` : String(paramValue));
+        });
+        if (normalSql.length >= 2 && normalSql[0] === '(' && normalSql[normalSql.length - 1] === ')') {
+            normalSql = normalSql.slice(1, -1);
+        }
+        normalSql = normalSql.replace(/!= ''(?! =)/g, 'IS NOT EMPTY').replace(/= ''/g, 'IS EMPTY');
+        return normalSql;
+    }
+    getParameterSql(qbrule) {
+        const qbRule = extend({}, qbrule, null, true);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value = this.updateRuleValue(qbRule, false);
+        return this.getParameterSQLVal(this.parent.getSqlFromRules(qbRule), value['ruleVal']);
+    }
+    getNamedParameterSql(qbrule) {
+        const qbRule = extend({}, qbrule, null, true);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value = this.updateRuleValue(qbRule, true);
+        return this.getNamedParameterSQLVal(this.parent.getSqlFromRules(qbRule), value['namedRuleVal']);
+    }
+    getParameterSQLVal(content, ruleValue) {
+        const replacedString = content.replace(/[%']/g, '');
+        return { sql: '(' + replacedString + ')', params: ruleValue };
+    }
+    getNamedParameterSQLVal(content, ruleValue) {
+        const replacedString = content.replace(/[%']/g, '');
+        return { sql: '(' + replacedString + ')', params: ruleValue };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateRuleValue(rule, isNamedParameter) {
+        const ruleVal = [];
+        const namedRuleVal = {};
+        const namedParameters = [];
+        return this.updateValue(rule.rules, isNamedParameter, ruleVal, namedRuleVal, namedParameters);
+    }
+    updateValue(rules, isNamedParameter, ruleVal, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    namedRuleVal, namedParameters) {
+        if (isNullOrUndefined(rules)) {
+            return { ruleVal, namedRuleVal };
+        }
+        for (let i = 0; i < rules.length; i++) {
+            if (rules[i].rules) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const value = this.updateValue(rules[i].rules, isNamedParameter, ruleVal, namedRuleVal, namedParameters);
+                ruleVal = value['ruleVal'];
+                namedRuleVal = value['namedRuleVal'];
+            }
+            else {
+                let namedField;
+                if (rules[i].value instanceof Array) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    for (let j = 0; j < (rules[i].value).length; j++) {
+                        if (isNamedParameter) {
+                            namedField = this.getNamedParameter(rules[i].field, namedParameters);
+                        }
+                        if (!isNullOrUndefined(rules[i].value[j])) {
+                            if (rules[i].type === 'string' || rules[i].type === 'date') {
+                                if (isNamedParameter) {
+                                    namedRuleVal[namedField] = rules[i].value[j];
+                                }
+                                else {
+                                    ruleVal.push(rules[i].value[j]);
+                                }
+                            }
+                            else {
+                                if (isNamedParameter) {
+                                    namedRuleVal[namedField] = rules[i].value[j];
+                                }
+                                else {
+                                    ruleVal.push(rules[i].value[j]);
+                                }
+                            }
+                        }
+                        if (isNamedParameter) {
+                            rules[i].value[j] = ':' + namedField;
+                        }
+                        else {
+                            rules[i].value[j] = '?';
+                        }
+                    }
+                }
+                else {
+                    if (isNamedParameter) {
+                        namedField = this.getNamedParameter(rules[i].field, namedParameters);
+                    }
+                    if (rules[i].operator.indexOf('null') < 1) {
+                        if (rules[i].type !== 'string' || (rules[i].type === 'string' && (rules[i].value !== '' || rules[i].value === 0))) {
+                            if (rules[i].type === 'string' || rules[i].type === 'date') {
+                                if (rules[i].operator.indexOf('empty') < 1) {
+                                    let value = rules[i].value.toString();
+                                    switch (rules[i].operator) {
+                                        case 'startswith':
+                                        case 'notstartswith':
+                                            value = value + '%';
+                                            break;
+                                        case 'endswith':
+                                        case 'notendswith':
+                                            value = '%' + value;
+                                            break;
+                                        case 'contains':
+                                        case 'notcontains':
+                                            value = '%' + value + '%';
+                                            break;
+                                    }
+                                    if (isNamedParameter) {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        namedRuleVal[namedField] = value;
+                                    }
+                                    else {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        ruleVal.push(value);
+                                    }
+                                }
+                                else {
+                                    if (isNamedParameter) {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        namedRuleVal[namedField] = '';
+                                    }
+                                    else {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        ruleVal.push('');
+                                    }
+                                    if (rules[i].operator === 'isempty') {
+                                        rules[i].operator = 'equal';
+                                    }
+                                    else {
+                                        rules[i].operator = 'notequal';
+                                    }
+                                }
+                            }
+                            else {
+                                if (!isNullOrUndefined(rules[i].value)) {
+                                    if (isNamedParameter) {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        namedRuleVal[namedField] = rules[i].value;
+                                    }
+                                    else {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        ruleVal.push(rules[i].value);
+                                    }
+                                }
+                            }
+                            if (isNamedParameter) {
+                                rules[i].value = ':' + namedField;
+                            }
+                            else {
+                                rules[i].value = '?';
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return { ruleVal, namedRuleVal };
+    }
+    getNamedParameter(field, namedParameters) {
+        let newField = null;
+        if (namedParameters.length > 0) {
+            for (let i = namedParameters.length - 1; i >= 0; i--) {
+                const currField = namedParameters[i];
+                if (currField.indexOf(field) > -1) {
+                    const idx = parseInt(currField.split('_')[1], 10) + 1;
+                    newField = field + '_' + idx;
+                    namedParameters.push(newField);
+                    break;
+                }
+            }
+        }
+        if (!newField) {
+            newField = field + '_1';
+            namedParameters.push(newField);
+        }
+        return newField;
+    }
+    getModuleName() {
+        return 'query-library';
+    }
+}
+
 /**
  * QueryBuilder modules
  */
@@ -5189,5 +6647,5 @@ QueryBuilder = __decorate([
  * QueryBuilder all modules
  */
 
-export { Columns, Rule, Value, ShowButtons, QueryBuilder };
+export { Columns, Rule, Value, ShowButtons, QueryBuilder, QueryLibrary };
 //# sourceMappingURL=ej2-querybuilder.es2015.js.map