@sc-360-v2/storefront-cms-library 0.4.41 → 0.4.45

package/dist/bundleDetails.scss

@@ -4366,5 +4366,236 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
+    .popover-container {
+      position: relative;
+      display: inline-block;
+      .popover-trigger {
+        cursor: pointer;
+        font-weight: 500;
+        color: #2b6cb0;
+      }
+
+      .popover-box {
+        // position: absolute;
+        // top: calc(100% + 10px);
+        // right: 0;
+        // background: white;
+        // padding: 12px 16px;
+        // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+        // border-radius: 8px;
+        // min-width: 150px;
+        // z-index: 10;
+        position: absolute;
+        // border: 1px solid #ccc;
+        min-width: 150px;
+        max-width: 300px;
+        z-index: 1000;
+        left: 30px;
+        top: 0;
+        padding: 8px;
+        border-radius: 4px;
+        max-height: 150px;
+        overflow-y: auto;
+      }
+
+      .popover-box {
+        display: flex;
+        flex-direction: column;
+
+        // width: 100%;
+        gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
+        background-color: var(
+          --_ctm-mob-dn-pr-se-bd-cr,
+          var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
+        );
+
+        border-color: var(
+          --_ctm-mob-dn-pr-se-br-cr,
+          var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
+        );
+
+        border-style: var(
+          --_ctm-mob-dn-pr-se-br-se,
+          var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
+        );
+
+        border-width: var(
+          --_ctm-mob-dn-pr-se-br-wh,
+          var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
+        );
+
+        border-radius: var(
+          --_ctm-mob-dn-pr-se-br-rs,
+          var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
+        );
+
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-mob-dn-pr-se-sw-ae, var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae)))
+            var(
+              --_ctm-mob-dn-pr-se-sw-br,
+              var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-pr-se-sw-sd,
+              var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-pr-se-sw-cr,
+              var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
+            )
+        );
+
+        padding: var(--_ctm-mob-dn-pr-se-pg, var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
+      }
+
+      .popover-box strong {
+        display: block;
+        margin-bottom: 6px;
+        font-weight: bold;
+      }
+
+      .popover-arrow {
+        position: absolute;
+        top: 8px;
+        left: -5px;
+        width: 12px;
+        height: 12px;
+        // background-color: var(
+        //   --_ctm-mob-dn-pr-se-bd-cr,
+        //   var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
+        // );
+        transform: rotate(-45deg);
+        box-shadow: -1px -1px 0px
+          var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
+      }
+
+      .popover_item {
+        // padding-inline: var(--_sf-cd-gp);
+        color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
+        font-family: var(
+          --_ctm-mob-dn-pr-se-ft-fy,
+          var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
+        );
+        font-size: var(
+          --_ctm-mob-dn-pr-se-ft-se,
+          var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-pr-se-ft-wt,
+          var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
+        );
+        font-style: var(
+          --_ctm-mob-dn-pr-se-ft-se-ic,
+          var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-pr-se-tt-an,
+          var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-pr-se-lr-sg,
+          var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-pr-se-le-ht,
+          var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-pr-se-ue,
+          var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
+        );
+        // margin-left: 10px;
+      }
+    }
+
+    .error__message__wraper {
+      background-color: var(
+        --_ctm-mob-dn-er-me-bd-cr,
+        var(--_ctm-tab-dn-er-me-bd-cr, var(--_ctm-dn-er-me-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-er-me-br-cr,
+        var(--_ctm-tab-dn-er-me-br-cr, var(--_ctm-dn-er-me-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-er-me-br-se,
+        var(--_ctm-tab-dn-er-me-br-se, var(--_ctm-dn-er-me-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-er-me-br-wh,
+        var(--_ctm-tab-dn-er-me-br-wh, var(--_ctm-dn-er-me-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-er-me-br-rs,
+        var(--_ctm-tab-dn-er-me-br-rs, var(--_ctm-dn-er-me-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-er-me-sw-ae, var(--_ctm-tab-dn-er-me-sw-ae, var(--_ctm-dn-er-me-sw-ae)))
+          var(--_ctm-mob-dn-er-me-sw-br, var(--_ctm-tab-dn-er-me-sw-br, var(--_ctm-dn-er-me-sw-br)))
+          var(--_ctm-mob-dn-er-me-sw-sd, var(--_ctm-tab-dn-er-me-sw-sd, var(--_ctm-dn-er-me-sw-sd)))
+          var(--_ctm-mob-dn-er-me-sw-cr, var(--_ctm-tab-dn-er-me-sw-cr, var(--_ctm-dn-er-me-sw-cr)))
+      );
+      white-space: nowrap;
+
+      .error__message {
+        color: var(--_ctm-mob-dn-er-me-cr, var(--_ctm-tab-dn-er-me-cr, var(--_ctm-dn-er-me-cr)));
+        font-family: var(
+          --_ctm-mob-dn-er-me-ft-fy,
+          var(--_ctm-tab-dn-er-me-ft-fy, var(--_ctm-dn-er-me-ft-fy))
+        );
+        font-size: var(
+          --_ctm-mob-dn-er-me-ft-se,
+          var(--_ctm-tab-dn-er-me-ft-se, var(--_ctm-dn-er-me-ft-se))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-er-me-ft-wt,
+          var(--_ctm-tab-dn-er-me-ft-wt, var(--_ctm-dn-er-me-ft-wt))
+        );
+        font-style: var(
+          --_ctm-mob-dn-er-me-ft-se-ic,
+          var(--_ctm-tab-dn-er-me-ft-se-ic, var(--_ctm-dn-er-me-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-er-me-tt-an,
+          var(--_ctm-tab-dn-er-me-tt-an, var(--_ctm-dn-er-me-tt-an))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-er-me-lr-sg,
+          var(--_ctm-tab-dn-er-me-lr-sg, var(--_ctm-dn-er-me-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-er-me-le-ht,
+          var(--_ctm-tab-dn-er-me-le-ht, var(--_ctm-dn-er-me-le-ht))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-er-me-ue,
+          var(--_ctm-tab-dn-er-me-ue, var(--_ctm-dn-er-me-ue))
+        );
+        padding: prepareMediaVariable(--_ctm-dn-er-me-pg);
+      }
+    }
+
+    .icon {
+      cursor: pointer;
+      svg {
+        width: var(--_ctm-dn-er-me-in-se);
+        height: var(--_ctm-dn-er-me-in-se);
+        path {
+          stroke: var(--_ctm-dn-er-me-in-c1);
+        }
+      }
+    }
+    .add_to_cart_wrapper {
+      .error__message {
+        text-align: center;
+      }
+    }
   }
 }

package/dist/checkout.scss

@@ -1618,6 +1618,27 @@ $dark-color: #343a40;
                 }
               }
             }
+            .sg__md__sn {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 48px;
+              margin-top: 12px;
+              .sg_md_gp {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                .sg_md_gp_lt {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 6px;
+                  & > div {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+                  }
+                }
+              }
+            }
 
             .chk_payment-options {
               form {
@@ -1806,6 +1827,35 @@ $dark-color: #343a40;
                     }
                   }
                 }
+
+                .pmnt__md__sn {
+                  border: 1px solid var(--_gray-200);
+                  border-radius: 6px;
+                  .pmnt__md__sn__hr {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 8px 16px 0px 16px;
+                    border-bottom: 1px solid var(--_gray-200);
+                  }
+                  .pmnt__md__sn__body {
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 8px 16px 16px 16px;
+
+                    & > div {
+                      display: flex;
+                      justify-content: space-between;
+                      align-items: center;
+                      gap: 12px;
+                      & > div {
+                        display: flex;
+                        gap: 12px;
+                        width: 100%;
+                      }
+                    }
+                  }
+                }
               }
               .gift_crd_chk_payment_option {
                 border: 1px solid var(--_gray-300);
@@ -5360,6 +5410,13 @@ $dark-color: #343a40;
                       margin-top: 6px;
                       line-height: 24px;
                     }
+                    .address_skeletons {
+                      display: flex;
+                      gap: 12px;
+                      &:not(:last-child) {
+                        margin-bottom: 6px;
+                      }
+                    }
                   }
 
                   .contact {
@@ -5432,6 +5489,23 @@ $dark-color: #343a40;
                   background-color: var(--_gray-50);
                 }
               }
+              .summary_content_skeletons {
+                display: flex;
+                justify-content: space-between;
+                gap: 12px;
+                margin-top: 12px;
+
+                & > div {
+                  width: 100%;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 8px;
+                  .address_line {
+                    display: flex;
+                    gap: 8px;
+                  }
+                }
+              }
             }
           }
         }

package/dist/embroider-template-1-v2.scss

@@ -17,6 +17,7 @@ $previewMainWrapper: ".emb__preview__me__wrapper";
 $previewMainOuput: ".output__ele__v1";
 $maxWidth: "350px";
 $minWidth: "200px";
+$dataIsSpinningTrue: "[data-is-loading='true']";
 
 $defaultValues: (
   --_sf-plp-flx-drt: getListOfResponsive(row, column),
@@ -24,6 +25,39 @@ $defaultValues: (
   --_sf-prv-prt-gap: getListOfResponsive(32px, 12px),
 );
 
+@mixin spinnerStyles() {
+  &#{$dataIsSpinningTrue} {
+    --_sf-sv-sp-vs: hidden;
+    --_sf-sv-sp-op: 0;
+    position: var(--_p-relative);
+
+    &::before {
+      content: "";
+      position: var(--_p-absolute);
+      --_sz-vl: 10px;
+      width: var(--_sz-vl);
+      height: var(--_sz-vl);
+      display: var(--_d-flex);
+      left: 50%;
+      top: 50%;
+      border-radius: 50%;
+      border: 0.25rem solid var(--_br-bm-red-col-afsjkdfkj-ff, rgba(255, 255, 255, 0.2));
+      // border: 0.25rem solid var(--_primary-400);
+      border-top-color: #fff;
+      animation: circlerotate 2s ease-in-out infinite forwards;
+    }
+
+    @keyframes circlerotate {
+      from {
+        transform: translate(-50%, -50%) rotate(0deg);
+      }
+      to {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
+    }
+  }
+}
+
 @mixin EmbroideryTemplate1StylesV2() {
   & > #{$tmpWrapper} {
     @include prepareMediaQueries($defaultValues);
@@ -435,6 +469,7 @@ $defaultValues: (
                 inset: 0 0 0 0;
                 opacity: 0;
                 height: 100%;
+                cursor: pointer;
               }
             }
           }
@@ -480,6 +515,29 @@ $defaultValues: (
               }
             }
           }
