@syncfusion/ej2-querybuilder 24.2.9 → 25.1.37

package/styles/query-builder/_layout.scss

@@ -295,7 +295,9 @@
       }
 
       & .e-dropdown-btn.e-add-btn,
-      .e-deletegroup {
+      .e-deletegroup,
+      .e-clone-grp-btn,
+      .e-lock-grp-btn {
         margin-bottom: $qrybldr-add-mrgn-btm;
         @if $skin-name == 'Material3' {
           box-shadow: none;
@@ -307,7 +309,7 @@
       }
 
       & button.e-button-hide {
-        display: $qrybldr-button-hide;
+        display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
       }
 
       &.e-btn.e-small.e-round {
@@ -421,13 +423,15 @@
         }
       }
 
-      & .e-horizontal-mode .e-rule-delete {
+      & .e-horizontal-mode .e-rule-delete,
+      & .e-horizontal-mode .e-lock-rule,
+      & .e-horizontal-mode .e-clone-rule {
         display: $qrybldr-device-diaplay;
         margin-left: $ruledelete-margin;
       }
 
       & .e-rule-container button.e-button-hide {
-        display: $qrybldr-button-hide;
+        display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
       }
 
       & .e-horizontal-mode .e-rule-filter,
@@ -459,7 +463,9 @@
       }
 
       & .e-rule-field,
-      & .e-rule-delete {
+      & .e-rule-delete,
+      & .e-lock-rule,
+      & .e-clone-rule {
         &.e-btn.e-small.e-round {
           box-shadow: $ruledelete-shadow;
         }
@@ -507,6 +513,19 @@
       text-align: $qrybldr-rulelist-grcon-float;
     }
 
+    & .e-group-body .e-rule-container.e-vertical-mode .e-lock-rule,
+    & .e-group-body .e-rule-container.e-vertical-mode .e-clone-rule,
+    &.e-device .e-group-body .e-rule-container .e-lock-rule,
+    &.e-device .e-group-body .e-rule-container .e-clone-rule {
+      margin-bottom: 12px;
+    }
+
+    & .e-group-body .e-rule-delete,
+    & .e-group-body .e-lock-rule,
+    & .e-group-body .e-clone-rule {
+      margin-left: 12px;
+    }
+
     & .e-delete-icon::before {
       content: $qrybldr-delete-icon;
     }
@@ -586,7 +605,7 @@
     }
 
     & ul .e-item.e-button-hide {
-      display: $qrybldr-button-hide;
+      display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
     }
   }
 
@@ -668,7 +687,9 @@
         margin-bottom: 0;
       }
 
-      & .e-horizontal-mode .e-rule-delete {
+      & .e-horizontal-mode .e-rule-delete,
+      & .e-horizontal-mode .e-lock-rule,
+      & .e-horizontal-mode .e-clone-rule {
         display: $qrybldr-device-diaplay;
         margin-left: $bigger-ruledelete-marginleft;
       }
@@ -715,6 +736,15 @@
       padding: $qrybldr-bigger-summary-btn-padding;
       text-align: $qrybldr-rulelist-grcon-float;
     }
+
+    & .e-dropdown-btn.e-round.e-small .e-add-icon {
+      @if $skin-name == 'tailwind' {
+        line-height: 2 !important; /* stylelint-disable-line declaration-no-important */
+      }
+      @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+        line-height: .8em !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 
   #{if(&, '&', '*')}.e-device .e-rule-value {

package/styles/query-builder/_theme.scss

@@ -8,7 +8,22 @@
     }
 
     & .e-group-header .e-dropdown-btn.e-add-btn,
-    .e-deletegroup {
+    .e-deletegroup,
+    .e-clone-grp-btn,
+    .e-lock-grp-btn {
+      @if $skin-name == 'bootstrap5' {
+        background: $qrybldr-btngroup-bgcolor;
+        box-shadow: none;
+        color: $qrybldr-icon-color;
+      }
+      @else if $skin-name == 'FluentUI' {
+        background: $qrybldr-btngroup-bgcolor;
+        border: 0 solid $qrybldr-btngroup-bgcolor;
+      }
+    }
+
+    & .e-group-header .e-clone-grp-btn,
+    & .e-group-header .e-lock-grp-btn {
       @if $skin-name == 'bootstrap5' {
         background: $qrybldr-btngroup-bgcolor;
         box-shadow: none;
@@ -126,7 +141,9 @@
       }
     }
 
-    & .e-removerule.e-btn.e-round {
+    & .e-removerule.e-btn.e-round,
+    & .e-lock-rule.e-btn.e-round,
+    & .e-clone-rule.e-btn.e-round {
       background: $groupfill-color;
       @if $skin-name == 'bootstrap4' {
         background: $qrybldr-btngroup-bgcolor;

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

@@ -136,6 +136,10 @@
   color: #fff;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
@@ -332,15 +336,19 @@
   margin-top: 5px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
-.e-query-builder .e-group-header .e-deletegroup {
+.e-query-builder .e-group-header .e-deletegroup,
+.e-query-builder .e-group-header .e-clone-grp-btn,
+.e-query-builder .e-group-header .e-lock-grp-btn {
   margin-bottom: 2px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn.e-readonly,
-.e-query-builder .e-group-header .e-deletegroup.e-readonly {
+.e-query-builder .e-group-header .e-deletegroup.e-readonly,
+.e-query-builder .e-group-header .e-clone-grp-btn.e-readonly,
+.e-query-builder .e-group-header .e-lock-grp-btn.e-readonly {
   display: none;
 }
 .e-query-builder .e-group-header button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-header.e-btn.e-small.e-round {
   box-shadow: none;
@@ -423,12 +431,12 @@
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper, .e-query-builder .e-group-body .e-rule-container .e-value .e-radio-wrapper {
   margin-right: 15px;
 }
-.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
+.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 12px;
 }
 .e-query-builder .e-group-body .e-rule-container button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete {
   display: inline-block;
@@ -444,7 +452,7 @@
   padding-right: 10px;
   right: 0;
 }
-.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round {
+.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-lock-rule.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-clone-rule.e-btn.e-small.e-round {
   box-shadow: none;
 }
 .e-query-builder .e-group-body .e-vertical-mode .e-removerule.e-rule-delete {
@@ -475,6 +483,12 @@
 .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value-delete, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
   text-align: right;
 }
+.e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-lock-rule, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-clone-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-lock-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-clone-rule {
+  margin-bottom: 12px;
+}
+.e-query-builder .e-group-body .e-rule-delete, .e-query-builder .e-group-body .e-lock-rule, .e-query-builder .e-group-body .e-clone-rule {
+  margin-left: 12px;
+}
 .e-query-builder .e-delete-icon::before {
   content: "\e96c";
 }
@@ -533,7 +547,7 @@
   float: right;
 }
 .e-dropdown-popup ul .e-item.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-addrule.e-add-icon::before,
@@ -623,9 +637,13 @@
 .e-bigger .e-query-builder .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete {
   margin-bottom: 0;
 }
-.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete,
+.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-clone-rule,
 .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 {
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule,
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule,
+.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-lock-rule,
+.e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 7.5px;
 }
@@ -677,7 +695,6 @@
   padding: 15px;
   text-align: right;
 }
-
 *.e-device .e-rule-value {
   width: 100%;
 }
@@ -728,10 +745,10 @@
 .e-query-builder .e-btn-group:not(.e-rtl) .e-qb-toggle.e-btn.e-small {
   border-right: transparent;
 }
-.e-query-builder .e-removerule.e-btn.e-round {
+.e-query-builder .e-removerule.e-btn.e-round, .e-query-builder .e-lock-rule.e-btn.e-round, .e-query-builder .e-clone-rule.e-btn.e-round {
   background: #131313;
 }
-.e-query-builder .e-removerule.e-btn.e-round.e-readonly {
+.e-query-builder .e-removerule.e-btn.e-round.e-readonly, .e-query-builder .e-lock-rule.e-btn.e-round.e-readonly, .e-query-builder .e-clone-rule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {

package/styles/query-builder/bootstrap.css

@@ -129,6 +129,10 @@
   width: 40px;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
@@ -325,15 +329,19 @@
   margin-top: 5px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
-.e-query-builder .e-group-header .e-deletegroup {
+.e-query-builder .e-group-header .e-deletegroup,
+.e-query-builder .e-group-header .e-clone-grp-btn,
+.e-query-builder .e-group-header .e-lock-grp-btn {
   margin-bottom: 2px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn.e-readonly,
-.e-query-builder .e-group-header .e-deletegroup.e-readonly {
+.e-query-builder .e-group-header .e-deletegroup.e-readonly,
+.e-query-builder .e-group-header .e-clone-grp-btn.e-readonly,
+.e-query-builder .e-group-header .e-lock-grp-btn.e-readonly {
   display: none;
 }
 .e-query-builder .e-group-header button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-header.e-btn.e-small.e-round {
   box-shadow: none;
@@ -416,12 +424,12 @@
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper, .e-query-builder .e-group-body .e-rule-container .e-value .e-radio-wrapper {
   margin-right: 15px;
 }
-.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
+.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 12px;
 }
 .e-query-builder .e-group-body .e-rule-container button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete {
   display: inline-block;
@@ -437,7 +445,7 @@
   padding-right: 10px;
   right: 0;
 }
-.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round {
+.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-lock-rule.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-clone-rule.e-btn.e-small.e-round {
   box-shadow: none;
 }
 .e-query-builder .e-group-body .e-vertical-mode .e-removerule.e-rule-delete {
@@ -468,6 +476,12 @@
 .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value-delete, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
   text-align: right;
 }
+.e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-lock-rule, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-clone-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-lock-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-clone-rule {
+  margin-bottom: 12px;
+}
+.e-query-builder .e-group-body .e-rule-delete, .e-query-builder .e-group-body .e-lock-rule, .e-query-builder .e-group-body .e-clone-rule {
+  margin-left: 12px;
+}
 .e-query-builder .e-delete-icon::before {
   content: "\e96c";
 }
@@ -526,7 +540,7 @@
   float: right;
 }
 .e-dropdown-popup ul .e-item.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-addrule.e-add-icon::before,
@@ -616,9 +630,13 @@
 .e-bigger .e-query-builder .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete {
   margin-bottom: 0;
 }
-.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete,
+.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-clone-rule,
 .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 {
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule,
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule,
+.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-lock-rule,
+.e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 7.5px;
 }
@@ -670,7 +688,6 @@
   padding: 15px;
   text-align: right;
 }
-
 *.e-device .e-rule-value {
   width: 100%;
 }
@@ -713,10 +730,10 @@
 .e-query-builder .e-btn-group:not(.e-rtl) .e-qb-toggle.e-btn.e-small {
   border-right: transparent;
 }
-.e-query-builder .e-removerule.e-btn.e-round {
+.e-query-builder .e-removerule.e-btn.e-round, .e-query-builder .e-lock-rule.e-btn.e-round, .e-query-builder .e-clone-rule.e-btn.e-round {
   background: #f8f8f8;
 }
-.e-query-builder .e-removerule.e-btn.e-round.e-readonly {
+.e-query-builder .e-removerule.e-btn.e-round.e-readonly, .e-query-builder .e-lock-rule.e-btn.e-round.e-readonly, .e-query-builder .e-clone-rule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {

package/styles/query-builder/bootstrap4.css

@@ -435,15 +435,19 @@
   margin-top: 5px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
-.e-query-builder .e-group-header .e-deletegroup {
+.e-query-builder .e-group-header .e-deletegroup,
+.e-query-builder .e-group-header .e-clone-grp-btn,
+.e-query-builder .e-group-header .e-lock-grp-btn {
   margin-bottom: 2px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn.e-readonly,
-.e-query-builder .e-group-header .e-deletegroup.e-readonly {
+.e-query-builder .e-group-header .e-deletegroup.e-readonly,
+.e-query-builder .e-group-header .e-clone-grp-btn.e-readonly,
+.e-query-builder .e-group-header .e-lock-grp-btn.e-readonly {
   display: none;
 }
 .e-query-builder .e-group-header button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-header.e-btn.e-small.e-round {
   box-shadow: none;
@@ -526,12 +530,12 @@
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper, .e-query-builder .e-group-body .e-rule-container .e-value .e-radio-wrapper {
   margin-right: 15px;
 }
-.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
+.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 8px;
 }
 .e-query-builder .e-group-body .e-rule-container button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete {
   display: inline-block;
@@ -547,7 +551,7 @@
   padding-right: 8px;
   right: 0;
 }
-.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round {
+.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-lock-rule.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-clone-rule.e-btn.e-small.e-round {
   box-shadow: none;
 }
 .e-query-builder .e-group-body .e-vertical-mode .e-removerule.e-rule-delete {
@@ -578,6 +582,12 @@
 .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value-delete, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
   text-align: right;
 }
+.e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-lock-rule, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-clone-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-lock-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-clone-rule {
+  margin-bottom: 12px;
+}
+.e-query-builder .e-group-body .e-rule-delete, .e-query-builder .e-group-body .e-lock-rule, .e-query-builder .e-group-body .e-clone-rule {
+  margin-left: 12px;
+}
 .e-query-builder .e-delete-icon::before {
   content: "\e745";
 }
@@ -636,7 +646,7 @@
   float: right;
 }
 .e-dropdown-popup ul .e-item.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-addrule.e-add-icon::before,
@@ -726,9 +736,13 @@
 .e-bigger .e-query-builder .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete {
   margin-bottom: 0;
 }
-.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete,
+.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-clone-rule,
 .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 {
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule,
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule,
+.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-lock-rule,
+.e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 10px;
 }
@@ -780,7 +794,6 @@
   padding: 15px;
   text-align: right;
 }
-
 *.e-device .e-rule-value {
   width: 100%;
 }
@@ -836,11 +849,11 @@
   border-color: #dee2e6;
   color: #495057;
 }
-.e-query-builder .e-removerule.e-btn.e-round {
+.e-query-builder .e-removerule.e-btn.e-round, .e-query-builder .e-lock-rule.e-btn.e-round, .e-query-builder .e-clone-rule.e-btn.e-round {
   background: #6c757d;
   background: #fff;
 }
-.e-query-builder .e-removerule.e-btn.e-round.e-readonly {
+.e-query-builder .e-removerule.e-btn.e-round.e-readonly, .e-query-builder .e-lock-rule.e-btn.e-round.e-readonly, .e-query-builder .e-clone-rule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {

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

@@ -376,15 +376,19 @@
   margin-top: 5px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
-.e-query-builder .e-group-header .e-deletegroup {
+.e-query-builder .e-group-header .e-deletegroup,
+.e-query-builder .e-group-header .e-clone-grp-btn,
+.e-query-builder .e-group-header .e-lock-grp-btn {
   margin-bottom: 2px;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn.e-readonly,
-.e-query-builder .e-group-header .e-deletegroup.e-readonly {
+.e-query-builder .e-group-header .e-deletegroup.e-readonly,
+.e-query-builder .e-group-header .e-clone-grp-btn.e-readonly,
+.e-query-builder .e-group-header .e-lock-grp-btn.e-readonly {
   display: none;
 }
 .e-query-builder .e-group-header button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-header.e-btn.e-small.e-round {
   box-shadow: none;
@@ -467,12 +471,12 @@
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper, .e-query-builder .e-group-body .e-rule-container .e-value .e-radio-wrapper {
   margin-right: 15px;
 }
-.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
+.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 8px;
 }
 .e-query-builder .e-group-body .e-rule-container button.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete {
   display: inline-block;
@@ -488,7 +492,7 @@
   padding-right: 8px;
   right: 0;
 }
-.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round {
+.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-lock-rule.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-clone-rule.e-btn.e-small.e-round {
   box-shadow: none;
 }
 .e-query-builder .e-group-body .e-vertical-mode .e-removerule.e-rule-delete {
@@ -519,6 +523,12 @@
 .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value-delete, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
   text-align: right;
 }
+.e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-lock-rule, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-clone-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-lock-rule, .e-query-builder.e-device .e-group-body .e-rule-container .e-clone-rule {
+  margin-bottom: 12px;
+}
+.e-query-builder .e-group-body .e-rule-delete, .e-query-builder .e-group-body .e-lock-rule, .e-query-builder .e-group-body .e-clone-rule {
+  margin-left: 12px;
+}
 .e-query-builder .e-delete-icon::before {
   content: "\e7e7";
 }
@@ -577,7 +587,7 @@
   float: right;
 }
 .e-dropdown-popup ul .e-item.e-button-hide {
-  display: none;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-addrule.e-add-icon::before,
@@ -667,9 +677,13 @@
 .e-bigger .e-query-builder .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete {
   margin-bottom: 0;
 }
-.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete,
+.e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-lock-rule, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-clone-rule,
 .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 {
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-lock-rule,
+.e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule,
+.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-lock-rule,
+.e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-clone-rule {
   display: inline-block;
   margin-left: 16px;
 }
@@ -721,6 +735,11 @@
   padding: 15px;
   text-align: right;
 }
+.e-query-builder.e-device .e-dropdown-btn.e-round.e-small .e-add-icon,
+.e-bigger.e-query-builder .e-dropdown-btn.e-round.e-small .e-add-icon,
+.e-bigger .e-query-builder .e-dropdown-btn.e-round.e-small .e-add-icon {
+  line-height: 0.8em !important; /* stylelint-disable-line declaration-no-important */
+}
 
 *.e-device .e-rule-value {
   width: 100%;
@@ -738,7 +757,14 @@
   border-color: #444c54;
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
-.e-query-builder .e-deletegroup {
+.e-query-builder .e-deletegroup,
+.e-query-builder .e-clone-grp-btn,
+.e-query-builder .e-lock-grp-btn {
+  background: #212529;
+  box-shadow: none;
+  color: #adb5bd;
+}
+.e-query-builder .e-group-header .e-clone-grp-btn, .e-query-builder .e-group-header .e-lock-grp-btn {
   background: #212529;
   box-shadow: none;
   color: #adb5bd;
@@ -764,12 +790,12 @@
   border-color: #0d6efd;
   color: #fff;
 }
-.e-query-builder .e-removerule.e-btn.e-round {
+.e-query-builder .e-removerule.e-btn.e-round, .e-query-builder .e-lock-rule.e-btn.e-round, .e-query-builder .e-clone-rule.e-btn.e-round {
   background: #6c757d;
   background: #212529;
   color: #adb5bd;
 }
-.e-query-builder .e-removerule.e-btn.e-round.e-readonly {
+.e-query-builder .e-removerule.e-btn.e-round.e-readonly, .e-query-builder .e-lock-rule.e-btn.e-round.e-readonly, .e-query-builder .e-clone-rule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {