@syncfusion/ej2-querybuilder 19.2.60 → 19.3.53

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

@@ -1,6 +1,6 @@
 import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, addClass, classList, cldrData, closest, compile, detach, extend, getComponent, getInstance, getUniqueID, getValue, isNullOrUndefined, removeClass, rippleEffect, select } from '@syncfusion/ej2-base';
 import { Button, RadioButton } from '@syncfusion/ej2-buttons';
-import { CheckBoxSelection, DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
+import { CheckBoxSelection, DropDownList, DropDownTree, MultiSelect } from '@syncfusion/ej2-dropdowns';
 import { DataManager, Deferred, Predicate, Query } from '@syncfusion/ej2-data';
 import { NumericTextBox, TextBox } from '@syncfusion/ej2-inputs';
 import { DatePicker } from '@syncfusion/ej2-calendars';
@@ -325,7 +325,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     };
     QueryBuilder.prototype.updateSubFieldsFromColumns = function (col, field) {
         for (var i = 0; i < col.length; i++) {
-            col[i].field = field ? field + this.separator + col[i].field : col[i].field;
+            if (this.separator != '' && col[i].field.indexOf(this.separator) < 0) {
+                col[i].field = field ? field + this.separator + col[i].field : col[i].field;
+            }
             if (col[i].operators) {
                 this.updateCustomOperator(col[i]);
             }
@@ -650,28 +652,57 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId);
             }
             if (!column || (column && !column.ruleTemplate)) {
-                var ddlField = void 0;
-                var 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'),
-                    change: this.changeField.bind(this), value: rule ? ddlValue : null,
-                    open: this.popupOpen.bind(this)
-                };
-                if (this.fieldModel) {
-                    ddlField = __assign({}, ddlField, this.fieldModel);
+                if (this.fieldMode === 'Default') {
+                    var ddlField = void 0;
+                    var 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'),
+                        change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this)
+                    };
+                    if (this.fieldModel) {
+                        ddlField = __assign({}, ddlField, this.fieldModel);
+                    }
+                    dropDownList = new DropDownList(ddlField);
+                    dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
+                    var 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
+                        });
+                    }
                 }
-                dropDownList = new DropDownList(ddlField);
-                dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
-                var 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
-                    });
+                else {
+                    var dropdowntree = void 0;
+                    var ddlField = void 0;
+                    var ddlValue = this.isImportRules ? rule.field : rule.field;
+                    ddlField = {
+                        fields: { dataSource: this.columns,
+                            value: "field", text: "label", child: 'columns', expanded: "expanded" },
+                        placeholder: this.l10n.getConstant('SelectField'), showClearButton: false,
+                        popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
+                        change: this.changeField.bind(this), value: this.isImportRules ? [ddlValue] : null,
+                        open: this.popupOpen.bind(this)
+                    };
+                    if (this.fieldModel) {
+                        ddlField = __assign({}, ddlField, this.fieldModel);
+                    }
+                    dropdowntree = new DropDownTree(ddlField);
+                    dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
+                    if (!isNullOrUndefined(dropdowntree.value)) {
+                        dropdowntree.element.value = dropdowntree.value[0];
+                    }
+                    var ddlVal = this.isImportRules ?
+                        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
+                        });
+                    }
                 }
             }
             ruleID = ruleElem.id.replace(this.element.id + '_', '');
@@ -899,7 +930,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         else {
             clsName = 'e-removerule e-rule-delete e-css e-btn e-small e-button-hide';
         }
-        var delBtnElem = this.createElement('button', { attrs: { class: clsName } });
+        var delBtnElem = this.createElement('button', { attrs: { type: 'button', class: clsName } });
         tempElem.appendChild(delBtnElem);
         fieldElem.appendChild(tempElem);
         ruleElem.appendChild(fieldElem);
