@syncfusion/ej2-querybuilder 21.2.4 → 22.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.4
+*  version : 22.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@21.2.3",
+  "_id": "@syncfusion/ej2-querybuilder@22.1.34",
   "_inBundle": false,
-  "_integrity": "sha512-OHwQTyMyPmtJw0BPHVBQrc0jigTbxjWa+78HafNPROaXb5gb1XMi6kqr9oYuxDh9SfEkgAOcoG0swwXR/Kchiw==",
+  "_integrity": "sha512-MhknAfhNWtbOakNEX1Foq4XrOi0EZYGt2qCxp+fioDN407UXcCQ1kbJJ+ZgAHlT7Vji1IyMDUWvjXht0iYAdJg==",
   "_location": "/@syncfusion/ej2-querybuilder",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-querybuilder",
     "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-21.2.3.tgz",
-  "_shasum": "88f4c6542e5620ea68abcb53f607e0a071d9307d",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-22.1.34.tgz",
+  "_shasum": "66b87d631445ea030acc569d1953449865e93558",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-buttons": "~21.2.3",
-    "@syncfusion/ej2-calendars": "~21.2.4",
-    "@syncfusion/ej2-dropdowns": "~21.2.4",
-    "@syncfusion/ej2-inputs": "~21.2.4",
-    "@syncfusion/ej2-splitbuttons": "~21.2.3"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.36",
+    "@syncfusion/ej2-calendars": "~22.1.36",
+    "@syncfusion/ej2-dropdowns": "~22.1.37",
+    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-splitbuttons": "~22.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 QueryBuilder",
@@ -66,7 +66,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "21.2.4",
+  "version": "22.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -46,15 +46,17 @@ export interface ColumnsModel {
      * Specifies the rule template for the field with any other widgets.
      *
      * @default null
+     * @aspType string
      */
-    ruleTemplate?: string;
+    ruleTemplate?: string | Function;
 
     /**
      * Specifies the template for value field such as slider or any other widgets.
      *
      * @default null
+     * @aspType string
      */
-    template?: TemplateColumn | string;
+    template?: TemplateColumn | string | Function;
 
     /**
      * Specifies the validation for columns (text, number and date).
@@ -350,8 +352,9 @@ export interface QueryBuilderModel extends ComponentModel{
      * Specifies the template for the header with any other widgets.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * Defines class or multiple classes, which are separated by a space in the QueryBuilder element.

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

@@ -51,14 +51,16 @@ export declare class Columns extends ChildProperty<Columns> {
      * Specifies the rule template for the field with any other widgets.
      *
      * @default null
+     * @aspType string
      */
-    ruleTemplate: string;
+    ruleTemplate: string | Function;
     /**
      * Specifies the template for value field such as slider or any other widgets.
      *
      * @default null
+     * @aspType string
      */
