@syncfusion/ej2-querybuilder 26.1.38 → 26.1.42

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.38
+*  version : 26.1.42
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-querybuilder@*",
-  "_id": "@syncfusion/ej2-querybuilder@26.1.35",
+  "_id": "@syncfusion/ej2-querybuilder@26.1.40",
   "_inBundle": false,
-  "_integrity": "sha512-OFo8+MEPI/tvAjZH5lLh3fjoH02CZ2Pq1A3Fw8O2uzXfEM+EGaFgPaQJ9n9vwDdI+gvK6/+FoZMVv7z9C5sHlA==",
+  "_integrity": "sha512-MWEJ9NY5c0iruUvcFgMZn8FuPcADr0RmU3Ff8iYRKYvFZXMqgtoVa8mKgw4vLRxyiJNnbC9ZUY79X99bRbMqAg==",
   "_location": "/@syncfusion/ej2-querybuilder",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-querybuilder",
     "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-26.1.35.tgz",
-  "_shasum": "49f3e1ef5da4c1d0c6256072bbacb2873cf88e33",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-26.1.40.tgz",
+  "_shasum": "071a867f904970608a6248d61d6dbccfe9c8e630",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.35",
-    "@syncfusion/ej2-calendars": "~26.1.38",
-    "@syncfusion/ej2-dropdowns": "~26.1.38",
-    "@syncfusion/ej2-inputs": "~26.1.38",
+    "@syncfusion/ej2-base": "~26.1.42",
+    "@syncfusion/ej2-buttons": "~26.1.40",
+    "@syncfusion/ej2-calendars": "~26.1.41",
+    "@syncfusion/ej2-dropdowns": "~26.1.42",
+    "@syncfusion/ej2-inputs": "~26.1.42",
     "@syncfusion/ej2-splitbuttons": "~26.1.35"
   },
   "deprecated": false,
@@ -66,7 +66,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "26.1.38",
+  "version": "26.1.42",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/query-builder/query-builder-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, getComponent, MouseEventArgs, Browser, compile, append, ModuleDeclaration, Draggable, remove } from '@syncfusion/ej2-base';import { Property, ChildProperty, Complex, L10n, closest, extend, isNullOrUndefined, Collection, cldrData } from '@syncfusion/ej2-base';import { getInstance, addClass, removeClass, rippleEffect, detach, classList } from '@syncfusion/ej2-base';import { Internationalization, DateFormatOptions, KeyboardEventArgs, getUniqueID, select } from '@syncfusion/ej2-base';import { Button, CheckBox, RadioButton, ChangeEventArgs as ButtonChangeEventArgs, RadioButtonModel } from '@syncfusion/ej2-buttons';import { DropDownList, ChangeEventArgs as DropDownChangeEventArgs, FieldSettingsModel, CheckBoxSelection, DropDownTreeModel, DropDownTree } from '@syncfusion/ej2-dropdowns';import { MultiSelect, MultiSelectChangeEventArgs, PopupEventArgs, MultiSelectModel, DropDownListModel } from '@syncfusion/ej2-dropdowns';import { EmitType, Event, EventHandler, getValue, Animation, BaseEventArgs } from '@syncfusion/ej2-base';import { Query, Predicate, DataManager, Deferred } from '@syncfusion/ej2-data';import { TextBox, NumericTextBox, InputEventArgs, ChangeEventArgs as InputChangeEventArgs } from '@syncfusion/ej2-inputs';import { TextBoxModel, NumericTextBoxModel } from '@syncfusion/ej2-inputs';import { DatePicker, ChangeEventArgs as CalendarChangeEventArgs, DatePickerModel } from '@syncfusion/ej2-calendars';import { DropDownButton, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, createSpinner, showSpinner, hideSpinner, TooltipEventArgs } from '@syncfusion/ej2-popups';import { compile as templateCompiler } from '@syncfusion/ej2-base';
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, getComponent, MouseEventArgs, Browser, compile, append, ModuleDeclaration, Draggable, remove } from '@syncfusion/ej2-base';import { Property, ChildProperty, Complex, L10n, closest, extend, isNullOrUndefined, Collection, cldrData } from '@syncfusion/ej2-base';import { getInstance, addClass, removeClass, rippleEffect, detach, classList } from '@syncfusion/ej2-base';import { Internationalization, DateFormatOptions, KeyboardEventArgs, getUniqueID, select } from '@syncfusion/ej2-base';import { Button, CheckBox, RadioButton, ChangeEventArgs as ButtonChangeEventArgs, RadioButtonModel } from '@syncfusion/ej2-buttons';import { DropDownList, ChangeEventArgs as DropDownChangeEventArgs, FieldSettingsModel, CheckBoxSelection, DropDownTreeModel, DropDownTree, DdtFilteringEventArgs } from '@syncfusion/ej2-dropdowns';import { MultiSelect, MultiSelectChangeEventArgs, PopupEventArgs, MultiSelectModel, DropDownListModel } from '@syncfusion/ej2-dropdowns';import { EmitType, Event, EventHandler, getValue, Animation, BaseEventArgs } from '@syncfusion/ej2-base';import { Query, Predicate, DataManager, Deferred } from '@syncfusion/ej2-data';import { TextBox, NumericTextBox, InputEventArgs, ChangeEventArgs as InputChangeEventArgs } from '@syncfusion/ej2-inputs';import { TextBoxModel, NumericTextBoxModel } from '@syncfusion/ej2-inputs';import { DatePicker, ChangeEventArgs as CalendarChangeEventArgs, DatePickerModel } from '@syncfusion/ej2-calendars';import { DropDownButton, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, createSpinner, showSpinner, hideSpinner, TooltipEventArgs } from '@syncfusion/ej2-popups';import { compile as templateCompiler } from '@syncfusion/ej2-base';
 import {TemplateColumn,Validation,FormatObject,ActionEventArgs,ChangeEventArgs,RuleChangeEventArgs,DragEventArgs,DropEventArgs,FieldMode,DisplayMode,SortDirection} from "./query-builder";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/query-builder/query-builder.d.ts

@@ -346,6 +346,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private dragElement;
     private prvtEvtTgrDaD;
     private isDragEventPrevent;
+    private ddTree;
     /**
      * Triggers when the component is created.
      *
@@ -621,6 +622,11 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private appendRuleElem;
     private addRuleElement;
     private addRuleSuccessCallBack;
+    private dropdownTreeFiltering;
+    private changeDataSource;
+    private nestedChildFilter;
+    private isMatchedNode;
+    private dropdownTreeClose;
     private updateDropdowntreeDS;
     private updateAddedRule;
     private changeRuleTemplate;

package/src/query-builder/query-builder.js

@@ -1145,7 +1145,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                         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'
+                        cssClass: 'e-qb-ddt', filtering: this.dropdownTreeFiltering.bind(this), close: this.dropdownTreeClose.bind(this)
                     };
                     if (this.fieldModel) {
                         ddlField = __assign({}, ddlField, this.fieldModel);
@@ -1215,14 +1215,82 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.setMultiConnector(ruleElem);
         }
     };
+    QueryBuilder.prototype.dropdownTreeFiltering = function (args) {
+        var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
+        var ruleElemID = '';
+        var srcElement = args.event.srcElement;
+        var isClearIcon = srcElement.classList.contains('e-clear-icon');
+        var inputElem = isClearIcon ? srcElement.parentElement.querySelector('.e-textbox') : srcElement;
+        ruleElemID = inputElem.id.split('_filterkey')[0];
+        var ruleElem = document.getElementById(ruleElemID);
+        this.ddTree = getComponent(ruleElem.querySelector('input.e-dropdowntree'), 'dropdowntree');
+        var hierarchicalData = extend([], this.columns, [], true);
+        // Cancel the default filtering.
+        args.cancel = true;
+        if (args.text === '') {
+            this.changeDataSource(hierarchicalData);
+        }
+        else {
+            var matchedDataSource = hierarchicalData
+                .map(function (data) { return _this.nestedChildFilter(args.text, data); })
+                .filter(function (filteredChild) { return filteredChild !== null; });
+            this.changeDataSource(matchedDataSource);
+            setTimeout(function () {
+                proxy.ddTree.treeObj.expandAll();
+            }, 100);
+        }
+    };
+    QueryBuilder.prototype.changeDataSource = function (data) {
+        this.ddTree.treeObj.fields = {
+            dataSource: data,
+            value: 'field',
+            text: 'label',
+            child: 'columns',
+            expanded: 'expanded'
+        };
+        this.ddTree.treeObj.refresh();
+    };
+    QueryBuilder.prototype.nestedChildFilter = function (value, node) {
+        var _this = this;
+        var children = node[this.ddTree.fields.child];
+        if (!children) {
+            return this.isMatchedNode(value, node) ? node : null;
+        }
+        var matchedChildren = children
+            .map(function (child) { return _this.nestedChildFilter(value, child); })
+            .filter(function (filteredChild) { return filteredChild !== null; });
+        if (matchedChildren.length) {
+            node[this.ddTree.fields.child] = matchedChildren;
+            return node;
+        }
+        else {
+            node[this.ddTree.fields.child] = children;
+            return this.isMatchedNode(value, node) ? node : null;
+        }
+    };
+    QueryBuilder.prototype.isMatchedNode = function (value, node) {
+        var checkValue = node[this.ddTree.fields.text].toLowerCase();
+        value = value ? value.toLowerCase() : '';
+        return checkValue.indexOf(value) !== -1;
+    };
+    QueryBuilder.prototype.dropdownTreeClose = function () {
+        if (this.ddTree) {
+            this.changeDataSource(this.columns);
+        }
+        this.ddTree = null;
+    };
     QueryBuilder.prototype.updateDropdowntreeDS = function (columns) {
         for (var i = 0; i < columns.length; i++) {
             if (columns[parseInt(i.toString(), 10)].type === 'object') {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (this.isAngular && columns[parseInt(i.toString(), 10)].template) {
                     delete columns[parseInt(i.toString(), 10)].template;
                 }
                 columns[parseInt(i.toString(), 10)].selectable = false;
                 this.updateDropdowntreeDS(columns[parseInt(i.toString(), 10)].columns);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isAngular && columns[parseInt(i.toString(), 10)].template) {
                 delete columns[parseInt(i.toString(), 10)].template;
@@ -1387,10 +1455,12 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                     if (excludeOprs.indexOf(rule.rules[index].operator) < -1 &&
                         (isNullOrUndefined(rule.rules[index].value) &&
-                            rule.rules[index].type !== 'date') || rule.rules[index].value === '' ||
+                            rule.rules[index].type !== 'date') || rule.rules[index].value === '' || rule.rules[index].value === null ||
                         (rule.rules[index].value instanceof Array && valArray.length < 1)) {
                         var valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
-                        isValid = false;
+                        if (excludeOprs.indexOf(rule.rules[index].operator) < 0) {
+                            isValid = false;
+                        }
                         for (var j = 0, jLen = valElem.length; j < jLen; j++) {
                             var element = valElem[j];
                             var elem = void 0;
@@ -1405,6 +1475,18 @@ var QueryBuilder = /** @class */ (function (_super) {
                             }
                             j++;
                         }
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    }
+                    else if (rule.rules[index].type === 'date' && (rule.rules[index].value === null || rule.rules[index].value.indexOf(null) > -1)) {
+                        var valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
+                        if (excludeOprs.indexOf(rule.rules[index].operator) < 0) {
+                            isValid = false;
+                        }
+                        for (var j = 0, jLen = valElem.length; j < jLen; j++) {
+                            if (valElem[j].parentElement.className.indexOf('e-tooltip') < 0 && valElem[j].className.indexOf('e-tooltip') < 0 && (isNullOrUndefined(rule.rules[index].value) || rule.rules[index].value[j] == null)) {
+                                this.renderToolTip(valElem[j].parentElement);
+                            }
+                        }
                     }
                 }
                 else if ((dropDownObj && dropDownObj.element && isNullOrUndefined(dropDownObj.index)) ||
@@ -2159,6 +2241,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             element = args.element;
         }