@@ -951,7 +982,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             }
             if (isGroup) {
                 var clsName = this.showButtons.groupDelete ? 'e-deletegroup' : 'e-deletegroup e-button-hide';
-                dltGroupBtn = this.createElement('button', { attrs: { class: clsName } });
+                dltGroupBtn = this.createElement('button', { attrs: { type: 'button', class: clsName } });
                 var button = new Button({ iconCss: 'e-icons e-delete-icon', cssClass: 'e-small e-round' });
                 button.appendTo(dltGroupBtn);
                 dltGroupBtn.setAttribute('title', this.l10n.getConstant('DeleteGroup'));
@@ -1027,7 +1058,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         var groupHdr = groupElem.querySelector('.e-group-header');
         if (this.headerTemplate) {
             args = { requestType: 'header-template-initialize', ruleID: groupElem.id,
-                notCondition: this.enableNotCondition ? not : undefined, condition: condition, rule: rule };
+                notCondition: this.enableNotCondition ? not : undefined, condition: condition, rule: this.getRuleCollection(rule, true) };
             this.trigger('actionBegin', args);
             this.headerFn = this.templateParser(this.headerTemplate);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1181,12 +1212,17 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     QueryBuilder.prototype.changeValue = function (i, args) {
         var _this = this;
         var element;
-        if (args.event) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (args.element && args.element.classList.contains('e-multiselect')) {
+            var multiSelectArgs = args;
+            element = multiSelectArgs.element;
+        }
+        else if (args.event) {
             element = args.event.target;
         }
         else {
-            var multiSelectArgs = args;
-            element = multiSelectArgs.element;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            element = args.element;
         }
         if (element.className.indexOf('e-day') > -1 || element.className.indexOf('e-today') > -1 || element.className.indexOf('e-cell') > -1) {
             var calenderArgs = args;
@@ -1255,10 +1291,41 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     QueryBuilder.prototype.changeField = function (args) {
         if (args.isInteracted) {
             var fieldElem = closest(args.element, '.e-rule-filter') || closest(args.element, '.e-rule-sub-filter');
+            var column = this.fieldMode === 'DropdownTree' ? this.getColumn(args.value[0]) : this.getColumn(args.value);
+            if (this.fieldMode === 'DropdownTree' && fieldElem != null) {
+                var ddtElem = fieldElem.querySelector(".e-control");
+                var ddt = getComponent(ddtElem, 'dropdowntree');
+                if (column) {
+                    if (column.type == 'object') {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        ddt.value = args.oldValue;
+                        ddt.dataBind();
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        if (isNullOrUndefined(args.oldValue)) {
+                            ddtElem.value = "";
+                        }
+                        else {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            ddtElem.value = args.oldValue[0];
+                        }
+                        return;
+                    }
+                    else {
+                        if (!isNullOrUndefined(args.value[0])) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            ddt.value = args.value[0];
+                            ddt.dataBind();
+                            ddtElem.value = args.value[0];
+                        }
+                    }
+                }
+                else {
+                    return;
+                }
+            }
             this.destroySubFields(fieldElem);
             this.subFieldElem = null;
             this.isNotValueChange = true;
-            var column = this.getColumn(args.value);
             if (column && column.ruleTemplate) {
                 this.templateChange(args.element, column.field, 'field');
             }
@@ -1277,12 +1344,23 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     };
     QueryBuilder.prototype.changeRule = function (rule, ddlArgs) {
         if (!ddlArgs.itemData) {
-            return;
+            if (this.fieldMode === "DropdownTree") {
+                var ddt = getComponent(ddlArgs.element, 'dropdowntree');
+                if (ddt.value == null) {
+                    return;
+                }
+            }
+            else {
+                return;
+            }
         }
         var tempRule = {};
         var filterElem = closest(ddlArgs.element, '.e-rule-filter');
         filterElem = filterElem ? filterElem : closest(ddlArgs.element, '.e-rule-sub-filter');
         var ddlObj = getComponent(ddlArgs.element, 'dropdownlist');
+        if (this.fieldMode === 'DropdownTree' && filterElem != null) {
+            ddlObj = getComponent(ddlArgs.element, 'dropdowntree');
+        }
         var element = closest(ddlArgs.element, '.e-group-container');
         var groupID = element.id.replace(this.element.id + '_', '');
         this.changeFilter(filterElem, ddlObj, groupID, rule, tempRule, ddlArgs);
@@ -1290,11 +1368,18 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     QueryBuilder.prototype.changeFilter = function (flt, dl, grID, rl, tmpRl, dArg) {
         var _this = this;
         if (flt) {
-            var ddlValue = this.isImportRules ? this.GetRootColumnName(dl.value) : dl.value;
-            this.selectedColumn = dl.getDataByValue(ddlValue);
+            var ddlValue = void 0;
+            if (this.fieldMode === 'DropdownTree') {
+                ddlValue = (dl.value[0]);
+            }
+            else {
+                ddlValue = this.isImportRules ? this.GetRootColumnName(dl.value) : dl.value;
+            }
+            this.selectedColumn = this.getColumn(ddlValue);
             var ruleElem = closest(flt, '.e-rule-container');
             var ruleID = ruleElem.id.replace(this.element.id + '_', '');
-            var eventsArgs = { groupID: grID, ruleID: ruleID, selectedField: dl.value, cancel: false, type: 'field' };
+            var eventsArgs = { groupID: grID, ruleID: ruleID, selectedField: this.fieldMode === 'DropdownTree' ?
+                    dl.value[0] : dl.value, cancel: false, type: 'field' };
             if (!this.isImportRules) {
                 this.trigger('beforeChange', eventsArgs, function (observedChangeArgs) {
                     _this.fieldChangeSuccess(observedChangeArgs, tmpRl, flt, rl, dArg);
@@ -1346,7 +1431,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             if (ruleElem.querySelector('.e-template')) {
                 rule.value = '';
             }
-            if (this.selectedColumn.type === 'object') {
+            if (this.selectedColumn.type === 'object' && this.fieldMode === 'Default') {
                 tempRule.type = this.selectedColumn.columns[0].type;
                 while (this.selectedColumn.columns) {
                     this.createSubFields(filterElem, rule, tempRule, ddlArgs);
@@ -1469,9 +1554,16 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             addClass([operatorElem], 'e-operator');
             if (operatorElem.childElementCount) {
                 ddlObj = getComponent(operatorElem.querySelector('.e-dropdownlist'), 'dropdownlist');
-                var fieldObj = getComponent(filterElem.querySelector('.e-dropdownlist'), 'dropdownlist');
                 tempRule.operator = ddlObj.value;
-                tempRule.type = this.getColumn(fieldObj.value).type;
+                var fieldObj = void 0;
+                if (this.fieldMode === 'DropdownTree') {
+                    fieldObj = getComponent(filterElem.querySelector('.e-dropdowntree'), 'dropdowntree');
+                }
+                else {
+                    fieldObj = getComponent(filterElem.querySelector('.e-dropdownlist'), 'dropdownlist');
+                }
+                tempRule.type = this.fieldMode === 'DropdownTree' ? this.getColumn(fieldObj.value[0]).type :
+                    this.getColumn(fieldObj.value).type;
                 var itemData = ddlArgs.itemData;
                 this.renderValues(operatorElem, itemData, ddlArgs.previousItemData, true, rule, tempRule, ddlArgs.element);
             }
@@ -1778,8 +1870,10 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     QueryBuilder.prototype.processTemplate = function (target, itemData, rule, tempRule) {
         var container = closest(target, '.e-rule-container');
         var tempElements = container.querySelectorAll('.e-template');
-        var ddlObj = getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
-        var column = this.getColumn(ddlObj.value);
+        var filterElem = container.querySelector('.e-rule-filter .e-filter-input');
+        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 (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' };
@@ -1799,7 +1893,10 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     };
     QueryBuilder.prototype.getItemData = function (parentId) {
         var fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
-        return this.getColumn(fieldObj.value);
+        if (this.fieldMode === "DropdownTree") {
+            fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdowntree');
+        }
+        return this.fieldMode === "DropdownTree" ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
     };
     QueryBuilder.prototype.setDefaultValue = function (parentId, isArryValue, isNumber) {
         var itemData = this.getItemData(parentId);
@@ -1891,8 +1988,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             input.dataBind();
         }
         else {
-            var fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
-            itemData = this.getColumn(fieldObj.value);
+            itemData = columnData;
             var min = (itemData.validation && itemData.validation.min) ? itemData.validation.min : 0;
             var max = (itemData.validation && itemData.validation.max) ? itemData.validation.max : Number.MAX_VALUE;
             var format = itemData.format ? itemData.format : 'n';
@@ -2138,10 +2234,11 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     QueryBuilder.prototype.renderValues = function (target, itemData, prevItemData, isRender, rule, tempRule, element) {
         var subFldElem = target.previousElementSibling;
         var filtElem = subFldElem.getElementsByTagName('input')[0];
-        var filtObj = getComponent(filtElem, 'dropdownlist');
-        var column = this.getColumn(filtObj.value);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.selectedRule = filtObj.itemData;
+        var filtObj = this.fieldMode === 'DropdownTree' ? getComponent(filtElem, 'dropdowntree')
+            : getComponent(filtElem, 'dropdownlist');
+        var column = this.fieldMode === 'DropdownTree' ? this.getColumn(filtObj.value[0])
+            : this.getColumn(filtObj.value);
+        this.selectedRule = column;
         if (isRender) {
             var ddlObj = getComponent(target.querySelector('input'), 'dropdownlist');
             itemData = element.id.indexOf('operator') > -1 ? itemData : this.selectedRule;
@@ -2382,15 +2479,17 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             if (this.subFieldElem) {
                 target = this.subFieldElem;
             }
-            dropDownObj = getComponent(target, 'dropdownlist');
-            var column = this.getColumn(dropDownObj.value);
+            dropDownObj = this.fieldMode === 'DropdownTree' ? getComponent(target, 'dropdowntree') :
+                getComponent(target, 'dropdownlist');
+            var column = this.fieldMode === 'DropdownTree' ? this.getColumn(dropDownObj.value[0])
+                : this.getColumn(dropDownObj.value);
             if (!this.isImportRules && rule.rules[index].field && rule.rules[index].field.toLowerCase() !== column.field.toLowerCase()) {
                 if (!(ruleElem.querySelectorAll('.e-template')) && !(operator.indexOf('null') > -1)
                     || (operator.indexOf('empty') > -1)) {
                     rule.rules[index].value = '';
                 }
             }
-            this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
+            this.selectedColumn = this.getColumn(this.selectedColumn.field);
             rule.rules[index].field = this.selectedColumn.field;
             rule.rules[index].type = this.selectedColumn.type;
             rule.rules[index].label = this.selectedColumn.label;
@@ -2523,8 +2622,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else if (target.className.indexOf('e-datepicker') > -1) {
-                var ddlInst = getInstance(ruleElem.querySelector('.e-rule-filter input'), DropDownList);
-                var format = this.getFormat(this.getColumn(ddlInst.value).format);
+                var format = this.getFormat(this.getColumn(this.selectedColumn.field).format);
                 if (format.type) {
                     if (arrOperator.indexOf(oper) > -1) {
                         if (typeof rule.rules[index].value === 'string') {
@@ -2642,7 +2740,12 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         element = this.element.querySelectorAll('.e-rule-filter .e-control:not(.e-tooltip)');
         len = element.length;
         for (i = 0; i < len; i++) {
-            getComponent(element[i], 'dropdownlist').destroy();
+            if (getComponent(element[i], 'dropdownlist')) {
+                getComponent(element[i], 'dropdownlist').destroy();
+            }
+            else {
+                getComponent(element[i], 'dropdowntree').destroy();
+            }
             detach(element[i]);
         }
         tooltip = this.element.querySelectorAll('.e-rule-operator .e-control.e-tooltip');
@@ -2652,8 +2755,10 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         element = this.element.querySelectorAll('.e-rule-operator .e-control:not(.e-tooltip)');
         len = element.length;
         for (i = 0; i < len; i++) {
-            getComponent(element[i], 'dropdownlist').destroy();
-            detach(element[i]);
+            if (getComponent(element[i], 'dropdownlist')) {
+                getComponent(element[i], 'dropdownlist').destroy();
+                detach(element[i]);
+            }
         }
         tooltip = this.element.querySelectorAll('.e-rule-value .e-control.e-tooltip');
         for (i = 0; i < tooltip.length; i++) {
@@ -2795,7 +2900,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             }
         });
         var textElem = this.createElement('textarea', { attrs: { class: 'e-summary-text', readonly: 'true' }, styles: 'max-height:500px' });
-        var editElem = this.createElement('button', { attrs: { class: 'e-edit-rule e-css e-btn e-small e-flat e-primary' } });
+        var editElem = this.createElement('button', { attrs: { type: 'button', class: 'e-edit-rule e-css e-btn e-small e-flat e-primary' } });
         var divElem = this.createElement('div', { attrs: { class: 'e-summary-btndiv' } });
         contentElem.appendChild(textElem);
         textElem.textContent = this.getSqlFromRules(this.rule);
@@ -3401,6 +3506,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         return rule;
     };
     QueryBuilder.prototype.getRuleCollection = function (rule, isValidRule) {
+        if (isNullOrUndefined(rule)) {
+            return null;
+        }
         var orgRule;
         if (rule.rules && rule.rules.length && (Object.keys(rule.rules[0]).length > 6 || isValidRule)) {
             var jLen = rule.rules.length;
@@ -4404,14 +4512,8 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         return operators[operator];
     };
     QueryBuilder.prototype.getTypeFromColumn = function (rules) {
-        var columnData = this.columns;
-        for (var i = 0; i < columnData.length; i++) {
-            if (columnData[i].field === rules.field) {
-                rules.type = columnData[i].type;
-                break;
-            }
-        }
-        return rules.type;
+        var columnData = this.getColumn(rules.field);
+        return columnData.type;
     };
     QueryBuilder.prototype.processParser = function (parser, rules, levelColl) {
         var j;
@@ -4426,6 +4528,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         var lLen;
         var grpCount;
         var operator;
+        var isLeftOpened = false;
         for (var i = 0, iLen = parser.length; i < iLen; i++) {
             if (parser[i][0] === 'Literal') {
                 rule = { label: parser[i][1], field: parser[i][1] };
@@ -4444,8 +4547,12 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                     j = i + 1;
                     jLen = iLen;
                     for (j = i + 1; j < jLen; j++) {
-                        if (parser[j][0] === 'Right') {
+                        if (operator.indexOf('between') < 0 && parser[j][0] === 'Left') {
+                            isLeftOpened = true;
+                        }
+                        else if (parser[j][0] === 'Right' && isLeftOpened) {
                             i = j;
+                            isLeftOpened = false;
                             break;
                         }
                         else {
@@ -4582,6 +4689,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property(false)
     ], QueryBuilder.prototype, "allowValidation", void 0);
+    __decorate([
+        Property('Default')
+    ], QueryBuilder.prototype, "fieldMode", void 0);
     __decorate([
         Property([])
     ], QueryBuilder.prototype, "columns", void 0);