@sc-360-v2/storefront-cms-library 0.3.15 → 0.3.17

package/dist/cart-details.scss

@@ -409,91 +409,75 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
   .section {
     padding: 12px;
-    border-block: 1px solid #d9d9d9;
-  }
-
-  .section-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #111827;
+    border: 1px solid #d9d9d9;
+    .section-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #111827;
 
-    cursor: pointer;
+      cursor: pointer;
 
-    &.error {
-      color: #dc2626;
+      &.error {
+        color: #dc2626;
+      }
     }
-  }
-
-  .section-body {
-    padding-top: 1rem;
-  }
-  .attribute {
-    margin-bottom: 1.25rem;
-  }
 
-  .label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-    margin-bottom: 0.5rem;
-
-    &.required::after {
-      content: " *";
-      color: #dc2626;
-    }
-  }
+    .section-body {
+      padding-top: 1rem;
+      .attribute {
+        margin-bottom: 1.25rem;
+        .label {
+          display: block;
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #374151;
+          margin-bottom: 0.5rem;
+
+          &.required::after {
+            content: " *";
+            color: #dc2626;
+          }
+        }
+        .attribute_form_field {
+          width: 100% !important;
+          padding: 8px 12px !important;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          /* background-color: #f9fafb !important; */
+          outline: none;
+          transition: border-color 0.2s ease-in-out;
+          font-size: 14px;
+          height: 40px;
+
+          &:focus {
+            border-color: #3b82f6;
+            background-color: #fff;
+          }
 
-  .input,
-  select,
-  textarea {
-    width: 100% !important;
-    padding: 8px 12px !important;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    /* background-color: #f9fafb !important; */
-    outline: none;
-    transition: border-color 0.2s ease-in-out;
-    font-size: 14px;
-    height: 40px;
-
-    &:focus {
-      border-color: #3b82f6;
-      background-color: #fff;
-    }
+          &.error {
+            border-color: #dc2626;
+            background-color: #fef2f2;
+          }
+        }
 
-    &.error {
-      border-color: #dc2626;
-      background-color: #fef2f2;
+        textarea {
+          min-height: 100px;
+          resize: vertical;
+        }
+      }
+      .cart_item_attr_disabled {
+        pointer-events: none;
+        opacity: 0.5;
+        cursor: none;
+      }
     }
   }
 
-  textarea {
-    min-height: 100px;
-    resize: vertical;
-  }
-
-  .error-text {
-    font-size: 0.75rem;
-    color: #dc2626;
-    margin-top: 0.25rem;
-  }
-
-  .submit-btn {
-    background-color: #3b82f6;
-    color: #fff;
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border: none;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    margin-top: 2rem;
-
-    &:hover {
-      background-color: #2563eb;
-    }
-  }
+  // .error-text {
+  //   font-size: 0.75rem;
+  //   color: #dc2626;
+  //   margin-top: 0.25rem;
+  // }
 }
 
 .infinite-list-container {
@@ -507,17 +491,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     max-width: 100%;
     min-width: 100%;
   }
-  //   padding: 1rem;
-  //   border: 1px solid #e0e0e0;
-  //   border-radius: 12px;
-  //   background-color: #fff;
-  //   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
-  //   transition: box-shadow 0.2s ease;
-
-  //   &:hover {
-  //     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  //   }
-  // }
 
   .pagination {
     display: flex;

package/dist/confirmationModal.scss

@@ -64,16 +64,26 @@
           border: 1px solid #d0d5dd;
         }
       }
-
       .confirm-button {
-        background-color: #dc2626; // red-600
         color: #ffffff;
         font-weight: 600;
+      }
+
+      .confirmation-button {
+        background-color: #dc2626; // red-600
 
         &:hover {
           background-color: #b91c1c;
         }
       }
+
+      .primaryConfirmation-button {
+        background-color: #162578; // red-600
+
+        &:hover {
+          background-color: #101c5f;
+        }
+      }
     }
   }
 }

package/dist/dropdownTemplate.scss

@@ -213,3 +213,10 @@
     font-size: 14px;
   }
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/fb-dropdown.scss

