@sc-360-v2/storefront-cms-library 0.3.58 → 0.3.59

package/dist/bulk-order-pad.scss

@@ -52,6 +52,7 @@
     text-align: center;
     border-block: 1px solid var(--_error-200);
     color: var(--_error-700);
+    margin-top: -1px;
   }
 
   .bulkOrderPad-grid {

package/dist/buyForHeaders.scss

@@ -764,8 +764,7 @@
             var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr)
           )
         );
-        font-family:
-          var(
+        font-family: var(
             --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy,
             var(
               --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy,
@@ -913,8 +912,7 @@
           var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr)
         )
       );
-      font-family:
-        var(
+      font-family: var(
           --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy,
           var(
             --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy,
@@ -980,8 +978,7 @@
             var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc)
           )
         );
-        font-family:
-          var(
+        font-family: var(
             --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc,
             var(
               --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc,

package/dist/cart-summary.scss

@@ -250,7 +250,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               align-items: flex-start;
 
               .cart_summary_product_img {
-                width: 69px;
+                width: 80px;
                 height: 80px;
                 background-color: var(
                   --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
@@ -1268,6 +1268,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
 
       .btn__with__text[data-btn-name="checkoutButton"] {
+        width: 100%;
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
@@ -1341,6 +1342,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-cr));
 
         &[data-show-border="true"] {
+          width: 100%;
           border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-cr));
 
           border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-se));
@@ -1391,6 +1393,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
       .btn__with__text[data-btn-name="placeOrder"] {
+        width: 100%;
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
@@ -1470,6 +1473,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-cr));
 
         &[data-show-border="true"] {
+          width: 100%;
           border-color: var(
             --_sf-hr-br-cr,
             prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-cr)
@@ -1532,6 +1536,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
       .btn__with__text[data-btn-name="requestQuote"] {
+        width: 100%;
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
@@ -1673,6 +1678,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
       .btn__with__text[data-btn-name="reviewOrder"] {
+        width: 100%;
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
@@ -1814,6 +1820,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
       .btn__with__text[data-btn-name="createSubOrders"] {
+        width: 100%;
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
@@ -1974,6 +1981,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
       .btn__with__text[data-btn-name="submitQuote"] {
+        width: 100%;
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
@@ -2053,6 +2061,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-cr));
 
         &[data-show-border="true"] {
+          width: 100%;
           border-color: var(
             --_sf-hr-br-cr,
             prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-cr)

package/dist/dropdownTemplate.scss

@@ -2,6 +2,13 @@
   display: grid;
   gap: 2px;
   width: 100%;
+  border: 1px solid var(--_gray-300);
+  background-color: var(--_base-white);
+  border-radius: 6px;
+  &:focus-within {
+    border: 1px solid var(--_primary-300);
+    outline: 2px solid var(--_primary-100);
+  }
 
   .dropdown-disabled {
     opacity: 0.6;
@@ -19,16 +26,22 @@
     display: flex;
     justify-content: space-between;
     padding: 0px 12px;
-    border: 1px solid var(--_gray-300);
-    background-color: var(--_base-white);
-    border-radius: 6px;
+
     width: 100%;
     align-items: center;
     height: 40px;
-    &:focus-within {
-      border: 1px solid var(--_primary-300);
-      outline: 2px solid var(--_primary-50);
-    }
+
+    // .dropdown-disabled {
+    //   opacity: 0.6;
+    //   pointer-events: none;
+    //   user-select: none;
+
+    //   input {
+    //     background-color: #f5f5f5;
+    //     cursor: not-allowed;
+    //   }
+    // }
+
     .dropdown-chips {
       display: flex;
       //   flex-wrap: wrap;
@@ -76,6 +89,17 @@
     .dropdown__icon {
       .icon {
         display: flex;
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+        &.up,
+        &.down {
+          svg {
+            width: 18px !important;
+            height: 18px !important;
+          }
+        }
       }
       cursor: pointer;
       .icon svg {
@@ -88,15 +112,29 @@
     .dropdown__clear__icon {
       position: absolute;
       right: 32px;
+      .icon {
+        display: flex;
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+        &.up,
+        &.down {
+          svg {
+            width: 18px !important;
+            height: 18px !important;
+          }
+        }
+      }
     }
     .dropdown-menu {
       position: absolute;
       width: 100%;
-      top: 40px;
+      top: 38px;
       left: 0px;
       right: 24px;
       background: white;
-      border: 1px solid #ddd;
+      border: 1px solid var(--_gray-100);
       border-radius: 6px;
       max-height: 200px;
       // overflow-y: auto;
@@ -107,6 +145,11 @@
       display: flex;
       flex-direction: column;
       // padding: 4px;
+      // &.uom_dropdown {
+      //   margin-left: -10px;
+      //   width: 303px !important;
+      //   max-height: 260px !important;
+      // }
 
       .dropdown_menu_ul {
         height: 200px;
@@ -176,13 +219,29 @@
           }
 
           .dropdown-item-details {
-            max-width: 80%;
+            max-width: 100%;
+            // width: 100%;
+            .item-name {
+              color: var(--_gray-900);
+            }
+            .item-code {
+              color: var(--_gray-600);
+            }
           }
         }
         .selected {
           background-color: var(--_primary-25);
           font-weight: normal;
-          color: var(--_primary-500);
+          color: var(--_primary-400);
+          .dropdown-item-details {
+            width: 70% !important;
+          }
+          .check_mark {
+            margin-left: auto;
+            svg path {
+              stroke: var(--_primary-400);
+            }
+          }
         }
       }
       .dropdown-group-li {
@@ -261,6 +320,14 @@
           align-items: center;
           justify-content: center;
           cursor: pointer;
+          .add_selected_options {
+            &:hover {
+              background-color: var(--_primary-25);
+              svg path {
+                stroke: var(--_primary-400);
+              }
+            }
+          }
           &:not(:last-child) {
             border-right: 1px solid var(--_gray-200);
           }
@@ -287,18 +354,22 @@
     .dropdown_template_panel_search {
       background: none;
       padding: 8px;
-      border-bottom: 1px solid #dddddd;
+      border-bottom: 1px solid var(--_gray-100);
       height: max-content !important;
       position: relative;
       &:hover {
         background: none !important;
       }
+
       input {
         width: 100%;
         padding-inline: 10px;
         border-radius: 4px;
         border: 1px solid var(--_gray-200);
         height: 40px;
+        &:focus {
+          border: 1px solid var(--_gray-300);
+        }
       }
       .close_btn {
         position: absolute;
@@ -307,12 +378,12 @@
         z-index: 10;
       }
     }
-  }
-  .dropdown-with-icon {
-    width: 100%;
-    // pointer-events: none;
-    border: none;
-    padding: 0;
+    .dropdown-with-icon {
+      width: 100%;
+      // pointer-events: none;
+      border: none;
+      padding: 0;
+    }
   }
 }
 // .dropdown-with-input-section.full-width {

package/dist/employee-bulk-order.scss

@@ -124,14 +124,30 @@
           .em_add-product {
             position: absolute;
             right: 0;
+            .dropdown-with-input-section {
+              border: 0;
+              background-color: transparent;
+              &:focus-within {
+                border: 0;
+                outline: 0;
+              }
+            }
             .svg_icon {
               right: -10px;
-              top: 0px;
+              top: -10px;
             }
           }
           .em_add-employee {
             position: absolute;
             bottom: 0;
+            .dropdown-with-input-section {
+              border: 0;
+              background-color: transparent;
+              &:focus-within {
+                border: 0;
+                outline: 0;
+              }
+            }
             .dropdown-menu {
               top: 38px;
             }
@@ -221,6 +237,7 @@
               }
               .em_profile_text {
                 width: 100%;
+                text-align: center;
               }
             }
             .em_entity-status {
@@ -299,6 +316,11 @@
                 gap: 8px;
                 grid-template-columns: 40px auto;
                 .image-section {
+                  border-radius: 50%;
+                  width: 32px;
+                  height: 32px;
+                  overflow: hidden;
+                  background: var(--_gray-100);
                   img {
                     width: 100%;
                     border-radius: 2px;
@@ -359,12 +381,20 @@
               overflow: auto;
               padding: 8px;
               color: var(--_gray-600);
-              .no_variants {
+              .variant_info {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 height: 100%;
-                color: var(--_gray-400);
+                border-radius: 4px;
+                &:has(.error) {
+                  color: var(--_gray-400);
+                  background-color: var(--_base-white);
+                }
+                &.error {
+                  color: var(--_error-700);
+                  background-color: var(--_error-50);
+                }
               }
               .variantOptionValues {
                 height: 24px;
@@ -427,6 +457,14 @@
               }
             }
           }
+          .validation-info {
+            background-color: var(--_error-50);
+            color: var(--_error-700);
+            font-size: 14px;
+            text-align: center;
+            padding-block: 4px 6px;
+            margin-top: -1px;
+          }
           .em_pr_actions {
             display: flex;
             justify-content: end;
@@ -482,6 +520,7 @@
                     gap: 8px;
                     align-items: center;
                     // padding: 8px 0;
+
                     .em_opt_val {
                       cursor: pointer;
                       &:hover {
@@ -573,6 +612,10 @@
               font-weight: 600;
               font-size: 16px;
               color: #101828;
+              &:focus {
+                border: 1px solid var(--_primary-300);
+                outline: 2px solid var(--_primary-100);
+              }
             }
             .add_to_cart_btn_for_employee_bulk {
               height: 100%;

package/dist/emtpy-templates.scss

@@ -5,6 +5,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
+  text-align: center;
 
   h3 {
     font-size: 16px;
@@ -82,3 +83,55 @@
     }
   }
 }
+
+// loading styles
+.loader_empty_template {
+  width: 82px;
+  height: 18px;
+  position: relative;
+  margin-bottom: 12px;
+}
+.loader_empty_template::before,
+.loader_empty_template::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 10%);
+  top: 0;
+  background: var(--_gray-500);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: jump_loader 0.5s ease-in infinite alternate;
+}
+
+.loader_empty_template::after {
+  background: #0000;
+  color: var(--_gray-400);
+  top: 100%;
+  box-shadow:
+    32px -20px,
+    -32px -20px;
+  animation: split_loader 0.5s ease-out infinite alternate;
+}
+
+@keyframes split_loader {
+  0% {
+    box-shadow:
+      8px -20px,
+      -8px -20px;
+  }
+  100% {
+    box-shadow:
+      32px -20px,
+      -32px -20px;
+  }
+}
+@keyframes jump_loader {
+  0% {
+    transform: translate(-50%, -100%);
+  }
+  100% {
+    transform: translate(-50%, 10%);
+  }
+}

package/dist/language-selector.scss

@@ -5,6 +5,7 @@
 [data-div-type="element"] {
   &[data-element-type="languageMenu"],
   &[data-element-type="currencySelector"],
+  &[data-element-type="userGroupsSelector"],
   &[data-element-type="warehouseSelector"] {
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 

package/dist/modal.scss

@@ -338,8 +338,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       flex-direction: column;
       // max-height: 100vh;
       // max-width: 1200px;
-      max-height: calc(100vw - 24px);
-      max-width: calc(100vw - 24px);
+      max-height: calc(100vw - 12px);
+      max-width: calc(100vw - 12px);
 
       .product-list {
         flex: 1;
@@ -475,6 +475,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
             .emp_info {
               display: flex;
+              padding-right: 16px;
               .emp_info_item {
                 color: var(--_gray-600);
                 font-size: 14px;

package/dist/types/builder/elements/form-builder/index.d.ts

@@ -203,6 +203,10 @@ export interface FormComponentConfig {
     src?: string;
     type: FormComponentTypeEnum;
     w: number;
+    allowUpperCase?: boolean;
+    allowLowerCase?: boolean;
+    allowSpecialCharacters?: boolean;
+    allowNumbers?: boolean;
 }
 export declare enum ElementSettingEnum {
     LABEL = 1,

package/dist/types/builder/enums/index.d.ts

@@ -335,6 +335,7 @@ export declare const CMSElementsListEnum: {
     QUOTA_DETAILS: string;
     CURRENCY_SELECTOR: string;
     WAREHOUSE_SELECTOR: string;
+    USER_GROUP_SELECTOR: string;
     SHIPPING_PAYMENT: string;
 };
 export declare enum CMSResponsiveModeEnums {

package/dist/types/builder/tools/element-edit/cartSummary.d.ts

@@ -123,7 +123,6 @@ export declare const getDefaultData: () => {
         showRequestQuoteButton: {
             value: boolean;
             propertyType: CMSElementEditTypes;
-            property: string;
         };
         requestQuoteButtonLinkTo: {
             value: null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.3.58",
+  "version": "0.3.59",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {