sccoreui 6.2.53 → 6.2.55

package/dist/App.scss

@@ -1,8 +1,11 @@
+@use "sass:map";
+@use "sass:list";
 @import url("./assets/theme.css");
 @import url("./assets/sccoreui.css");
 @import url("./assets/flex.css");
 @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
 @import url("./assets/sccoreicons.css");
+@import "./mixin.scss";
 
 // variables
 
@@ -100,6 +103,23 @@ code {
 //   font-weight: var(--fw-400);
 // }
 
+// ============= Button styles ===============  //
+// .btn-primary {
+//   @include btn(primary);
+// }
+
+// .btn-secondary {
+//   @include btn(secondary);
+// }
+
+// .btn-outline {
+//   @include btn(outline);
+// }
+
+// .btn-text {
+//   @include btn(text);
+// }
+
 // ============= custom progress steps ===============  //
 
 .progress-container {
@@ -143,6 +163,49 @@ code {
   }
 }
 
+// .col-gr-icon-lg {
+//   width: 20px;
+//   animation: scaleImgLarge 0.4s forwards;
+// }
+
+// .col-gr-icon-sm {
+//   width: 0px;
+//   animation: scaleImgsmall 0.4s forwards;
+// }
+
+// @keyframes scaleImgLarge {
+//   0% {
+//     width: 0;
+//   }
+//   100% {
+//     width: 20px;
+//   }
+// }
+
+// @keyframes scaleImgsmall {
+//   100% {
+//     width: 20px;
+//   }
+//   0% {
+//     width: 0px;
+//   }
+// }
+
+.col-gr-icon {
+  width: 0;
+  transition: width 0.4s ease;
+}
+
+.col-gr-icon-active {
+  width: 20px;
+  transition: width 0.4s ease; /* Ensure transition applies both ways */
+}
+
+.no-content {
+  text-align: center;
+  padding: 10px;
+}
+
 .progress-step-item {
   &.horizontal {
     &:nth-of-type(1) {

package/dist/assets/sccoreui.css

@@ -22,7 +22,7 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
-  --gray-25:#fcfcfd;
+  --gray-25: #fcfcfd;
   --gray-50: #f9fafb;
   --gray-100: #f2f4f7;
   --gray-200: #eaecf0;
@@ -131,7 +131,7 @@ a {
 
 .p-link {
   font-size: 1rem;
-  font-family: 'Lato', sans-serif;
+  font-family: "Lato", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -166,7 +166,7 @@ a {
 }
 
 :root {
-  --blue-25:#f1efff;
+  --blue-25: #f1efff;
   --blue-50: #e3dfff;
   --blue-100: #d5cfff;
   --blue-200: #c7bfff;
@@ -177,7 +177,7 @@ a {
   --blue-700: #3b1eff;
   --blue-800: #2504ff;
   --blue-900: #1f00ea;
-  --green-25:#f6fef9;
+  --green-25: #f6fef9;
   --green-50: #ecfdf3;
   --green-100: #d1fadf;
   --green-200: #a6f4c5;
@@ -188,7 +188,7 @@ a {
   --green-700: #027a48;
   --green-800: #05603a;
   --green-900: #054f31;
-  --yellow-25:#fff4ef;
+  --yellow-25: #fff4ef;
   --yellow-50: #fefbf3;
   --yellow-100: #faedc4;
   --yellow-200: #f6de95;
@@ -199,7 +199,7 @@ a {
   --yellow-700: #a47d06;
   --yellow-800: #816204;
   --yellow-900: #5e4803;
-  --cyan-25:#e5f3ff;
+  --cyan-25: #e5f3ff;
   --cyan-50: #d5ebff;
   --cyan-100: #bfe1ff;
   --cyan-200: #aad8ff;
@@ -220,7 +220,7 @@ a {
   --pink-700: #a5326b;
   --pink-800: #822854;
   --pink-900: #5e1d3d;
-  --indigo-25:#f1efff;
+  --indigo-25: #f1efff;
   --indigo-50: #e3dfff;
   --indigo-100: #d5cfff;
   --indigo-200: #c7bfff;
@@ -241,7 +241,7 @@ a {
   --teal-700: #0e8174;
   --teal-800: #0b655b;
   --teal-900: #084a42;
-  --orange-25:#fffcf5;
+  --orange-25: #fffcf5;
   --orange-50: #fffaeb;
   --orange-100: #fef0c7;
   --orange-200: #fedf89;
@@ -272,7 +272,7 @@ a {
   --purple-700: #763cad;
   --purple-800: #5c2f88;
   --purple-900: #432263;
-  --red-25:#fffbfa;
+  --red-25: #fffbfa;
   --red-50: #fef3f2;
   --red-100: #fee4e2;
   --red-200: #fecdca;
@@ -283,7 +283,7 @@ a {
   --red-700: #b42318;
   --red-800: #912018;
   --red-900: #7a271a;
-  --primary-25:#f5f6fd;
+  --primary-25: #f5f6fd;
   --primary-50: #e2e5fa;
   --primary-100: #ced4f6;
   --primary-200: #a8b2ef;
@@ -325,7 +325,7 @@ a {
   .p-autocomplete-multiple-container
   .p-autocomplete-input-token
   input {
-    font-family: 'Lato', sans-serif;
+  font-family: "Lato", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -933,7 +933,7 @@ a {
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'Lato', sans-serif;
+  font-family: "Lato", sans-serif;
   font-size: var(--fs-14);
   color: #495057;
   padding: 0;
@@ -1043,7 +1043,7 @@ a {
 }
 
 .p-dropdown .p-dropdown-label.p-inputtext {
-   height: auto; 
+  height: auto;
 }
 
 .p-inputgroup > .p-dropdown > .p-dropdown-label {
@@ -1509,7 +1509,7 @@ a {
 /* ====== Customised input start ========== */
 
 .p-inputtext {
-  font-family: 'Lato', sans-serif;
+  font-family: "Lato", sans-serif;
   font-size: var(--fs-16);
   color: var(--gray-900);
   background: #ffffff;
@@ -1544,7 +1544,7 @@ a {
 .p-inputtext.p-invalid:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--red-100); 
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--red-100);
   border-radius: 8px;
   border: 1px solid var(--red-300);
 }
@@ -1761,8 +1761,7 @@ a {
 .p-multiselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.1rem #C7D2FE; 
-
+  box-shadow: 0 0 0 0.1rem #c7d2fe;
 }
 .p-multiselect.p-multiselect-clearable .p-multiselect-label {
   padding-right: 1.75rem;
@@ -2341,7 +2340,8 @@ a {
 /* ##################################### Basic Button CSS changes Start #################################################### */
 
 /* Default Button Classes */
-.p-button, .p-button-sm {
+.p-button,
+.p-button-sm {
   color: #ffffff;
   background: var(--primary-500);
   line-height: 20px;
@@ -2365,7 +2365,8 @@ a {
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--primary-100);
   border: 1px solid var(--primary-600);
 }
 
@@ -2391,8 +2392,9 @@ a {
   outline: 0 none;
   outline-offset: 0;
   background: transparent;
-border: 1px solid var(--gray-300);
-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
+  border: 1px solid var(--gray-300);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--gray-100);
 }
 
 /* Button with No Background and No Outline */
@@ -2553,31 +2555,32 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover,
 .p-buttonset.p-button-secondary > .p-button:enabled:hover,
 .p-buttonset.p-button-secondary
-> .p-button:not(button):not(a):not(.p-disabled):hover,
+  > .p-button:not(button):not(a):not(.p-disabled):hover,
 .p-splitbutton.p-button-secondary > .p-button:enabled:hover,
 .p-splitbutton.p-button-secondary
-> .p-button:not(button):not(a):not(.p-disabled):hover,
+  > .p-button:not(button):not(a):not(.p-disabled):hover,
 .p-fileupload-choose.p-button-secondary:enabled:hover,
 .p-fileupload-choose.p-button-secondary:not(button):not(a):not(
-  .p-disabled
+    .p-disabled
   ):hover {
-    background: var(--primary-100);
-    color: var(--primary-800);
-    border-color: var(--primary-100);
-  }
+  background: var(--primary-100);
+  color: var(--primary-800);
+  border-color: var(--primary-100);
+}
 .p-button.p-button-secondary:enabled:focus,
 .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus,
 .p-buttonset.p-button-secondary > .p-button:enabled:focus,
 .p-buttonset.p-button-secondary
-> .p-button:not(button):not(a):not(.p-disabled):focus,
+  > .p-button:not(button):not(a):not(.p-disabled):focus,
 .p-splitbutton.p-button-secondary > .p-button:enabled:focus,
 .p-splitbutton.p-button-secondary
-> .p-button:not(button):not(a):not(.p-disabled):focus,
+  > .p-button:not(button):not(a):not(.p-disabled):focus,
 .p-fileupload-choose.p-button-secondary:enabled:focus,
 .p-fileupload-choose.p-button-secondary:not(button):not(a):not(
-  .p-disabled
+    .p-disabled
   ):focus {
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--primary-100);
 }
 .p-button.p-button-secondary:enabled:active,
 .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active,
@@ -2586,125 +2589,125 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
   > .p-button:not(button):not(a):not(.p-disabled):active,
 .p-splitbutton.p-button-secondary > .p-button:enabled:active,
 .p-splitbutton.p-button-secondary
-> .p-button:not(button):not(a):not(.p-disabled):active,
+  > .p-button:not(button):not(a):not(.p-disabled):active,
 .p-fileupload-choose.p-button-secondary:enabled:active,
 .p-fileupload-choose.p-button-secondary:not(button):not(a):not(
-  .p-disabled
+    .p-disabled
   ):active {
-    background: var(--primary-100);
-    color: var(--primary-800);
-    border-color: var(--primary-100);
-  }
-  .p-button.p-button-secondary.p-button-outlined,
-  .p-buttonset.p-button-secondary > .p-button.p-button-outlined,
-  .p-splitbutton.p-button-secondary > .p-button.p-button-outlined,
-  .p-fileupload-choose.p-button-secondary.p-button-outlined {
-    background-color: transparent;
-    color: #344054;
-    border: 1px solid #d0d5dd;
-    height: 44px !important;
-  }
-  .p-button.p-button-secondary.p-button-outlined:enabled:hover,
-  .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
+  background: var(--primary-100);
+  color: var(--primary-800);
+  border-color: var(--primary-100);
+}
+.p-button.p-button-secondary.p-button-outlined,
+.p-buttonset.p-button-secondary > .p-button.p-button-outlined,
+.p-splitbutton.p-button-secondary > .p-button.p-button-outlined,
+.p-fileupload-choose.p-button-secondary.p-button-outlined {
+  background-color: transparent;
+  color: #344054;
+  border: 1px solid #d0d5dd;
+  height: 44px !important;
+}
+.p-button.p-button-secondary.p-button-outlined:enabled:hover,
+.p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
     .p-disabled
-    ):hover,
-    .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
-    .p-buttonset.p-button-secondary
-    > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
-    .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
-    .p-splitbutton.p-button-secondary
-    > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
-    .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover,
-    .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
-      a
-      ):not(.p-disabled):hover {
-        background: rgba(100, 116, 139, 0.04);
-        color: #344054;
-        border: 1px solid #d0d5dd;
-      }
-      .p-button.p-button-secondary.p-button-outlined:enabled:active,
-      .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
-        .p-disabled
-        ):active,
-        .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active,
-        .p-buttonset.p-button-secondary
-        > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
-        .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active,
-        .p-splitbutton.p-button-secondary
-        > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
-        .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active,
-        .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
-          a
+  ):hover,
+.p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
+.p-buttonset.p-button-secondary
+  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
+.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
+.p-splitbutton.p-button-secondary
+  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
+.p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover,
+.p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
+    a
+  ):not(.p-disabled):hover {
+  background: rgba(100, 116, 139, 0.04);
+  color: #344054;
+  border: 1px solid #d0d5dd;
+}
+.p-button.p-button-secondary.p-button-outlined:enabled:active,
+.p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
+    .p-disabled
+  ):active,
+.p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active,
+.p-buttonset.p-button-secondary
+  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
+.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active,
+.p-splitbutton.p-button-secondary
+  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
+.p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active,
+.p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
+    a
   ):not(.p-disabled):active {
-    background: rgba(100, 116, 139, 0.16);
-    color: #64748b;
-    border: 1px solid;
-  }
-  .p-button.p-button-secondary.p-button-text,
-  .p-buttonset.p-button-secondary > .p-button.p-button-text,
-  .p-splitbutton.p-button-secondary > .p-button.p-button-text,
-  .p-fileupload-choose.p-button-secondary.p-button-text {
-    background-color: transparent;
-    color: #64748b;
-    border-color: transparent;
-  }
-  .p-button.p-button-secondary.p-button-text:enabled:hover,
-  .p-button.p-button-secondary.p-button-text:not(button):not(a):not(
+  background: rgba(100, 116, 139, 0.16);
+  color: #64748b;
+  border: 1px solid;
+}
+.p-button.p-button-secondary.p-button-text,
+.p-buttonset.p-button-secondary > .p-button.p-button-text,
+.p-splitbutton.p-button-secondary > .p-button.p-button-text,
+.p-fileupload-choose.p-button-secondary.p-button-text {
+  background-color: transparent;
+  color: #64748b;
+  border-color: transparent;
+}
+.p-button.p-button-secondary.p-button-text:enabled:hover,
+.p-button.p-button-secondary.p-button-text:not(button):not(a):not(
     .p-disabled
-    ):hover,
-    .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover,
-    .p-buttonset.p-button-secondary
-    > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
-    .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover,
+  ):hover,
+.p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover,
+.p-buttonset.p-button-secondary
+  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
+.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover,
 .p-splitbutton.p-button-secondary
   > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
-  .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover,
-  .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
+.p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover,
+.p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
     .p-disabled
-    ):hover {
-      background: rgba(100, 116, 139, 0.04);
-      border-color: transparent;
-      color: #64748b;
-    }
-    .p-button.p-button-secondary.p-button-text:enabled:active,
-    .p-button.p-button-secondary.p-button-text:not(button):not(a):not(
+  ):hover {
+  background: rgba(100, 116, 139, 0.04);
+  border-color: transparent;
+  color: #64748b;
+}
+.p-button.p-button-secondary.p-button-text:enabled:active,
+.p-button.p-button-secondary.p-button-text:not(button):not(a):not(
     .p-disabled
   ):active,
 .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active,
 .p-buttonset.p-button-secondary
-> .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
+  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
 .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active,
 .p-splitbutton.p-button-secondary
-> .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
+  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
 .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active,
 .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
-  .p-disabled
+    .p-disabled
   ):active {
-    background: rgba(100, 116, 139, 0.16);
-    border-color: transparent;
-    color: #64748b;
-  }
-  /* ##################################### Basic Button CSS changes END #################################################### */
-  
-  .p-button.p-button-info,
-  .p-buttonset.p-button-info > .p-button,
-  .p-splitbutton.p-button-info > .p-button,
-  .p-fileupload-choose.p-button-info {
-    color: #ffffff;
-    background: #3b82f6;
-    border: 1px solid #3b82f6;
-  }
-  .p-button.p-button-info:enabled:hover,
-  .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover,
-  .p-buttonset.p-button-info > .p-button:enabled:hover,
-  .p-buttonset.p-button-info
+  background: rgba(100, 116, 139, 0.16);
+  border-color: transparent;
+  color: #64748b;
+}
+/* ##################################### Basic Button CSS changes END #################################################### */
+
+.p-button.p-button-info,
+.p-buttonset.p-button-info > .p-button,
+.p-splitbutton.p-button-info > .p-button,
+.p-fileupload-choose.p-button-info {
+  color: #ffffff;
+  background: #3b82f6;
+  border: 1px solid #3b82f6;
+}
+.p-button.p-button-info:enabled:hover,
+.p-button.p-button-info:not(button):not(a):not(.p-disabled):hover,
+.p-buttonset.p-button-info > .p-button:enabled:hover,
+.p-buttonset.p-button-info
   > .p-button:not(button):not(a):not(.p-disabled):hover,
-  .p-splitbutton.p-button-info > .p-button:enabled:hover,
-  .p-splitbutton.p-button-info
+.p-splitbutton.p-button-info > .p-button:enabled:hover,
+.p-splitbutton.p-button-info
   > .p-button:not(button):not(a):not(.p-disabled):hover,
-  .p-fileupload-choose.p-button-info:enabled:hover,
-  .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
-    background: #2563eb;
+.p-fileupload-choose.p-button-info:enabled:hover,
+.p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
+  background: #2563eb;
   color: #ffffff;
   border-color: #2563eb;
 }
@@ -3241,7 +3244,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
   border-color: transparent;
   color: #a855f7;
 }
- /* Button Changes Done Here For Danger Button */
+/* Button Changes Done Here For Danger Button */
 .p-button.p-button-danger,
 .p-buttonset.p-button-danger > .p-button,
 .p-splitbutton.p-button-danger > .p-button,
@@ -3288,9 +3291,9 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-fileupload-choose.p-button-danger:not(button):not(a):not(
     .p-disabled
   ):active {
-    color: #ffffff;
-    background: var(--red-700);
-    border: 1px solid var(--red-700);
+  color: #ffffff;
+  background: var(--red-700);
+  border: 1px solid var(--red-700);
 }
 /* Error Secondary color CSS changes Start */
 .p-button.p-button-danger-secondary,
@@ -3311,7 +3314,9 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-splitbutton.p-button-danger-secondary
   > .p-button:not(button):not(a):not(.p-disabled):hover,
 .p-fileupload-choose.p-button-danger-secondary:enabled:hover,
-.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(.p-disabled):hover {
+.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(
+    .p-disabled
+  ):hover {
   background: var(--red-100);
   border: 1px solid var(--red-100);
   color: var(--red-800);
@@ -3329,12 +3334,12 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(
     .p-disabled
   ):active {
-    background: var(--red-100);
+  background: var(--red-100);
   border: 1px solid var(--red-100);
   color: var(--red-800);
-  }
+}
 
-  .p-button.p-button-danger-secondary:enabled:focus,
+.p-button.p-button-danger-secondary:enabled:focus,
 .p-button.p-button-danger-secondary:not(button):not(a):not(.p-disabled):focus,
 .p-buttonset.p-button-danger-secondary > .p-button:enabled:focus,
 .p-buttonset.p-button-danger-secondary
@@ -3343,7 +3348,9 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-splitbutton.p-button-danger-secondary
   > .p-button:not(button):not(a):not(.p-disabled):focus,
 .p-fileupload-choose.p-button-danger-secondary:enabled:focus,
-.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(.p-disabled):focus {
+.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(
+    .p-disabled
+  ):focus {
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--red-100);
 }
 
@@ -3387,9 +3394,9 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(
     .p-disabled
   ):active {
-    background: var(--red-50);
-    color: var(--red-800);
-    border: 1px solid var(--red-300);
+  background: var(--red-50);
+  color: var(--red-800);
+  border: 1px solid var(--red-300);
 }
 .p-button.p-button-danger.p-button-text,
 .p-buttonset.p-button-danger > .p-button.p-button-text,
@@ -5051,7 +5058,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
   border-radius: 50%;
 }
 .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
- background: var(--gray-50);
+  background: var(--gray-50);
   /* border-color: var(--gray-50); */
   font-weight: 500;
   color: var(--gray-800);
@@ -6093,7 +6100,6 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 .p-breadcrumb ul li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
   color: var(--gray-600);
@@ -7929,7 +7935,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'Lato', sans-serif;
+  font-family: "Lato", sans-serif;
 }
 
 .p-badge {
@@ -8027,7 +8033,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
   background: var(--primary-700);
   height: 2px;
   bottom: 0;
-  
+
   transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 
@@ -8043,7 +8049,8 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
   box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black;
 } */
 .p-button.p-button-secondary:enabled:focus {
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--primary-100);
   /* Changed the box shadow for Secondary Button */
 }
 .p-button.p-button-success:enabled:focus {
@@ -8213,18 +8220,18 @@ button:after {
 @keyframes ripple {
   0% {
     transform: scale(0, 0);
-    opacity: 1;
+    opacity: 0.2;
   }
   20% {
-    transform: scale(25, 25);
-    opacity: 1;
+    transform: scale(15, 15);
+    opacity: 0.2;
   }
   100% {
-    opacity: 0;
-    transform: scale(40, 40);
+    opacity: 0.2;
+    transform: scale(20, 20);
   }
 }
-@-webkit-keyframes ripple {
+/* @-webkit-keyframes ripple {
   0% {
     transform: scale(0, 0);
     opacity: 1;
@@ -8265,10 +8272,11 @@ button:after {
     opacity: 0;
     transform: scale(40, 40);
   }
-}
+} */
 
 button:focus:not(:active)::after {
   animation: ripple 1s ease-out;
+  /* transition: background 0.4s linear; */
 }
 
 button.remove-ripple:focus:not(:active)::after {
@@ -8305,7 +8313,8 @@ input[type="number"]::-webkit-outer-spin-button {
 .p-calendar-w-btn-left .p-datepicker-trigger:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--primary-100);
   border: 1px solid var(--primary-300);
   border-right: 0px;
 }
@@ -8326,17 +8335,14 @@ input[type="number"]::-webkit-outer-spin-button {
     color: #495057;
     border-radius: 12px;
   }
-  
-} 
-
-
+}
 
 /* breadcrumbs classes for background colors and hover background colors  */
-.last-item-bg-color>.p-breadcrumb-list .p-menuitem.px-4:hover{
+.last-item-bg-color > .p-breadcrumb-list .p-menuitem.px-4:hover {
   background-color: var(--primary-50);
   border-radius: 6px;
 }
-.last-item-bg-color-gray-50>.p-breadcrumb-list .p-menuitem.px-4:hover{
+.last-item-bg-color-gray-50 > .p-breadcrumb-list .p-menuitem.px-4:hover {
   background-color: var(--gray-50);
   border-radius: 6px;
 }
@@ -8349,7 +8355,6 @@ input[type="number"]::-webkit-outer-spin-button {
   }
 } */
 
-
 .last-item-bg-color ul li:last-child {
   background-color: var(--primary-50);
   border-radius: 6px;
@@ -8369,46 +8374,44 @@ input[type="number"]::-webkit-outer-spin-button {
   rotate: 180deg;
 }
 
-.p-dropdown-item.p-highlight{
+.p-dropdown-item.p-highlight {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 /*  tabs component clasess for changing the style */
-.tab-view-border-light .p-tabview-nav{
-  border-bottom: 1px solid var(--gray-200) ;  /* adding bottom border only bottom border tabs */
+.tab-view-border-light .p-tabview-nav {
+  border-bottom: 1px solid var(--gray-200); /* adding bottom border only bottom border tabs */
 }
 
 /*some tabs responsive section these tabs are worked as responsive in all devices */
-.tab-view-bg-dark.responsive  .p-tabview-nav{
- display: flex ;
- flex-direction: row ;
- padding: 4px;
-}
-@media  screen and (max-width:768px){
-  .tab-view-bg-dark.responsive .p-tabview-nav{
-      flex-direction: column ;
+.tab-view-bg-dark.responsive .p-tabview-nav {
+  display: flex;
+  flex-direction: row;
+  padding: 4px;
+}
+@media screen and (max-width: 768px) {
+  .tab-view-bg-dark.responsive .p-tabview-nav {
+    flex-direction: column;
   }
 }
-.tab-view-shadow-box.responsive .p-tabview-nav{
-  display: flex ;
-  flex-direction: row ;
+.tab-view-shadow-box.responsive .p-tabview-nav {
+  display: flex;
+  flex-direction: row;
 }
-@media  screen and (max-width:768px){
-   .tab-view-shadow-box.responsive .p-tabview-nav{
-       flex-direction: column ;
-   }
+@media screen and (max-width: 768px) {
+  .tab-view-shadow-box.responsive .p-tabview-nav {
+    flex-direction: column;
+  }
 }
 
 /*  some tabs responsive section these tabs are worked as responsive in all devices */
 
-
-
-.tab-view-bg-dark.expand  .p-tabview-nav{
+.tab-view-bg-dark.expand .p-tabview-nav {
   padding: 4px;
- }
-.tab-view-border-light.expand .p-tabview-nav li .p-tabview-nav-link{
+}
+.tab-view-border-light.expand .p-tabview-nav li .p-tabview-nav-link {
   padding-left: 88px;
   padding-right: 88px;
 }
@@ -8438,20 +8441,25 @@ input[type="number"]::-webkit-outer-spin-button {
 .tab-view-bg-dark.not-expand .p-tabview-nav li.p-unselectable-text {
   margin-right: 8px !important;
 }
-.tab-view-bg-dark.expand .p-tabview-nav li .p-tabview-nav-link{
+.tab-view-bg-dark.expand .p-tabview-nav li .p-tabview-nav-link {
   padding-left: 88px;
   padding-right: 88px;
-  border-radius: 6px ;
+  border-radius: 6px;
 }
-.tab-view-bg-dark.not-expand.border-no-radius .p-tabview-nav .p-tabview-ink-bar{
+.tab-view-bg-dark.not-expand.border-no-radius
+  .p-tabview-nav
+  .p-tabview-ink-bar {
   display: block !important;
 }
-.tab-view-bg-dark.expand.border-no-radius .p-tabview-nav .p-tabview-ink-bar{
+.tab-view-bg-dark.expand.border-no-radius .p-tabview-nav .p-tabview-ink-bar {
   display: block !important;
 }
-.tab-view-bg-dark.not-expand.border-no-radius .p-tabview-nav li .p-tabview-nav-link {
+.tab-view-bg-dark.not-expand.border-no-radius
+  .p-tabview-nav
+  li
+  .p-tabview-nav-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  padding: 8px 12px 8px 12px ;
+  padding: 8px 12px 8px 12px;
   cursor: pointer;
   border-radius: 0px;
   font-weight: normal;
@@ -8461,19 +8469,22 @@ input[type="number"]::-webkit-outer-spin-button {
   margin-right: 16px;
 }
 
-.tab-view-bg-dark.expand.border-no-radius .p-tabview-nav li .p-tabview-nav-link{
+.tab-view-bg-dark.expand.border-no-radius
+  .p-tabview-nav
+  li
+  .p-tabview-nav-link {
   padding-left: 88px;
   padding-right: 88px;
-  border-radius: 0px ;
+  border-radius: 0px;
 }
-.tab-view-shadow-box .p-tabview-nav{
- background-color: var(--gray-100);
- border-radius: 8px ;
- padding: 4px;
+.tab-view-shadow-box .p-tabview-nav {
+  background-color: var(--gray-100);
+  border-radius: 8px;
+  padding: 4px;
 }
 
-.tab-view-shadow-box .p-tabview-nav li .p-tabview-nav-link{
-  background-color: transparent ;
+.tab-view-shadow-box .p-tabview-nav li .p-tabview-nav-link {
+  background-color: transparent;
   border-radius: 6px;
 }
 .tab-view-shadow-box .p-tabview-nav .p-tabview-ink-bar {
@@ -8498,57 +8509,60 @@ input[type="number"]::-webkit-outer-spin-button {
   margin-right: 8px;
 }
 
-.tab-view-shadow-box.expand .p-tabview-nav li .p-tabview-nav-link{
+.tab-view-shadow-box.expand .p-tabview-nav li .p-tabview-nav-link {
   padding-left: 88px;
   padding-right: 88px;
 }
 
-.p-highlight .tab-badge{
+.p-highlight .tab-badge {
   background: var(--primary-50);
   mix-blend-mode: multiply;
 }
 
-.tab-view-bg-dark.border-no-radius .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+.tab-view-bg-dark.border-no-radius
+  .p-tabview-nav
+  li
+  .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.tab-view-border-light.no-shadow .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+.tab-view-border-light.no-shadow
+  .p-tabview-nav
+  li
+  .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.tab-view-border-light.border .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+.tab-view-border-light.border
+  .p-tabview-nav
+  li
+  .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
 
-
 /* tags component chip image css classes */
 .chip-image img {
-  height: 16px ;
-  width: auto ;
-  margin: 4px ;
+  height: 16px;
+  width: auto;
+  margin: 4px;
 }
 
-
-
 /* content dividers classes for removing border and adding background top bottom borders */
 
-.divider-top-bottom.p-divider-horizontal::before{
+.divider-top-bottom.p-divider-horizontal::before {
   border-top: 0px;
   width: 0px;
 }
 
-.devider-background.p-divider-horizontal::before{
+.devider-background.p-divider-horizontal::before {
   border-top: 0px;
   width: 0px;
 }
 
-
-
-
 /* pagination classes       ++++++++++ */
 @media screen and (min-width: 768px) {
   .p-paginator-pages {
@@ -8568,7 +8582,7 @@ input[type="number"]::-webkit-outer-spin-button {
   border-radius: 8px;
 }
 
-.bg-square .p-paginator-pages .p-paginator-page{
+.bg-square .p-paginator-pages .p-paginator-page {
   border-radius: 8px;
 }
 
@@ -8582,13 +8596,13 @@ input[type="number"]::-webkit-outer-spin-button {
   top: 0px !important;
 }
 
-.p-paginator.p-component.paginator-boxes>.p-disabled{
+.p-paginator.p-component.paginator-boxes > .p-disabled {
   border-color: var(--gray-400) !important;
 }
-.p-paginator>.p-dropdown>.p-dropdown-trigger{
+.p-paginator > .p-dropdown > .p-dropdown-trigger {
   padding-top: 0px;
 }
-.p-paginator>.p-dropdown{
+.p-paginator > .p-dropdown {
   display: flex;
   align-items: center;
   border: 1px solid var(--gray-400);
@@ -8598,10 +8612,9 @@ input[type="number"]::-webkit-outer-spin-button {
 /* Progress siders calsses for styling the component */
 .progress-slider .p-slider-range {
   border-radius: 4px;
-  background-color: var(--primary-500) ;
+  background-color: var(--primary-500);
 }
 
-
 /*  Avatar classes for changing avatar styles  */
 
 .p-avatar-focus:hover {
@@ -8621,8 +8634,6 @@ input[type="number"]::-webkit-outer-spin-button {
   width: 8px;
 }
 
-
-
 /*  Badges classes for styling the badges  */
 
 .p-dropdown-badge > .p-dropdown-label {
@@ -8657,7 +8668,6 @@ input[type="number"]::-webkit-outer-spin-button {
   padding-right: 36px;
 }
 
-
 /* Loader icon css changes for styling animation*/
 .svgAnimation {
   display: inline-block;
@@ -8665,27 +8675,25 @@ input[type="number"]::-webkit-outer-spin-button {
   animation: animation-61bdi0 1.3s linear infinite;
 }
 
-
-
 @keyframes animation-61bdi0 {
   0% {
-      -webkit-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-      transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
-  
+
   100% {
-      -webkit-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
-      -ms-transform: rotate(360deg);
-      transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
 .animation {
   stroke: currentColor;
-  stroke-dasharray: 80px,200px;
+  stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
   -webkit-animation: animation-1p2h4ri 1.8s ease-in-out infinite;
   animation: animation-1p2h4ri ease-in-out infinite;
@@ -8693,51 +8701,48 @@ input[type="number"]::-webkit-outer-spin-button {
 
 @keyframes animation-1p2h4ri {
   0% {
-      stroke-dasharray: 1px,200px;
-      stroke-dashoffset: 0;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
   }
   50% {
-      stroke-dasharray: 100px,200px;
-      stroke-dashoffset: -15px;
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
   }
-  
+
   100% {
-      stroke-dasharray: 100px,200px;
-      stroke-dashoffset: -125px;
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
   }
 }
 
-
-.p-megamenu-start{
+.p-megamenu-start {
   width: auto;
- 
-}
-@media screen and (max-width:768px) {
-  .p-megamenu-start{
-  width: 100%;
 }
+@media screen and (max-width: 768px) {
+  .p-megamenu-start {
+    width: 100%;
+  }
 }
 /* mega menu classes */
 .p-megamenu-mobile-active .megamenu-closeicon {
   display: flex;
 }
-	
-.p-megamenu-mobile-active	.megamenu-hamburgermenu{
-		display: none;
+
+.p-megamenu-mobile-active .megamenu-hamburgermenu {
+  display: none;
 }
 
 .megamenu-closeicon {
-	display: none;
+  display: none;
 }
 .megamenu-hamburgermenu {
-	display: flex;
+  display: flex;
 }
 
-
-.p-dropdown-xl.p-dropdown{
+.p-dropdown-xl.p-dropdown {
   height: 44px;
 }
-.p-dropdown-xl .p-dropdown-label.p-placeholder{
+.p-dropdown-xl .p-dropdown-label.p-placeholder {
   height: 24px;
 }
 
@@ -8745,28 +8750,25 @@ input[type="number"]::-webkit-outer-spin-button {
   padding-top: 0px;
 }
 
-
-.tab-view-bg-dark.p-tabview-nav-container.p-tabview-nav-content{
+.tab-view-bg-dark.p-tabview-nav-container.p-tabview-nav-content {
   border-bottom: none;
 }
 
-
-.p-autocomplete.p-autocomplete-lg .p-inputtext{
-   height: 40px;
-   width: 320px;
+.p-autocomplete.p-autocomplete-lg .p-inputtext {
+  height: 40px;
+  width: 320px;
 }
 
-.p-autocomplete.p-autocomplete-xl .p-inputtext{
+.p-autocomplete.p-autocomplete-xl .p-inputtext {
   height: 40px;
   width: 320px;
 }
 
-.p-multiselect-item.p-highlight>span{
+.p-multiselect-item.p-highlight > span {
   width: 100%;
 }
 
-
-.p-autocomplete-multiple-container.p-component.p-inputtext{
+.p-autocomplete-multiple-container.p-component.p-inputtext {
   height: 40px;
   padding: 4px 14px;
   line-height: 20px;
@@ -8774,9 +8776,6 @@ input[type="number"]::-webkit-outer-spin-button {
 
 /* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
 
-
-
-
 /* New button classes added for different Size Variations ++++++++++++++++++++++++++++ */
 .p-button.p-button-xs {
   height: 32px;
@@ -8793,9 +8792,9 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .p-button.p-button-md {
-  height: 44px ;
-  line-height: 24px ;
-  font-size: 16px ;
+  height: 44px;
+  line-height: 24px;
+  font-size: 16px;
   padding: 10px 18px;
 }
 .p-button.p-button-lg {
@@ -8840,7 +8839,6 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 10px;
 }
 
-
 .p-button.p-button-dual-icon.p-button-md {
   width: auto;
   padding: 10px 18px;
@@ -8850,7 +8848,7 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 12px;
 }
 
-.p-button.p-button-dual-icon.p-button-lg{
+.p-button.p-button-dual-icon.p-button-lg {
   width: auto;
   padding: 12px 20px;
   font-size: 16px;
@@ -8859,7 +8857,6 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 14px;
 }
 
-
 .p-button.p-button-dual-icon.p-button-xl {
   width: auto;
   padding: 16px 28px;
@@ -8878,23 +8875,25 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 .p-button.p-button-google:enabled:hover {
   background: var(--gray-50);
-  color: var(--gray-700); 
+  color: var(--gray-700);
 }
 .p-button.p-button-google:focus {
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--gray-100);
 }
 /* Facebook */
 .p-button.p-button-facebook {
-  background: #1877F2;
+  background: #1877f2;
   border: none;
   color: #ffffff;
 }
 .p-button.p-button-facebook:enabled:hover {
-  background: #0C63D4;
-  color: #ffffff; 
+  background: #0c63d4;
+  color: #ffffff;
 }
 .p-button.p-button-facebook:focus {
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--gray-100);
 }
 /* Apple */
 .p-button.p-button-apple {
@@ -8904,26 +8903,28 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 .p-button.p-button-apple:enabled:hover {
   background: #000000;
-  color: #ffffff; 
+  color: #ffffff;
 }
 .p-button.p-button-apple:focus {
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--gray-100);
 }
 /* Twitter */
 .p-button.p-button-twitter {
-  background: #1DA1F2;
+  background: #1da1f2;
   border: none;
   color: #ffffff;
 }
 .p-button.p-button-twitter:enabled:hover {
-  background: #0C8BD9;
-  color: #ffffff; 
+  background: #0c8bd9;
+  color: #ffffff;
 }
 .p-button.p-button-twitter:focus {
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 2px var(--gray-100);
 }
 
 .sc_multiSelect.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable
   .p-multiselect-label {
   padding-right: 3.8rem !important;
-}
+}

package/dist/components/ag-grid/advancedFeature/column-group.js

@@ -197,9 +197,11 @@ const ColumnGroup = (props) => {
     }, [(_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
                     ? "bg-primary-50 h-38"
-                    : "bg-white icon-38x38"} hover:bg-primary-25 br-8 cursor-pointer px-2 flex align-items-cente gap-1 zoom_animate`, ref: btnRef, onClick: showColumnOptions }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
+                    : "bg-white icon-38x38"} hover:bg-primary-25 br-8 sc_icon_hover cursor-pointer px-2 flex align-items-cente gap-1 zoom_animate`, ref: btnRef, onClick: showColumnOptions }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
                             ? "text-primary-400"
-                            : "text-gray-500" }), (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 mt-1 mr-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 pl-2" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20 })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id), onChange: (e) => onSelectedCheckbox(column, e), disabled: checkedColumns.size === 2 &&
-                                                        !checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "max-w-28rem line-clamp line-clamp-1 inline-block", title: column.headerName }, { children: column.headerName }))] }))] }), column === null || column === void 0 ? void 0 : column.id))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", text: true, label: "Remove Grouping", onClick: (e) => clearListItems(e) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: (e) => clearSearchAndSaveGrouping(e), disabled: (checkedColumns === null || checkedColumns === void 0 ? void 0 : checkedColumns.size) === 0 })] }))] }))] }));
+                            : "text-gray-500" }), (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
+                                                ? "col-gr-icon-active mr-2"
+                                                : "col-gr-icon" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id), onChange: (e) => onSelectedCheckbox(column, e), disabled: checkedColumns.size === 2 &&
+                                                        !checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "max-w-28rem line-clamp line-clamp-1 inline-block", title: column.headerName }, { children: column.headerName }))] }))] }), column === null || column === void 0 ? void 0 : column.id)))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "no-content" }, { children: "No Content" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", text: true, label: "Remove Grouping", onClick: (e) => clearListItems(e) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: (e) => clearSearchAndSaveGrouping(e), disabled: (checkedColumns === null || checkedColumns === void 0 ? void 0 : checkedColumns.size) === 0 })] }))] }))] }));
 };
 exports.default = ColumnGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.2.53",
+  "version": "6.2.55",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",