@syncfusion/ej2-querybuilder 19.2.60 → 19.3.53

package/dist/es6/ej2-querybuilder.es2015.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';
@@ -279,7 +279,9 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     updateSubFieldsFromColumns(col, field) {
         for (let 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]);
             }
@@ -598,28 +600,57 @@ let QueryBuilder = class QueryBuilder extends Component {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId);
             }
             if (!column || (column && !column.ruleTemplate)) {
-                let ddlField;
-                const 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 = Object.assign({}, ddlField, this.fieldModel);
+                if (this.fieldMode === 'Default') {
+                    let ddlField;
+                    const 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 = Object.assign({}, ddlField, this.fieldModel);
+                    }
+                    dropDownList = new DropDownList(ddlField);
+                    dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
+                    const 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');
-                const 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 {
+                    let dropdowntree;
+                    let ddlField;
+                    const 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 = Object.assign({}, ddlField, this.fieldModel);
+                    }
+                    dropdowntree = new DropDownTree(ddlField);
+                    dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
+                    if (!isNullOrUndefined(dropdowntree.value)) {
+                        dropdowntree.element.value = dropdowntree.value[0];
+                    }
+                    const 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 + '_', '');
@@ -847,7 +878,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         else {
             clsName = 'e-removerule e-rule-delete e-css e-btn e-small e-button-hide';
         }
-        const delBtnElem = this.createElement('button', { attrs: { class: clsName } });
+        const delBtnElem = this.createElement('button', { attrs: { type: 'button', class: clsName } });
         tempElem.appendChild(delBtnElem);
         fieldElem.appendChild(tempElem);
         ruleElem.appendChild(fieldElem);
@@ -898,7 +929,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             if (isGroup) {
                 const 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 } });
                 const button = new Button({ iconCss: 'e-icons e-delete-icon', cssClass: 'e-small e-round' });
                 button.appendTo(dltGroupBtn);
                 dltGroupBtn.setAttribute('title', this.l10n.getConstant('DeleteGroup'));
@@ -974,7 +1005,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         const 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
@@ -1127,12 +1158,17 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     changeValue(i, args) {
         let element;
-        if (args.event) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (args.element && args.element.classList.contains('e-multiselect')) {
+            const multiSelectArgs = args;
+            element = multiSelectArgs.element;
+        }
+        else if (args.event) {
             element = args.event.target;
         }
         else {
-            const 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) {
             const calenderArgs = args;
@@ -1200,10 +1236,41 @@ let QueryBuilder = class QueryBuilder extends Component {
     changeField(args) {
         if (args.isInteracted) {
             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) {
+                const ddtElem = fieldElem.querySelector(".e-control");
+                const 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;
-            const column = this.getColumn(args.value);
             if (column && column.ruleTemplate) {
                 this.templateChange(args.element, column.field, 'field');
             }
@@ -1222,23 +1289,41 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     changeRule(rule, ddlArgs) {
         if (!ddlArgs.itemData) {
-            return;
+            if (this.fieldMode === "DropdownTree") {
+                const ddt = getComponent(ddlArgs.element, 'dropdowntree');
+                if (ddt.value == null) {
+                    return;
+                }
+            }
+            else {
+                return;
+            }
         }
         const tempRule = {};
         let filterElem = closest(ddlArgs.element, '.e-rule-filter');
         filterElem = filterElem ? filterElem : closest(ddlArgs.element, '.e-rule-sub-filter');
-        const ddlObj = getComponent(ddlArgs.element, 'dropdownlist');
+        let ddlObj = getComponent(ddlArgs.element, 'dropdownlist');
+        if (this.fieldMode === 'DropdownTree' && filterElem != null) {
+            ddlObj = getComponent(ddlArgs.element, 'dropdowntree');
+        }
         const element = closest(ddlArgs.element, '.e-group-container');
         const groupID = element.id.replace(this.element.id + '_', '');
         this.changeFilter(filterElem, ddlObj, groupID, rule, tempRule, ddlArgs);
     }
     changeFilter(flt, dl, grID, rl, tmpRl, dArg) {
         if (flt) {
-            const ddlValue = this.isImportRules ? this.GetRootColumnName(dl.value) : dl.value;
-            this.selectedColumn = dl.getDataByValue(ddlValue);
+            let ddlValue;
+            if (this.fieldMode === 'DropdownTree') {
+                ddlValue = (dl.value[0]);
+            }
+            else {
+                ddlValue = this.isImportRules ? this.GetRootColumnName(dl.value) : dl.value;
+            }
+            this.selectedColumn = this.getColumn(ddlValue);
             const ruleElem = closest(flt, '.e-rule-container');
             const ruleID = ruleElem.id.replace(this.element.id + '_', '');
-            const eventsArgs = { groupID: grID, ruleID: ruleID, selectedField: dl.value, cancel: false, type: 'field' };
+            const 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, (observedChangeArgs) => {
                     this.fieldChangeSuccess(observedChangeArgs, tmpRl, flt, rl, dArg);
@@ -1289,7 +1374,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             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);
@@ -1412,9 +1497,16 @@ let QueryBuilder = class QueryBuilder extends Component {
             addClass([operatorElem], 'e-operator');
             if (operatorElem.childElementCount) {
                 ddlObj = getComponent(operatorElem.querySelector('.e-dropdownlist'), 'dropdownlist');
-                const fieldObj = getComponent(filterElem.querySelector('.e-dropdownlist'), 'dropdownlist');
                 tempRule.operator = ddlObj.value;
-                tempRule.type = this.getColumn(fieldObj.value).type;
+                let fieldObj;
+                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;
                 const itemData = ddlArgs.itemData;
                 this.renderValues(operatorElem, itemData, ddlArgs.previousItemData, true, rule, tempRule, ddlArgs.element);
             }
@@ -1720,8 +1812,10 @@ let QueryBuilder = class QueryBuilder extends Component {
     processTemplate(target, itemData, rule, tempRule) {
         const container = closest(target, '.e-rule-container');
         const tempElements = container.querySelectorAll('.e-template');
-        const ddlObj = getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
-        const column = this.getColumn(ddlObj.value);
+        const filterElem = container.querySelector('.e-rule-filter .e-filter-input');
+        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 (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' };
@@ -1740,8 +1834,11 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
     }
     getItemData(parentId) {
-        const fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
-        return this.getColumn(fieldObj.value);
+        let fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
+        if (this.fieldMode === "DropdownTree") {
+            fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdowntree');
+        }
+        return this.fieldMode === "DropdownTree" ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
     }
     setDefaultValue(parentId, isArryValue, isNumber) {
         const itemData = this.getItemData(parentId);
@@ -1833,8 +1930,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             input.dataBind();
         }
         else {
-            const fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
-            itemData = this.getColumn(fieldObj.value);
+            itemData = columnData;
             const min = (itemData.validation && itemData.validation.min) ? itemData.validation.min : 0;
             const max = (itemData.validation && itemData.validation.max) ? itemData.validation.max : Number.MAX_VALUE;
             const format = itemData.format ? itemData.format : 'n';
@@ -2080,10 +2176,11 @@ let QueryBuilder = class QueryBuilder extends Component {
     renderValues(target, itemData, prevItemData, isRender, rule, tempRule, element) {
         const subFldElem = target.previousElementSibling;
         const filtElem = subFldElem.getElementsByTagName('input')[0];
-        const filtObj = getComponent(filtElem, 'dropdownlist');
-        const column = this.getColumn(filtObj.value);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.selectedRule = filtObj.itemData;
+        const filtObj = this.fieldMode === 'DropdownTree' ? getComponent(filtElem, 'dropdowntree')
+            : getComponent(filtElem, 'dropdownlist');
+        let column = this.fieldMode === 'DropdownTree' ? this.getColumn(filtObj.value[0])
+            : this.getColumn(filtObj.value);
+        this.selectedRule = column;
         if (isRender) {
             const ddlObj = getComponent(target.querySelector('input'), 'dropdownlist');
             itemData = element.id.indexOf('operator') > -1 ? itemData : this.selectedRule;
@@ -2323,15 +2420,17 @@ let QueryBuilder = class QueryBuilder extends Component {
             if (this.subFieldElem) {
                 target = this.subFieldElem;
             }
-            dropDownObj = getComponent(target, 'dropdownlist');
-            const column = this.getColumn(dropDownObj.value);
+            dropDownObj = this.fieldMode === 'DropdownTree' ? getComponent(target, 'dropdowntree') :
+                getComponent(target, 'dropdownlist');
+            const 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;
@@ -2464,8 +2563,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
             else if (target.className.indexOf('e-datepicker') > -1) {
-                const ddlInst = getInstance(ruleElem.querySelector('.e-rule-filter input'), DropDownList);
-                const format = this.getFormat(this.getColumn(ddlInst.value).format);
+                const format = this.getFormat(this.getColumn(this.selectedColumn.field).format);
                 if (format.type) {
                     if (arrOperator.indexOf(oper) > -1) {
                         if (typeof rule.rules[index].value === 'string') {
@@ -2583,7 +2681,12 @@ let QueryBuilder = class QueryBuilder extends Component {
         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');
@@ -2593,8 +2696,10 @@ let QueryBuilder = class QueryBuilder extends Component {
         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++) {
@@ -2736,7 +2841,7 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
         });
         const textElem = this.createElement('textarea', { attrs: { class: 'e-summary-text', readonly: 'true' }, styles: 'max-height:500px' });
-        const editElem = this.createElement('button', { attrs: { class: 'e-edit-rule e-css e-btn e-small e-flat e-primary' } });
+        const editElem = this.createElement('button', { attrs: { type: 'button', class: 'e-edit-rule e-css e-btn e-small e-flat e-primary' } });
         const divElem = this.createElement('div', { attrs: { class: 'e-summary-btndiv' } });
         contentElem.appendChild(textElem);
         textElem.textContent = this.getSqlFromRules(this.rule);
@@ -3338,6 +3443,9 @@ let QueryBuilder = class QueryBuilder extends Component {
         return rule;
     }
     getRuleCollection(rule, isValidRule) {
+        if (isNullOrUndefined(rule)) {
+            return null;
+        }
         let orgRule;
         if (rule.rules && rule.rules.length && (Object.keys(rule.rules[0]).length > 6 || isValidRule)) {
             let jLen = rule.rules.length;
@@ -4340,14 +4448,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         return operators[operator];
     }
     getTypeFromColumn(rules) {
-        const columnData = this.columns;
-        for (let i = 0; i < columnData.length; i++) {
-            if (columnData[i].field === rules.field) {
-                rules.type = columnData[i].type;
-                break;
-            }
-        }
-        return rules.type;
+        const columnData = this.getColumn(rules.field);
+        return columnData.type;
     }
     processParser(parser, rules, levelColl) {
         let j;
@@ -4362,6 +4464,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         let lLen;
         let grpCount;
         let operator;
+        let isLeftOpened = false;
         for (let i = 0, iLen = parser.length; i < iLen; i++) {
             if (parser[i][0] === 'Literal') {
                 rule = { label: parser[i][1], field: parser[i][1] };
@@ -4380,8 +4483,12 @@ let QueryBuilder = class QueryBuilder extends Component {
                     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 {
@@ -4519,6 +4626,9 @@ __decorate([
 __decorate([
     Property(false)
 ], QueryBuilder.prototype, "allowValidation", void 0);
+__decorate([
+    Property('Default')
+], QueryBuilder.prototype, "fieldMode", void 0);
 __decorate([
     Property([])
 ], QueryBuilder.prototype, "columns", void 0);