@syncfusion/ej2-querybuilder 30.2.4 → 30.2.6

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

@@ -823,34 +823,23 @@ let QueryBuilder = class QueryBuilder extends Component {
         }
     }
     addRuleSuccessCallBack(args, trgt, rule, col, act, pId, isRlTmp) {
-        const isVertical = this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical';
-        const height = isVertical ? '250px' : '200px';
+        const height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
         let ruleID;
         const column = (rule && rule.field) ? this.getColumn(rule.field) : col ? col : this.columns[0];
         let operators;
+        let dropDownList;
         let ruleElem;
         let newRule = { 'label': '', 'field': '', 'type': '', 'operator': '' };
         if (!args.cancel) {
-            const fragment = document.createDocumentFragment();
             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
-                };
+                newRule = { 'label': column.label, 'field': column.field, 'type': column.type, 'operator': operators[0].value };
                 const passedRule = Object.keys(rule).length ? rule : newRule;
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field', passedRule);
-                const actionArgs = {
-                    requestType: 'template-initialize',
-                    ruleID: ruleElem.id,
-                    action: 'insert-rule',
-                    fields: this.fields,
-                    rule: passedRule
-                };
-                this.trigger('actionBegin', actionArgs);
+                const args = { requestType: 'template-create', action: 'insert-rule', ruleID: ruleElem.id,
+                    fields: this.fields, rule: passedRule };
+                this.trigger('actionBegin', args);
             }
             else {
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field');
@@ -865,30 +854,139 @@ let QueryBuilder = class QueryBuilder extends Component {
                     addClass([element], 'e-round');
                     addClass([element], 'e-icon-btn');
                     element.setAttribute('title', this.l10n.getConstant('DeleteRule'));
-                    const spanElement = this.createElement('span', {
-                        attrs: { class: 'e-btn-icon e-icons e-delete-icon' }
-                    });
-                    element.appendChild(spanElement);
+                    const spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
+                    ruleElem.querySelector('.e-rule-delete').appendChild(spanElement);
                 }
                 if (!this.showButtons.ruleDelete) {
                     element.classList.add('e-button-hide');
                 }
             }
-            ruleElem.className = 'e-rule-container ' + (isVertical ? 'e-vertical-mode' : 'e-horizontal-mode');
-            const previousRuleElem = ruleElem.previousElementSibling;
-            this.processAdjacentElements(ruleElem, previousRuleElem, rule);
+            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';
+            }
+            let previousRuleElem = ruleElem.previousElementSibling;
+            if (this.enableSeparateConnector) {
+                let prevRule;
+                let ruleContainer;
+                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') {
+                    const group = ruleElem.closest('.e-group-container');
+                    if (group && group.previousElementSibling) {
+                        let prevElem = group.previousElementSibling;
+                        const 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')) {
+                            const prevRule = this.getRule(prevElem);
+                            this.headerTemplateFn(prevElem, false, prevRule.condition, prevRule, 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';
+            }
             if (!this.isImportRules) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId, this.enableSeparateConnector ? true : null);
             }
-            const ruleCount = this.rule.rules.length;
             if (!column || (column && !column.ruleTemplate) || !rule.field) {
-                if (ruleCount > 20) {
-                    setTimeout(() => {
-                        this.applyFieldComponent(ruleElem, rule, height);
-                    }, 0);
+                if (this.fieldMode === 'Default') {
+                    let ddlField;
+                    let 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 = Object.assign({}, ddlField, this.fieldModel);
+                    }
+                    dropDownList = new DropDownList(ddlField);
+                    dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
+                    let 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
+                        });
+                    }
                 }
                 else {
-                    this.applyFieldComponent(ruleElem, rule, height);
+                    let ddlField;
+                    const 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 = Object.assign({}, ddlField, this.fieldModel);
+                    }
+                    const dropdowntree = new DropDownTree(ddlField);
+                    dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
+                    if (!isNullOrUndefined(dropdowntree.value)) {
+                        const value = this.getLabelFromColumn(dropdowntree.value[0]);
+                        dropdowntree.element.value = value;
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const 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
+                        });
+                    }
                 }
             }
             ruleID = ruleElem.id.replace(this.element.id + '_', '');
