@sc-360-v2/storefront-cms-library 0.4.18 → 0.4.19

package/dist/icon-library.scss

@@ -46,6 +46,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       align-items: center;
       width: 100%;
       height: 100%;
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
 

package/dist/product-price.scss

@@ -148,6 +148,25 @@
               --_ctm-mob-dn-pt-pe-bd-cr,
               var(--_ctm-tab-dn-pt-pe-bd-cr, var(--_ctm-dn-pt-pe-bd-cr))
             );
+            .price-loader {
+              display: inline-block;
+              width: var(--_ctm-lt-wh, 100px);
+              height: 16px;
+              border-radius: 4px;
+              background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
+              background-size: 200% 100%;
+              animation: shimmer 1.4s infinite;
+            }
+
+            @keyframes shimmer {
+              0% {
+                background-position: -200% 0;
+              }
+              100% {
+                background-position: 200% 0;
+              }
+            }
+
             .price-span {
               color: var(
                 --_ctm-mob-dn-pt-pe-cr,

package/dist/product-sizechart.scss

@@ -5,6 +5,7 @@
 [data-div-type="element"] {
   &[data-element-type="productSizeChart"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
@@ -28,6 +29,8 @@
       color: rgba(75, 69, 70, 1);
     }
     .sizechart__buttons__wrapper {
+      width: 100%;
+      height: 100%;
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
 
       display: flex;

package/dist/stack.scss

@@ -62,7 +62,7 @@ body {
       & > .wrapper {
         flex-direction: column;
         width: 100%;
-        height: 100%;
+        // height: 100%;
         // justify-content: var(--_ctm-sta-lt-jy-ct);
         // align-items: var(--_ctm-sta-lt-an-is);
         align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
@@ -89,6 +89,7 @@ body {
         flex-direction: row;
         // justify-content: var(--_ctm-sta-lt-an-is);
         align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
+        justify-content: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
       }
     }
 

package/dist/table.scss

@@ -69,6 +69,26 @@
         --_show-table-shadow: none;
       }
     }
+    &[data-show-header-border="true"] {
+      .table__container {
+        table {
+          thead {
+            border-color: var(
+              --_ctm-mob-dn-te-hr-br-cr,
+              var(--_ctm-tab-dn-te-hr-br-cr, var(--_ctm-dn-te-hr-br-cr))
+            );
+            border-style: var(
+              --_ctm-mob-dn-te-hr-br-se,
+              var(--_ctm-tab-dn-te-hr-br-se, var(--_ctm-dn-te-hr-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-te-hr-br-wh,
+              var(--_ctm-tab-dn-te-hr-br-wh, var(--_ctm-dn-te-hr-br-wh))
+            );
+          }
+        }
+      }
+    }
     &[data-table-border="true"] {
       .table__container {
         border-color: var(
@@ -204,6 +224,8 @@
     }
 
     .table__wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg))));
 
       background-color: var(
@@ -227,6 +249,7 @@
       width: 100%;
 
       .table__container {
+        overflow-x: auto;
         background-color: var(
           --_ctm-mob-dn-te-bd-cr,
           var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
@@ -258,11 +281,22 @@
         // height: 100%;
         text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
 
+        @media (max-width: 1024px) {
+          min-width: 700px;
+        }
+
+        @media (max-width: 768px) {
+          min-width: 600px;
+        }
+
         th,
         td {
           border: none;
+          white-space: nowrap;
         }
         thead {
+          position: sticky;
+          top: 0;
           background-color: var(
             --_ctm-mob-dn-te-hr-bd-cr,
             var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))

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

@@ -56,8 +56,8 @@ export interface TableControlInterface {
         blur?: CMSIBCommonInterface;
     };
     tableHeader?: {
-        selectorKey?: string;
-        backgroundColor?: CMSIBCommonInterface;
+        selectorKey: string;
+        [key: string]: any;
     };
     headerText?: {
         selectorKey?: string;

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

@@ -64,7 +64,8 @@ export declare enum VideoSelectorKeysEnum {
     VIDEO_WIDGET_LAYOUT = "videoWidgetLayout",
     VIDEO_WIDGET_DESIGN = "videoWidgetDesign",
     VIDEO_TEXT_LAYOUT = "videoTextLayout",
-    VIDEO_TEXT_CONTAINER_DESIGN = "videoTextContainerDesign"
+    VIDEO_TEXT_CONTAINER_DESIGN = "videoTextContainerDesign",
+    VIDEO_PLAYER = "videoPlayer"
 }
 export interface SelectorKeys {
     LAYOUT: string;
@@ -391,6 +392,20 @@ export declare const getDefaultData: () => {
             iconSize: import("../../interfaces/global").CMSIBSizeInterface;
             iconColor: CMSIBCommonInterface;
         };
+        videoPlayer: {
+            selectorKey: VideoSelectorKeysEnum;
+            backgroundColor: CMSIBCommonInterface;
+            borderColor: CMSIBCommonInterface;
+            borderStyle: CMSIBCommonInterface;
+            borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+            showBorder: CMSIBCommonInterface;
+            showShadow: CMSIBCommonInterface;
+            shadowColor: CMSIBCommonInterface;
+            blur: import("../../interfaces/global").CMSIBSizeInterface;
+            spread: import("../../interfaces/global").CMSIBSizeInterface;
+            angle: import("../../interfaces/global").CMSIBSizeInterface;
+            borderRadius: import("../../interfaces/global").CSSPaddingValues;
+        };
         videoTextLayout: {
             selectorKey: VideoSelectorKeysEnum;
             textVerticalPadding: {

package/dist/video.scss

@@ -14,6 +14,7 @@
           )
       )
     );
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     --_aspect-ratio: calc(
@@ -80,7 +81,86 @@
         }
       }
     }
-
+    &[data-show-video-border="true"] {
+      .video__container {
+        .video__thumbnail {
+          .placeholder__img {
+            border-color: var(
+              --_ctm-mob-dn-vo-pr-br-cr,
+              var(--_ctm-tab-dn-vo-pr-br-cr, var(--_ctm-dn-vo-pr-br-cr))
+            );
+            border-style: var(
+              --_ctm-mob-dn-vo-pr-br-se,
+              var(--_ctm-tab-dn-vo-pr-br-se, var(--_ctm-dn-vo-pr-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-vo-pr-br-wh,
+              var(--_ctm-tab-dn-vo-pr-br-wh, var(--_ctm-dn-vo-pr-br-wh))
+            );
+          }
+        }
+        .video__data {
+          video {
+            border-color: var(
+              --_ctm-mob-dn-vo-pr-br-cr,
+              var(--_ctm-tab-dn-vo-pr-br-cr, var(--_ctm-dn-vo-pr-br-cr))
+            );
+            border-style: var(
+              --_ctm-mob-dn-vo-pr-br-se,
+              var(--_ctm-tab-dn-vo-pr-br-se, var(--_ctm-dn-vo-pr-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-vo-pr-br-wh,
+              var(--_ctm-tab-dn-vo-pr-br-wh, var(--_ctm-dn-vo-pr-br-wh))
+            );
+          }
+        }
+      }
+    }
+    &[data-show-video-shadow="true"] {
+      .video__container {
+        .video__thumbnail {
+          .placeholder__img {
+            box-shadow: var(
+                --_ctm-mob-dn-vo-pr-sw-ae,
+                var(--_ctm-tab-dn-vo-pr-sw-ae, var(--_ctm-dn-vo-pr-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-vo-pr-sw-br,
+                var(--_ctm-tab-dn-vo-pr-sw-br, var(--_ctm-dn-vo-pr-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-vo-pr-sw-sd,
+                var(--_ctm-tab-dn-vo-pr-sw-sd, var(--_ctm-dn-vo-pr-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-vo-pr-sw-cr,
+                var(--_ctm-tab-dn-vo-pr-sw-cr, var(--_ctm-dn-vo-pr-sw-cr))
+              );
+          }
+        }
+        .video__data {
+          video {
+            box-shadow: var(
+                --_ctm-mob-dn-vo-pr-sw-ae,
+                var(--_ctm-tab-dn-vo-pr-sw-ae, var(--_ctm-dn-vo-pr-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-vo-pr-sw-br,
+                var(--_ctm-tab-dn-vo-pr-sw-br, var(--_ctm-dn-vo-pr-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-vo-pr-sw-sd,
+                var(--_ctm-tab-dn-vo-pr-sw-sd, var(--_ctm-dn-vo-pr-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-vo-pr-sw-cr,
+                var(--_ctm-tab-dn-vo-pr-sw-cr, var(--_ctm-dn-vo-pr-sw-cr))
+              );
+          }
+        }
+      }
+    }
     &[data-widget-border="true"] {
       .video__container {
         border-color: var(
@@ -308,7 +388,19 @@
         video {
           // max-width: 100%;
           width: prepareMediaVariable(--_ctm-lt-vo-wh, 100%);
-          height: prepareMediaVariable(--_ctm-lt-vo-ht, auto);
+          height: prepareMediaVariable(--_ctm-lt-vo-ht, 100%);
+          // border-radius: var(
+          //   --_ctm-mob-dn-vo-wt-dn-br-rs,
+          //   var(--_ctm-tab-dn-vo-wt-dn-br-rs, var(--_ctm-dn-vo-wt-dn-br-rs))
+          // );
+          background-color: var(
+            --_ctm-mob-dn-vo-pr-bd-cr,
+            var(--_ctm-tab-dn-vo-pr-bd-cr, var(--_ctm-dn-vo-pr-bd-cr))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-vo-pr-br-rs,
+            var(--_ctm-tab-dn-vo-pr-br-rs, var(--_ctm-dn-vo-pr-br-rs))
+          );
         }
       }
       .video__thumbnail {
@@ -319,7 +411,17 @@
         .placeholder__img {
           // width: 100%;
           width: prepareMediaVariable(--_ctm-lt-vo-wh, 100%);
-          height: prepareMediaVariable(--_ctm-lt-vo-ht, auto);
+          height: prepareMediaVariable(--_ctm-lt-vo-ht, 100%);
+
+          background-color: var(
+            --_ctm-mob-dn-vo-pr-bd-cr,
+            var(--_ctm-tab-dn-vo-pr-bd-cr, var(--_ctm-dn-vo-pr-bd-cr))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-vo-pr-br-rs,
+            var(--_ctm-tab-dn-vo-pr-br-rs, var(--_ctm-dn-vo-pr-br-rs))
+          );
+
           // position: absolute;
           // left: 0;
           // top: 0;

package/package.json

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