+          & > .color__div {
+            display: var(--_d-flex);
+            flex-wrap: wrap;
+            gap: 12px;
+
+            & > div {
+              &.color__box {
+                display: var(--_d-flex);
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                background: var(--_sf-clr);
+                border: 1px solid #f2f4f7;
+                cursor: pointer;
+
+                &.act {
+                  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+                  width: 36px;
+                  border-radius: 16px;
+                }
+              }
+            }
+          }
 
           & > .config__div__v2 {
             display: var(--_d-flex);
@@ -799,6 +857,21 @@ $defaultValues: (
               border: 1px solid #555;
               border-radius: 50%;
               cursor: pointer;
+
+              &[title="no-color"] {
+                position: relative;
+                background: #555;
+                &::before {
+                  content: "";
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  width: 100%;
+                  height: 1px;
+                  background: #fff;
+                  transform: translate(-50%, -50%) rotate(-45deg);
+                }
+              }
             }
           }
         }
@@ -841,6 +914,14 @@ $defaultValues: (
             background: var(--_sf-prm-clr);
             color: var(--_sf-scd-clr);
             border: 1px solid var(--_sf-prm-clr);
+            justify-content: center;
+            @include spinnerStyles();
+
+            & > span {
+              display: var(--_d-flex);
+              visibility: var(--_sf-sv-sp-vs, visible);
+              opacity: var(--_sf-sv-sp-op, 1);
+            }
           }
 
           &.emb__cancel {

package/dist/emtpy-templates.scss

@@ -52,10 +52,6 @@
       gap: 24px;
       margin-top: 24px;
       .primary_btn {
-        // padding: 12px 24px;
-        // border-radius: 6px;
-        // background-color: var(--_base-white);
-        // color: var(--_primary-400);
         color: var(--_thm-cs-tt-ls-as);
         font-weight: 400;
         font-size: 14px;
@@ -67,22 +63,21 @@
     .empty_crt_btn {
       padding: 12px 24px;
       border-radius: 4px;
-      // background-color: var(--_primary-400);
       font-weight: 600px;
       display: inline-flex;
       align-items: center;
       gap: 8px;
-      &:hover {
-        // background-color: var(--_primary-500);
+
+      span {
+        display: flex;
       }
+
       .label {
-        // color: var(--_base-white);
         color: var(--_thm-py-bs-dt-se-tt-cr);
         font-size: 16px;
       }
       svg path {
         stroke: var(--_thm-py-bs-dt-se-tt-cr);
-        // stroke: var(--_base-white);
       }
     }
   }

package/dist/filters.scss

@@ -718,11 +718,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-bottom: 1px solid var(--_gray-300);
             }
             li {
-              // display: flex;
-              // align-items: center;
-              // justify-content: space-between;
-              // padding-block: 6px;
-              // font-size: 14px;
               display: flex;
               align-items: center;
               justify-content: space-between;
@@ -872,22 +867,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 //   color: var(--_primary-700);
                 // }
               }
+              &:has(.no__results__found) {
+                .no__results__found {
+                  padding: 12px;
+                  color: var(--_gray-600);
+                  display: flex;
+                  justify-content: center;
+                  background: var(--_gray-100);
+                  padding: 12px;
+                  border-radius: 4px;
+                  font-weight: 600;
+                  color: var(--_gray-600);
+                }
+              }
             }
           }
         }
       }
 
