@sc-360-v2/storefront-cms-library 0.2.0 → 0.2.2

package/dist/bulk-variant-picker.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss";
+// @use "./functions.scss";
 [data-div-type="element"] {
   &[data-element-type="bulkVariantPicker"] {
     // width: var(--_lt-wh);

package/dist/filters.scss

@@ -0,0 +1,17 @@
+@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="filters"] {
+    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%;
+      }
+    }
+  }
+}

package/dist/globals.scss

@@ -1,94 +1,94 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
-    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
-    "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
+    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
+    "Courier New", monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

package/dist/grid.scss

@@ -3,6 +3,7 @@ $elementSelector: "[data-div-type='element']";
 [data-div-type="grid"] {
   position: var(--_p-relative);
   display: var(--_d-grid);
+  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
   // height: 100% !important;
   box-shadow: var(
     --_hide-grid-shadow,
@@ -42,7 +43,11 @@ $elementSelector: "[data-div-type='element']";
       border: var(--_sf-gri-wl-bw) solid var(--_accent-color-2-500);
     }
     &[data-div-type="cms-grid-wrapper"] {
-      padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+      width: 100%;
+      grid-area: 1/1/2/2 !important;
+      height: 100%;
+      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
       display: var(--_d-grid);
       background: var(
         --_ctm-mob-gri-dn-bd-cr,

package/dist/repeater.scss

@@ -169,6 +169,11 @@ $childItemSelector: '[data-element-type="repeater-item"]';
               // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
               flex: 0 0 var(--_sf-cl-vl);
               width: var(--_sf-cl-vl);
+              grid-template-rows: minmax(
+                max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+                auto
+              );
+              grid-template-columns: minmax(0px, 1fr);
               // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
               // padding-left: 0px !important;
 

package/dist/section.scss

@@ -97,8 +97,10 @@ 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"]) {
@@ -108,8 +110,10 @@ 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))
           );
         }
 
@@ -117,9 +121,13 @@ 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/stack.scss

