@syncfusion/ej2-querybuilder 20.4.38 → 20.4.42

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

@@ -153,7 +153,10 @@ let QueryBuilder = class QueryBuilder extends Component {
         let bodyElem = this.element.querySelector('.e-group-body');
         const inputElement = this.element.querySelectorAll('input.e-control');
         for (let i = 0, len = inputElement.length; i < len; i++) {
-            if (inputElement[i].parentElement.className.indexOf('e-tooltip') > -1) {
+            if (inputElement[i].className.indexOf('e-tooltip') > -1) {
+                getComponent(inputElement[i], 'tooltip').destroy();
+            }
+            else if (inputElement[i].parentElement.className.indexOf('e-tooltip') > -1) {
                 getComponent(inputElement[i].parentElement, 'tooltip').destroy();
             }
         }
@@ -752,23 +755,25 @@ let QueryBuilder = class QueryBuilder extends Component {
             let tempElem;
             let rule;
             const ruleElemCln = this.element.querySelectorAll('.e-rule-container');
-            let validateRule;
             for (i = 0, len = ruleElemCln.length; i < len; i++) {
+                let validateRule;
                 groupElem = closest(ruleElemCln[i], '.e-group-container');
                 rule = this.getParentGroup(groupElem);
                 index = 0;
                 indexElem = tempElem = ruleElemCln[i];
                 if (this.fieldMode === 'DropdownTree') {
-                    dropDownTreeObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdowntree');
-                    if (dropDownTreeObj.value && dropDownTreeObj.value.length) {
+                    dropDownTreeObj = getComponent(ruleElemCln[i].querySelector('.e-rule-filter input.e-dropdowntree'), 'dropdowntree');
+                    if (dropDownTreeObj && dropDownTreeObj.value && dropDownTreeObj.value.length) {
                         this.selectedColumn = this.getColumn(dropDownTreeObj.value[0]);
                         validateRule = this.selectedColumn.validation;
                     }
                 }
                 else {
-                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdownlist');
-                    this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
-                    validateRule = !isNullOrUndefined(dropDownObj.index) && this.selectedColumn.validation;
+                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-filter input.e-dropdownlist'), 'dropdownlist');
+                    if (dropDownObj && dropDownObj.value) {
+                        this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
+                        validateRule = !isNullOrUndefined(dropDownObj.index) && this.selectedColumn.validation;
+                    }
                 }
                 fieldElem = tempElem.querySelector('.e-rule-field input.e-control');
                 if (validateRule && validateRule.isRequired) {
@@ -811,8 +816,8 @@ let QueryBuilder = class QueryBuilder extends Component {
                 else if ((dropDownObj && dropDownObj.element && isNullOrUndefined(dropDownObj.index)) ||
                     (dropDownTreeObj && dropDownTreeObj.element && (isNullOrUndefined(dropDownTreeObj.value) ||
                         dropDownTreeObj.value.length < 1))) {
-                    if (fieldElem.parentElement.className.indexOf('e-tooltip') < 0) {
-                        this.renderToolTip(fieldElem.parentElement);
+                    if (fieldElem.className.indexOf('e-tooltip') < 0) {
+                        this.renderToolTip(fieldElem);
                     }
                     isValid = false;
                 }
@@ -872,7 +877,6 @@ let QueryBuilder = class QueryBuilder extends Component {
                 glueElem.appendChild(inputElem);
             }
             inputElem = this.createElement('input', { attrs: { type: 'radio', class: 'e-btngroup-and', value: 'AND' } });
-            inputElem.setAttribute('checked', 'true');
             glueElem.appendChild(inputElem);
             labelElem = this.createElement('label', { attrs: { class: 'e-lib e-btn e-btngroup-and-lbl e-small' },
                 innerHTML: this.l10n.getConstant('AND') });
@@ -1471,6 +1475,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
     }
     createSubFields(filterElem, rule, tempRule, ddlArgs) {
+        let subFieldValue = false;
         const fieldElem = closest(filterElem, '.e-rule-field');
         const tempElem = this.createElement('div', { attrs: { class: 'e-rule-sub-filter', id: 'subfilter' + this.subFilterCounter } });
         fieldElem.insertBefore(tempElem, fieldElem.querySelector('.e-rule-operator'));
@@ -1500,6 +1505,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 if (rule.field === subField[i].field || rule.field.indexOf(subField[i].field) > -1) {
                     dropDownList.value = subField[i].field;
                     this.selectedColumn = subField[i];
+                    subFieldValue = true;
                     break;
                 }
             }
@@ -1508,7 +1514,10 @@ let QueryBuilder = class QueryBuilder extends Component {
         this.subFieldElem = subFieldElem;
         // eslint-disable-next-line
         ddlArgs.itemData = ddlArgs.itemData;
-        if (!this.isImportRules) {
+        if (!this.isImportRules || (!subFieldValue && this.selectedColumn.columns)) {
+            if (!subFieldValue && this.isImportRules) {
+                dropDownList.value = null;
+            }
             this.selectedColumn = this.selectedColumn.columns[0];
         }
         if (!this.selectedColumn.columns) {
@@ -2068,6 +2077,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             const numeric = new NumericTextBox(numericTxt);
             numeric.appendTo('#' + parentId + '_valuekey' + idx);
+            numeric.element.setAttribute('aria-label', itemData.label + ' ' + 'Value');
         }
     }
     processValueString(value, type) {
@@ -2291,7 +2301,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             prevItemData = this.getColumn(prevItemData.value);
         }
-        if (column.template && prevItemData && Object.keys(prevItemData).length < 4) {
+        if (column && column.template && prevItemData && Object.keys(prevItemData).length < 4) {
             prevItemData.template = column.template;
         }
         return prevItemData;
@@ -2347,7 +2357,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 this.validateValue(rule, closest(target, '.e-rule-container'));
                 this.destroyControls(target);
             }
-            itemData.template = column.template;
+            if (column) {
+                itemData.template = column.template;
+            }
             if (itemData.template) {
                 addClass([target.nextElementSibling], 'e-template-value');
                 itemData.template = column.template;
@@ -2595,8 +2607,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (!this.isImportRules) {
                 this.trigger('change', eventsArgs);
             }
-            if (this.allowValidation && rule.rules[index].field && target.parentElement.className.indexOf('e-tooltip') > -1) {
-                getComponent(target.parentElement, 'tooltip').destroy();
+            if (this.allowValidation && rule.rules[index].field && target.className.indexOf('e-tooltip') > -1) {
+                getComponent(target, 'tooltip').destroy();
             }
             this.filterRules(beforeRules, this.getValidRules(this.rule), 'field');
         }
@@ -2910,7 +2922,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     initWrapper() {
         this.isInitialLoad = true;
         if (this.cssClass) {
-            addClass([this.element], this.cssClass);
+            addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (this.enableRtl) {
             addClass([this.element], 'e-rtl');
@@ -3099,7 +3111,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                         removeClass([this.element], oldProp.cssClass.split(' '));
                     }
                     if (newProp.cssClass) {
-                        addClass([this.element], newProp.cssClass.split(' '));
+                        addClass([this.element], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     break;
                 case 'enableRtl':