@sc-360-v2/storefront-cms-library 0.4.85 → 0.4.87

package/dist/container.scss

@@ -1,114 +1,115 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$activeElementSelector: "[data-has-clicked='true']";
-[data-div-type="element"] {
-  &[data-element-type="container"] {
-    // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    // width: calc(
-    //   1% *
-    //     var(
-    //       --_ctm-mob-con-ele-nw-wh-vl,
-    //       var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl)),
-    //       auto
-    //     )
-    // );
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-
-    width: calc(
-      1% *
-        var(
-          --_ctm-mob-con-ele-nw-wh-vl,
-          var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl, auto))
-        )
-    );
-    margin: var(
-      --_ctm-mob-con-lt-mn,
-      var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
-    );
-
-    &[data-show-border="true"] {
-      border-color: var(
-        --_ctm-mob-con-dn-br-cr,
-        var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-con-dn-br-se,
-        var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-con-dn-br-wh,
-        var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
-      );
-    }
-    &[data-show-shadow="true"] {
-      // box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-con-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-      //   var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-con-dn-sw-br, var(--_ctm-dn-sw-br)))
-      //   var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-con-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-      //   var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-con-dn-sw-cr, var(--_ctm-dn-sw-cr)));
-      box-shadow: prepareMediaVariable(--_ctm-con-dn-sw-ae, 0 0)
-        prepareMediaVariable(--_ctm-con-dn-sw-br, 0) prepareMediaVariable(--_ctm-con-dn-sw-sd, 0)
-        prepareMediaVariable(--_ctm-con-dn-sw-cr, transparent);
-    }
-
-    &[data-view-state="full"] {
-      & > .wrapper {
-        grid-template-rows: auto !important;
-      }
-    }
-    & > div {
-      &.wrapper {
-        width: 100%;
-        min-height: prepareMediaVariable(--_ctm-con-lt-mn-ht);
-        padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
-
-        background-color: var(
-          --_ctm-mob-con-dn-bd-cr,
-          var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
-        );
-        background-image: var(
-          --_ctm-mob-con-dn-bd-ie,
-          var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
-        );
-        background-attachment: var(
-          --_ctm-mob-con-dn-bd-at,
-          var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
-        );
-        background-position: var(
-          --_ctm-mob-con-dn-bd-pn,
-          var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
-        );
-        background-repeat: var(
-          --_ctm-mob-con-dn-bd-rt,
-          var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
-        );
-        background-size: var(
-          --_ctm-mob-con-dn-bd-se,
-          var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
-        );
-        border-radius: var(
-          --_ctm-mob-con-dn-br-rs,
-          var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
-        );
-      }
-    }
-
-    // &[data-view-state="full"] {
-    //   width: auto;
-    //   margin: 0;
-    //   justify-self: stretch !important;
-    //   align-self: stretch !important;
-    //   cursor: auto;
-    //   &:is(#{$activeElementSelector}) {
-    //     & > div {
-    //       &[data-div-type="wrapper__layer"] {
-    //         --_sf-vt-zz: visible;
-    //         --_sf-op-zz: 1;
-    //       }
-    //     }
-    //   }
-    // }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$activeElementSelector: "[data-has-clicked='true']";
+[data-div-type="element"] {
+  &[data-element-type="container"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: calc(
+    //   1% *
+    //     var(
+    //       --_ctm-mob-con-ele-nw-wh-vl,
+    //       var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl)),
+    //       auto
+    //     )
+    // );
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+
+    width: calc(
+      1% *
+        var(
+          --_ctm-mob-con-ele-nw-wh-vl,
+          var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl, auto))
+        )
+    );
+    margin: var(
+      --_ctm-mob-con-lt-mn,
+      var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
+    );
+
+    &[data-show-border="true"] {
+      border-color: var(
+        --_ctm-mob-con-dn-br-cr,
+        var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-con-dn-br-se,
+        var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-con-dn-br-wh,
+        var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
+      );
+    }
+    &[data-show-shadow="true"] {
+      // box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-con-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+      //   var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-con-dn-sw-br, var(--_ctm-dn-sw-br)))
+      //   var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-con-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+      //   var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-con-dn-sw-cr, var(--_ctm-dn-sw-cr)));
+      box-shadow: prepareMediaVariable(--_ctm-con-dn-sw-ae, 0 0)
+        prepareMediaVariable(--_ctm-con-dn-sw-br, 0) prepareMediaVariable(--_ctm-con-dn-sw-sd, 0)
+        prepareMediaVariable(--_ctm-con-dn-sw-cr, transparent);
+    }
+
+    &[data-view-state="full"] {
+      & > .wrapper {
+        grid-template-rows: auto !important;
+      }
+    }
+    & > div {
+      &.wrapper {
+        width: 100%;
+        grid-template-columns: 100% !important;
+        min-height: prepareMediaVariable(--_ctm-con-lt-mn-ht);
+        padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
+
+        background-color: var(
+          --_ctm-mob-con-dn-bd-cr,
+          var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
+        );
+        background-image: var(
+          --_ctm-mob-con-dn-bd-ie,
+          var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-con-dn-bd-at,
+          var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-con-dn-bd-pn,
+          var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-con-dn-bd-rt,
+          var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-con-dn-bd-se,
+          var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
+        );
+        border-radius: var(
+          --_ctm-mob-con-dn-br-rs,
+          var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
+        );
+      }
+    }
+
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+    //   &:is(#{$activeElementSelector}) {
+    //     & > div {
+    //       &[data-div-type="wrapper__layer"] {
+    //         --_sf-vt-zz: visible;
+    //         --_sf-op-zz: 1;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+}

package/dist/filters.scss

@@ -71,7 +71,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     .filter_container {
       width: 100%;
       //Filter Features  Starts
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       background-color: var(
         --_ctm-mob-dn-fs-wt-bd-cr,
         var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr))
@@ -87,6 +87,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         --_ctm-mob-dn-fs-wt-br-rs,
         var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
       );