@@ -1,124 +1,101 @@
-.dropdown_macro {
-  &.underline {
-    .dropdown_label {
-      border-radius: 0;
-      border: none;
-      border-bottom: 1px solid #333;
-      padding-inline: 0px;
-
-      &:focus-within,
-      &:focus {
-        border: 0;
-        box-shadow: none;
-        border-bottom: 1px solid #333;
-        // box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-        background-color: var(--_base-white);
+.fb_dropdown_main {
+  position: relative;
+  width: 100%;
+}
 
-        .dropdown_text {
-          color: var(--_primary-500);
-        }
+.dropdown_label {
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--_gray-300);
+  border-radius: 6px;
+  background: var(--_base-white);
+  cursor: pointer;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border 0.2s ease;
 
-        svg {
-          stroke: var(--_primary-500);
-        }
-      }
-    }
-  }
-  .label {
-    font-size: 14px;
-    display: block;
-    margin-bottom: 4px;
+  &:focus,
+  &:focus-within {
+    border-color: var(--_primary-300);
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    outline: none;
   }
-  .dropdown_label {
-    width: 100%;
-    height: 40px;
-    border: 1px solid var(--_gray-300);
-    border-radius: 6px;
-    background: white;
-    cursor: pointer;
-    padding-inline: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .dropdown_icon {
-      display: flex;
-      transition: transform 400ms ease;
-      will-change: transform;
 
-      &.open {
-        transform: rotate(180deg); // flipped up
-      }
+  &.disabled {
+    cursor: not-allowed;
+    background: var(--_gray-100);
+    color: var(--_gray-400);
+  }
 
-      &.close {
-        transform: rotate(0deg); // pointing down
-      }
-    }
+  .dropdown_text {
+    color: var(--_gray-800);
+  }
 
+  .dropdown_icon {
+    display: flex;
+    transition: transform 300ms ease;
     svg {
       width: 16px;
       height: 16px;
     }
 
-    &:focus-within,
-    &:focus {
-      border: 1px solid var(--_primary-300);
-      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-      background-color: var(--_base-white);
-
-      .dropdown_text {
-        color: var(--_primary-500);
-      }
-
-      svg {
-        stroke: var(--_primary-500);
-      }
+    &.open {
+      transform: rotate(180deg);
     }
   }
 }
 
-.dropdown_panel_macro {
-  border: 1px solid var(--_gray-300);
-  padding: 4px;
-  border-radius: 6px;
+.fb_dropdown_panel {
   position: absolute;
-  top: var(--_top-pos, 100%);
-  left: var(--_left-pos, 0);
-  width: var(--_panel-width, auto);
+  width: 100%;
   background-color: var(--_base-white);
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    opacity 300ms ease,
-    transform 300ms ease;
+  border: 1px solid var(--_gray-300);
+  border-radius: 6px;
+  margin-top: 4px;
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-  &.open {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
+  &.drop-up {
+    bottom: 44px; // height of dropdown + margin
+    top: auto;
+    margin-top: 0;
+    margin-bottom: 4px;
   }
 
-  &.closed {
-    opacity: 0;
-    transform: translateY(20px);
-    pointer-events: none;
+  &.drop-down {
+    top: 100%;
   }
 
   ul {
     list-style: none;
-    padding: 0;
+    padding: 4px 0;
     margin: 0;
+
     li {
-      padding: 8px 12px;
+      padding: 0;
+    }
+
+    .dropdown_option {
+      padding: 10px 12px;
       font-size: 14px;
-      color: var(--_gray-600);
-      background-color: var(--_base-white);
+      color: var(--_gray-700);
       cursor: pointer;
-      border-radius: 4px;
+      transition: background 0.2s;
+
       &:hover {
         background-color: var(--_primary-50);
         color: var(--_primary-500);
       }
+
+      &.selected {
+        background-color: var(--_primary-100);
+        color: var(--_primary-700);
+        font-weight: 500;
+      }
     }
   }
 }

package/dist/form-preview.scss

@@ -97,6 +97,7 @@
     font-size: 16px;
     cursor: pointer;
     user-select: none;
+    flex-wrap: wrap;
 
     input {
       display: none;
@@ -107,6 +108,7 @@
       height: 20px;
       background-color: #fff;
       border: 2px solid #ccc;
+      margin: 0px 4px;
       position: relative;
       transition: all 0.2s ease;
 

package/dist/layouter.scss

@@ -174,10 +174,12 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
               // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
               flex: 0 0 var(--_sf-cl-vl);
               width: var(--_sf-cl-vl);
-              grid-template-rows: minmax(
-                max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
-                auto
-              );
+              // grid-template-rows: minmax(
+              //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+              //   auto
+              // );
+
+              grid-template-rows: minmax(50px, auto);
               grid-template-columns: minmax(0px, 1fr);
               // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
               // padding-left: 0px !important;

package/dist/repeater.scss

@@ -292,10 +292,11 @@ $rai: "repeater-advertise-item";
                 // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
                 flex: 0 0 var(--_sf-cl-vl);
                 width: var(--_sf-cl-vl);
-                grid-template-rows: minmax(
-                  max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
-                  auto
-                );
+                // grid-template-rows: minmax(
+                //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+                //   auto
+                // );
+                grid-template-rows: minmax(50px, auto);
                 grid-template-columns: minmax(0px, 1fr);
                 // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
                 // padding-left: 0px !important;
@@ -466,8 +467,7 @@ $rai: "repeater-advertise-item";
                 --_ctm-mob-rep-dn-bn-se-dt-se-cr,
                 var(--_ctm-tab-rep-dn-bn-se-dt-se-cr, var(--_ctm-rep-dn-bn-se-dt-se-cr))
               );
-              font-family:
-                var(
+              font-family: var(
                   --_ctm-mob-rep-dn-bn-se-dt-se-ft-fy,
                   var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-fy, var(--_ctm-rep-dn-bn-se-dt-se-ft-fy))
                 ),
@@ -625,8 +625,7 @@ $rai: "repeater-advertise-item";
                     --_ctm-mob-rep-dn-bn-se-hr-se-cr,
                     var(--_ctm-tab-rep-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
                   );
-                  font-family:
-                    var(
+                  font-family: var(
                       --_ctm-mob-rep-dn-bn-se-hr-se-ft-fy,
                       var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
                     ),

package/dist/toggle-button.scss

@@ -1,18 +1,18 @@
 .toggle__button {
-  position: var(--_p-relative);
-  width: var(--_width-36);
-  height: var(--_height-20);
-  background-color: var(--_gray-100);
-  border-radius: var(--_br-12);
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background-color: #d0d5dd;
+  border-radius: 12px;
   cursor: pointer;
 
   .toggle__slider {
-    position: var(--_p-absolute);
-    top: var(--_top-2);
-    left: var(--_left-2);
+    position: absolute;
+    top: 2px;
+    left: 2px;
     transform: translateY(0%);
-    width: var(--_width-16);
-    height: var(--_width-16);
+    width: 16px;
+    height: 16px;
     background-color: #fff;
     border-radius: 50%;
     transition: transform 0.3s ease;
@@ -22,10 +22,10 @@
   }
 
   &.toggle__active {
-    background: var(--_primary-600);
+    background: #132067;
 
     .toggle__slider {
-      top: var(--_top-2);
+      top: 2px;
       transform: translateX(16px);
     }
   }

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

@@ -8,7 +8,8 @@ export declare const FB_GRID_MIN_WIDTH = 4;
 export declare const FB_GRID_MOBILE_MIN_WIDTH = 2;
 export declare enum FBModeEnum {
     Edit = 1,
-    Preview = 2
+    Preview = 2,
+    WebsitePreview = 3
 }
 export declare enum ScreenSizeEnums {
     Desktop = "desktop",
@@ -53,6 +54,7 @@ export declare enum FormElementIdEnum {
     Phone = "Phone",
     DateOfBirth = "DateOfBirth",
     Address = "Address",
+    InputText = "InputText",
     ShortAnswer = "ShortAnswer",
     LongAnswer = "LongAnswer",
     Number = "Number",
@@ -99,6 +101,7 @@ export interface FormComponentConfig {
         };
         state: boolean;
     };
+    defaultValue?: any;
     fieldKey?: string;
     options?: string[];
     src?: string;
@@ -118,7 +121,8 @@ export declare enum ElementSettingEnum {
     PLACEHOLDER = 3,
     DESCRIPTION = 4,
     LIMIT_CHARACTER = 5,
-    MULTI_TOGGLE = 6
+    MULTI_TOGGLE = 6,
+    OPTIONS = 7
 }
 export interface SidebarElementItem extends FormComponentConfig {
     categoryId?: number;

package/package.json

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