-      .no__results__found {
-        padding: 8px;
-        color: var(--_gray-600);
-        justify-content: center;
-        background: var(--_gray-100);
-        padding: 12px;
-        border-radius: 4px;
-        font-weight: 600;
-        color: var(--_gray-600);
-      }
-
       .filter__inline {
         // margin: 30px;
         display: flex;
@@ -2099,6 +2096,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         //   padding: 20px;
         width: 100%;
         max-width: 300px;
+        padding-inline: 4px;
         // margin: auto;
       }
 

package/dist/flex-text-editor.scss

@@ -6,6 +6,7 @@ $editorWrapper: ".flx__txt__edt__wrapper";
 $editor: '[contenteditable="true"]';
 $suggestionsMain: ".flex__suggestions__box";
 $textElement: '[data-element-type="text"]';
+$textElementV2: '[data-custom-type="custom__text"]';
 $dataBodyShowFalse: '[data-body-show="false"]';
 $titleDiv: ".ttl__dv";
 $bodyDiv: ".bd__dv";
@@ -18,7 +19,8 @@ $editorIframe: '[data-iframe-body="true"]';
 $width: 225px;
 $height: 300px;
 
-#{$textElement} {
+#{$textElement},
+#{$textElementV2} {
   #{$editorMain} {
     position: var(--_p-relative);
 