@@ -897,204 +995,46 @@ let QueryBuilder = class QueryBuilder extends Component {
                 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) {
-            this.processConnectorElements(ruleElem);
-        }
-    }
-    processAdjacentElements(ruleElem, previousRuleElem, rule) {
-        if (this.enableSeparateConnector) {
-            if (previousRuleElem && previousRuleElem.classList.contains('e-group-container')) {
-                const ruleContainer = previousRuleElem.querySelectorAll('.e-rule-container');
-                previousRuleElem = ruleContainer[ruleContainer.length - 1];
-            }
-            if (previousRuleElem && previousRuleElem.classList.contains('e-rule-container')) {
-                const prevRule = this.getRule(previousRuleElem);
-                if (this.headerTemplate) {
-                    this.headerTemplateFn(previousRuleElem, false, prevRule.condition, prevRule, previousRuleElem.id);
+            let prevElem = ruleElem.previousElementSibling;
+            let 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;
             }
-            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';
-        }
-    }
-    handleOrphanedRuleElement(ruleElem, rule) {
-        const group = ruleElem.closest('.e-group-container');
-        if (group && group.previousElementSibling) {
-            let prevElem = group.previousElementSibling;
-            const 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')) {
+            if (this.headerTemplate && prevElem) {
                 const prevRule = this.getRule(prevElem);
-                this.headerTemplateFn(prevElem, false, prevRule.condition, prevRule, prevElem.id, true);
-            }
-        }
-        else {
-            this.headerTemplateFn(ruleElem, false, rule.condition, rule, ruleElem.id, true);
-        }
-    }
-    processConnectorElements(ruleElem) {
-        let prevElem = ruleElem.previousElementSibling;
-        let 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) {
-            const prevRule = this.getRule(prevElem);
-            const 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);
-    }
-    handleOrphanedConnectorElement(ruleElem) {
-        const group = ruleElem.closest('.e-group-container');
-        if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
-            let prevElem = group.previousElementSibling.previousElementSibling;
-            if (prevElem.classList.contains('e-group-container')) {
-                const ruleContainer = prevElem.querySelectorAll('.e-rule-container');
-                prevElem = ruleContainer[ruleContainer.length - 1];
-            }
-            if (prevElem.classList.contains('e-rule-container')) {
-                const prevRule = this.getRule(prevElem);
-                const args = {
-                    requestType: 'rule-template-create',
-                    ruleID: prevElem.id,
-                    condition: prevRule.condition,
-                    notCondition: this.enableNotCondition ? true : undefined
-                };
+                const args = { requestType: 'rule-template-create', ruleID: prevElem.id, condition: prevRule.condition,
+                    notCondition: this.enableNotCondition ? true : undefined };
                 this.trigger('actionBegin', args);
             }
-        }
-    }
-    applyFieldComponent(ruleElem, rule, height) {
-        if (this.fieldMode === 'Default') {
-            this.applyDropdownListComponent(ruleElem, rule, height);
-        }
-        else {
-            this.applyDropdownTreeComponent(ruleElem, rule, height);
-        }
-    }
-    applyDropdownListComponent(ruleElem, rule, height) {
-        let ddlField;
-        let 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 = Object.assign({}, ddlField, this.fieldModel);
-        }
-        const dropDownList = new DropDownList(ddlField);
-        dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
-        let 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
-            });
-        }
-    }
-    applyDropdownTreeComponent(ruleElem, rule, height) {
-        let ddlField;
-        const 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 = Object.assign({}, ddlField, this.fieldModel);
-        }
-        const dropdowntree = new DropDownTree(ddlField);
-        dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
-        if (!isNullOrUndefined(dropdowntree.value)) {
-            const value = this.getLabelFromColumn(dropdowntree.value[0]);
-            dropdowntree.element.value = value;
-        }
-        const 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
-            });
+            else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+                const group = ruleElem.closest('.e-group-container');
+                if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
+                    let prevElem = group.previousElementSibling.previousElementSibling;
+                    if (prevElem.classList.contains('e-group-container')) {
+                        const ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                        prevElem = ruleContainer[ruleContainer.length - 1];
+                    }
+                    if (prevElem.classList.contains('e-rule-container')) {
+                        const prevRule = this.getRule(prevElem);
+                        const args = { requestType: 'rule-template-create', ruleID: prevElem.id,
+                            condition: prevRule.condition, notCondition: this.enableNotCondition ? true : undefined };
+                        this.trigger('actionBegin', args);
+                    }
+                }
+            }
+            this.setMultiConnector(ruleElem);
         }
     }
     dropdownTreeFiltering(args) {