@sc-360-v2/storefront-cms-library 0.2.43 → 0.2.45

package/dist/productDetails.scss

@@ -6,8 +6,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="productDetails"] {
     // 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-prod-lt-wh, auto));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-prod-ele-nw-wh-vl,
+            var(--_ctm-tab-prod-ele-nw-wh-vl, var(--_ctm-prod-ele-nw-wh-vl))
+          )
+      )
+    );
+    // width: calc(1% * var(--_ctm-prod-lt-wh, auto));
+    // width: ;
+
     // width: 100%;
     // height: var(--_ctm-pro-lt-ht) !important;
     // width: 100%;
@@ -22,6 +33,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     & > div {
       &.wrapper {
         width: 100%;
+        // grid-template-rows: auto !important;
+        grid-template-columns: 100% !important;
         // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
       }
     }

package/dist/profile.scss

@@ -10,9 +10,23 @@
     & > .wrapper {
       width: 100%;
       height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
+    .icon {
+      width: 50px;
+      height: 50px;
+    }
+
+    .profile-name {
+      font-size: 1rem;
+      font-weight: bold;
+    }
   }
 }

package/dist/quantity-selector.scss

@@ -42,6 +42,8 @@
       color: rgba(75, 69, 70, 1);
     }
     .quantity_container {
+      padding: var(--_ctm-lt-pg);
+
       .quantity_open_input {
         display: flex;
         align-items: flex-start;

package/dist/repeater-item.scss

@@ -4,10 +4,10 @@
   &[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: calc(1% * var(--_ctm-repe-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));
+    // margin: var(--_ctm-repe-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
 
     // width: 100%;
     // background: var(--_ctm-repe-dn-bd-cr);
@@ -16,8 +16,49 @@
       &.wrapper {
         width: 100%;
         height: 100%;
-        // padding: var(--_ctm-repe-lt-pg);
+        padding: var(--_ctm-repe-lt-pg);
         background: var(--_ctm-repe-dn-bd-cr);
+        border-radius: var(
+          --_ctm-mob-repe-dn-br-rs,
+          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-repe-dn-br-cr,
+          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-repe-dn-br-se,
+          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-repe-dn-br-wh,
+          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
+        );
+        box-shadow: var(
+          --_hover-show-shadow,
+          var(
+            --_sf-hr-bx-sw,
+            var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-br,
+                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+                )
+            )
+          )
+        );
       }
     }
   }

package/dist/repeater.scss

@@ -23,6 +23,44 @@ $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))
     );
+    border-radius: var(
+      --_ctm-mob-rep-dn-br-rs,
+      var(--_ctm-tab-rep-dn-br-rs, var(--_ctm-rep-dn-br-rs))
+    );
+    border-color: var(
+      --_ctm-mob-rep-dn-br-cr,
+      var(--_ctm-tab-rep-dn-br-cr, var(--_ctm-rep-dn-br-cr))
+    );
+    border-style: var(
+      --_ctm-mob-rep-dn-br-se,
+      var(--_ctm-tab-rep-dn-br-se, var(--_ctm-rep-dn-br-se))
+    );
+    border-width: var(
+      --_ctm-mob-rep-dn-br-wh,
+      var(--_ctm-tab-rep-dn-br-wh, var(--_ctm-rep-dn-br-wh))
+    );
+    box-shadow: var(
+      --_hover-show-shadow,
+      var(
+        --_sf-hr-bx-sw,
+        var(
+          --_show-shadow,
+          var(--_ctm-mob-dn-dt-se-sw-ae, var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae)))
+            var(
+              --_ctm-mob-dn-dt-se-sw-br,
+              var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-dt-se-sw-sd,
+              var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-dt-se-sw-cr,
+              var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+            )
+        )
+      )
+    );
     padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
 
     &.grd {

package/dist/search.scss

@@ -4,6 +4,7 @@
 [data-div-type="element"] {
   &[data-element-type="search"] {
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
     position: relative;
@@ -16,43 +17,82 @@
       height: 100%;
     }
 
-    .search-element {
-      width: var(--_sf-el-wh-st-mx, 100%);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
+    &[data-widget-border="true"] {
       .search-wrapper {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        border: 1px solid var(--_ctm-border-color, #ccc);
-        border-radius: 4px;
-        padding: 5px;
-        background-color: var(--_ctm-bg-color, #fff);
+        border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
+        border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
+        border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
       }
+    }
+
+    &[data-widget-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .search-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .search-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background-color: var(--_ctm-dn-sh-br-bd-cr, var(--_tst-dn-sh-br-bd-cr));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-sh-br-sw-ae, var(--_tst-dn-vo-tt-cr-dn-sw-ae))
+          var(--_ctm-dn-sh-br-sw-br, var(--_tst-vo-se-sw-br))
+          var(--_ctm-dn-sh-br-sw-sd, var(--_tst-vo-se-sw-sd))
+          var(--_ctm-dn-sh-br-sw-cr, var(--_tst-dn-vo-tt-cr-dn-sw-cr))
+      );
+      border-radius: var(--_ctm-dn-sh-br-br-rs, var(--_tst-dn-sh-br-br-rs));
 
       .search-icon {
-        font-size: 16px;
-        margin-right: 5px;
+        font-size: 18px;
+        margin-right: 8px;
+        color: #555;
       }
 
       .search-input {
         flex-grow: 1;
         border: none;
         outline: none;
-        padding: 5px;
-        color: var(--_ctm-text-color, #333);
+        padding: 8px;
+        font-size: 14px;
+        color: #333;
         background: transparent;
+        &::placeholder {
+          color: var(--_ctm-dn-pr-tt-cr, var(--_tst-dn-pr-tt-cr));
+          font-family: var(--_ctm-dn-pr-tt-ft-fy, var(--_tst-dn-pr-tt-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-pr-tt-ft-se, var(--_tst-dn-pr-tt-ft-se));
+          font-weight: var(--_ctm-dn-pr-tt-ft-wt, var(--_tst-dn-pr-tt-ft-wt));
+          font-style: var(--_ctm-dn-pr-tt-ft-se-ic, var(--_tst-dn-pr-tt-ft-se-ic));
+          text-align: var(--_ctm-dn-pr-tt-tt-an, var(--_tst-dn-pr-tt-tt-an));
+          letter-spacing: var(--_ctm-dn-pr-tt-lr-sg, var(--_tst-dn-pr-tt-lr-sg));
+          line-height: var(--_ctm-dn-pr-tt-le-ht, var(--_tst-dn-pr-tt-le-ht));
+          text-decoration: var(--_ctm-dn-pr-tt-ue);
+        }
       }
 
       .search-button {
-        display: var(--_ctm-btn-display, block);
-        padding: 5px 10px;
-        background: var(--_ctm-btn-bg, #007bff);
-        color: var(--_ctm-btn-text, #fff);
+        color: #fff;
         border: none;
+        padding-left: 10px;
+        border-radius: 4px;
         cursor: pointer;
+        transition: 0.3s;
+        svg {
+          width: var(--_ctm-dn-sh-in-in-se, var(--_tst-dn-sh-in-se));
+          height: var(--_ctm-dn-sh-in-in-se, var(--_tst-dn-sh-in-se));
+          path {
+            stroke: var(--_ctm-dn-sh-in-in-c1, var(--_tst-dn-sh-in-in-c1));
+          }
+        }
+        // &:hover {
+        //   background: #0056b3;
+        // }
       }
     }
 

package/dist/section.scss

@@ -107,65 +107,80 @@ section {
         margin-inline: auto;
         position: var(--_p-relative);
         width: 100%;
+        // padding-inline: 10px;
+        // padding-block: 10px;
+        padding: var(--_ctm-mob-sec-lt-pg, var(--_ctm-tab-sec-lt-pg, var(--_ctm-sec-lt-pg)));
+        column-gap: var(
+          --_ctm-mob-sec-lt-cn-gp,
+          var(--_ctm-tab-sec-lt-cn-gp, var(--_ctm-sec-lt-cn-gp))
+        );
+        row-gap: var(
+          --_ctm-mob-sec-lt-rw-gp,
+          var(--_ctm-tab-sec-lt-rw-gp, var(--_ctm-sec-lt-rw-gp))
+        );
       }
     }
-
-    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;
-        // &:not(#{$repeterLElement}) {
-        // }
-        &:is(#{$activeElementSelector}) {
-          & > div {
-            &[data-div-type="wrapper__layer"] {
-              --_sf-vt-zz: visible;
-              --_sf-op-zz: 1;
-            }
-          }
+  }
+}
+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;
+    // &:not(#{$repeterLElement}) {
+    // }
+    &:is(#{$activeElementSelector}) {
+      & > div {
+        &[data-div-type="wrapper__layer"] {
+          --_sf-vt-zz: visible;
+          --_sf-op-zz: 1;
         }
       }
-      &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
-        &:is([data-element-type="stack"]) {
-          width: max(
-            0.5px,
-            calc(
-                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))
-          );
-        }
-        &:is([data-element-type="container"]) {
-          width: max(
-            0.5px,
-            calc(
-                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))
-          );
-        }
+    }
 
-        &:not([data-element-type="container"], [data-element-type="stack"]) {
-          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))) /
-                  100
-              ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-          );
-        }
-      }
+    & > .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+  }
+  &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
+    &:is([data-element-type="stack"]) {
+      width: max(
+        0.5px,
+        calc(
+            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))
+      );
+    }
+    &:is([data-element-type="container"]) {
+      width: max(
+        0.5px,
+        calc(
+            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))
+      );
+    }
+
+    &:not([data-element-type="container"], [data-element-type="stack"]) {
+      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))) /
+              100
+          ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+      );
     }
   }
 }

package/dist/static-text.scss

@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="staticText"] {
+    // 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%;
+      // height: 100%;
+
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+      );
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .static-text-element {
+      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-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
+      &[data-flip-x="true"] {
+        transform: scaleX(-1);
+      }
+      &[data-flip-y="true"] {
+        transform: scaleY(-1);
+      }
+    }
+  }
+}

package/dist/text-temp.scss

@@ -11,7 +11,7 @@
     // 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);
-    // height: var(--_ctm-lt-ht, var(--_tst-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(
@@ -20,7 +20,18 @@
 
     & > .wrapper {
       width: 100%;
-      min-height: 50px;
+      // 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%;
     }
     &[data-show-shadow="false"] {
@@ -28,8 +39,17 @@
     }
 
     .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));
+      // 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;
@@ -37,15 +57,6 @@
       row-gap: var(--_sf-gp);
       width: 100%;
       // height: 100%;
-      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))
-      );
 
       // transform: scale(var(--_ctm-dn-zm-ie));
       scale: var(--_ctm-dn-zm-ie);

package/dist/types/builder/elements/category-details/index.d.ts

@@ -0,0 +1,68 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { DisplayValue, MarginValue, PaddingValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { CMSGridsContainer } from "../grid";
+import { BuilderAttributes } from "../common";
+export interface CategoryDetailAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+    dataMeta?: string;
+}
+export interface CategoryDetailStyleAttributes extends CommonStyleProperties {
+    minHeight?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    gridArea?: string;
+    display?: DisplayValue;
+    boxSizing?: string;
+    rowGap?: string;
+    columnGap?: string;
+    gridTemplateRows?: string;
+    gridTemplateColumns?: string;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+}
+export declare const getDefaultStyles: () => CategoryDetailStyleAttributes;
+export declare const getSectionDefaultStyles: () => CategoryDetailStyleAttributes;
+export interface VariationConditionInterface {
+    customer?: any[];
+    user?: any[];
+    relation?: any;
+}
+export interface SectionVariationInterface {
+    condition?: VariationConditionInterface;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType">;
+        HTML?: CategoryDetailAttributes;
+        CUSTOM?: any;
+    };
+    styles?: CategoryDetailStyleAttributes;
+    editedStyles?: CommonStyleProperties;
+    sectionStyles?: CommonStyleProperties;
+    grids?: CMSGridsContainer;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    highestGrid?: number | any;
+    gtc?: CMSGridsContainer;
+    gtr?: CMSGridsContainer;
+    childIds: any[];
+}
+export interface CMSCategoryDetailInterface {
+    id?: string | number;
+    uniqueKey?: string | number;
+    variations?: {
+        [key: string]: SectionVariationInterface;
+    };
+    styles?: CategoryDetailStyleAttributes;
+    sort?: number;
+    dataContentType?: string;
+    isMaximized?: boolean;
+}

package/dist/types/builder/enums/index.d.ts

@@ -50,6 +50,7 @@ export declare enum CMSToolIdTypes {
     cmsElementFullView = "cms-element-full-view",
     productWrapper = "cms-product-wrapper",
     productDetailsWrapper = "cms-product-details-wrapper",
+    categoryDetailsWrapper = "cms-category-details-wrapper",
     brandWrapper = "cms-brand-wrapper",
     categoryWrapper = "cms-category-wrapper",
     subCategoryWrapper = "cms-sub-category-wrapper",
@@ -106,6 +107,7 @@ export declare enum CMSElementSelectors {
     cmsElementFullView = "div[data-cms-tool='cms-element-full-view']",
     productElement = "div[data-element-type='product']",
     productDetailsElement = "div[data-element-type='productDetails']",
+    categoryDetailsElement = "div[data-element-type='categoryDetails']",
     categoryElement = "div[data-element-type='category']",
     brandElement = "div[data-element-type='brand']",
     subCategoryElement = "div[data-element-type='subCategory']",
@@ -249,6 +251,7 @@ export declare const CMSElementsListEnum: {
     SEARCH: string;
     LAYOUTER: string;
     LAYOUTER_ITEM: string;
+    CATEGORY_DETAILS: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",

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

@@ -49,5 +49,6 @@ import * as lightBoxV2Schema from "./elements/light-box-v2/index";
 import * as searchSchema from "./elements/search/index";
 import * as layouterSchema from "./elements/layouter/index";
 import * as layouterItemSchema from "./elements/layouter-item/index";
+import * as categoryDetailsSchema from "./elements/category-details/index";
 import commonFunctions from "./utilities/global";
-export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, };
+export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, };

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

@@ -0,0 +1,17 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    CONTENT = "content",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -60,4 +60,5 @@ import * as allocations from "./allocations";
 import * as search from "./search";
 import * as layouter from "./layouter";
 import * as layouterItem from "./layouter-item";
-export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, };
+import * as categoryDetails from "./categoryDetails";
+export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, };