+      overflow: clip;
+      // max-height: prepareMediaVariable(--_ctm-lt-ht, auto);
+      // overflow-y: auto;
       @mixin flex($justifyItems: flex-start, $alignItems: center) {
         display: var(--_d-flex);
         justify-content: $justifyItems;
@@ -98,6 +101,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
         // height: calc(100vh - 20px);
         // padding: 10px;
+        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+        max-height: prepareMediaVariable(--_ctm-lt-ht, auto);
         overflow-y: auto;
 
         .option__group {

package/dist/form-preview.scss

@@ -53,6 +53,10 @@
   }
 }
 
+.react-datepicker__input-container:has(.datepicker-input) {
+  border: 0px;
+}
+
 .fb_field {
   width: 100%;
   .cnf_checkbox {
@@ -115,24 +119,70 @@
     .react-datepicker-wrapper {
       display: block;
 
-      .react-datepicker__input-container {
-        input {
-          padding-left: 32px !important;
-        }
-      }
+      // &:has(.react-datepicker__input-container) {
+      //   input {
+      //     border: 0;
+      //     padding-inline: 24px 16px;
+      //   }
+      // }
+
+      // .react-datepicker__input-container {
+      //   input {
+      //     padding-left: 32px !important;
+      //   }
+      // }
     }
   }
 
   .react-datepicker-wrapper {
     display: block;
+    .react-datepicker__input-container {
+      .datepicker-input {
+        padding-inline: 32px 12px;
+      }
+    }
+  }
+
+  .react-datepicker__header {
+    select {
+      appearance: none; /* remove default arrow */
+      -webkit-appearance: none;
+      -moz-appearance: none;
+
+      padding: 8px 35px 8px 10px !important; /* extra right space */
+
+      background: url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 20 20' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>")
+        no-repeat right 10px center;
+
+      background-color: var(--_base-white);
+      border: 1px solid var(--_gray-300);
+      outline: none;
+    }
+    /* Scrollbar width */
+    select::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    /* Scroll thumb (the draggable part) */
+    select::-webkit-scrollbar-thumb {
+      background-color: #888;
+      border-radius: 4px;
+    }
+
+    /* Scroll track */
+    select::-webkit-scrollbar-track {
+      background: transparent;
+    }
   }
-  input:not([type="checkbox"][type="radio"]),
-  select {
+
+  input:not([type="checkbox"][type="radio"]) {
     border: 1px solid var(--_gray-300);
     border-radius: 6px;
     padding-inline: 12px;
     width: 100%;
     height: 38px;
+    outline: none;
+
     &:focus {
       box-shadow: 0px 0px 0px 2px var(--_gray-100);
     }
@@ -280,7 +330,7 @@
   height: 38px;
   text-align: center;
   border-radius: 6px;
-  background-color: var(--_primary-400);
+  background-color: var(--_thm-py-bs-dt-se-bd-cr);
   color: var(--_base-white);
   width: 100%;
   padding-inline: 16px;
@@ -289,11 +339,14 @@
 
   &:disabled,
   &[disabled] {
-    background-color: var(--_primary-400);
+    background-color: var(--_thm-py-bs-dt-se-bd-cr);
     color: var(--_base-white);
     cursor: not-allowed;
     opacity: 0.6;
   }
+  &:hover {
+    background-color: var(--_thm-py-bs-hr-se-bd-cr);
+  }
 }
 
 // react datepicker styles in preview mode
@@ -352,10 +405,10 @@
   }
 
   .react-datepicker__day--keyboard-selected {
-    background-color: var(--_gray-500);
+    background-color: var(--_thm-cs-at-py);
     color: var(--_base-white);
     &:hover {
-      background-color: var(--_gray-400);
+      background-color: var(--_thm-cs-at-py) !important;
     }
   }
   .react-datepicker__day-names {
@@ -419,7 +472,7 @@
 }
 
 .react-datepicker__day--selected {
-  background-color: var(--_gray-500);
+  background-color: var(--_thm-py-bs-dt-se-bd-cr) !important;
 }
 
 .react-datepicker__day--selected:not([aria-disabled="true"]):hover {

package/dist/order-status.scss

@@ -1404,7 +1404,12 @@ $defaultValues: (
           );
           display: flex;
           align-items: flex-start;
+          flex-wrap: wrap;
 
+          .cart_item_accordians {
+            width: 100%;
+            margin-top: 8px;
+          }
           // img {
           //   width: 69px;
           //   height: 80px;

package/dist/phone-input.scss

@@ -53,6 +53,23 @@
     // border-right: 1px solid var(--_primary-300);
     flex-shrink: 0;
 
+    position: relative;
+
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-right: 1.5px solid var(--_gray-500);
+      border-bottom: 1.5px solid var(--_gray-500);
+      transform: rotate(45deg);
+      margin-left: 4px;
+      vertical-align: middle;
+      top: 12px;
+      right: -33px;
+      position: absolute;
+    }
+
     &:disabled {
       cursor: not-allowed;
       opacity: 0.6;
@@ -76,7 +93,7 @@
   }
 
   .sc-phone-dial-code {
-    padding: 0 4px 0 0px;
+    padding: 0 30px 0 0px;
     font-size: 14px;
     color: var(--_gray-700, #344054);
     white-space: nowrap;
@@ -85,7 +102,6 @@
 
   input[type="tel"].sc-phone-input {
     flex: 1;
-    border: none !important;
     outline: none !important;
     box-shadow: none !important;
     border-radius: 0 !important;
@@ -94,6 +110,8 @@
     padding: 16px !important;
     background: transparent !important;
     min-width: 0;
+    border-left: 1px solid var(--_gray-300) !important;
+    border-right: 0px !important;
 
     &:focus {
       outline: none !important;
@@ -107,7 +125,7 @@
     left: 0;
     width: 240px;
     background: var(--_base-white, #fff);
-    border: 1px solid var(--_primary-300);
+    border: 1px solid var(--_gray-300);
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     z-index: 9999;
@@ -131,7 +149,7 @@
     height: auto !important;
 
     &:focus {
-      border-color: var(--_primary-300) !important;
+      border-color: var(--_gray-300) !important;
       outline: none !important;
     }
   }
@@ -164,7 +182,7 @@
     }
 
     &.selected {
-      background-color: var(--_primary-50, #f0f4ff);
+      background-color: var(--_gray-100, #f0f4ff);
     }
   }
 
@@ -176,9 +194,24 @@
   }
 
   .sc-phone-check {
-    color: var(--_primary-400);
-    font-size: 16px;
+    position: relative;
+    width: 16px;
+    height: 16px;
     flex-shrink: 0;
+    font-size: 0;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: 5px;
+      width: 4px;
+      height: 9px;
+      border-right: 1px solid var(--_gray-600, #475467);
+      border-bottom: 1px solid var(--_gray-600, #475467);
+      transform: rotate(45deg);
+    }
   }
 
   .sc-phone-no-results {

package/dist/repeater-grid-toggle.scss

@@ -25,7 +25,7 @@ $wrapper: ".tgl__wrapper";
         --_br-6: 6px;
         --_width-40: 40px;
         --_width-20: 20px;
-        border-radius: var(--_br-6);
+        border-radius: 4px;
         // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
         background-color: prepareMediaVariable(
           --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,

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

@@ -69,6 +69,7 @@ export declare enum FormElementIdEnum {
     ColorPicker = "colorPicker",
     InputText = "InputText",
     Percent = "percent",
+    Passcode = "passcode",
     ShortAnswer = "ShortAnswer",
     LongAnswer = "LongAnswer",
     Number = "Number",

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

@@ -1,8 +1,17 @@
 import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { AlignItemsValue, JustifyContentValue } from "../../../../components/global/types";
 export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
 }
 interface selfLayoutInterface {
     selectorKey: string;
+    justifyContent: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: JustifyContentValue;
+    };
+    alignItems: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: AlignItemsValue;
+    };
+    allocationItemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & any;
 }
 interface selfDesignInterface {
     selectorKey: string;
@@ -17,7 +26,11 @@ export declare enum SelectorKeysEnum {
     ALLOCATION_CARD = "allocationCard",
     DIVIDER = "divider",
     QUOTA_DETAILS = "quotaDetails",
-    DEFAULT_STATE = "defaultState"
+    DEFAULT_STATE = "defaultState",
+    GRID_VIEW_CONTROL_STYLE = "gridViewControlStyle",
+    BUTTON = "button",
+    SELECTED_STATE = "selectedState",
+    LAYOUT_STYLE = "layoutStyle"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/package.json

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