-    template: TemplateColumn | string;
+    template: TemplateColumn | string | Function;
     /**
      * Specifies the validation for columns (text, number and date).
      *
@@ -395,8 +397,9 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
      * Specifies the template for the header with any other widgets.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * Defines class or multiple classes, which are separated by a space in the QueryBuilder element.
      * You can add custom styles to the QueryBuilder using the cssClass property.
@@ -858,4 +861,5 @@ export interface ActionEventArgs extends BaseEventArgs {
     condition?: string;
     notCondition?: boolean;
     renderTemplate?: boolean;
+    groupID?: string;
 }

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

@@ -1023,17 +1023,24 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!args.cancel && (this.element.querySelectorAll('.e-group-container').length <= this.maxGroupCount)) {
             var target = eventTarget;
             var dltGroupBtn = void 0;
+            var groupID = '';
+            if (target.className.indexOf('e-group-container') < 0) {
+                groupID = target.querySelector('.e-group-container') && target.querySelector('.e-group-container').id;
+            }
+            else {
+                groupID = target.id;
+            }
             var groupElem = this.groupElem.cloneNode(true);
             groupElem.setAttribute('id', this.element.id + '_group' + this.groupIdCounter);
             if (this.headerTemplate) {
                 if (isRoot) {
                     isGroup = false;
                     groupElem.setAttribute('id', this.element.id + '_group0');
-                    this.headerTemplateFn(groupElem, not, condition, rule);
+                    this.headerTemplateFn(groupElem, not, condition, rule, groupID);
                     this.groupIdCounter = 0;
                 }
                 else {
-                    this.headerTemplateFn(groupElem, not, condition, rule);
+                    this.headerTemplateFn(groupElem, not, condition, rule, groupID);
                 }
             }
             this.groupIdCounter++;
@@ -1127,14 +1134,14 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
     };
-    QueryBuilder.prototype.headerTemplateFn = function (groupElem, not, condition, rule) {
+    QueryBuilder.prototype.headerTemplateFn = function (groupElem, not, condition, rule, groupID) {
         var template;
         var templateID = this.element.id + '_header';
         var args;
         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: this.getRuleCollection(rule, true) };
+                notCondition: this.enableNotCondition ? not : undefined, condition: condition, rule: this.getRuleCollection(rule, true), groupID: groupID };
             this.trigger('actionBegin', args);
             this.headerFn = this.templateParser(this.headerTemplate);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2064,7 +2071,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 getValue(template.write, window)({ elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
                     operator: tempRule.operator, field: column.field, dataSource: column.values });
             }
-            else {
+            else if (typeof itemData.template !== 'function') {
                 itemData.template.write({ elements: tempElements.length > 1 ? tempElements : tempElements[0],
                     values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values });
             }
@@ -2556,7 +2563,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.actionBeginSuccessCallBack = function (args, itemData, ruleID, field, target) {
         if (args.renderTemplate) {
             var valElem = void 0;
-            this.columnTemplateFn = this.templateParser(itemData.template);
+            this.columnTemplateFn = this.templateParser(typeof itemData.template === 'function' ? itemData.template : itemData.template);
             var templateID = this.element.id + field;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
@@ -3427,7 +3434,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.templateParser = function (template) {
         if (template) {
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return templateCompiler(document.querySelector(template).innerHTML.trim());
                 }
                 else {
@@ -3760,7 +3767,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     rule.value = null;
                 }
             }
-            if ((this.isRefreshed && this.enablePersistence) || (this.rule.field !== '' && rule.operator !== '' && (rule.value !== '' &&
+            if ((this.isRefreshed && this.enablePersistence) || (rule.field !== '' && rule.operator !== '' && (rule.value !== '' &&
                 rule.value !== undefined)) || (customObj && customObj.isQuestion)) {
                 var condition = rule.condition;
                 rule = {
@@ -3800,6 +3807,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 else {
                     rule = { 'condition': rule.condition, 'rules': rule.rules };
                 }
+                if (customObj) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    rule.custom = customObj;
+                }
                 if (rule.rules.length === 0) {
                     rule = {};
                 }
@@ -4574,8 +4585,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
                 if (j !== jLen - 1) {
-                    if (condition === '') {
-                        condition = rules.rules[j].condition;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var rule = rules.rules[j];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (condition === '' || (rule && rule.condition !== '' && rule.custom && rule.custom.isCustom)) {
+                        condition = rule.condition;
                     }
                     condition = sqlLocale ? this.l10n.getConstant(condition.toUpperCase()).toUpperCase() : condition.toUpperCase();
                     queryStr += ' ' + condition + ' ';
@@ -4723,7 +4737,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         // eslint-disable-next-line
         if (/^`?([a-z_][a-z0-9_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)) {
             // eslint-disable-next-line
-            matchValue = /^`?([a-z_][a-z0-9_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)[1];
+            matchValue = /^`?([a-zåäö_][a-z0-9åäö_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)[1];
             this.parser.push(['Literal', matchValue]);
             return matchValue.length;
         }
@@ -4919,7 +4933,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         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] };
+                var column = this.getColumn(parser[i][1]);
+                rule = { label: (column && column.label) ? column.label : parser[i][1], field: parser[i][1] };
                 if (parser[i + 1][0] === 'SubOperators') {
                     if (parser[i + 1][1].indexOf('null') > -1 || parser[i + 1][1].indexOf('empty') > -1) {
                         rule.operator = this.getOperator(' ', parser[i + 1][1], sqlLocale);

package/styles/bootstrap-dark.css

@@ -182,7 +182,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap.css

@@ -180,7 +180,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap4.css

@@ -260,7 +260,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap5-dark.css

@@ -230,7 +230,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap5.css

@@ -230,7 +230,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/fluent-dark.css

@@ -210,7 +210,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/fluent.css

@@ -210,7 +210,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/material-dark.css

@@ -156,7 +156,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 2px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 2px;

package/styles/material.css

@@ -181,7 +181,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 2px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 2px;