@syncfusion/ej2-querybuilder 19.4.56 → 20.1.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +5 -39
  2. package/dist/ej2-querybuilder.umd.min.js +2 -2
  3. package/dist/ej2-querybuilder.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-querybuilder.es2015.js +78 -22
  5. package/dist/es6/ej2-querybuilder.es2015.js.map +1 -1
  6. package/dist/es6/ej2-querybuilder.es5.js +74 -18
  7. package/dist/es6/ej2-querybuilder.es5.js.map +1 -1
  8. package/dist/global/ej2-querybuilder.min.js +2 -2
  9. package/dist/global/ej2-querybuilder.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +11 -11
  12. package/src/query-builder/query-builder-model.d.ts +1 -1
  13. package/src/query-builder/query-builder.d.ts +2 -0
  14. package/src/query-builder/query-builder.js +75 -19
  15. package/styles/bootstrap5-dark.css +26 -10
  16. package/styles/bootstrap5.css +26 -10
  17. package/styles/fluent-dark.css +966 -0
  18. package/styles/fluent-dark.scss +1 -0
  19. package/styles/fluent.css +966 -0
  20. package/styles/fluent.scss +1 -0
  21. package/styles/query-builder/_bootstrap5-definition.scss +6 -5
  22. package/styles/query-builder/_fluent-dark-definition.scss +1 -0
  23. package/styles/query-builder/_fluent-definition.scss +7 -7
  24. package/styles/query-builder/_layout.scss +7 -6
  25. package/styles/query-builder/_tailwind-definition.scss +7 -7
  26. package/styles/query-builder/_theme.scss +25 -0
  27. package/styles/query-builder/bootstrap5-dark.css +26 -10
  28. package/styles/query-builder/bootstrap5.css +26 -10
  29. package/styles/query-builder/fluent-dark.css +966 -0
  30. package/styles/query-builder/fluent-dark.scss +15 -0
  31. package/styles/query-builder/fluent.css +966 -0
  32. package/styles/query-builder/fluent.scss +15 -0
  33. package/styles/query-builder/icons/_bootstrap5.scss +1 -1
  34. package/styles/query-builder/icons/_fluent-dark.scss +1 -0
  35. package/styles/query-builder/icons/_fluent.scss +1 -1
  36. package/styles/query-builder/icons/_tailwind-dark.scss +5 -5
  37. package/styles/query-builder/icons/_tailwind.scss +4 -4
  38. package/styles/query-builder/tailwind-dark.css +19 -73
  39. package/styles/query-builder/tailwind.css +18 -72
  40. package/styles/tailwind-dark.css +19 -73
  41. package/styles/tailwind.css +18 -72
@@ -329,7 +329,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
329
329
  };
