@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.95

package/dist/product.scss

@@ -1,181 +1,27 @@
 @use "sass:map";
 @use "sass:list";
 
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="product"] {
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    height: var(--_ctm-lt-ht) !important;
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-
-    & > .wrapper {
-      // width: 100%;
-      // height: 100%;
-    }
-
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-icon-position="left"] {
-      --_sf-fd-bn: row;
-    }
-    &[data-icon-position="right"] {
-      --_sf-fd-bn: row-reverse;
-    }
-    &[data-icon-position="center"] {
-      --_sf-fd-bn: row;
-    }
-
-    &:hover {
-      --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
-      --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
-      --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
-      --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
-      --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
-      --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
-        var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
-        var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
-        var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
-
-      --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
-      --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
-      --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
-      --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
-      --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
-      --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
-      --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
-      --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
-
-      --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
-      --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
-      --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
-      --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-
-      &[data-hover-show-shadow="false"] {
-        --_hover-show-shadow: none;
-      }
-      &[data-hover-show-icon="false"] {
-        --_hover-show-icon: none;
-      }
-    }
-    &[data-show-icon="false"] {
-      --_show-icon: none;
-    }
-    &[data-element-style="Icon"] {
-      &[data-icon-position="left"] {
-        --_sf-jc: start;
-      }
-      &[data-icon-position="right"] {
-        --_sf-jc: end;
-      }
-      &[data-icon-position="center"] {
-        --_sf-jc: center;
-      }
-    }
-
-    .btn__with__text {
-      background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
-      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
-      display: flex;
-      flex-direction: var(--_sf-fd-bn);
-      align-items: center;
-      // justify-content: var(--_sf-jc, center);
-      justify-content: var(--_ctm-lt-tt-an, center);
-      gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
-
-      width: 100%;
-      height: 100%;
-
-      border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
-      box-shadow: var(
-        --_hover-show-shadow,
-        var(
-          --_sf-hr-bx-sw,
-          var(
-            --_show-shadow,
-            var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
-              var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
-              var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
-              var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
-          )
-        )
-      );
-      &[data-show-border="true"] {
-        border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
-        border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
-        border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
-      }
-      // &.btn__with__text__icon {
-      //   justify-content: center;
-      //   // gap: 10px;
-      // }
-      // & > span {
-      //   align-items: center;
-      //   justify-content: center;
-      //   &.txt {
-      //     display: flex;
-      //     color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-      //     font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-      //       sans-serif;
-      //     font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-      //     font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-      //     font-style: var(
-      //       --_sf-hr-ft,
-      //       var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
-      //     );
-      //     text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-      //     letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-      //     line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-      //     text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
-      //     // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-      //   }
-
-      //   &.icon {
-      //     display: var(--_hover-show-icon, var(--_show-icon, flex));
-      //     svg {
-      //       width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-      //       height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-      //       path {
-      //         stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-      //       }
-      //     }
-      //   }
-      //   &[data-element-style="Text"] {
-      //     display: inline-block;
-      //     width: 100%;
-      //   }
-      // }
-
-      .txt {
-        display: flex;
-        color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-        font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-          sans-serif;
-        font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-        font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-        font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
-        text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-        letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-        line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-        text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
-        // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-      }
-
-      .icon {
-        display: var(--_hover-show-icon, var(--_show-icon, flex));
-        svg {
-          width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-          height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-          path {
-            stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-          }
-        }
-      }
-      [data-element-style="Text"] {
-        display: inline-block;
+    // 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-pro-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-pro-lt-ht) !important;
+    height: auto;
+    margin: var(--_ctm-pro-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+    background: var(--_ctm-pro-dn-bd-cr);
+
+    // &:not(:has(#{$resizerId}#{$resizeActive})) {
+    //   min-height: 100px !important;
+    // }
+
+    & > div {
+      &.wrapper {
         width: 100%;
+        // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
       }
     }
   }

package/dist/quantity-selector.scss

@@ -12,10 +12,10 @@
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    );
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
 
     & > .wrapper {
       width: 100%;
@@ -87,6 +87,36 @@
           justify-content: space-between;
           width: 60px;
           border-left: 1px solid #ccc;
+          position: relative;
+          padding-inline: 4px;
+
+          .input__dropdown {
+            position: absolute;
+            top: 100%;
+            z-index: 10;
+            border: 1px solid var(--_gray-200);
+            padding: 20px;
+            padding: 0px;
+            margin-top: 10px;
+            right: 0px;
+            max-height: 150px;
+            overflow-y: auto;
+            border-radius: 4px;
+            margin-top: 10px;
+
+            .dropdown__option {
+              padding: 8px;
+              cursor: pointer;
+              border-bottom: 1px solid var(--_gray-200);
+              text-align: center;
+              background-color: #fff;
+              user-select: none;
+              &:hover,
+              &.active {
+                background-color: var(--_primary-25);
+              }
+            }
+          }
 
           input {
             width: 40%;
@@ -148,6 +178,9 @@
           align-items: center;
           position: relative;
           width: 60px;
+          height: 100%;
+          border-left: 1px solid var(--_gray-300);
+          // padding-inline: 8px;
 
           select {
             width: 100%;
@@ -159,6 +192,8 @@
             color: #333;
             // appearance: none;
             padding: 0 10px;
+            height: 100%;
+            margin-right: 10px;
           }
 
           .buttons {
@@ -167,6 +202,7 @@
             right: -30px; // Adjust spacing for the buttons
             display: flex;
             flex-direction: column;
+            gap: 8px;
 
             button {
               width: 20px;
@@ -180,6 +216,12 @@
               display: flex;
               align-items: center;
               justify-content: center;
+              position: relative;
+
+              .input__dropdown {
+                position: absolute;
+                display: block;
+              }
 
               &:hover {
                 background-color: #f0f0f0;
@@ -231,6 +273,11 @@
             font-weight: bold;
             color: #555;
             cursor: pointer;
+            svg {
+              path {
+                stroke: #667085;
+              }
+            }
 
             &:hover {
               color: #000;
@@ -246,6 +293,7 @@
             font-size: 16px;
             font-weight: bold;
             color: #333;
+            user-select: none;
           }
         }
       }

package/dist/repeater-item.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="repeater-item"] {
+    // 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-rep-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    // margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+
+    // width: 100%;
+    background: var(--_ctm-repe-dn-bd-cr);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/repeater.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+@use "sass:list";
+$childItemSelector: '[data-element-type="repeater-item"]';
+[data-div-type="element"] {
+  &[data-element-type="repeater"] {
+    // 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-rep-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)));
+    background: var(--_ctm-rep-dn-bd-cr);
+
+    &.grd {
+      & > div {
+        &.wrapper {
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(var(--_ctm-rep-lt-mn-cn-wh), 1fr));
+          grid-template-rows: repeat(auto-fit, minmax(var(--_ctm-rep-lt-mn-rw-ht), 1fr));
+
+          & > div {
+            &#{$childItemSelector} {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    &.crds {
+      & > div {
+        &.wrapper {
+          display: flex !important;
+          flex-wrap: wrap;
+          width: 100%;
+        }
+      }
+      &:not(.stimsfrRws) {
+        & > div {
+          &.wrapper {
+            justify-content: center;
+            & > div {
+              &#{$childItemSelector} {
+                // width: var(--_ctm-rep-lt-wh);
+                --_col-count: var(--_sf-gd-ct, 3);
+                --_col-gap: 0px;
+                width: 163px;
+                height: 100px;
+                // grid-template-rows: minmax(
+                //   max(
+                //     0.5px,
+                //     0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+                //   ),
+                //   auto
+                // );
+                // grid-template-rows: ;
+              }
+            }
+          }
+        }
+      }
+
+      &.stimsfrRws {
+        & > div {
+          &.wrapper {
+            & > div {
+              &#{$childItemSelector} {
+                --_col-count: var(--_sf-gd-ct, 3);
+                --_col-gap: var(--_ctm-rep-lt-im-gp);
+                width: calc(
+                  (100% / var(--_col-count)) -
+                    (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
+                );
+                // height: 100px;
+                grid-template-rows: minmax(
+                  max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+                  auto
+                );
+                grid-template-columns: minmax(0px, 1fr);
+                // grid-template-rows: minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),auto) minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),auto);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    & > div {
+      &.wrapper {
+        gap: var(--_ctm-rep-lt-im-gp, 0px);
+        // width: 100%;
+        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+        // grid-auto-rows: minmax(100px, 1fr);
+      }
+    }
+
+    &[data-view-state="full"] {
+      width: auto;
+      margin: 0;
+      justify-self: stretch !important;
+      align-self: stretch !important;
+      cursor: auto;
+    }
+  }
+}

package/dist/shipping-estimator.scss

@@ -6,17 +6,16 @@
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    );
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
 
     & > .wrapper {
       width: 100%;
@@ -25,5 +24,8 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+    .shipping__estimator {
+      padding: var(--_ctm-lt-pg);
+    }
   }
 }

package/dist/stack.scss

@@ -30,10 +30,15 @@
       }
     }
     &.hrz {
+      width: max-content;
       // min-width: var(--_sf-sta-nw-wh) !important;
       // min-width: 100px !important;
-      min-height: 100px;
-      width: max-content;
+      &.hsc {
+        min-height: 10px;
+      }
+      &.dnhsc {
+        min-height: 100px;
+      }
       // height: var(--_ctm-sta-lt-ht, 100px);
       // width: var(--_sf-sta-nw-wh, auto);
       & > .wrapper {