@sc-360-v2/storefront-cms-library 0.2.33 → 0.2.35

package/dist/past-orders.scss

@@ -0,0 +1,112 @@
+@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="pastOrders"] {
+    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);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+
+    .pastOrders_wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      border-radius: 4px;
+      border: 1px solid var(--_primary-100);
+      background: #fff;
+
+      .heading {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+        border-bottom: 1px solid var(--_gray-200);
+
+        .title {
+          color: var(--_gray-900);
+          font-size: 20px;
+          font-weight: 600;
+          line-height: 30px;
+        }
+      }
+
+      .order_row {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        align-self: stretch;
+        border-radius: 0px 0px 6px 6px;
+
+        .order_content {
+          display: flex;
+          padding: 12px 16px;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          gap: 12px;
+          flex-shrink: 0;
+          align-self: stretch;
+
+          .heading_wrapper {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex: 1 0 0;
+            width: 100%;
+
+            .order_id {
+              color: var(--_gray-900);
+              font-size: 14px;
+              font-weight: 600;
+              line-height: 20px;
+              flex: 1 0 0;
+            }
+
+            .status_badge {
+              display: flex;
+              padding: 2px 8px 2px 6px;
+              align-items: center;
+              gap: 4px;
+              border-radius: 16px;
+              background: #fff4ed;
+              mix-blend-mode: multiply;
+
+              .order_status {
+                color: #b93815;
+                text-align: center;
+                font-size: 12px;
+                line-height: 18px;
+              }
+            }
+
+            .order_date {
+              color: var(--_gray-700);
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 18px;
+              flex: 1 0 0;
+            }
+
+            .order_amount {
+              color: var(--_gray-900);
+              text-align: right;
+              font-size: 14px;
+              font-weight: 600;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/product-basic-elements.scss

@@ -6,7 +6,6 @@
   &[data-element-type="productName"],
   &[data-element-type="brandName"],
   &[data-element-type="categoryName"] {
-    word-break: break-all;
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -15,6 +14,8 @@
     // 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);
+    word-break: break-all;
+
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -42,7 +43,6 @@
       word-break: break-all;
     }
     .text-element {
-      word-break: break-all;
       background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
       padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
       display: flex;

package/dist/quotes.scss

@@ -0,0 +1,112 @@
+@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="quotes"] {
+    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);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+
+    .quotes_wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      border-radius: 4px;
+      border: 1px solid var(--_primary-100);
+      background: #fff;
+
+      .heading_wrapper {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+        border-bottom: 1px solid var(--_gray-200);
+
+        .heading {
+          color: var(--_gray-900);
+          font-size: 20px;
+          font-weight: 600;
+          line-height: 30px;
+        }
+      }
+
+      .metric_item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: 0px 0px 6px 6px;
+
+        .content {
+          display: flex;
+          padding: 12px 16px;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          gap: 12px;
+          flex: 1 0 0;
+          align-self: stretch;
+
+          .metric_wrapper {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex: 1 0 0;
+            align-self: stretch;
+
+            .quote_id {
+              flex: 1 0 0;
+              color: var(--_gray-900);
+              font-size: 14px;
+              font-weight: 600;
+              line-height: 20px;
+            }
+
+            .status_badge {
+              display: flex;
+              padding: 2px 8px 2px 6px;
+              align-items: center;
+              gap: 4px;
+              border-radius: 16px;
+              background: #fff4ed;
+              mix-blend-mode: multiply;
+
+              .quote_status {
+                color: #b93815;
+                text-align: center;
+                font-size: 12px;
+                line-height: 18px;
+              }
+            }
+
+            .quote_updated_date {
+              flex: 1 0 0;
+              color: var(--_gray-700);
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 18px;
+            }
+
+            .quotes_amount {
+              color: var(--_gray-900);
+              text-align: right;
+              font-size: 14px;
+              font-weight: 600;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/repeater.scss

@@ -23,6 +23,7 @@ $childItemSelector: '[data-element-type="repeater-item"]';
       --_ctm-mob-rep-dn-bd-cr,
       var(--_ctm-tab-rep-dn-bd-cr, var(--_ctm-rep-dn-bd-cr))
     );
+    padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
 
     &.grd {
       & > div {

package/dist/rfqs.scss

@@ -0,0 +1,112 @@
+@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="rfqs"] {
+    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);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+
+    .rfqs_wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      border-radius: 4px;
+      border: 1px solid var(--_primary-100);
+      background: #fff;
+
+      .heading_wrapper {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+        border-bottom: 1px solid var(--_gray-200);
+
+        .heading {
+          color: var(--_gray-900);
+          font-size: 20px;
+          font-weight: 600;
+          line-height: 30px;
+        }
+      }
+
+      .metric_item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: 0px 0px 6px 6px;
+
+        .content {
+          display: flex;
+          padding: 12px 16px;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          gap: 12px;
+          flex: 1 0 0;
+          align-self: stretch;
+
+          .metric_wrapper {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex: 1 0 0;
+            align-self: stretch;
+
+            .rfq_id {
+              flex: 1 0 0;
+              color: var(--_gray-900);
+              font-size: 14px;
+              font-weight: 600;
+              line-height: 20px;
+            }
+
+            .status_badge {
+              display: flex;
+              padding: 2px 8px 2px 6px;
+              align-items: center;
+              gap: 4px;
+              border-radius: 16px;
+              background: #fff4ed;
+              mix-blend-mode: multiply;
+
+              .rfq_status {
+                color: #b93815;
+                text-align: center;
+                font-size: 12px;
+                line-height: 18px;
+              }
+            }
+
+            .rfq_updated_date {
+              flex: 1 0 0;
+              color: var(--_gray-700);
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 18px;
+            }
+
+            .rfqs_amount {
+              color: var(--_gray-900);
+              text-align: right;
+              font-size: 14px;
+              font-weight: 600;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/section.scss

@@ -1,9 +1,41 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
 $activeElementSelector: "[data-has-clicked='true']";
+$repeterLElement: '[data-element-type="repeater"]';
+$dp: "dp_d_none";
+$tb: "tb_d_none";
+$mb: "mb_d_none";
+
+$rp: (
+  class: (
+    #{$tb}: (
+        tablet: (
+          display: "none !important",
+        ),
+      ),
+    #{$dp}: (
+        desktop: (
+          display: "none !important",
+        ),
+      ),
+    #{$mb}: (
+        mobile: (
+          display: "none !important",
+        ),
+      ),
+  ),
+);
+
+body {
+  @include prepareCustomClassCSSProps($rp);
+}
+
 section {
   &[data-div-type="section"] {
     position: var(--_p-relative);
     width: 100%;
-    display: var(--_d-flex) !important;
     flex-direction: column;
     justify-self: stretch;
     align-self: stretch;
@@ -37,6 +69,10 @@ section {
     &[data-show-border="false"] {
       --_hide-section-border: none;
     }
+
+    &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
+      display: var(--_d-flex) !important;
+    }
     & > div {
       &[data-type="wrapper-layer"] {
         display: var(--_d-flex) !important;
@@ -44,6 +80,10 @@ section {
         position: var(--_p-absolute);
         visibility: visible !important;
         inset: 0 0 0 0;
+        // border-color: var(
+        //   --_hide-section-border,
+        //   var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
+        // );
         border-color: var(
           --_hide-section-border,
           var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
@@ -71,15 +111,18 @@ section {
     }
 
     div[data-div-type="element"] {
+      position: var(--_p-relative);
       & > .wrapper {
         grid-area: 1/1/2/2 !important;
       }
       &[data-view-state="full"] {
         width: auto;
         margin: 0;
+        cursor: auto;
         justify-self: stretch !important;
         align-self: stretch !important;
-        cursor: auto;
+        // &:not(#{$repeterLElement}) {
+        // }
         &:is(#{$activeElementSelector}) {
           & > div {
             &[data-div-type="wrapper__layer"] {
@@ -97,10 +140,8 @@ section {
                 var(
                     --_ctm-mob-sta-ele-nw-wh-vl,
                     var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
-                  ) /
-                  100
-              ) *
-              (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+                  ) / 100
+              ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
           );
         }
         &:is([data-element-type="container"]) {
@@ -110,10 +151,8 @@ section {
                 var(
                     --_ctm-mob-con-ele-nw-wh-vl,
                     var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl))
-                  ) /
-                  100
-              ) *
-              (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+                  ) / 100
+              ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
           );
         }
 
@@ -121,13 +160,9 @@ section {
           width: max(
             0.5px,
             calc(
-                var(
-                    --_ctm-mob-ele-nw-wh-vl,
-                    var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))
-                  ) /
+                var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))) /
                   100
-              ) *
-              (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+              ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
           );
         }
       }

package/dist/sort.scss

@@ -0,0 +1,81 @@
+@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="sort"] {
+    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);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+    //Dropdown
+    .est__dropdown__main {
+      position: relative;
+      width: 100%;
+      margin-top: 10px;
+
+      label {
+        font-size: 14px;
+        color: var(--_gray-700);
+        margin-bottom: 8px;
+        display: block;
+      }
+
+      .est__dropdown {
+        cursor: pointer;
+        position: relative;
+        color: var(--_gray-700);
+
+        border-radius: 6px;
+        background-color: #fff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        .value__selected {
+          // width: 100%;
+        }
+
+        &.open .list {
+          display: flex;
+        }
+
+        .list {
+          display: none;
+          flex-direction: column;
+          border: 1px solid var(--_gray-200);
+          border-radius: 6px;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          width: 100%;
+          background-color: #fff;
+          border-radius: 4px;
+          z-index: var(--_higher-zIndex);
+          max-height: 200px;
+          overflow-y: auto;
+
+          &.top {
+            bottom: 100%;
+            top: auto;
+          }
+
+          .list__option {
+            padding: 12px;
+            cursor: pointer;
+
+            &:hover {
+              background-color: var(--_primary-25);
+              color: var(--_primary-400);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/stack.scss

@@ -1,7 +1,36 @@
 @use "sass:map";
 @use "sass:list";
-[data-div-type="element"] {
-  &[data-element-type="stack"] {
+@use "./functions.scss" as *;
+$es: '[data-div-type="element"]';
+$ss: '[data-element-type="stack"]';
+$dp: "dp_d_none";
+$tb: "tb_d_none";
+$mb: "mb_d_none";
+
+$rp: (
+  "#{$es}#{$ss}:not(.#{$mb})": (
+    mobile: (
+      display: var(--_d-grid),
+    ),
+  ),
+  "#{$es}#{$ss}:not(.#{$tb})": (
+    tablet: (
+      display: var(--_d-grid),
+    ),
+  ),
+  "#{$es}#{$ss}:not(.#{$dp})": (
+    desktop: (
+      display: var(--_d-grid),
+    ),
+  ),
+);
+
+body {
+  @include prepareCustomClassCSSProps($rp);
+}
+
+#{$es} {
+  &#{$ss} {
     // min-width: var(--_sf-sta-nw-wh) !important;
     // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
     min-width: 100px;
@@ -14,7 +43,7 @@
       --_ctm-mob-sta-dn-bd-cr,
       var(--_ctm-tab-sta-dn-bd-cr, var(--_ctm-sta-dn-bd-cr))
     );
-    display: var(--_d-grid);
+    // display: var(--_d-grid);
 
     border-color: var(
       --_hide-grid-border,
@@ -31,6 +60,10 @@
     border-radius: var(--_ctm-mob-sta-dn-br-rs, var(--_ctm-tab-sta-dn-br-rs, --_ctm-sta-dn-br-rs));
     grid-template-columns: 100%;
 
+    // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
+    //   display: var(--_d-grid);
+    // }
+
     &.vtl {
       // width: var(--_sf-sta-nw-wh, auto);
       width: calc(

package/dist/text-temp.scss

@@ -20,6 +20,7 @@
 
     & > .wrapper {
       width: 100%;
+      min-height: 50px;
       // height: 100%;
     }
     &[data-show-shadow="false"] {

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

@@ -23,4 +23,5 @@ export interface CMSButtonInterface extends Omit<CMSElementInterface, "attribute
     };
     styles: ButtonStyleProperties;
     childrenStyles?: CommonStyleProperties;
+    content?: string;
 }

package/dist/types/builder/elements/light-box-v2/index.d.ts

@@ -0,0 +1,45 @@
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { CMSDeviceVisibilityOptionInterface } from "../../interfaces/global";
+import { BuilderAttributes } from "../common";
+export interface LightBoxV2StyleProperties extends CommonStyleProperties {
+    minHeight: string;
+    minWidth: string;
+    maxWidth: string;
+    maxHeight: string;
+    gridArea: string;
+    display: DisplayValue;
+    boxSizing: string;
+    rowGap: string;
+    columnGap: string;
+    gridTemplateRows: string;
+    gridTemplateColumns: string;
+}
+export declare const getDefaultStyles: () => LightBoxV2StyleProperties;
+export interface CommonLightBoxV2ElementAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+    dataMeta?: string;
+}
+export interface LightBoxV2ElementInterface {
+    id?: string | number;
+    uniqueKey?: string | number;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType" | "dataDropElement">;
+        HTML?: CommonLightBoxV2ElementAttributes;
+        CUSTOM?: any;
+    };
+    styles?: LightBoxV2StyleProperties;
+    editedStyles?: CommonStyleProperties;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    children: any;
+    childIds: any[];
+    previewImage?: string;
+    displayName: string;
+    deviceVisibility?: CMSDeviceVisibilityOptionInterface;
+}