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

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/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.58",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {