@syncfusion/ej2-querybuilder 30.2.6 → 31.1.22

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.2.6
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.1.22
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-querybuilder",
-  "version": "30.2.6",
+  "version": "31.1.22",
   "description": "Essential JS 2 QueryBuilder",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~30.2.4",
-    "@syncfusion/ej2-buttons": "~30.2.4",
-    "@syncfusion/ej2-calendars": "~30.2.4",
-    "@syncfusion/ej2-dropdowns": "~30.2.6",
-    "@syncfusion/ej2-inputs": "~30.2.6",
-    "@syncfusion/ej2-splitbuttons": "~30.2.4"
+    "@syncfusion/ej2-base": "~31.1.22",
+    "@syncfusion/ej2-buttons": "~31.1.21",
+    "@syncfusion/ej2-calendars": "~31.1.22",
+    "@syncfusion/ej2-dropdowns": "~31.1.22",
+    "@syncfusion/ej2-inputs": "~31.1.22",
+    "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
   "devDependencies": {},
   "keywords": [

package/src/query-builder/query-builder.d.ts

@@ -627,6 +627,13 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private appendRuleElem;
     private addRuleElement;
     private addRuleSuccessCallBack;
+    private processAdjacentElements;
+    private handleOrphanedRuleElement;
+    private processConnectorElements;
+    private handleOrphanedConnectorElement;
+    private applyFieldComponent;
+    private applyDropdownListComponent;
+    private applyDropdownTreeComponent;
     private dropdownTreeFiltering;
     private changeDataSource;
     private nestedChildFilter;

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

@@ -891,7 +891,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.addRuleSuccessCallBack = function (args, trgt, rule, col, act, pId, isRlTmp) {
-        var height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
+        var _this = this;
+        var isVertical = this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical';
+        var height = isVertical ? '250px' : '200px';
         var ruleID;
         var column = (rule && rule.field) ? this.getColumn(rule.field) : col ? col : this.columns[0];
         var operators;
@@ -902,12 +904,32 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (column && column.ruleTemplate && rule.field) {
                 this.selectedColumn = column;
                 operators = this.selectedColumn.operators;
-                newRule = { 'label': column.label, 'field': column.field, 'type': column.type, 'operator': operators[0].value };
-                var passedRule = Object.keys(rule).length ? rule : newRule;
-                ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field', passedRule);
-                var args_1 = { requestType: 'template-create', action: 'insert-rule', ruleID: ruleElem.id,
-                    fields: this.fields, rule: passedRule };
-                this.trigger('actionBegin', args_1);
+                newRule = {
+                    'label': column.label,
+                    'field': column.field,
+                    'type': column.type,
+                    'operator': operators[0].value
+                };
+                var passedRule_1 = Object.keys(rule).length ? rule : newRule;
+                ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field', passedRule_1);
+                var actionArgs = {
+                    requestType: 'template-initialize',
+                    ruleID: ruleElem.id,
+                    action: 'insert-rule',
+                    fields: this.fields,
+                    rule: passedRule_1
+                };
+                this.trigger('actionBegin', actionArgs);
+                setTimeout(function () {
+                    var createArgs = {
+                        requestType: 'template-create',
+                        ruleID: ruleElem.id,
+                        action: 'insert-rule',
+                        fields: _this.fields,
+                        rule: passedRule_1
+                    };
+                    _this.trigger('actionBegin', createArgs);
+                }, 0);
             }
             else {
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field');
@@ -922,139 +944,30 @@ var QueryBuilder = /** @class */ (function (_super) {
                     addClass([element], 'e-round');
                     addClass([element], 'e-icon-btn');
                     element.setAttribute('title', this.l10n.getConstant('DeleteRule'));
-                    var spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
-                    ruleElem.querySelector('.e-rule-delete').appendChild(spanElement);
+                    var spanElement = this.createElement('span', {
+                        attrs: { class: 'e-btn-icon e-icons e-delete-icon' }
+                    });
+                    element.appendChild(spanElement);
                 }
                 if (!this.showButtons.ruleDelete) {
                     element.classList.add('e-button-hide');
                 }
             }
-            if (this.displayMode === 'Vertical' || this.element.className.indexOf('e-device') > -1) {
-                ruleElem.className = 'e-rule-container e-vertical-mode';
-            }
-            else {
-                ruleElem.className = 'e-rule-container e-horizontal-mode';
-            }
+            ruleElem.className = 'e-rule-container ' + (isVertical ? 'e-vertical-mode' : 'e-horizontal-mode');
             var previousRuleElem = ruleElem.previousElementSibling;
-            if (this.enableSeparateConnector) {
-                var prevRule = void 0;
-                var ruleContainer = void 0;
-                if (previousRuleElem && previousRuleElem.classList.contains('e-group-container')) {
-                    ruleContainer = previousRuleElem.querySelectorAll('.e-rule-container');
-                    previousRuleElem = ruleContainer[ruleContainer.length - 1];
-                }
-                if (previousRuleElem && previousRuleElem.classList.contains('e-rule-container')) {
-                    prevRule = this.getRule(previousRuleElem);
-                }
-                if (this.headerTemplate && previousRuleElem && prevRule) {
-                    this.headerTemplateFn(previousRuleElem, false, prevRule.condition, prevRule, previousRuleElem.id);
-                }
-                else if (isNullOrUndefined(previousRuleElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
-                    var group = ruleElem.closest('.e-group-container');
-                    if (group && group.previousElementSibling) {
-                        var prevElem = group.previousElementSibling;
-                        var prevRuleContainer = prevElem.querySelectorAll('.e-rule-container');
-                        if (prevElem.classList.contains('e-group-container')) {
-                            prevElem = prevRuleContainer[prevRuleContainer.length - 1];
-                        }
-                        if (prevElem.classList.contains('e-rule-container')) {
-                            var prevRule_1 = this.getRule(prevElem);
-                            this.headerTemplateFn(prevElem, false, prevRule_1.condition, prevRule_1, prevElem.id, true);
-                        }
-                    }
-                    else {
-                        this.headerTemplateFn(ruleElem, false, rule.condition, rule, ruleElem.id, true);
-                    }
-                }
-            }
-            else {
-                if (previousRuleElem && previousRuleElem.className.indexOf('e-rule-container') > -1) {
-                    if (ruleElem.className.indexOf('e-joined-rule') < 0) {
-                        ruleElem.className += ' e-joined-rule';
-                    }
-                    if (previousRuleElem.className.indexOf('e-prev-joined-rule') < 0) {
-                        previousRuleElem.className += ' e-prev-joined-rule';
-                    }
-                }
-            }
-            if (previousRuleElem && previousRuleElem.className.indexOf('e-group-container') > -1 &&
-                ruleElem.className.indexOf('e-separate-rule') < 0) {
-                ruleElem.className += ' e-separate-rule';
-            }
+            this.processAdjacentElements(ruleElem, previousRuleElem, rule);
             if (!this.isImportRules) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId, this.enableSeparateConnector ? true : null);
             }
+            var ruleCount = this.rule.rules.length;
             if (!column || (column && !column.ruleTemplate) || !rule.field) {
-                if (this.fieldMode === 'Default') {
-                    var ddlField = void 0;
-                    var ddlValue = void 0;
-                    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;
-                    }
-                    ddlField = {
-                        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'
-                    };
-                    if (this.fieldModel) {
-                        ddlField = __assign({}, ddlField, this.fieldModel);
-                    }
-                    dropDownList = new DropDownList(ddlField);
-                    dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
-                    var ddlVal = void 0;
-                    if (this.separator && rule.field) {
-                        ddlVal = this.GetRootColumnName(rule.field);
-                    }
-                    else {
-                        ddlVal = this.isImportRules ? this.GetRootColumnName(rule.field) :
-                            dropDownList.value;
-                    }
-                    this.selectedColumn = dropDownList.getDataByValue(ddlVal);
-                    if (Object.keys(rule).length) {
-                        this.changeRule(rule, {
-                            element: dropDownList.element, itemData: this.selectedColumn
-                        });
-                    }
+                if (ruleCount > 20) {
+                    setTimeout(function () {
+                        _this.applyFieldComponent(ruleElem, rule, height);
+                    }, 0);
                 }
                 else {
-                    var ddlField = void 0;
-                    var ddlValue = this.isImportRules ? rule.field : rule.field;
-                    this.dummyDropdownTreeDs = extend([], this.columns, [], true);
-                    this.updateDropdowntreeDS(this.dummyDropdownTreeDs);
-                    ddlField = {
-                        fields: { dataSource: this.dummyDropdownTreeDs,
-                            value: 'field', text: 'label', child: 'columns', expanded: 'expanded', selectable: 'selectable' },
-                        placeholder: this.l10n.getConstant('SelectField'), showClearButton: false,
-                        popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
-                        change: this.changeField.bind(this), value: !isNullOrUndefined(ddlValue) ? [ddlValue] : null,
-                        open: this.popupOpen.bind(this, false), treeSettings: { expandOn: 'Click' },
-                        cssClass: 'e-qb-ddt', filtering: this.dropdownTreeFiltering.bind(this), close: this.dropdownTreeClose.bind(this)
-                    };
-                    if (this.fieldModel) {
-                        ddlField = __assign({}, ddlField, this.fieldModel);
-                    }
-                    var dropdowntree = new DropDownTree(ddlField);
-                    dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
-                    if (!isNullOrUndefined(dropdowntree.value)) {
-                        var value = this.getLabelFromColumn(dropdowntree.value[0]);
-                        dropdowntree.element.value = value;
-                    }
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var ddlVal = !isNullOrUndefined(rule.field) ?
-                        this.GetRootColumnName(rule.field) : dropdowntree.value;
-                    this.selectedColumn = this.getColumn(ddlVal);
-                    if (Object.keys(rule).length) {
-                        this.changeRule(rule, {
-                            element: dropdowntree.element, itemData: this.selectedColumn
-                        });
-                    }
+                    this.applyFieldComponent(ruleElem, rule, height);
                 }
             }
             ruleID = ruleElem.id.replace(this.element.id + '_', '');
@@ -1063,46 +976,204 @@ var QueryBuilder = /** @class */ (function (_super) {
                 this.ruleLock(lockRuleTarget);
             }
             if (!this.isImportRules && !this.prvtEvtTgrDaD) {
-                this.trigger('change', { groupID: trgt.id.replace(this.element.id + '_', ''), ruleID: ruleID, type: 'insertRule' });
+                this.trigger('change', {
+                    groupID: trgt.id.replace(this.element.id + '_', ''),
+                    ruleID: ruleID,
+                    type: 'insertRule'
+                });
             }
         }
         if (this.enableSeparateConnector && isNullOrUndefined(rule.condition) && ruleID) {
             rule = this.getRule(ruleID);
         }
         if (this.enableSeparateConnector) {
-            var prevElem = ruleElem.previousElementSibling;
-            var ruleContainer = void 0;
-            while (prevElem && !prevElem.classList.contains('e-rule-container')) {
-                if (prevElem.classList.contains('e-group-container')) {
-                    ruleContainer = prevElem.querySelectorAll('.e-rule-container');
-                    prevElem = ruleContainer[ruleContainer.length - 1];
-                    break;
+            this.processConnectorElements(ruleElem);
+        }
+    };
+    QueryBuilder.prototype.processAdjacentElements = function (ruleElem, previousRuleElem, rule) {
+        if (this.enableSeparateConnector) {
+            if (previousRuleElem && previousRuleElem.classList.contains('e-group-container')) {
+                var ruleContainer = previousRuleElem.querySelectorAll('.e-rule-container');
+                previousRuleElem = ruleContainer[ruleContainer.length - 1];
+            }
+            if (previousRuleElem && previousRuleElem.classList.contains('e-rule-container')) {
+                var prevRule = this.getRule(previousRuleElem);
+                if (this.headerTemplate) {
+                    this.headerTemplateFn(previousRuleElem, false, prevRule.condition, prevRule, previousRuleElem.id);
                 }
-                prevElem = prevElem.previousElementSibling;
             }
-            if (this.headerTemplate && prevElem) {
+            else if (isNullOrUndefined(previousRuleElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+                this.handleOrphanedRuleElement(ruleElem, rule);
+            }
+        }
+        else {
+            if (previousRuleElem && previousRuleElem.className.indexOf('e-rule-container') > -1) {
+                ruleElem.classList.add('e-joined-rule');
+                previousRuleElem.classList.add('e-prev-joined-rule');
+            }
+        }
+        if (previousRuleElem && previousRuleElem.className.indexOf('e-group-container') > -1 &&
+            ruleElem.className.indexOf('e-separate-rule') < 0) {
+            ruleElem.className += ' e-separate-rule';
+        }
+    };
+    QueryBuilder.prototype.handleOrphanedRuleElement = function (ruleElem, rule) {
+        var group = ruleElem.closest('.e-group-container');
+        if (group && group.previousElementSibling) {
+            var prevElem = group.previousElementSibling;
+            var prevRuleContainer = prevElem.querySelectorAll('.e-rule-container');
+            if (prevElem.classList.contains('e-group-container')) {
+                prevElem = prevRuleContainer[prevRuleContainer.length - 1];
+            }
+            if (prevElem.classList.contains('e-rule-container')) {
                 var prevRule = this.getRule(prevElem);
-                var args_2 = { requestType: 'rule-template-create', ruleID: prevElem.id, condition: prevRule.condition,
-                    notCondition: this.enableNotCondition ? true : undefined };
-                this.trigger('actionBegin', args_2);
+                this.headerTemplateFn(prevElem, false, prevRule.condition, prevRule, prevElem.id, true);
             }
-            else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
-                var group = ruleElem.closest('.e-group-container');
-                if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
-                    var prevElem_1 = group.previousElementSibling.previousElementSibling;
-                    if (prevElem_1.classList.contains('e-group-container')) {
-                        var ruleContainer_1 = prevElem_1.querySelectorAll('.e-rule-container');
-                        prevElem_1 = ruleContainer_1[ruleContainer_1.length - 1];
-                    }
-                    if (prevElem_1.classList.contains('e-rule-container')) {
-                        var prevRule = this.getRule(prevElem_1);
-                        var args_3 = { requestType: 'rule-template-create', ruleID: prevElem_1.id,
-                            condition: prevRule.condition, notCondition: this.enableNotCondition ? true : undefined };
-                        this.trigger('actionBegin', args_3);
-                    }
-                }
+        }
+        else {
+            this.headerTemplateFn(ruleElem, false, rule.condition, rule, ruleElem.id, true);
+        }
+    };
+    QueryBuilder.prototype.processConnectorElements = function (ruleElem) {
+        var prevElem = ruleElem.previousElementSibling;
+        var ruleContainer;
+        while (prevElem && !prevElem.classList.contains('e-rule-container')) {
+            if (prevElem.classList.contains('e-group-container')) {
+                ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                prevElem = ruleContainer[ruleContainer.length - 1];
+                break;
+            }
+            prevElem = prevElem.previousElementSibling;
+        }
+        if (this.headerTemplate && prevElem) {
+            var prevRule = this.getRule(prevElem);
+            var args = {
+                requestType: 'rule-template-create',
+                ruleID: prevElem.id,
+                condition: prevRule.condition,
+                notCondition: this.enableNotCondition ? true : undefined
+            };
+            this.trigger('actionBegin', args);
+        }
+        else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+            this.handleOrphanedConnectorElement(ruleElem);
+        }
+        this.setMultiConnector(ruleElem);
+    };
+    QueryBuilder.prototype.handleOrphanedConnectorElement = function (ruleElem) {
+        var group = ruleElem.closest('.e-group-container');
+        if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
+            var prevElem = group.previousElementSibling.previousElementSibling;
+            if (prevElem.classList.contains('e-group-container')) {
+                var ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                prevElem = ruleContainer[ruleContainer.length - 1];
+            }
+            if (prevElem.classList.contains('e-rule-container')) {
+                var prevRule = this.getRule(prevElem);
+                var args = {
+                    requestType: 'rule-template-create',
+                    ruleID: prevElem.id,
+                    condition: prevRule.condition,
+                    notCondition: this.enableNotCondition ? true : undefined
+                };
+                this.trigger('actionBegin', args);
             }
-            this.setMultiConnector(ruleElem);
+        }
+    };
+    QueryBuilder.prototype.applyFieldComponent = function (ruleElem, rule, height) {
+        if (this.fieldMode === 'Default') {
+            this.applyDropdownListComponent(ruleElem, rule, height);
+        }
+        else {
+            this.applyDropdownTreeComponent(ruleElem, rule, height);
+        }
+    };
+    QueryBuilder.prototype.applyDropdownListComponent = function (ruleElem, rule, height) {
+        var ddlField;
+        var ddlValue;
+        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;
+        }
+        ddlField = {
+            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'
+        };
+        if (this.fieldModel) {
+            ddlField = __assign({}, ddlField, this.fieldModel);
+        }
+        var dropDownList = new DropDownList(ddlField);
+        dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
+        var ddlVal;
+        if (this.separator && rule.field) {
+            ddlVal = this.GetRootColumnName(rule.field);
+        }
+        else {
+            ddlVal = this.isImportRules ? this.GetRootColumnName(rule.field) : dropDownList.value;
+        }
+        this.selectedColumn = dropDownList.getDataByValue(ddlVal);
+        if (Object.keys(rule).length) {
+            this.changeRule(rule, {
+                element: dropDownList.element,
+                itemData: this.selectedColumn
+            });
+        }
+    };
+    QueryBuilder.prototype.applyDropdownTreeComponent = function (ruleElem, rule, height) {
+        var ddlField;
+        var ddlValue = this.isImportRules ? rule.field : rule.field;
+        this.dummyDropdownTreeDs = extend([], this.columns, [], true);
+        this.updateDropdowntreeDS(this.dummyDropdownTreeDs);
+        ddlField = {
+            fields: {
+                dataSource: this.dummyDropdownTreeDs,
+                value: 'field',
+                text: 'label',
+                child: 'columns',
+                expanded: 'expanded',
+                selectable: 'selectable'
+            },
+            placeholder: this.l10n.getConstant('SelectField'),
+            showClearButton: false,
+            popupHeight: ((this.columns.length > 5) ? height : 'auto'),
+            changeOnBlur: false,
+            change: this.changeField.bind(this),
+            value: !isNullOrUndefined(ddlValue) ? [ddlValue] : null,
+            open: this.popupOpen.bind(this, false),
+            treeSettings: { expandOn: 'Click' },
+            cssClass: 'e-qb-ddt',
+            filtering: this.dropdownTreeFiltering.bind(this),
+            close: this.dropdownTreeClose.bind(this)
+        };
+        if (this.fieldModel) {
+            ddlField = __assign({}, ddlField, this.fieldModel);
+        }
+        var dropdowntree = new DropDownTree(ddlField);
+        dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
+        if (!isNullOrUndefined(dropdowntree.value)) {
+            var value = this.getLabelFromColumn(dropdowntree.value[0]);
+            dropdowntree.element.value = value;
+        }
+        var ddlVal = !isNullOrUndefined(rule.field) ?
+            this.GetRootColumnName(rule.field) : dropdowntree.value;
+        this.selectedColumn = this.getColumn(ddlVal);
+        if (Object.keys(rule).length) {
+            this.changeRule(rule, {
+                element: dropdowntree.element,
+                itemData: this.selectedColumn
+            });
         }
     };
     QueryBuilder.prototype.dropdownTreeFiltering = function (args) {
@@ -1803,11 +1874,11 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             this.updatedRule = null;
             if (this.headerTemplate) {
-                var args_4 = {
+                var args_1 = {
                     requestType: 'header-template-create', ruleID: groupElem.id, condition: condition,
                     notCondition: this.enableNotCondition ? not : undefined
                 };
-                this.trigger('actionBegin', args_4);
+                this.trigger('actionBegin', args_1);
             }
             else {
                 if (this.enableSeparateConnector) {
@@ -3001,26 +3072,45 @@ var QueryBuilder = /** @class */ (function (_super) {
         var ddlObj = this.fieldMode === 'DropdownTree' ? getComponent(filterElem, 'dropdowntree')
             : getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
         var column = this.fieldMode === 'DropdownTree' ? this.getColumn(ddlObj.value[0]) : this.getColumn(ddlObj.value);
+        if (target && target.nextElementSibling) {
+            target.nextElementSibling.style.position = 'relative';
+            target.nextElementSibling.classList.add('e-querybuilder-spinner');
+        }
+        var onComplete = function () {
+            if (target && target.nextElementSibling && target.nextElementSibling.classList.contains('e-querybuilder-spinner')) {
+                target.nextElementSibling.classList.remove('e-querybuilder-spinner');
+            }
+        };
         if (typeof itemData.template === 'string' || itemData.template.write === undefined) {
             var args = {
                 rule: rule, ruleID: container.id, operator: tempRule.operator, field: column.field,
                 requestType: 'value-template-create'
             };
             this.trigger('actionBegin', args);
+            onComplete();
         }
         else {
             var template = itemData.template;
+            var templateArgs = {
+                elements: tempElements.length > 1 ? tempElements : tempElements[0],
+                values: rule.value,
+                operator: tempRule.operator,
+                field: column.field,
+                dataSource: column.values,
+                onComplete: onComplete
+            };
+            var writeResult = void 0;
             if (typeof template.write === 'string') {
-                getValue(template.write, window)({
-                    elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
-                    operator: tempRule.operator, field: column.field, dataSource: column.values
-                });
+                writeResult = getValue(template.write, window)(templateArgs);
             }
             else if (typeof itemData.template !== 'function') {
-                itemData.template.write({
-                    elements: tempElements.length > 1 ? tempElements : tempElements[0],
-                    values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values
-                });
+                writeResult = itemData.template.write(templateArgs);
+            }
+            if (writeResult && typeof writeResult.then === 'function') {
+                writeResult.then(function () { return onComplete(); });
+            }
+            else {
+                setTimeout(function () { return onComplete(); }, 100);
             }
         }
     };
@@ -7377,7 +7467,8 @@ var QueryBuilder = /** @class */ (function (_super) {
             deleteElem: groupElem.querySelectorAll('.e-rule-delete'),
             lockElem: groupElem.querySelectorAll('.e-lock-rule'),
             cloneElem: groupElem.querySelectorAll('.e-clone-rule'),
-            ruleElem: groupElem.querySelectorAll('.e-rule-container')
+            ruleElem: groupElem.querySelectorAll('.e-rule-container'),
+            ddTree: groupElem.querySelectorAll('.e-control.e-dropdowntree')
         };
         elements.deleteElem.forEach(function (elem, i) {
             if (isDisabled) {
@@ -7414,6 +7505,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         disableComponents(elements.checkbox, function (elem) { return getComponent(elem, 'checkbox'); }, isDisabled);
         disableComponents(elements.radio, function (elem) { return getComponent(elem, 'radio'); }, isDisabled);
         disableComponents(elements.multiSelect, function (elem) { return getComponent(elem, 'multiselect'); }, isDisabled);
+        disableComponents(elements.ddTree, function (elem) { return getComponent(elem, 'dropdowntree'); }, isDisabled);
     };
     __decorate([
         Event()

package/styles/bds-lite.css

@@ -834,4 +834,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #d92c20;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-sf-utility-primary-light);
+  border-top: 2px solid var(--color-sf-brand-primary);
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
 }

package/styles/bds.css

@@ -836,6 +836,42 @@
   color: #d92c20;
 }
 
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-sf-utility-primary-light);
+  border-top: 2px solid var(--color-sf-brand-primary);
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {