@sc-360-v2/storefront-cms-library 0.3.95 → 0.3.97

package/dist/tab-v2.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 $activeElementSelector: "[data-has-clicked='true']";
 $root: "flex__tbs";
 $sfKey: "--_flex-tbs-";
@@ -141,7 +142,10 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
                 --_ctm-mob-tbs-lt-tb-sg,
                 var(--_ctm-tab-tbs-lt-tb-sg, var(--_ctm-tbs-lt-tb-sg))
               );
-              width: 100%;
+              // width: 100%;
+              width: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-wh, 100%);
+              min-height: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-mn-ht, auto);
+              padding: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-pg, 0px);
               display: var(--_d-flex);
               flex-direction: var(#{$sfKey}fd-header, row);
               &:is(.vtl *) {
@@ -445,7 +449,8 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
                   }
                   // width: max-content;
 
-                  font-family: var(
+                  font-family:
+                    var(
                       --_sf-tbs-sd-ft-fy,
                       var(
                         --_sf-tbs-hr-ft-fy,

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

@@ -1,4 +1,4 @@
-import { CMSElementEditTypes } from "../../enums";
+import { CMSCSSUnitTypesEnums, CMSElementEditTypes } from "../../enums";
 import { CMSIBCommonInterface } from "../../interfaces/global";
 declare enum SelectorKeysEnum {
     LAYOUT = "layout",
@@ -101,6 +101,19 @@ export declare const getDefaultData: () => {
             saturation: import("../../interfaces/global").CMSIBSizeInterface;
             highlights: import("../../interfaces/global").CMSIBSizeInterface;
             shadows: import("../../interfaces/global").CMSIBSizeInterface;
+            containerWidth: {
+                value: string;
+                property: string;
+                unit: CMSCSSUnitTypesEnums;
+                propertyType: CMSElementEditTypes;
+            };
+            containerMinHeight: {
+                value: string;
+                property: string;
+                unit: CMSCSSUnitTypesEnums;
+                propertyType: CMSElementEditTypes;
+            };
+            padding: any;
             selectorKey: SelectorKeysEnum;
         };
         tabs: {
@@ -133,6 +146,19 @@ export declare const getDefaultData: () => {
                 saturation: import("../../interfaces/global").CMSIBSizeInterface;
                 highlights: import("../../interfaces/global").CMSIBSizeInterface;
                 shadows: import("../../interfaces/global").CMSIBSizeInterface;
+                containerWidth: {
+                    value: string;
+                    property: string;
+                    unit: CMSCSSUnitTypesEnums;
+                    propertyType: CMSElementEditTypes;
+                };
+                containerMinHeight: {
+                    value: string;
+                    property: string;
+                    unit: CMSCSSUnitTypesEnums;
+                    propertyType: CMSElementEditTypes;
+                };
+                padding: any;
                 selectorKey: SelectorKeysEnum;
             };
             hoverState: {
@@ -163,6 +189,19 @@ export declare const getDefaultData: () => {
                 saturation: import("../../interfaces/global").CMSIBSizeInterface;
                 highlights: import("../../interfaces/global").CMSIBSizeInterface;
                 shadows: import("../../interfaces/global").CMSIBSizeInterface;
+                containerWidth: {
+                    value: string;
+                    property: string;
+                    unit: CMSCSSUnitTypesEnums;
+                    propertyType: CMSElementEditTypes;
+                };
+                containerMinHeight: {
+                    value: string;
+                    property: string;
+                    unit: CMSCSSUnitTypesEnums;
+                    propertyType: CMSElementEditTypes;
+                };
+                padding: any;
                 selectorKey: SelectorKeysEnum;
             };
             selectedState: {
@@ -193,6 +232,19 @@ export declare const getDefaultData: () => {
                 saturation: import("../../interfaces/global").CMSIBSizeInterface;
                 highlights: import("../../interfaces/global").CMSIBSizeInterface;
                 shadows: import("../../interfaces/global").CMSIBSizeInterface;
+                containerWidth: {
+                    value: string;
+                    property: string;
+                    unit: CMSCSSUnitTypesEnums;
+                    propertyType: CMSElementEditTypes;
+                };
+                containerMinHeight: {
+                    value: string;
+                    property: string;
+                    unit: CMSCSSUnitTypesEnums;
+                    propertyType: CMSElementEditTypes;
+                };
+                padding: any;
                 selectorKey: SelectorKeysEnum;
             };
         };

package/dist/user-elements.scss

@@ -1783,22 +1783,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
 
           .popover-box {
+            // position: absolute;
+            // top: calc(100% + 10px);
+            // right: 0;
+            // background: white;
+            // padding: 12px 16px;
+            // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+            // border-radius: 8px;
+            // min-width: 150px;
+            // z-index: 10;
             position: absolute;
-            top: calc(100% + 10px);
-            right: 0;
-            background: white;
-            padding: 12px 16px;
-            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
+            // border: 1px solid #ccc;
             min-width: 150px;
-            z-index: 10;
+            max-width: 200px;
+            z-index: 1000;
+            left: 160%;
+            top: 0;
+            padding: 8px;
+            border-radius: 4px;
           }
 
           .popover-box {
             display: flex;
             flex-direction: column;
 
-            width: 100%;
+            // width: 100%;
             gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
             background-color: var(
               --_ctm-mob-dn-pr-se-bd-cr,
@@ -1859,16 +1868,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .popover-arrow {
             position: absolute;
-            top: -6px;
-            right: 10px;
+            top: 8px;
+            left: -5px;
             width: 12px;
             height: 12px;
             background-color: var(
               --_ctm-mob-dn-pr-se-bd-cr,
               var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
             );
-            transform: rotate(45deg);
-            box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.05);
+            transform: rotate(-45deg);
+            box-shadow: -1px -1px 0px
+              var(
+                --_ctm-mob-dn-pr-se-br-cr,
+                var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
+              );
           }
 
           .popover_item {

package/dist/widget.scss

@@ -138,3 +138,5 @@
 @use "./coupon.scss";
 @use "./order-processing.scss";
 @use "./embroidery.scss";
+@use "./error-templates.scss";
+@use "./wishlist-overlay.scss";

package/dist/wishlist-overlay.scss

@@ -0,0 +1,48 @@
+.wishlist-container {
+  position: relative;
+  display: inline-block;
+
+  .wishlist-btn {
+    background: #ff4081;
+    color: #fff;
+    border: none;
+    padding: 8px 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+
+    &:hover {
+      background: #e73370;
+    }
+  }
+
+  .wishlist-overlay {
+    position: absolute;
+    min-width: 220px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 12px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+
+    h4 {
+      margin: 0 0 10px;
+      font-size: 16px;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 5px;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: 6px 0;
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+}

package/package.json

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