@syncfusion/ej2-querybuilder 19.4.40 → 19.4.50

package/dist/global/index.d.ts

@@ -1,15 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.40
-*  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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
-/*!
-*  filename: index.d.ts
-*  version : 19.3.53
+*  version : 19.4.50
 *  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,14 +1,10 @@
 {
   "_from": "@syncfusion/ej2-querybuilder@*",
-  "_id": "@syncfusion/ej2-querybuilder@19.3.53",
+  "_id": "@syncfusion/ej2-querybuilder@19.4.48",
   "_inBundle": false,
-  "_integrity": "sha512-mNLWl/HVA7Puoc6JI++8ofSnIVgIfMK+ncFg3SOFvAdAfj0r7Nz0hGeJfKL7p+2yU75Ila1dIQ8T/pbwAYcVmQ==",
+  "_integrity": "sha512-38+4DXealvr+/ilsoiXsSbntiZsi12LiBsyZj7m2Lt2sYbqASv3glc3KevxKzpN+56ID6iVUnDtp3hAGn6FehA==",
   "_location": "/@syncfusion/ej2-querybuilder",
-  "_phantomChildren": {
-    "@syncfusion/ej2-icons": "19.4.38",
-    "@syncfusion/ej2-lists": "19.3.53",
-    "@syncfusion/ej2-popups": "19.3.53"
-  },
+  "_phantomChildren": {},
   "_requested": {
     "type": "range",
     "registry": true,
@@ -27,8 +23,8 @@
     "/@syncfusion/ej2-react-querybuilder",
     "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-19.3.53.tgz",
-  "_shasum": "a3b528db30e5b0c67ed6174ff167a113e96b7a25",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-19.4.48.tgz",
+  "_shasum": "40848896d9dba8fe345fae9dc651c97e14420f14",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.38",
-    "@syncfusion/ej2-buttons": "~19.4.38",
-    "@syncfusion/ej2-calendars": "~19.4.38",
-    "@syncfusion/ej2-dropdowns": "~19.4.40",
-    "@syncfusion/ej2-inputs": "~19.4.38",
-    "@syncfusion/ej2-splitbuttons": "~19.4.40"
+    "@syncfusion/ej2-base": "~19.4.48",
+    "@syncfusion/ej2-buttons": "~19.4.50",
+    "@syncfusion/ej2-calendars": "~19.4.50",
+    "@syncfusion/ej2-dropdowns": "~19.4.50",
+    "@syncfusion/ej2-inputs": "~19.4.48",
+    "@syncfusion/ej2-splitbuttons": "~19.4.48"
   },
   "deprecated": false,
   "description": "Essential JS 2 QueryBuilder",
@@ -72,7 +68,7 @@
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
-  "sideEffects": false,
   "typings": "index.d.ts",
-  "version": "19.4.40"
+  "version": "19.4.50",
+  "sideEffects": false
 }

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

@@ -284,6 +284,10 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private isAddSuccess;
     private isNotValueChange;
     private isRoot;
+    private prevItemData;
+    private isFieldChange;
+    private isFieldClose;
+    private isDestroy;
     /**
      * Triggers when the component is created.
      *
@@ -521,6 +525,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private changeValue;
     private filterValue;
     private changeValueSuccessCallBack;
+    private fieldClose;
     private changeField;
     private changeRule;
     private changeFilter;
@@ -741,6 +746,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private sqlParser;
     private parseSqlStrings;
     private checkLiteral;
+    private checkNumberLiteral;
     private getOperator;
     private getTypeFromColumn;
     private processParser;

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

@@ -188,6 +188,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.isNotified = false;
         _this.isAddSuccess = false;
         _this.isNotValueChange = false;
+        _this.isFieldChange = false;
+        _this.isFieldClose = false;
+        _this.isDestroy = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -667,8 +670,8 @@ var QueryBuilder = /** @class */ (function (_super) {
                     ddlField = {
                         dataSource: this.columns,
                         fields: this.fields, placeholder: this.l10n.getConstant('SelectField'),
-                        popupHeight: ((this.columns.length > 5) ? height : 'auto'),
-                        change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this)
+                        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)
                     };
                     if (this.fieldModel) {
                         ddlField = __assign({}, ddlField, this.fieldModel);
@@ -690,11 +693,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                     var ddlValue = this.isImportRules ? rule.field : rule.field;
                     ddlField = {
                         fields: { dataSource: this.columns,
-                            value: "field", text: "label", child: 'columns', expanded: "expanded" },
+                            value: 'field', text: 'label', child: 'columns', expanded: 'expanded' },
                         placeholder: this.l10n.getConstant('SelectField'), showClearButton: false,
                         popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
                         change: this.changeField.bind(this), value: this.isImportRules ? [ddlValue] : null,
-                        open: this.popupOpen.bind(this)
+                        open: this.popupOpen.bind(this, false)
                     };
                     if (this.fieldModel) {
                         ddlField = __assign({}, ddlField, this.fieldModel);
@@ -738,12 +741,19 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             groupElem = closest(target, '.e-group-container');
             rules = this.getParentGroup(groupElem);
+            var custom = rule.custom;
             if (Object.keys(rule).length) {
                 rules.rules.push({
                     'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
                 });
+                if (custom) {
+                    rules.rules[rules.rules.length - 1].custom = custom;
+                }
             }
             else {
+                if (custom) {
+                    newRule.custom = custom;
+                }
                 rules.rules.push(newRule);
             }
         }
