@syncfusion/ej2-querybuilder 21.2.3 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.3
+*  version : 22.1.34
 *  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.1.37",
+  "_id": "@syncfusion/ej2-querybuilder@18.24.1",
   "_inBundle": false,
-  "_integrity": "sha512-ny2QXKDRqq0cfM56tG/wJ3MG4CGu/dWW/+Z0ahLbMCUFZiCvswLLsPZr339M4AUMipUmS2Kj8mqOwhxmIW7hFA==",
+  "_integrity": "sha512-dnkNGldsTgLr67ZY2I6RDOBw4ox4YWjryIXdUv0N90OlnNbIWFplRDsA2orB9lQ6lGwTG6wINbXO0gVX0+ErBA==",
   "_location": "/@syncfusion/ej2-querybuilder",
   "_phantomChildren": {},
   "_requested": {
@@ -18,10 +18,13 @@
   },
   "_requiredBy": [
     "/",
-    "/@syncfusion/ej2"
+    "/@syncfusion/ej2",
+    "/@syncfusion/ej2-angular-querybuilder",
+    "/@syncfusion/ej2-react-querybuilder",
+    "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-21.1.37.tgz",
-  "_shasum": "deb5baca8711386d33cd39b631d01be91d84f158",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-18.24.1.tgz",
+  "_shasum": "4e0221fd832db21a21411029f3386f41bb9c9e5d",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -29,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-buttons": "~21.2.3",
-    "@syncfusion/ej2-calendars": "~21.2.3",
-    "@syncfusion/ej2-dropdowns": "~21.2.3",
-    "@syncfusion/ej2-inputs": "~21.2.3",
-    "@syncfusion/ej2-splitbuttons": "~21.2.3"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-calendars": "~22.1.34",
+    "@syncfusion/ej2-dropdowns": "~22.1.34",
+    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-splitbuttons": "~22.1.34"
   },
   "deprecated": false,
   "description": "Essential JS 2 QueryBuilder",
@@ -63,7 +66,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "21.2.3",
+  "version": "22.1.34",
   "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 } 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 } from '@syncfusion/ej2-popups';import { compile as templateCompiler } from '@syncfusion/ej2-base';
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, getComponent, MouseEventArgs, Browser, compile, append } 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 } from '@syncfusion/ej2-popups';import { compile as templateCompiler } from '@syncfusion/ej2-base';
 import {TemplateColumn,Validation,FormatObject,ActionEventArgs,ChangeEventArgs,RuleChangeEventArgs,FieldMode,DisplayMode,SortDirection} from "./query-builder";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -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.

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

@@ -31,7 +31,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Query Builder Source
  */
-import { Component, NotifyPropertyChanges, getComponent, Browser, compile } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, getComponent, Browser, compile, append } 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, getUniqueID, select } from '@syncfusion/ej2-base';
@@ -576,22 +576,37 @@ var QueryBuilder = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 template = this.ruleTemplateFn(args, this, ruleElem.id, templateID)[0];
+                elem = template;
+                elem.className += ' e-rule-field';
+                ruleElem.appendChild(elem);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isAngular) {
                 var templateColl = this.ruleTemplateFn(args, this, ruleElem.id, templateID);
                 template = (templateColl[0].nodeType === 3) ? templateColl[1] : templateColl[0];
+                elem = template;
+                elem.className += ' e-rule-field';
+                ruleElem.appendChild(elem);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            else if (this.isVue3) {
+                template = this.ruleTemplateFn(args, this, 'Template', templateID);
+                elem = template;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                append(elem, ruleElem);
+                ruleElem.children[ruleElem.children.length - 1].className += ' e-rule-field';
             }
             else {
                 template = this.ruleTemplateFn(args, this, 'Template', templateID)[0];
+                elem = template;
+                elem.className += ' e-rule-field';
+                ruleElem.appendChild(elem);
             }
-            elem = template;
-            elem.className += ' e-rule-field';
         }
         else {
             elem = this.ruleElem.querySelector('.e-rule-field').cloneNode(true);
+            ruleElem.appendChild(elem);
         }
-        ruleElem.appendChild(elem);
         if (column && column.ruleTemplate && rule) {
             this.renderReactTemplates();
         }
@@ -1125,16 +1140,24 @@ var QueryBuilder = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 template = this.headerFn(args, this, groupElem.id, templateID)[0];
+                groupHdr.appendChild(template);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isAngular) {
                 var templateColl = this.headerFn(args, this, groupElem.id, templateID);
                 template = (templateColl[0].nodeType === 3) ? templateColl[1] : templateColl[0];
+                groupHdr.appendChild(template);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            else if (this.isVue3) {
+                template = this.headerFn(args, this, groupElem.id, templateID);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                append(template, groupHdr);
             }
             else {
                 template = this.headerFn(args, this, 'Template', templateID)[0];
+                groupHdr.appendChild(template);
             }
-            groupHdr.appendChild(template);
             this.renderReactTemplates();
         }
         return groupElem;
@@ -2041,7 +2064,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 });
             }
@@ -2533,7 +2556,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) {
@@ -3404,7 +3427,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 {