@sc-360-v2/storefront-cms-library 0.3.23 → 0.3.25

package/dist/filters.scss

@@ -1256,7 +1256,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
       //Filter Features  Ends
 
-      // Input Radio Starts
+      // Input checkbox Starts
       .checkbox__radio {
         display: flex;
         align-items: center;
@@ -1668,7 +1668,379 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         top: 2px;
       }
 
-      // Input Radio Ends
+      // Input checkbox Ends
+
+      // Input radio begins
+
+      .filter__checkbox__radio {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+
+        input {
+          position: absolute;
+          opacity: 0;
+          cursor: pointer;
+          height: 0;
+          width: 0;
+        }
+
+        .filter__checkmark {
+          display: inline-block;
+          height: 18px;
+          width: 18px;
+          // border: 2px solid #ccc;
+          // background-color: #fff;
+          position: relative;
+          transition:
+            border-color 0.2s ease,
+            background-color 0.2s ease;
+          // background-color: var(
+          //   --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
+          //   var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
+          // );
+          border-radius: var(
+            --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
+            var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
+          );
+          &[data-show-default-unchecked-shadow="true"] {
+            box-shadow: var(
+              --_show-shadow-clear-all,
+              var(
+                  --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
+                  var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
+                )
+            );
+          }
+          &[data-show-default-unchecked-border="true"] {
+            border-color: var(
+              --_sf-hr-br-cr,
+              var(
+                --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+                var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              )
+            );
+            border-style: var(
+              --_sf-hr-br-st,
+              var(
+                --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
+                var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
+              )
+            );
+            border-width: var(
+              --_sf-hr-br-wt,
+              var(
+                --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
+                var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
+              )
+            );
+          }
+          &:hover {
+            &[data-show-hover-unchecked-border="true"] {
+              border-color: var(
+                --_sf-hr-br-cr,
+                var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
+                )
+              );
+              border-style: var(
+                --_sf-hr-br-st,
+                var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
+                )
+              );
+              border-width: var(
+                --_sf-hr-br-wt,
+                var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
+                )
+              );
+            }
+            &[data-show-hover-unchecked-shadow="true"] {
+              box-shadow: var(
+                --_show-shadow-clear-all,
+                var(
+                    --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
+                    var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
+                  )
+                  var(
+                    --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
+                    var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
+                  )
+                  var(
+                    --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
+                    var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
+                  )
+                  var(
+                    --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
+                    var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
+                  )
+              );
+            }
+            background-color: var(
+              --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
+              var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
+            );
+            border-radius: var(
+              --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
+              var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
+            );
+            box-shadow: var(
+              --_show-shadow-clear-all,
+              var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
+                  var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
+                )
+            );
+          }
+        }
+
+        // Only style this way if the input is a radio
+        input[type="radio"] ~ .filter__checkmark {
+          border-radius: 50%;
+        }
+
+        input[type="radio"]:checked ~ .filter__checkmark {
+          // border-color: #007bff;
+          &[data-show-default-checked-shadow="true"] {
+            box-shadow: var(
+              --_show-shadow-clear-all,
+              var(
+                  --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
+                  var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
+                )
+            );
+          }
+
+          &[data-show-default-checked-border="true"] {
+            border-color: var(
+              --_sf-hr-br-cr,
+              var(
+                --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
+                var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
+              )
+            );
+            border-style: var(
+              --_sf-hr-br-st,
+              var(
+                --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
+                var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
+              )
+            );
+            border-width: var(
+              --_sf-hr-br-wt,
+              var(
+                --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
+                var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
+              )
+            );
+          }
+
+          &:hover {
+            &[data-show-hover-checked-shadow="true"] {
+              box-shadow: var(
+                --_show-shadow-clear-all,
+                var(
+                    --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
+                    var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
+                  )
+                  var(
+                    --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
+                    var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
+                  )
+                  var(
+                    --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
+                    var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
+                  )
+                  var(
+                    --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
+                    var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
+                  )
+              );
+            }
+
+            &[data-show-hover-checked-border="true"] {
+              border-color: var(
+                --_sf-hr-br-cr,
+                var(
+                  --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
+                  var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
+                )
+              );
+              border-style: var(
+                --_sf-hr-br-st,
+                var(
+                  --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
+                  var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
+                )
+              );
+              border-width: var(
+                --_sf-hr-br-wt,
+                var(
+                  --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
+                  var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
+                )
+              );
+            }
+            button {
+              display: flex;
+              .default-icon {
+                display: none;
+              }
+
+              .hover-icon {
+                display: block;
+              }
+              svg {
+                // width: 13px;
+                // height: 13px;
+                width: var(
+                  --_ctm-mob-dn-cx-cd-se-hr-se-se,
+                  var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
+                );
+                height: var(
+                  --_ctm-mob-dn-cx-cd-se-hr-se-se,
+                  var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
+                );
+                path {
+                  // stroke: var(--_base-white);
+                  stroke: var(
+                    --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
+                    var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
+                  );
+                }
+              }
+            }
+          }
+        }
+
+        input[type="radio"]:checked ~ .filter__checkmark::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          // background-color: #007bff;
+          background-color: var(
+            --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+            var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+          );
+          &:hover {
+            background-color: var(
+              --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
+              var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
+            );
+          }
+        }
+
+        // Optional for checkbox styling (square)
+        input[type="checkbox"] ~ .filter__checkmark {
+          border-radius: 4px;
+        }
+
+        // input[type="checkbox"]:checked ~ .filter__checkmark {
+        //   background-color: #007bff;
+        //   border-color: #007bff;
+        // }
+
+        // input[type="checkbox"]:checked ~ .filter__checkmark::after {
+        //   content: "";
+        //   position: absolute;
+        //   left: 5px;
+        //   top: 1px;
+        //   width: 4px;
+        //   height: 10px;
+        //   border: solid #fff;
+        //   border-width: 0 2px 2px 0;
+        //   transform: rotate(45deg);
+        // }
+
+        .filter__option__value {
+          margin-left: 8px;
+          color: var(
+            --_ctm-mob-dn-on-ls-cr-dc,
+            var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
+          );
+          font-family: var(
+            --_sf-hr-ff,
+            var(
+              --_ctm-mob-dn-on-ls-ft-fy-dc,
+              var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
+            )
+          );
+          font-size: var(
+            --_ctm-mob-dn-on-ls-ft-se-dc,
+            var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-on-ls-ft-wt-dc,
+            var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
+          );
+          font-style: var(
+            --_ctm-mob-dn-on-ls-ft-se-ic-dc,
+            var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
+          );
+          text-align: var(
+            --_ctm-mob-dn-on-ls-tt-an-dc,
+            var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-on-ls-lr-sg-dc,
+            var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
+          );
+          line-height: var(
+            --_ctm-mob-dn-on-ls-le-ht-dc,
+            var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-on-ls-ue-dc,
+            var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
+          );
+        }
+      }
 
       // Multi Range Slider Starts
       .double-slider-box {
@@ -1685,7 +2057,40 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
         height: 5px;
         margin: 30px 0;
-        background-color: var(--_primary-400);
+        // background-color: var(--_primary-400);
+        background: linear-gradient(
+          to right,
+          var(
+              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+            )
+            0%,
+          var(
+              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+            )
+            var(--left),
+          var(
+              --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+              var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+            )
+            var(--left),
+          var(
+              --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+              var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+            )
+            var(--right),
+          var(
+              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+            )
+            var(--right),
+          var(
+              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
+            )
+            100%
+        );
         border-radius: 5px;
       }
 
@@ -1754,7 +2159,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         float: right;
       }
       input[type="number"] {
-        width: 40px;
+        width: 90px;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 5px;
@@ -1768,7 +2173,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-size: 12px;
         color: #555;
         background-color: #fff;
-        padding: 5px;
         border: 1px solid #ddd;
         border-radius: 5px;
         white-space: nowrap;
@@ -1777,16 +2181,89 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
 
       .min-tooltip {
-        left: 20px;
+        left: 42px;
         top: 20px;
         transform: translateX(-50%);
       }
 
       .max-tooltip {
-        right: 20px;
+        right: 45px;
         top: 20px;
         transform: translateX(50%);
       }
+
+      .price-range-container {
+        width: 100%;
+        margin: auto;
+        padding: 10px;
+      }
+
+      .price-range-inputs {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .price-range-min,
+      .price-range-max {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .price-range-label {
+        font-size: 12px;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 6px;
+      }
+
+      .price-range-input-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      .price-range-min span,
+      .price-range-max span {
+        margin-right: 8px;
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
+      }
+
+      .price-range-separator {
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
+      }
+
+      .price-range-min-input,
+      .price-range-max-input {
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        text-align: center;
+        font-size: 14px;
+        color: #333;
+        background-color: #fff;
+      }
+
+      .price-range-min-input:focus,
+      .price-range-max-input:focus {
+        outline: none;
+        border-color: #2563eb;
+        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+      }
+
+      .price-range-min-input::placeholder,
+      .price-range-max-input::placeholder {
+        color: #9ca3af;
+      }
+
       /* Chrome, Safari, Edge, and Opera */
       input[type="number"]::-webkit-inner-spin-button,
       input[type="number"]::-webkit-outer-spin-button {

package/dist/language-selector.scss

@@ -8,7 +8,7 @@
 
     & > .wrapper {
       width: 100%;
-      // height: 100%;
+      height: auto;
     }
     &[data-show-shadow="false"] {
       --_show-shadow: none;
@@ -353,6 +353,10 @@
         width: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
         height: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
         object-fit: cover;
+        > svg {
+          width: 100%;
+          height: 100%;
+        }
       }
 
       .language__name {

package/dist/myTemplates.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="myTemplates"] {
+    width: var(
+      --_ctm-mob-ele-nw-wh-st-mx,
+      var(
+        --_ctm-tab-ele-nw-wh-st-mx,
+        var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
+      )
+    );
+
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+
+    // aspect-ratio: var(
+    //   --_ctm-mob-aspect-ratio,
+    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
+    // );
+
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}