+        if (!element) {
+            return;
+        }
         if (element.className.indexOf('e-day') > -1 || element.className.indexOf('e-today') > -1 || element.className.indexOf('e-cell') > -1) {
             var calenderArgs = args;
             element = calenderArgs.element;
@@ -3793,6 +3878,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (valElem[1] && valElem[1].parentElement.className.indexOf('e-tooltip') > -1) {
                     getComponent(valElem[1].parentElement, 'tooltip').destroy();
                 }
+                if (valElem[2] && valElem[2].parentElement.className.indexOf('e-tooltip') > -1) {
+                    getComponent(valElem[2].parentElement, 'tooltip').destroy();
+                }
             }
         }
     };
@@ -6565,6 +6653,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var grpCount;
         var operator;
         var isLeftOpened = false;
+        var isNotOpened = false;
         for (var i = 0, iLen = parser.length; i < iLen; i++) {
             if (parser[i][0] === 'Literal') {
                 var column = this.getColumn(parser[i][1]);
@@ -6700,6 +6789,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             else if (parser[i][0] === 'Left') {
                 if (!(parser[0][0] === 'Left') && (parser[i - 1][1] === 'not' || sqlLocale && this.l10n.getConstant('NOT').toLowerCase() === parser[i - 1][1])) {
+                    isNotOpened = true;
                     continue;
                 }
                 this.parser = parser.splice(i + 1, iLen - (i + 1));
@@ -6730,6 +6820,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             else if (parser[i][0] === 'Right') {
+                if (isNotOpened && parser[i + 1][0] === 'Right') {
+                    isNotOpened = false;
+                    continue;
+                }
                 this.parser = parser.splice(i + 1, iLen - (i + 1));
                 levelColl.pop(); //To get the parent Group
                 rules = this.rule;

package/styles/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;

package/styles/query-builder/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;