330
330
  QueryBuilder.prototype.updateSubFieldsFromColumns = function (col, field) {
331
331
  for (var i = 0; i < col.length; i++) {
332
- if (this.separator != '' && col[i].field.indexOf(this.separator) < 0) {
332
+ if (this.separator !== '' && col[i].field.indexOf(this.separator) < 0) {
333
333
  col[i].field = field ? field + this.separator + col[i].field : col[i].field;
334
334
  }
335
335
  if (col[i].operators) {
@@ -556,6 +556,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
556
556
  var template = void 0;
557
557
  args.fields = this.fields;
558
558
  args.columns = this.columns;
559
+ if (rule.field === '') {
560
+ rule.field = column.field;
561
+ }
559
562
  args.operators = this.getOperators(rule.field);
560
563
  args.operatorFields = { text: 'key', value: 'value' };
561
564
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -680,7 +683,6 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
680
683
  }
681
684
  }
682
685
  else {
683
- var dropdowntree = void 0;
684
686
  var ddlField = void 0;
685
687
  var ddlValue = this.isImportRules ? rule.field : rule.field;
686
688
  ddlField = {
@@ -694,11 +696,13 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
694
696
  if (this.fieldModel) {
695
697
  ddlField = __assign({}, ddlField, this.fieldModel);
696
698
  }
697
- dropdowntree = new DropDownTree(ddlField);
699
+ var dropdowntree = new DropDownTree(ddlField);
698
700
  dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
699
701
  if (!isNullOrUndefined(dropdowntree.value)) {
700
- dropdowntree.element.value = dropdowntree.value[0];
702
+ var value = this.getLabelFromColumn(dropdowntree.value[0]);
703
+ dropdowntree.element.value = value;
701
704
  }
705
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
702
706
  var ddlVal = this.isImportRules ?
703
707
  this.GetRootColumnName(rule.field) : dropdowntree.value;
704
708
  this.selectedColumn = this.getColumn(ddlVal);
@@ -733,17 +737,20 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
733
737
  else {
734
738
  groupElem = closest(target, '.e-group-container');
735
739
  rules = this.getParentGroup(groupElem);
740
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
736
741
  var custom = rule.custom;
737
742
  if (Object.keys(rule).length) {
738
743
  rules.rules.push({
739
744
  'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
740
745
  });
741
746
  if (custom) {
747
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
742
748
  rules.rules[rules.rules.length - 1].custom = custom;
743
749
  }
744
750
  }
745
751
  else {
746
752
  if (custom) {
753
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
747
754
  newRule.custom = custom;
748
755
  }
749
756
  rules.rules.push(newRule);
@@ -810,17 +817,17 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
810
817
  }
811
818
  }
812
819
  else {
813
- dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdownlist');
820
+ dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field .e-control'), 'dropdownlist');
814
821
  this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
815
822
  validateRule = !isNullOrUndefined(dropDownObj.index) && this.selectedColumn.validation;
816
823
  }
817
- fieldElem = tempElem.querySelector('.e-rule-field input.e-control');
824
+ fieldElem = tempElem.querySelector('.e-rule-field .e-control');
818
825
  if (validateRule && validateRule.isRequired) {
819
826
  while (indexElem && indexElem.previousElementSibling !== null) {
820
827
  indexElem = indexElem.previousElementSibling;
821
828
  index++;
822
829
  }
823
- fieldElem = tempElem.querySelector('.e-rule-operator input.e-control');
830
+ fieldElem = tempElem.querySelector('.e-rule-operator .e-control');
824
831
  if (!rule.rules[index].operator) {
825
832
  if (fieldElem.parentElement.className.indexOf('e-tooltip') < 0) {
826
833
  this.renderToolTip(fieldElem.parentElement);
@@ -833,7 +840,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
833
840
  if (excludeOprs.indexOf(rule.rules[index].operator) < 0 && (isNullOrUndefined(rule.rules[index].value) &&
834
841
  rule.rules[index].type !== 'date') || rule.rules[index].value === '' ||
835
842
  (rule.rules[index].value instanceof Array && valArray.length < 1)) {
836
- var valElem = tempElem.querySelectorAll('.e-rule-value input.e-control');
843
+ var valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
837
844
  isValid = false;
838
845
  for (var j = 0, jLen = valElem.length; j < jLen; j++) {
839
846
  var element = valElem[j];
@@ -1358,7 +1365,8 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1358
1365
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1359
1366
  ddt.value = args.value[0];
1360
1367
  ddt.dataBind();
1361
- ddtElem.value = args.value[0];
1368
+ var result = this.getLabelFromColumn(args.value[0]);
1369
+ ddtElem.value = result;
1362
1370
  }
1363
1371
  }
1364
1372
  }
@@ -1388,7 +1396,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1388
1396
  };
1389
1397
  QueryBuilder.prototype.changeRule = function (rule, ddlArgs) {
1390
1398
  if (!ddlArgs.itemData) {
1391
- if (this.fieldMode === "DropdownTree") {
1399
+ if (this.fieldMode === 'DropdownTree') {
1392
1400
  var ddt = getComponent(ddlArgs.element, 'dropdowntree');
1393
1401
  if (ddt.value == null) {
1394
1402
  return;
@@ -1412,6 +1420,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1412
1420
  QueryBuilder.prototype.changeFilter = function (flt, dl, grID, rl, tmpRl, dArg) {
1413
1421
  var _this = this;
1414
1422
  if (flt) {
1423
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1415
1424
  var ddlValue = void 0;
1416
1425
  if (this.fieldMode === 'DropdownTree') {
1417
1426
  ddlValue = (dl.value[0]);
@@ -1438,7 +1447,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1438
1447
  this.changeOperator(flt, operatorElem, dl, grID, rl, tmpRl, dArg);
1439
1448
  }
1440
1449
  };
1441
- QueryBuilder.prototype.changeOperator = function (flt, opr, dl, grID, rl, tmpRl, dArg) {
1450
+ QueryBuilder.prototype.changeOperator = function (
1451
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1452
+ flt, opr, dl, grID, rl, tmpRl, dArg) {
1442
1453
  var _this = this;
1443
1454
  var ruleElem;
1444
1455
  var ruleID;
@@ -1820,7 +1831,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1820
1831
  var original = {};
1821
1832
  var result = [];
1822
1833
  var nest = [];
1823
- var value = "";
1834
+ var value = '';
1824
1835
  var isNested = field.indexOf(this.separator);
1825
1836
  var _loop_2 = function (i, iLen) {
1826
1837
  if (isNested === 0) {
@@ -1828,6 +1839,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1828
1839
  }
1829
1840
  else {
1830
1841
  nest = field.split(this_2.separator);
1842
+ // eslint-disable-next-line @typescript-eslint/tslint/config
1831
1843
  nest.forEach(function (element) {
1832
1844
  if (value) {
1833
1845
  value = value[element];
@@ -1875,7 +1887,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1875
1887
  }
1876
1888
  var fieldValue = this.selectedRule.field;
1877
1889
  var isNested = this.selectedRule.field.indexOf(this.separator);
1878
- if (isNested !== 0 && this.fieldMode !== "DropdownTree") {
1890
+ if (isNested !== 0 && this.fieldMode !== 'DropdownTree') {
1879
1891
  var nest = this.selectedRule.field.split(this.separator);
1880
1892
  fieldValue = nest[nest.length - 1];
1881
1893
  }
@@ -1987,10 +1999,10 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
1987
1999
  };
1988
2000
  QueryBuilder.prototype.getItemData = function (parentId) {
1989
2001
  var fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
1990
- if (this.fieldMode === "DropdownTree") {
2002
+ if (this.fieldMode === 'DropdownTree') {
1991
2003
  fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdowntree');
1992
2004
  }
1993
- return this.fieldMode === "DropdownTree" ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
2005
+ return this.fieldMode === 'DropdownTree' ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
1994
2006
  };
1995
2007
  QueryBuilder.prototype.setDefaultValue = function (parentId, isArryValue, isNumber) {
1996
2008
  var itemData = this.getItemData(parentId);
@@ -2321,6 +2333,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
2321
2333
  };
2322
2334
  QueryBuilder.prototype.getPreviousItemData = function (prevItemData, column) {
2323
2335
  if (this.isFieldClose && prevItemData) {
2336
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2324
2337
  prevItemData = this.getColumn(prevItemData.value);
2325
2338
  }
2326
2339
  if (column.template && prevItemData && Object.keys(prevItemData).length < 4) {
@@ -2334,6 +2347,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
2334
2347
  var filtObj = this.fieldMode === 'DropdownTree' ? getComponent(filtElem, 'dropdowntree')
2335
2348
  : getComponent(filtElem, 'dropdownlist');
2336
2349
  var column = this.fieldMode === 'DropdownTree' ? this.getColumn(filtObj.value[0])
2350
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2337
2351
  : this.getColumn(filtObj.value);
2338
2352
  this.selectedRule = column;
2339
2353
  if (isRender) {
@@ -2578,7 +2592,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
2578
2592
  }
2579
2593
  dropDownObj = this.fieldMode === 'DropdownTree' ? getComponent(target, 'dropdowntree') :
2580
2594
  getComponent(target, 'dropdownlist');
2595
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2581
2596
  var column = this.fieldMode === 'DropdownTree' ? this.getColumn(dropDownObj.value[0])
2597
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2582
2598
  : this.getColumn(dropDownObj.value);
2583
2599
  if (!this.isImportRules && rule.rules[index].field && rule.rules[index].field.toLowerCase() !== column.field.toLowerCase()) {
2584
2600
  if (!(ruleElem.querySelectorAll('.e-template')) && !(operator.indexOf('null') > -1)
@@ -3316,6 +3332,9 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
3316
3332
  if (document.querySelectorAll(template).length) {
3317
3333
  return compile(document.querySelector(template).innerHTML.trim());
3318
3334
  }
3335
+ else {
3336
+ return compile(template);
3337
+ }
3319
3338
  }
3320
3339
  catch (error) {
3321
3340
  return compile(template);
@@ -3512,11 +3531,13 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
3512
3531
  }
3513
3532
  }
3514
3533
  var isTemplateRendered = clnruleElem.querySelector('.e-template-value');
3534
+ // eslint-disable
3515
3535
  try {
3516
3536
  detach(clnruleElem);
3517
3537
  }
3518
3538
  catch (err) {
3519
3539
  }
3540
+ // eslint-enable
3520
3541
  if (column && column.ruleTemplate) {
3521
3542
  this.clearQBTemplate([clnruleElem.id]);
3522
3543
  }
@@ -3925,6 +3946,11 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
3925
3946
  }
3926
3947
  }
3927
3948
  }
3949
+ if (this.dataSource instanceof DataManager) {
3950
+ if (!isNullOrUndefined(pred) && (pred.operator === 'isnull' || pred.operator === 'notnull')) {
3951
+ pred.operator = pred.operator === 'isnull' ? 'equal' : 'notequal';
3952
+ }
3953
+ }
3928
3954
  return pred;
3929
3955
  };
3930
3956
  QueryBuilder.prototype.getLocale = function () {
@@ -4185,7 +4211,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
4185
4211
  }
4186
4212
  }
4187
4213
  }
4188
- if (rule.rules.length === 0) {
4214
+ if (rule.rules.length === 0 && this.headerTemplate) {
4189
4215
  rule.rules[0] = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
4190
4216
  }
4191
4217
  var ruleColl = rule.rules;
@@ -4429,7 +4455,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
4429
4455
  }
4430
4456
  queryStr += rule.field + ' ' + this.operators[rule.operator] + ' ' + valueStr;
4431
4457
  }
4432
- if (rule.condition && rule.condition != '') {
4458
+ if (rule.condition && rule.condition !== '') {
4433
4459
  condition = rule.condition;
4434
4460
  }
4435
4461
  }
@@ -4570,7 +4596,6 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
4570
4596
  this.parser.push(['Literal', matchValue]);
4571
4597
  return matchValue.length + 2;
4572
4598
  }
4573
- // eslint-disable-next-line
4574
4599
  if (this.checkNumberLiteral(sqlString)) {
4575
4600
  matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
4576
4601
  this.parser.push(['Literal', matchValue]);
@@ -4665,6 +4690,37 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
4665
4690
  var columnData = this.getColumn(rules.field);
4666
4691
  return columnData.type;
4667
4692
  };
4693
+ QueryBuilder.prototype.getLabelFromColumn = function (field) {
4694
+ var label = '';
4695
+ var l = 0;
4696
+ if (this.separator !== '') {
4697
+ var fieldColl = field.split(this.separator);
4698
+ for (var i = 0; i < fieldColl.length; i++) {
4699
+ label += this.getLabelFromField(fieldColl, i + 1);
4700
+ l++;
4701
+ if (l < fieldColl.length) {
4702
+ label += this.separator;
4703
+ }
4704
+ }
4705
+ return label;
4706
+ }
4707
+ else {
4708
+ var labelItem = this.getColumn(field).label;
4709
+ return labelItem;
4710
+ }
4711
+ };
4712
+ QueryBuilder.prototype.getLabelFromField = function (field, startIdx) {
4713
+ var fieldName = '';
4714
+ var j = 0;
4715
+ for (var k = 0; k < startIdx; k++) {
4716
+ fieldName += field[k];
4717
+ j++;
4718
+ if (j < startIdx) {
4719
+ fieldName += this.separator;
4720
+ }
4721
+ }
4722
+ return this.getColumn(fieldName).label;
4723
+ };
4668
4724
  QueryBuilder.prototype.processParser = function (parser, rules, levelColl) {
4669
4725
  var j;
4670
4726
  var jLen;