@@ -33,21 +33,6 @@
 
     &.vtl {
       // width: var(--_sf-sta-nw-wh, auto);
-      // width: calc(
-      //   1% *
-      //     var(
-      //       --_ctm-mob-sta-ele-nw-wh-vl,
-      //       var(--_ctm-tab-sta-ele-nw-wh-vl var(--_ctm-sta-ele-nw-wh-vl, auto))
-      //     )
-      // );
-      // width: calc(
-      //   1% *
-      //     var(
-      //       --_ctm-mob-sta-ele-nw-wh-vl,
-      //       var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl, auto))
-      //     )
-      // );
-
       width: calc(
         1% *
           var(

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

@@ -59,6 +59,7 @@ export declare enum CMSElementSelectors {
     iframePreviewSelector = "iframe[data-title='cms-iframe-preview']",
     iframePreviewMainSelector = "[data-page-id='cms-iframe-preview-main']",
     templteEditiorSelector = "[data-page-id='cms__template__editor']",
+    pageWrapper = "[data-page-id='page-wrapper']",
     gridSelector = "section[data-div-type='section'] > .wrapper > div[data-div-type='grid']",
     insideGridSelector = ".wrapper > div[data-div-type='grid']",
     elementSelector = "section[data-div-type='section'] > .wrapper > div[data-div-type='grid'] > div[data-div-type='cms-grid-wrapper'] > div[data-div-type='element']",
@@ -252,3 +253,10 @@ export declare enum CMSRepeaterSliderControlTypes {
     DOTS = "Dots",
     NONE = "None"
 }
+export declare enum FliterTypes {
+    BRAND_FILTER = 1,
+    CATEGORY_FILTER = 2,
+    OPTION_FILTER = 3,
+    CUSTOM_ATTRIBUTE_FILTER = 4,
+    PRICE_FILTER = 5
+}

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

@@ -27,6 +27,7 @@ interface selfLayoutInterface {
     openItemsIn: CMSIBCommonInterface;
     showMoreItems: CMSIBCommonInterface;
     verticalSpacingBetweenItems: CMSIBCommonInterface;
+    showOptionsFilter: CMSIBCommonInterface;
 }
 interface selfDesignInterface {
     selectorKey: string;

package/dist/variant-picker.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss";
+// @use "./functions.scss";
 [data-div-type="element"] {
   &[data-element-type="variantPicker"] {
     // width: var(--_lt-wh);

package/dist/widget.scss

@@ -1,45 +1,54 @@
-@import "./video.scss";
-@import "./social.scss";
-@import "./faq.scss";
-@import "./table.scss";
-@import "./button.scss";
-@import "./code-temp.scss";
-@import "./embed-temp.scss";
-@import "./text-temp.scss";
-@import "./image-temp.scss";
-@import "./gallery-slider-temp.scss";
-@import "./scroll.scss";
-@import "./countdown.scss";
-@import "./hotspot.scss";
-@import "./map.scss";
-@import "./product-price.scss";
-@import "./product-actions.scss";
-@import "./volume-pricing.scss";
-@import "./product-inventory.scss";
-@import "./store-locations.scss";
-@import "./pickup-locations.scss";
-@import "./product-highlights.scss";
-@import "./payment-methods.scss";
-@import "./shipping-estimator.scss";
-@import "./amount-estimator.scss";
-@import "./quantity-selector.scss";
-@import "./product-promotions.scss";
-@import "./bulk-variant-picker.scss";
-@import "./variant-picker.scss";
-@import "./uom-selector.scss";
-@import "./product-image.scss";
-@import "./product-basic-elements.scss";
-@import "./lightbox.scss";
-@import "./cart.scss";
-@import "./profile.scss";
-@import "./product.scss";
-@import "./productDetails.scss";
-@import "./menu.scss";
-@import "./product-options.scss";
-
-@import "./section.scss";
-@import "./grid.scss";
-@import "./container.scss";
-@import "./stack.scss";
-@import "./repeater.scss";
-@import "./repeater-item.scss";
+// Note: please import only widget related css only in this
+@use "./section.scss";
+@use "./grid.scss";
+@use "./container.scss";
+@use "./stack.scss";
+@use "./repeater.scss";
+@use "./repeater-item.scss";
+@use "./video.scss";
+@use "./social.scss";
+@use "./faq.scss";
+@use "./table.scss";
+@use "./tabs.scss";
+@use "./button.scss";
+@use "./code-temp.scss";
+@use "./embed-temp.scss";
+@use "./text-temp.scss";
+@use "./image-temp.scss";
+@use "./gallery-slider-temp.scss";
+@use "./scroll.scss";
+@use "./countdown.scss";
+@use "./hotspot.scss";
+@use "./map.scss";
+@use "./product-price.scss";
+@use "./product-actions.scss";
+@use "./volume-pricing.scss";
+@use "./product-inventory.scss";
+@use "./store-locations.scss";
+@use "./pickup-locations.scss";
+@use "./product-highlights.scss";
+@use "./payment-methods.scss";
+@use "./shipping-estimator.scss";
+@use "./amount-estimator.scss";
+@use "./quantity-selector.scss";
+@use "./product-promotions.scss";
+@use "./bulk-variant-picker.scss";
+@use "./variant-picker.scss";
+@use "./uom-selector.scss";
+@use "./product-image.scss";
+@use "./product-basic-elements.scss";
+@use "./lightbox.scss";
+@use "./cart.scss";
+@use "./profile.scss";
+@use "./product.scss";
+@use "./productDetails.scss";
+@use "./menu.scss";
+@use "./product-options.scss";
+@use "./brand-basic-elements.scss";
+@use "./brand.scss";
+@use "./bundle-basic-elements.scss";
+@use "./bundle.scss";
+@use "./category.scss";
+@use "./sub-category.scss";
+@use "./categoryWidget.scss";
+@use "./filters.scss";

package/package.json

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

package/dist/functions.scss

@@ -1,133 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-
-$breakPoints: (
-  desktop: (
-    min: 1024px,
-    max: 99999px,
-  ),
-  mobile: (
-    min: 100px,
-    max: 1023px,
-  ),
-  laptop: (
-    min: 1024px,
-    max: 1367px,
-  ),
-  small: (
-    min: 50px,
-    max: 399px,
-  ),
-);
-
-@mixin prepareMediaQueries($list) {
-  @each $mediaKey, $mediaValue in $breakPoints {
-    $maxWidth: map.get($mediaValue, max);
-    $minWidth: map.get($mediaValue, min);
-    @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
-      @each $key, $value in $defaultValues {
-        $value1: map.get($value, $mediaKey);
-        @if ($value1 != null) {
-          #{$key}: $value1;
-        }
-      }
-    }
-  }
-}
-
-@mixin restrictToLinesShow($count, $type: "optional") {
-  display: -webkit-box;
-  -webkit-line-clamp: $count;
-  overflow: clip;
-  text-overflow: ellipsis;
-  @if ($type == "optional") {
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-orient: $type;
-  }
-}
-
-@function getListOfResponsive($desktop, $mobile, $latop: "optional") {
-  $list: (
-    desktop: $desktop,
-    mobile: $mobile,
-  );
-  @if ($latop != "optional") {
-    $list: map-merge(
-      $list,
-      (
-        laptop: $latop,
-      )
-    );
-  }
-  @return $list;
-}
-
-@function getTranstionValue($property, $duration: "normal") {
-  $dur: var(--_anim-duration);
-  @if ($duration == "slow") {
-    $dur: var(--_anim-duration-slow);
-  }
-  @return $property #{$dur} var(--_anim-timing-function-v4);
-}
-
-@function getRepeatColWidth($colcount, $colgap) {
-  @return repeat(
-    var($colcount),
-    calc((100% / var($colcount)) - (((var($colcount) - 1) * (var($colgap))) / (var($colcount))))
-  );
-}
-
-@function getCommonHasNavContainer() {
-  $css: ();
-  $props: (
-    display: var(--_d-flex),
-    flex-wrap: wrap,
-    justify-content: space-between,
-    gap: var(--_default-row-gap) var(--_default-col-gap),
-  );
-  $css: map-merge($css, $props);
-  @return $css;
-}
-
-@mixin prepareCustomClassCSSProps($props) {
-  @each $key, $value in $props {
-    @if ($key == class) {
-      @each $classKey, $classValue in $value {
-        .#{$classKey} {
-          @each $key1, $value1 in $classValue {
-            @if ($key1 == common) {
-              @each $key2, $value2 in $value1 {
-                #{$key2}: #{$value2};
-              }
-            } @else {
-              @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
-                @each $key2, $value2 in $value1 {
-                  #{$key2}: #{$value2};
-                }
-              }
-            }
-          }
-          // @include getcssprops($classValue, $breakPoints);
-        }
-      }
-    } @else {
-      #{$key} {
-        @each $key1, $value1 in $value {
-          @if ($key1 == common) {
-            @each $key2, $value2 in $value1 {
-              #{$key2}: #{$value2};
-            }
-          } @else {
-            @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
-              @each $key2, $value2 in $value1 {
-                #{$key2}: #{$value2};
-              }
-            }
-          }
-          // @include getcssprops($value, $breakPoints);
-        }
-      }
-    }
-  }
-}