@@ -135,7 +137,7 @@ $height: 300px;
     }
   }
 }
-#{$macroChip}:is(#{$editorIframe} *, #{$dataDecodedV2}) {
+#{$macroChip}:is(#{$editorIframe} *, #{$dataDecodedV2}, #{$textElementV2} *) {
   @extend .macro_styles;
   user-select: all;
 }

package/dist/image-for-product.scss

@@ -1,15 +1,15 @@
 .product_img {
-  background-color: var(--_base-white);
+  // background-color: var(--_base-white);
   border-radius: 6px;
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--_gray-200);
+  // border: 1px solid var(--_gray-200);
   overflow: hidden;
   img {
     max-height: 100%;
     object-fit: contain;
-    padding: 4px;
+    // padding: 4px;
   }
   .no_image {
     padding: 16px;

package/dist/language-selector.scss

@@ -444,8 +444,8 @@
           }
 
           .est__dropdown__icon {
-            position: absolute;
-            right: 0;
+            // position: absolute;
+            // right: 0;
             transition: transform 0.4s ease-in-out;
             display: flex;
             &.rotate__180 {
@@ -478,6 +478,7 @@
             top: 100%;
             left: 0;
             width: 100%;
+            padding: 4px;
             background-color: #fff;
             border-radius: prepareMediaVariable(--_ctm-dn-wt-dn-br-rs);
             z-index: var(--_higher-zIndex);
@@ -502,6 +503,9 @@
 
             .option {
               cursor: pointer;
+              &:not(:last-child) {
+                margin-bottom: 2px;
+              }
               // padding: 4px;
               // &:hover {
               //   background: var(--_gray-100);