@@ -1297,21 +1307,41 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
     };
+    QueryBuilder.prototype.fieldClose = function (id) {
+        if (this.isFieldChange || this.isDestroy) {
+            return;
+        }
+        this.isFieldClose = true;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var ddl = getComponent(id, 'dropdownlist');
+        var item = ddl.popupObj.element.querySelector('.e-active');
+        var itemData = ddl.getItemData();
+        ddl.value = itemData.value;
+        var customArgs = { element: ddl.element, value: itemData.value, isInteracted: true,
+            previousItemData: this.prevItemData, previousItem: null, item: item, itemData: itemData, event: null, e: null };
+        this.changeField(customArgs);
+        this.isFieldChange = false;
+    };
     QueryBuilder.prototype.changeField = function (args) {
         if (args.isInteracted) {
+            if (isNullOrUndefined(args.value)) {
+                return;
+            }
+            this.isFieldChange = true;
+            this.prevItemData = args.itemData;
             var fieldElem = closest(args.element, '.e-rule-filter') || closest(args.element, '.e-rule-sub-filter');
             var column = this.fieldMode === 'DropdownTree' ? this.getColumn(args.value[0]) : this.getColumn(args.value);
             if (this.fieldMode === 'DropdownTree' && fieldElem != null) {
-                var ddtElem = fieldElem.querySelector(".e-control");
+                var ddtElem = fieldElem.querySelector('.e-control');
                 var ddt = getComponent(ddtElem, 'dropdowntree');
                 if (column) {
-                    if (column.type == 'object') {
+                    if (column.type === 'object') {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         ddt.value = args.oldValue;
                         ddt.dataBind();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         if (isNullOrUndefined(args.oldValue)) {
-                            ddtElem.value = "";
+                            ddtElem.value = '';
                         }
                         else {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1347,6 +1377,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     ruleElem = ruleElem.previousElementSibling;
                     index++;
                 }
+                rules.rules[index].value = '';
                 this.changeRule(rules.rules[index], args);
             }
         }
@@ -1436,6 +1467,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             getComponent(tooltipElem[i], 'tooltip').destroy();
         }
         if (!args.cancel) {
+            if (isNullOrUndefined(this.selectedColumn)) {
+                return;
+            }
             tempRule.type = this.selectedColumn.type;
             if (ruleElem.querySelector('.e-template')) {
                 rule.value = '';
@@ -1470,15 +1504,20 @@ var QueryBuilder = /** @class */ (function (_super) {
         tempElem.appendChild(subFieldElem);
         var height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
         var subFieldData = Object.keys(this.selectedColumn.columns[0]);
-        var dropDownList = new DropDownList({
+        var ddlField;
+        ddlField = {
             dataSource: this.selectedColumn.columns,
             fields: this.fields,
             placeholder: this.l10n.getConstant('SelectField'),
             popupHeight: ((subFieldData.length > 5) ? height : 'auto'),
             change: this.changeField.bind(this),
             index: 0,
-            open: this.popupOpen.bind(this)
-        });
+            open: this.popupOpen.bind(this, false)
+        };
+        if (this.fieldModel) {
+            ddlField = __assign({}, ddlField, this.fieldModel);
+        }
+        var dropDownList = new DropDownList(ddlField);
         dropDownList.appendTo('#' + ruleId + '_subfilterkey' + this.subFilterCounter);
         if (this.isImportRules) {
             var subField = this.selectedColumn.columns;
@@ -1598,7 +1637,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     change: this.changeField.bind(this),
                     index: 0,
                     value: value,
-                    open: this.popupOpen.bind(this)
+                    open: this.popupOpen.bind(this, false)
                 };
                 if (this.operatorModel) {
                     ddlOperator = __assign({}, ddlOperator, this.operatorModel);
@@ -1617,10 +1656,13 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.updateRules(ddlArgs.element, ddlArgs.item);
         }
     };
-    QueryBuilder.prototype.popupOpen = function (args) {
+    QueryBuilder.prototype.popupOpen = function (isField, args) {
         if (this.enableRtl) {
             addClass([args.popup.element], 'e-rtl');
         }
+        if (isField) {
+            this.isFieldClose = false;
+        }
     };
     QueryBuilder.prototype.destroyControls = function (target, isRuleTemplate) {
         var element = isRuleTemplate ? target : target.nextElementSibling;
@@ -1813,7 +1855,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             change: this.changeValue.bind(this, i),
             close: this.closePopup.bind(this, i),
             actionBegin: this.multiSelectOpen.bind(this, parentId + '_valuekey' + i),
-            open: this.popupOpen.bind(this)
+            open: this.popupOpen.bind(this, false)
         };
         if (this.valueModel && this.valueModel.multiSelectModel) {
             multiSelectValue = __assign({}, multiSelectValue, this.valueModel.multiSelectModel);
@@ -1873,8 +1915,10 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.closePopup = function (i, args) {
         var element = document.getElementById(args.popup.element.id.replace('_popup', ''));
-        var value = getComponent(element, 'multiselect').value;
-        this.updateRules(element, value, i);
+        if (element) {
+            var value = getComponent(element, 'multiselect').value;
+            this.updateRules(element, value, i);
+        }
     };
     QueryBuilder.prototype.processTemplate = function (target, itemData, rule, tempRule) {
         var container = closest(target, '.e-rule-container');
@@ -2235,6 +2279,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         return 0;
     };
     QueryBuilder.prototype.getPreviousItemData = function (prevItemData, column) {
+        if (this.isFieldClose && prevItemData) {
+            prevItemData = this.getColumn(prevItemData.value);
+        }
         if (column.template && prevItemData && Object.keys(prevItemData).length < 4) {
             prevItemData.template = column.template;
         }
@@ -2727,6 +2774,7 @@ var QueryBuilder = /** @class */ (function (_super) {
      * @returns {void}
      */
     QueryBuilder.prototype.destroy = function () {
+        this.isDestroy = true;
         var queryElement = this.element;
         if (!queryElement) {
             return;
@@ -2782,6 +2830,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.clearQBTemplate();
         }
         classList(this.element, [], ['e-rtl', 'e-responsive', 'e-device']);
+        this.isDestroy = false;
     };
     /**
      * Adds single or multiple rules.
@@ -3422,7 +3471,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             var isTemplateRendered = clnruleElem.querySelector('.e-template-value');
-            detach(clnruleElem);
+            try {
+                detach(clnruleElem);
+            }
+            catch (err) {
+            }
             if (column && column.ruleTemplate) {
                 this.clearQBTemplate([clnruleElem.id]);
             }
@@ -3542,10 +3595,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             if ((this.isRefreshed && this.enablePersistence) || (this.rule.field !== '' && rule.operator !== '' && (rule.value !== '' &&
-                rule.value !== undefined))) {
+                rule.value !== undefined)) || (customObj && customObj.isQuestion)) {
+                var condition = rule.condition;
                 rule = {
                     'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value
                 };
+                if (condition) {
+                    rule.condition = condition;
+                }
                 if (customObj) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     rule.custom = customObj;
@@ -3567,6 +3624,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                     rule.not = notValue;
                 }
             }
+            else if ((isNullOrUndefined(rule.condition)) && isNullOrUndefined(rule.rules)) {
+                rule = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
+            }
             else {
                 if (this.enableNotCondition) {
                     rule = { 'condition': rule.condition, 'rules': rule.rules, 'not': rule.not };
@@ -3750,7 +3810,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (ruleColl[i].operator.length) {
+            else if (!isNullOrUndefined(ruleColl[i].operator) && !isNullOrUndefined(ruleColl[i].operator.length)) {
                 var oper = ruleColl[i].operator.toLowerCase();
                 var isDateFilter = false;
                 var dateOperColl = ['equal', 'notequal', 'greaterthan', 'greaterthanorequal', 'lessthan', 'lessthanorequal'];
@@ -3851,6 +3911,12 @@ var QueryBuilder = /** @class */ (function (_super) {
                     break;
                 }
             }
+            else if (field.indexOf(this.separator) > -1) {
+                if (columns[i].field === field.split(this.separator)[0]) {
+                    column = columns[i];
+                    break;
+                }
+            }
         }
         return column;
     };
@@ -3940,7 +4006,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         if (!(operator.indexOf('null') > -1 || operator.indexOf('empty') > -1)) {
             for (var j = 0, jLen = value.length; j < jLen; j++) {
-                if (value[j] !== '') {
+                if (value[j] !== '' || ((operator === 'in' || operator === 'notin') && column.type === 'string')) {
                     if (j === 0) {
                         var gte = 'greaterthanorequal';
                         switch (operator) {
@@ -4082,7 +4148,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!isNullOrUndefined(ruleColl)) {
             for (var i = 0, len = ruleColl.length; i < len; i++) {
                 var keys = Object.keys(ruleColl[i]);
-                if (!isNullOrUndefined(ruleColl[i].rules) && keys.indexOf('rules') > -1) {
+                if (!isNullOrUndefined(ruleColl[i].rules) && keys.indexOf('rules') > -1 && (ruleColl[i].rules.length !== 0)) {
                     parentElem = this.renderGroup(ruleColl[i], ruleColl[i].condition, parentElem, ruleColl[i].not);
                     parentElem = this.importRules(ruleColl[i], parentElem, true);
                 }
@@ -4319,8 +4385,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                     queryStr += rule.field + ' ' + this.operators[rule.operator] + ' ' + valueStr;
                 }
+                if (rule.condition && rule.condition != '') {
+                    condition = rule.condition;
+                }
             }
             if (j !== jLen - 1) {
+                if (condition === '') {
+                    condition = rules.rules[j].condition;
+                }
                 queryStr += ' ' + condition.toUpperCase() + ' ';
             }
         }
@@ -4454,6 +4526,12 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.parser.push(['Literal', matchValue]);
             return matchValue.length + 2;
         }
+        // eslint-disable-next-line
+        if (this.checkNumberLiteral(sqlString)) {
+            matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
+            this.parser.push(['Literal', matchValue]);
+            return matchValue.length;
+        }
         //String
         if (/^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(sqlString)) {
             matchValue = /^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(sqlString)[0];
@@ -4493,6 +4571,25 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         return false;
     };
+    QueryBuilder.prototype.checkNumberLiteral = function (sqlString) {
+        var lastParser = this.parser[this.parser.length - 1];
+        if (!lastParser) {
+            return true;
+        }
+        else {
+            if (/^[0-9]+(\.[0-9]+)?/.exec(sqlString)) {
+                var secParser = this.parser[this.parser.length - 2];
+                var betweenParser = this.parser[this.parser.length - 3];
+                if (lastParser[0] === 'Left' && (secParser && secParser[0] === 'Conditions')) {
+                    return true;
+                }
+                if (lastParser[0] === 'Conditions' && (betweenParser && betweenParser[1].indexOf('between') < 0)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
     QueryBuilder.prototype.getOperator = function (value, operator) {
         var operators = {
             '=': 'equal', '!=': 'notequal', '<': 'lessthan', '>': 'greaterthan', '<=': 'lessthanorequal',

package/styles/bootstrap4.css

@@ -69,6 +69,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/bootstrap5-dark.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -321,7 +326,7 @@
 
 .e-query-builder .e-rule-list > ::after,
 .e-query-builder .e-rule-list > ::before {
-  border-style: dotted;
+  border-style: dashed;
   content: '';
   left: -12px;
   position: absolute;
@@ -495,8 +500,8 @@
 .e-query-builder .e-group-body .e-rule-container.e-joined-rule {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-style: dashed;
+  border-top-width: 1px;
   margin-top: 0;
 }
 

package/styles/bootstrap5.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -321,7 +326,7 @@
 
 .e-query-builder .e-rule-list > ::after,
 .e-query-builder .e-rule-list > ::before {
-  border-style: dotted;
+  border-style: dashed;
   content: '';
   left: -12px;
   position: absolute;
@@ -495,8 +500,8 @@
 .e-query-builder .e-group-body .e-rule-container.e-joined-rule {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-style: dashed;
+  border-top-width: 1px;
   margin-top: 0;
 }
 

package/styles/query-builder/_bootstrap5-definition.scss

@@ -29,7 +29,7 @@ $qrybldr-rule-list-after-border: 0 0 0 2px !default;
 $qrybldr-rule-list-before-border: 0 0 2px 2px !default;
 $qrybldr-rule-list-rtl-after-border: 0 2px 0 0 !default;
 $qrybldr-rule-list-rtl-before-border: 0 2px 2px 0 !default;
-$qrybldr-rule-list-border-style: dotted !default;
+$qrybldr-rule-list-border-style: dashed !default;
 $before-border-height: calc(50% + 14px) !default;
 $after-border-height: calc(50% + 8px) !default;
 $qrybldr-add-icon: '\e805' !default;

package/styles/query-builder/_fluent-definition.scss

@@ -0,0 +1,107 @@
+//layout variables
+$qrybldr-width: auto !default;
+$qrybldr-height: auto !default;
+$qrybldr-brdr: 1px solid !default;
+$qrybldr-btngrp-brdr: none !default;
+$grpcon-padding: 12px !default;
+$qrybldr-device-diaplay: inline-block !default;
+$group-action-margin: 12px !default;
+$group-action-mrgntop: 5px !default;
+$groupbody-paddingleft: 20px !default;
+$rulecon-height: auto !default;
+$rulecon-padding: 8px 0 8px 8px !default;
+$hrmode-ruledlt-mrgn: 12px !default;
+$vrmode-ruledlt-mrgnpos: absolute !default;
+$qrybldr-rulelist-grcon-float: right !default;
+$qrybldr-rulelist-grcon-width: 100% !default;
+$qrybldr-button-hide: none !default;
+$qrybldr-field: left !default;
+$ruledelete-margin: 8px !default;
+$radio-wrapper-margin: 15px !default;
+$qrybldr-group-container-margin-top: 12px !default;
+$qrybldr-group-container-margin-left: 0 !default;
+$qrybldr-posn-relative: relative !default;
+$rule-boxshadow: none !default;
+$qrybldr-rule-list-first-left: -12px !default;
+$qrybldr-rule-list-first-right: -12px !default;
+$qrybldr-rule-list-before-top: -10px !default;
+$qrybldr-rule-list-after-border: 0 0 0 2px !default;
+$qrybldr-rule-list-before-border: 0 0 2px 2px !default;
+$qrybldr-rule-list-rtl-after-border: 0 2px 0 0 !default;
+$qrybldr-rule-list-rtl-before-border: 0 2px 2px 0 !default;
+$qrybldr-rule-list-border-style: dotted !default;
+$before-border-height: calc(50% + 14px) !default;
+$after-border-height: calc(50% + 8px) !default;
+$qrybldr-add-icon: '\e805' !default;
+$qrybldr-delete-icon: '\e7e7' !default;
+$bigger-group-action-margin: 16px !default;
+$bigger-groupbody-paddingleft: 24px !default;
+$bigger-hrmode-ruledlt-mrgn: 15px !default;
+$bigger-rulecon-padding: 10px 0 10px 10px !default;
+$device-rule-padding: 15px 0 0 15px !default;
+$device-rule-padding-right: 15px !default;
+$bigger-ruledelete-marginleft: 10px !default;
+$qrybldr-rule-border: 1px solid !default;
+$qrybldr-rule-list-after-height: calc(100% - 17px) !default;
+$qrybldr-rule-list-height: 25px !default;
+$qrybldr-rule-list-top: 17px !default;
+$qrybldr-nav-width: 10px !default;
+$qrybldr-rule-container-after-height: calc(50% + 6px) !default;
+$qrybldr-rule-container-after-top: calc(50% - 3px) !default;
+$qrybldr-grpcon-brder-left: -11px !default;
+$bigger-rule-list-first-top: -14px !default;
+$qrybldr-rulecont-margin: -1px !default;
+$ruledelete-shadow: none !default;
+$device-rulecon-padding: 14px !default;
+$qrybldr-rulelist: 14px 0 14px 0 !default;
+$qrybldr-bigger-rulelist: 16px 0 16px 0 !default;
+$qrybldr-add-mrgn-btm: 2px !default;
+$device-rulecon-right-padding: 8px !default;
+$qrybldr-summary-padding: 12px !default;
+$qrybldr-summary-btn-padding: 12px !default;
+$qrybldr-bigger-summary-padding: 15px !default;
+$qrybldr-bigger-summary-btn-padding: 15px !default;
+$qrybldr-summary-text-width: 100% !default;
+$qrybldr-clspe-rule-pos: absolute !default;
+$qrybldr-btngrp-shadow: none !default;
+$qrybldr-multi-width: 190px !default;
+$qrybldr-device-value-width: 100% !default;
+$qrybldr-btngroup-display: inline-block !default;
+$qrybldr-grpcon-aftrbrder-left: -11px !default;
+$after-ruleborder-height: calc(50% + 10px) !default;
+$qrybldr-val-error-border: 8px solid !default;
+$biggerafter-ruleborder-height: calc(50% + 12px) !default;
+$qrybldr-bigger-rule-list-before-top: -12px !default;
+$qrybldr-rule-list-first-top: -11px !default;
+$qrybldr-collapse-rule-padding: 0 14px !default;
+$qrybldr-multi-maxwidth: 200px !default;
+$qrybldr-device-multi-maxwidth: 100% !default;
+$qrybldr-btn-left: 10px !default;
+$qrybldr-touch-btn-left: 14px !default;
+$qrybldr-collapse-font-size: 20px !default;
+$qrybldr-collapse-padding: 5px !default;
+$qrybldr-collapse-box-shadow: none !default;
+$qrybldr-collapse-txtarea-margin: 8px !default;
+$qrybldr-brdr-radius: 4px !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qrybldr-smrytxt-font-size: 14px !default;
+$qrybldr-bigger-smrytxt-font-size: 16px !default;
+$qrybldr-spinner-right: 5px !default;
+$qrybldr-spinner-left: auto !default;
+$qrybldr-rtl-spinner-right: auto !default;
+$qrybldr-rtl-spinner-left: 5px !default;
+$qrybldr-btngrp-brdr-radius: 4px !default;
+$qrybldr-btngroup-bgcolor: $primary !default;
+$qrybldr-btngroup-color: $primary-text-color !default;
+$qrybldr-color: $placeholder-text-color !default;
+$qrybldr-rule-list-border-color: $border-light !default;
+$qrybldr-btngroup-active-bgcolor: $primary !default;
+$qrybldr-btngroup-active-color: $primary-text-color !default;
+$groupborder-color: $border-light !default;
+$groupfill-color: $secondary-bg-color !default;
+$groupfill-bgcolor: $content-bg-color-alt1 !default;
+$qrybldr-brdr-color: $border-light !default;
+$qrybldr-bg-color: transparent !default;
+$qrybldr-val-error-bg-color: $danger-light !default;
+$qrybldr-val-error-color: $danger-bg-color !default;
+$qrybldr-collapse-brdr-color: $border-light !default;

package/styles/query-builder/_layout.scss

@@ -309,7 +309,12 @@
           border-top-left-radius: 0;
           border-top-right-radius: 0;
           border-top-style: $qrybldr-rule-list-border-style;
-          border-top-width: 2px;
+          @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            border-top-width: 1px;
+          }
+          @else {
+            border-top-width: 2px;
+          }
           margin-top: 0;
         }
 

package/styles/query-builder/_tailwind-definition.scss

@@ -29,7 +29,7 @@ $qrybldr-rule-list-after-border: 0 0 0 2px !default;
 $qrybldr-rule-list-before-border: 0 0 2px 2px !default;
 $qrybldr-rule-list-rtl-after-border: 0 2px 0 0 !default;
 $qrybldr-rule-list-rtl-before-border: 0 2px 2px 0 !default;
-$qrybldr-rule-list-border-style: solid !default;
+$qrybldr-rule-list-border-style: dashed !default;
 $before-border-height: calc(50% + 14px) !default;
 $after-border-height: calc(50% + 8px) !default;
 $qrybldr-add-icon: '\e78a' !default;