@syncfusion/ej2-querybuilder 31.1.17 → 31.2.2

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

@@ -161,6 +161,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.cloneRuleBtnClick = false;
         this.isValueEmpty = false;
         this.isPropChange = false;
+        this.isRuleClicked = false;
         MultiSelect.Inject(CheckBoxSelection);
     }
     getPersistData() {
@@ -516,6 +517,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 case target.className.indexOf('e-clone-rule-btn') > -1:
                     this.actionButton = target;
                     this.cloneRuleBtnClick = true;
+                    this.isRuleClicked = true;
                     this.ruleClone(target);
                     break;
                 case target.className.indexOf('e-lock-rule-btn') > -1:
@@ -529,6 +531,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 case target.className.indexOf('e-clone-grp-btn') > -1:
                     this.actionButton = target;
                     this.cloneGrpBtnClick = true;
+                    this.isRuleClicked = true;
                     this.groupClone(closest(target, '.e-group-container'));
                     break;
                 case target.className.indexOf('e-deletegroup') > -1:
@@ -688,9 +691,11 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
         }
         else if (event.element.children[0].className.indexOf('e-addrule') > -1) {
+            this.isRuleClicked = true;
             this.addRuleElement(closest(target, '.e-group-container'), {});
         }
         else if (event.element.children[0].className.indexOf('e-addgroup') > -1) {
+            this.isRuleClicked = true;
             this.addGroupElement(true, closest(target, '.e-group-container'), '', true);
         }
     }
@@ -889,6 +894,10 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (!this.isImportRules) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId, this.enableSeparateConnector ? true : null);
             }
+            if (this.rule.condition === '' && (this.isRuleClicked || this.rule.rules.length > 1)) {
+                this.rule.condition = 'and';
+            }
+            this.isRuleClicked = false;
             const ruleCount = this.rule.rules.length;
             if (!column || (column && !column.ruleTemplate) || !rule.field) {
                 if (ruleCount > 20) {
@@ -2989,26 +2998,45 @@ let QueryBuilder = class QueryBuilder extends Component {
         const ddlObj = this.fieldMode === 'DropdownTree' ? getComponent(filterElem, 'dropdowntree')
             : getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
         const 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');
+        }
+        const onComplete = () => {
+            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) {
             const args = {
                 rule: rule, ruleID: container.id, operator: tempRule.operator, field: column.field,
                 requestType: 'value-template-create'
             };
             this.trigger('actionBegin', args);
+            onComplete();
         }
         else {
             const template = itemData.template;
+            const templateArgs = {
+                elements: tempElements.length > 1 ? tempElements : tempElements[0],
+                values: rule.value,
+                operator: tempRule.operator,
+                field: column.field,
+                dataSource: column.values,
+                onComplete: onComplete
+            };
+            let writeResult;
             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(() => onComplete());
+            }
+            else {
+                setTimeout(() => onComplete(), 100);
             }
         }
     }
@@ -4009,6 +4037,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
         classList(this.element, [], ['e-rtl', 'e-responsive', 'e-device']);
         this.isDestroy = false;
+        super.destroy();
     }
     /**
      * Adds single or multiple rules.
@@ -7355,7 +7384,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             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((elem, i) => {
             if (isDisabled) {
@@ -7392,11 +7422,15 @@ let QueryBuilder = class QueryBuilder extends Component {
         disableComponents(elements.checkbox, (elem) => getComponent(elem, 'checkbox'), isDisabled);
         disableComponents(elements.radio, (elem) => getComponent(elem, 'radio'), isDisabled);
         disableComponents(elements.multiSelect, (elem) => getComponent(elem, 'multiselect'), isDisabled);
+        disableComponents(elements.ddTree, (elem) => getComponent(elem, 'dropdowntree'), isDisabled);
     }
 };
 __decorate([
     Event()
 ], QueryBuilder.prototype, "created", void 0);
+__decorate([
+    Event()
+], QueryBuilder.prototype, "destroyed", void 0);
 __decorate([
     Event()
 ], QueryBuilder.prototype, "actionBegin", void 0);