@syncfusion/ej2-querybuilder 19.4.56 → 20.1.47

package/styles/fluent.scss

@@ -0,0 +1 @@
+@import 'query-builder/fluent.scss';

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

@@ -9,7 +9,7 @@ $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;
+$rulecon-padding: 8px 8px 8px 8px !default;
 $hrmode-ruledlt-mrgn: 12px !default;
 $vrmode-ruledlt-mrgnpos: absolute !default;
 $qrybldr-rulelist-grcon-float: right !default;
@@ -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: dashed !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;
@@ -37,10 +37,10 @@ $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;
+$bigger-rulecon-padding: 16px 16px 16px 16px !default;
 $device-rule-padding: 15px 0 0 15px !default;
 $device-rule-padding-right: 15px !default;
-$bigger-ruledelete-marginleft: 10px !default;
+$bigger-ruledelete-marginleft: 16px !default;
 $qrybldr-rule-border: 1px solid !default;
 $qrybldr-rule-list-after-height: calc(100% - 17px) !default;
 $qrybldr-rule-list-height: 25px !default;
@@ -91,7 +91,7 @@ $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-bgcolor: $content-bg-color !default;
 $qrybldr-btngroup-color: $primary-text-color !default;
 $qrybldr-color: $placeholder-text-color !default;
 $qrybldr-rule-list-border-color: $border-light !default;
@@ -105,3 +105,4 @@ $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;
+$qrybldr-icon-color: $icon-color !default;

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

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

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

@@ -5,7 +5,7 @@ $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-margin: 16px !default;
 $group-action-mrgntop: 5px !default;
 $groupbody-paddingleft: 20px !default;
 $rulecon-height: auto !default;
@@ -34,10 +34,10 @@ $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-group-action-margin: 20px !default;
 $bigger-groupbody-paddingleft: 24px !default;
 $bigger-hrmode-ruledlt-mrgn: 15px !default;
-$bigger-rulecon-padding: 10px 0 10px 10px !default;
+$bigger-rulecon-padding: 12px 0 12px 12px !default;
 $device-rule-padding: 15px 0 0 15px !default;
 $device-rule-padding-right: 15px !default;
 $bigger-ruledelete-marginleft: 10px !default;
@@ -53,8 +53,8 @@ $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-rulelist: 16px 0 16px 0 !default;
+$qrybldr-bigger-rulelist: 20px 0 20px 0 !default;
 $qrybldr-add-mrgn-btm: 2px !default;
 $device-rulecon-right-padding: 8px !default;
 $qrybldr-summary-padding: 12px !default;
@@ -91,7 +91,7 @@ $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-bgcolor: $content-bg-color-alt2 !default;
 $qrybldr-btngroup-color: $primary-text-color !default;
 $qrybldr-color: $placeholder-text-color !default;
 $qrybldr-rule-list-border-color: $border-light !default;
@@ -99,7 +99,7 @@ $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;
+$groupfill-bgcolor: $content-bg-color !default;
 $qrybldr-brdr-color: $border-light !default;
 $qrybldr-bg-color: transparent !default;
 $qrybldr-val-error-bg-color: $danger-light !default;

package/styles/query-builder/_layout.scss

@@ -72,6 +72,9 @@
         & .e-group-action .e-btn {
           margin-left: $qrybldr-group-container-margin-left;
           margin-right: $group-action-margin;
+          @if $skin-name == 'tailwind' {
+            font-size: 20px;
+          }
             }
         }
 
@@ -309,12 +312,7 @@
           border-top-left-radius: 0;
           border-top-right-radius: 0;
           border-top-style: $qrybldr-rule-list-border-style;
-          @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
-            border-top-width: 1px;
-          }
-          @else {
-            border-top-width: 2px;
-          }
+          border-top-width: 2px;
           margin-top: 0;
         }
 
@@ -554,6 +552,9 @@
 
     & .e-group-action .e-btn {
       margin-left: $bigger-group-action-margin;
+      @if $skin-name == 'tailwind' {
+        font-size: 28px;
+      }
       }
 
     & .e-rule-list>:first-child::before {

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

@@ -9,14 +9,14 @@ $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;
+$rulecon-padding: 12px 0 12px 12px !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;
+$ruledelete-margin: 12px !default;
 $radio-wrapper-margin: 15px !default;
 $qrybldr-group-container-margin-top: 12px !default;
 $qrybldr-group-container-margin-left: 0 !default;
@@ -29,18 +29,18 @@ $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: dashed !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: '\e78a' !default;
-$qrybldr-delete-icon: '\e771' !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;
+$bigger-rulecon-padding: 16px 0 16px 16px !default;
 $device-rule-padding: 15px 0 0 15px !default;
 $device-rule-padding-right: 15px !default;
-$bigger-ruledelete-marginleft: 10px !default;
+$bigger-ruledelete-marginleft: 16px !default;
 $qrybldr-rule-border: 1px solid !default;
 $qrybldr-rule-list-after-height: calc(100% - 17px) !default;
 $qrybldr-rule-list-height: 25px !default;

package/styles/query-builder/_theme.scss

@@ -7,6 +7,19 @@
       border-color: $qrybldr-brdr-color;
     }
 
+    & .e-group-header .e-dropdown-btn.e-add-btn,
+    .e-deletegroup {
+      @if $skin-name == 'bootstrap5' {
+        background-color: $qrybldr-btngroup-bgcolor;
+        box-shadow: none;
+        color: $qrybldr-icon-color;
+      }
+      @else if $skin-name == 'FluentUI' {
+        background-color: $qrybldr-btngroup-bgcolor;
+        border: 0 solid $qrybldr-btngroup-bgcolor;
+      }
+    }
+
     &.e-rtl .e-btn-group.e-rtl {
 
       & .e-qb-toggle.e-btn.e-small {
@@ -101,6 +114,10 @@
       @if $skin-name == 'highcontrast' {
         border-left: 1px solid;
       }
+      @else if $skin-name == 'FluentUI' {
+        background-color: $qrybldr-btngroup-bgcolor;
+        border: 0 solid $qrybldr-btngroup-bgcolor;
+      }
     }
 
     & .e-group-header .e-btn-group .e-qb-toggle.e-active-toggle:last-of-type {
@@ -114,6 +131,14 @@
       @if $skin-name == 'bootstrap4' {
         background-color: $qrybldr-btngroup-bgcolor;
       }
+      @else if $skin-name == 'bootstrap5' {
+        background-color: $qrybldr-btngroup-bgcolor;
+        color: $qrybldr-icon-color;
+      }
+      @else if $skin-name == 'FluentUI' {
+        background-color: $qrybldr-btngroup-bgcolor;
+        border: 0 solid $qrybldr-btngroup-bgcolor;
+      }
 
       &.e-readonly {
         display: none;

package/styles/query-builder/bootstrap5-dark.css

@@ -90,6 +90,13 @@
   color: #adb5bd;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -152,7 +159,7 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 2px 2px 0;
   border-right-width: 0;
 }
 
@@ -200,7 +207,7 @@
 }
 
 .e-query-builder .e-collapse-rule::before {
-  content: '\e853';
+  content: '\e80e';
 }
 
 .e-query-builder {
@@ -326,7 +333,7 @@
 
 .e-query-builder .e-rule-list > ::after,
 .e-query-builder .e-rule-list > ::before {
-  border-style: dashed;
+  border-style: dotted;
   content: '';
   left: -12px;
   position: absolute;
@@ -500,8 +507,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: dashed;
-  border-top-width: 1px;
+  border-top-style: dotted;
+  border-top-width: 2px;
   margin-top: 0;
 }
 
@@ -510,12 +517,12 @@
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
@@ -541,7 +548,7 @@
 
 .e-query-builder .e-group-body .e-rule-container .e-operator,
 .e-query-builder .e-group-body .e-rule-container .e-value {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper,
@@ -808,7 +815,7 @@
 .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete,
 .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
   display: inline-block;
-  margin-left: 10px;
+  margin-left: 16px;
 }
 
 .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-filter,
@@ -879,7 +886,7 @@
 *.e-bigger .e-group-body .e-rule-container .e-rule-sub-filter,
 *.e-bigger .e-group-body .e-rule-container .e-operator,
 *.e-bigger .e-group-body .e-rule-container .e-value {
-  padding: 10px 0 10px 10px;
+  padding: 16px 16px 16px 16px;
 }
 
 .e-query-builder {
@@ -891,6 +898,13 @@
   border-color: #444c54;
 }
 
+.e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
+.e-query-builder .e-deletegroup {
+  background-color: #212529;
+  box-shadow: none;
+  color: #adb5bd;
+}
+
 .e-query-builder .e-group-container {
   border-color: #444c54;
 }
@@ -922,6 +936,8 @@
 
 .e-query-builder .e-removerule.e-btn.e-round {
   background-color: #6c757d;
+  background-color: #212529;
+  color: #adb5bd;
 }
 
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {

package/styles/query-builder/bootstrap5.css

@@ -90,6 +90,13 @@
   color: #6c757d;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -152,7 +159,7 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 2px 2px 0;
   border-right-width: 0;
 }
 
@@ -200,7 +207,7 @@
 }
 
 .e-query-builder .e-collapse-rule::before {
-  content: '\e853';
+  content: '\e80e';
 }
 
 .e-query-builder {
@@ -326,7 +333,7 @@
 
 .e-query-builder .e-rule-list > ::after,
 .e-query-builder .e-rule-list > ::before {
-  border-style: dashed;
+  border-style: dotted;
   content: '';
   left: -12px;
   position: absolute;
@@ -500,8 +507,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: dashed;
-  border-top-width: 1px;
+  border-top-style: dotted;
+  border-top-width: 2px;
   margin-top: 0;
 }
 
@@ -510,12 +517,12 @@
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
@@ -541,7 +548,7 @@
 
 .e-query-builder .e-group-body .e-rule-container .e-operator,
 .e-query-builder .e-group-body .e-rule-container .e-value {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper,
@@ -808,7 +815,7 @@
 .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete,
 .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
   display: inline-block;
-  margin-left: 10px;
+  margin-left: 16px;
 }
 
 .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-filter,
@@ -879,7 +886,7 @@
 *.e-bigger .e-group-body .e-rule-container .e-rule-sub-filter,
 *.e-bigger .e-group-body .e-rule-container .e-operator,
 *.e-bigger .e-group-body .e-rule-container .e-value {
-  padding: 10px 0 10px 10px;
+  padding: 16px 16px 16px 16px;
 }
 
 .e-query-builder {
@@ -891,6 +898,13 @@
   border-color: #dee2e6;
 }
 
+.e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
+.e-query-builder .e-deletegroup {
+  background-color: #fff;
+  box-shadow: none;
+  color: #6c757d;
+}
+
 .e-query-builder .e-group-container {
   border-color: #dee2e6;
 }
@@ -922,6 +936,8 @@
 
 .e-query-builder .e-removerule.e-btn.e-round {
   background-color: #6c757d;
+  background-color: #fff;
+  color: #6c757d;
 }
 
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {