@sc-360-v2/storefront-cms-library 0.2.57 → 0.2.59

package/dist/product-inventory.scss

@@ -3,7 +3,7 @@
 
 [data-div-type="element"] {
   &[data-element-type="productInventory"] {
-    width: var(--_sf-nw-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);
     & > .wrapper {

package/dist/product-promotions.scss

@@ -8,7 +8,7 @@
     // 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));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/quantity-selector.scss

@@ -8,7 +8,7 @@
     // 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));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/repeater-embla-controls.scss

@@ -191,6 +191,10 @@
         transition: all 0.45s ease;
         background: var(--_sf-nv-pg-bg, #fff);
 
+        &:not(.embla__dot--selected) {
+          border: 1px solid color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 30%, transparent);
+        }
+
         &.embla__dot--selected {
           --_sf-nv-pg-bg: var(--_sf-sl-ct-ic-dt-at-cl, #162578);
           --_sf-dt-bt-at: min(calc(var(--_sf-ed-vl-sz, 10px) * 0.5), 10px);

package/dist/repeater.scss

@@ -104,7 +104,7 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           display: flex !important;
           flex-wrap: wrap;
           width: 100%;
-          height: 100%;
+          height: auto !important;
         }
       }
       &:not(.stimsfrRws) {
@@ -135,6 +135,7 @@ $childItemSelector: '[data-element-type="repeater-item"]';
       &.stimsfrRws {
         & > div {
           &.wrapper {
+            align-self: center;
             & > div {
               &#{$childItemSelector} {
                 // --_col-count: var(--_sf-gd-ct, 3);
@@ -150,6 +151,12 @@ $childItemSelector: '[data-element-type="repeater-item"]';
                   (100% / var(--_col-count)) -
                     (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
                 );
+                flex: 0 0
+                  calc(
+                    (100% / var(--_col-count)) -
+                      (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
+                  );
+                align-self: stretch;
                 // height: 100px;
                 grid-template-rows: minmax(
                   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),

package/dist/shipping-estimator.scss

@@ -7,7 +7,7 @@
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    width: var(--_sf-nw-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));

package/dist/sort.scss

@@ -17,7 +17,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     .est__dropdown__main {
       position: relative;
       width: 100%;
-      margin-top: 10px;
 
       label {
         font-size: 14px;

package/dist/stack.scss

@@ -57,7 +57,10 @@ body {
       --_hide-grid-border,
       var(--_ctm-mob-sta-dn-br-wh, var(--_ctm-tab-sta-dn-br-wh, var(--_ctm-sta-dn-br-wh)))
     );
-    border-radius: var(--_ctm-mob-sta-dn-br-rs, var(--_ctm-tab-sta-dn-br-rs, --_ctm-sta-dn-br-rs));
+    border-radius: var(
+      --_ctm-mob-sta-dn-br-rs,
+      var(--_ctm-tab-sta-dn-br-rs, var(--_ctm-sta-dn-br-rs))
+    );
     grid-template-columns: 100%;
 
     // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
@@ -66,6 +69,7 @@ body {
 
     &.vtl {
       // width: var(--_sf-sta-nw-wh, auto);
+      min-height: 30px;
       width: calc(
         1% *
           var(

package/dist/store-locations.scss

@@ -3,7 +3,7 @@
 
 [data-div-type="element"] {
   &[data-element-type="storeLocations"] {
-    width: var(--_sf-nw-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);
 

package/dist/sub-category.scss

@@ -9,8 +9,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-subc-ele-nw-wh-vl, var(--_sf-nw-wh))));
     // width: calc(1% * var(--_ctm-subc-ele-nw-wh-vl, auto));
     // width: 100%;
-    // height: var(--_ctm-subc-lt-ht) !important;
-    height: auto;
+    height: var(--_ctm-subc-lt-ht) !important;
+    // height: auto;
     margin: var(--_ctm-subc-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
 
     background-color: var(--_ctm-subc-dn-bd-cr, var(--_tst-dn-bd-cr));

package/dist/text-temp-v2.scss

@@ -0,0 +1,125 @@
+@use "sass:map";
+@use "sass:list";
+
+$ie: '[contenteditable="true"]';
+$re: '[data-cms-tool="cms-element-resizer"]';
+$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
+
+[data-div-type="element"] {
+  &[data-element-type="text"] {
+    // 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));
+    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-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)))
+    // );
+
+    [data-div-type="wrapper__layer__v2"] {
+      position: var(--_p-absolute);
+      inset: 0 0 0 0;
+      border: 1px solid var(--_accent-color-2-500);
+      z-index: 2;
+      pointer-events: none;
+      visibility: var(--_sf-vt-bm-zz, hidden);
+      opacity: var(--_sf-op-bm-zz, 0);
+    }
+
+    &#{$dblclk} {
+      --_sf-op-bm-zz: 1;
+      --_sf-vt-bm-zz: visible;
+      #{$re} {
+        display: none !important;
+      }
+    }
+
+    [contentEditable="true"] {
+      white-space: normal;
+      unicode-bidi: plaintext;
+    }
+
+    & > .wrapper {
+      width: 100%;
+      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+      // min-height: 50px;
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
+          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
+      );
+      // height: 100%;
+
+      #{$ie} {
+        &:focus {
+          outline: none;
+          border: none;
+        }
+      }
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .text-element {
+      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      // border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      // border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      // border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      // border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      // box-shadow: var(
+      //   --_show-shadow,
+      //   var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
+      //     var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
+      // );
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // height: 100%;
+
+      // transform: scale(var(--_ctm-dn-zm-ie));
+      scale: var(--_ctm-dn-zm-ie);
+      &[data-flip-x="true"] {
+        transform: scaleX(-1);
+      }
+      &[data-flip-y="true"] {
+        transform: scaleY(-1);
+      }
+
+      .et-tt {
+        &,
+        * {
+          color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
+          font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
+            sans-serif;
+          font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
+          font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
+          font-style: var(
+            --_ctm-mob-dn-ft-se-ic,
+            var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
+          );
+          text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
+          letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
+          line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+          text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
+        }
+      }
+    }
+  }
+}

package/dist/text-temp.scss

@@ -1,6 +1,10 @@
 @use "sass:map";
 @use "sass:list";
 
+$ie: '[contenteditable="true"]';
+$re: '[data-cms-tool="cms-element-resizer"]';
+$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
+
 [data-div-type="element"] {
   &[data-element-type="text"] {
     // width: var(--_lt-wh);
@@ -11,15 +15,39 @@
     // 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))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-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)))
     // );
 
+    [data-div-type="wrapper__layer"] {
+      position: var(--_p-absolute);
+      inset: 0 0 0 0;
+      border: 1px solid var(--_accent-color-2-500);
+      z-index: 2;
+      pointer-events: none;
+      visibility: var(--_sf-vt-bm-zz, hidden);
+      opacity: var(--_sf-op-bm-zz, 0);
+    }
+
+    &#{$dblclk} {
+      --_sf-op-bm-zz: 1;
+      --_sf-vt-bm-zz: visible;
+      #{$re} {
+        display: none !important;
+      }
+    }
+
+    [contentEditable="true"] {
+      white-space: normal;
+      unicode-bidi: plaintext;
+    }
+
     & > .wrapper {
       width: 100%;
+      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
       // min-height: 50px;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -33,6 +61,13 @@
           var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
       );
       // height: 100%;
+
+      #{$ie} {
+        &:focus {
+          outline: none;
+          border: none;
+        }
+      }
     }
     &[data-show-shadow="false"] {
       --_show-shadow: none;

package/dist/types/builder/elements/productPrice/index.d.ts

@@ -26,4 +26,5 @@ export interface CMSPriceInterface extends Omit<CMSElementInterface, "attributes
     };
     styles: PriceStyleProperties;
     content: string;
+    previewImage?: string;
 }

package/dist/types/builder/elements/text-editor/index.d.ts

@@ -25,4 +25,5 @@ export interface CMSTextInterface extends Omit<CMSElementInterface, "attributes"
     };
     styles: TextStyleProperties;
     content: string;
+    previewImage?: string;
 }

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

@@ -134,6 +134,11 @@ export declare const getDefaultData: () => {
             };
             shape: {
                 value: string;
+                customIcon: {
+                    isCustomIcon: boolean;
+                    url: string;
+                    name: string;
+                };
                 property: string;
                 propertyType: CMSElementEditTypes;
             };

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

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

package/dist/uom-selector.scss

@@ -8,7 +8,7 @@
     // 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));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/variant-picker.scss

@@ -1,14 +1,17 @@
 @use "sass:map";
 @use "sass:list";
 // @use "./functions.scss";
+$minWidth: 70px;
+
 [data-div-type="element"] {
   &[data-element-type="variantPicker"] {
+    --_ctm-mob-var-lt-mn-cn-wh: 70px;
     // 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));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
@@ -16,6 +19,7 @@
     // --_aspect-ratio: calc(
     //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     // );
+    min-width: #{$minWidth} !important;
 
     & > .wrapper {
       width: 100%;
@@ -60,6 +64,7 @@
           flex-wrap: wrap;
           flex-direction: row;
           gap: var(--_ctm-lt-sh-te-dy-se-im-sg);
+
           &[data-swatch-dispaly="Vertically"] {
             flex-direction: column;
           }
@@ -243,6 +248,20 @@
                 );
                 border-radius: var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs);
               }
+              &.disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+                position: relative;
+                &::after {
+                  content: "X";
+                  position: absolute;
+                  top: -5px;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  font-size: 30px;
+                  color: #f55d42;
+                }
+              }
             }
           }
         }
@@ -283,7 +302,7 @@
           }
           .select__group__item {
             transition: color 0.3s ease;
-            padding: 8px 12px;
+            padding: 5px 12px;
             border-radius: 6px;
             border: 1px solid var(--_gray-200);
             font-size: 16px;
@@ -380,6 +399,20 @@
               border: 0px;
               border-bottom: 2px solid var(--_primary-400);
             }
+            &.disabled {
+              cursor: not-allowed;
+              opacity: 0.5;
+              position: relative;
+              &::after {
+                content: "X";
+                position: absolute;
+                top: -5px;
+                left: 50%;
+                transform: translateX(-50%);
+                font-size: 30px;
+                color: #f55d42;
+              }
+            }
           }
         }
       }
@@ -460,6 +493,10 @@
                 background-color: var(--_primary-25);
                 color: var(--_primary-400);
               }
+              &.disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+              }
             }
           }
         }
@@ -480,8 +517,20 @@
       }
       // Quantity Fields
       .field__group {
-        display: flex;
-        flex-wrap: wrap;
+        // display: flex;
+        // flex-wrap: wrap;
+        // gap: 8px;
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(
+            var(
+              --_ctm-mob-var-lt-mn-cn-wh,
+              var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
+            ),
+            var(--_ctm-mob-var-lt-mn-cn-wh)
+          )
+        );
         gap: 8px;
         .field__group__item {
           font-size: 16px;
@@ -491,15 +540,21 @@
           justify-content: center;
           gap: 8px;
           input[type="number"] {
-            width: 70px !important;
-            border: 1px solid var(--_gray-300) !important;
+            // width: 70px !important;
+            width: 100%;
+            border: 1px solid var(--_gray-300);
             padding-inline: 10px;
             border-radius: 4px;
             text-align: center;
+            height: 40px;
             &:focus-within {
-              border: 1px solid var(--_primary-200) !important;
+              border: 1px solid var(--_primary-200);
               box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
             }
+            &:disabled {
+              cursor: not-allowed;
+              opacity: 0.5;
+            }
           }
         }
       }
@@ -660,6 +715,7 @@
               background-color: var(--_gray-50);
               font-weight: 600;
               color: var(--_gray-600);
+              word-break: break-word;
             }
           }
           tbody {
@@ -680,6 +736,7 @@
                   padding-inline: 10px;
                   text-align: center;
                   border-radius: 6px;
+                  height: 40px;
                 }
               }
             }

package/dist/volume-pricing.scss

@@ -8,7 +8,7 @@
     // 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));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/widget.scss

@@ -15,7 +15,8 @@
 @use "./code-temp.scss";
 @use "./static-text.scss";
 @use "./embed-temp.scss";
-@use "./text-temp.scss";
+// @use "./text-temp.scss";
+@use "./text-temp-v2.scss";
 @use "./image-temp.scss";
 @use "./gallery-slider-temp.scss";
 @use "./scroll.scss";
@@ -65,3 +66,6 @@
 @use "./layouter.scss";
 @use "./layouter-item.scss";
 @use "./categoryDetails.scss";
+@use "./contact-us.scss";
+@use "./breadcrumbs.scss";
+@use "./icon-library.scss";

package/package.json

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