@sc-360-v2/storefront-cms-library 0.1.4 → 0.1.6

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

@@ -30,12 +30,20 @@ export interface selfDesignInterface {
         spread: CMSIBCommonInterface;
         angle: CMSIBCommonInterface;
         borderRadius: CMSIBCommonInterface;
+        [key: string]: any;
     };
-    galleryLayout: {
+    galleryWidgetLayout: {
         selectorKey: string;
         galleryTextAndItemAlignment: CMSIBCommonInterface;
         galleryTextAndItemSpacing: CMSIBCommonInterface;
         galleryTitleAndDescriptionSpacing: CMSIBCommonInterface;
+        [key: string]: any;
+    };
+    galleryWidgetTextContainerDesign: {
+        [key: string]: any;
+    };
+    galleryWidgetTextContainerLayout: {
+        [key: string]: any;
     };
     itemStyle: {
         selectorKey: string;
@@ -76,7 +84,9 @@ export declare enum SelectorKeysEnum {
     ITEM_STYLE = "item-style",
     PAGINATION_ARROWS = "pagination-arrows",
     PAGINATION_DOTS = "pagination-dots",
-    PAGINATION_LINE = "pagination-lines"
+    PAGINATION_LINE = "pagination-lines",
+    MAP_WIDGET_TEXT_CONTAINER_DESIGN = "galleryWidgetTextContainerDesign",
+    MAP_WIDGET_TEXT_CONTAINER_LAYOUT = "galleryWidgetTextContainerLayout"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -25,4 +25,10 @@ import * as volumePricing from "./volumePricing";
 import * as pickupLocations from "./pickupLocations";
 import * as storeLocations from "./storeLocations";
 import * as productInventory from "./productInventory";
-export { section, grid, common, image, button, slideShowLayouter, tabs, video, table, gallerySlider, social, faq, code, text, embed, buttonV2, scroll, countdown, imageHotspot, map, container, price, productActions, volumePricing, pickupLocations, storeLocations, productInventory, };
+import * as paymentMethods from "./paymentMethods";
+import * as productHighlights from "./productHighlights";
+import * as shippingEstimator from "./shippingEstimator";
+import * as productPromotions from "./productPromotions";
+import * as amountEstimator from "./amountEstimator";
+import * as quantitySelector from "./quantitySelector";
+export { section, grid, common, image, button, slideShowLayouter, tabs, video, table, gallerySlider, social, faq, code, text, embed, buttonV2, scroll, countdown, imageHotspot, map, container, price, productActions, volumePricing, pickupLocations, storeLocations, productInventory, paymentMethods, productHighlights, shippingEstimator, productPromotions, amountEstimator, quantitySelector, };

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

@@ -0,0 +1,37 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: CMSIBCommonInterface;
+    dividerBetweenItems: CMSIBCommonInterface;
+    itemSpacing: CMSIBCommonInterface;
+    itemPadding: CMSIBCommonInterface;
+    ItemContentAlignment: CMSIBCommonInterface;
+    overflowItems: CMSIBCommonInterface;
+    maxItemsToDisplay: CMSIBCommonInterface;
+    header: CMSIBCommonInterface;
+    headerHeight: CMSIBCommonInterface;
+    rowHeight: CMSIBCommonInterface;
+    headerDivider: CMSIBCommonInterface;
+    rowDivider: CMSIBCommonInterface;
+    columnDivider: CMSIBCommonInterface;
+    alternativeRowColors: CMSIBCommonInterface;
+    headerCellPadding: CMSIBCommonInterface;
+    rowCellPadding: CMSIBCommonInterface;
+    contentAlignment: CMSIBCommonInterface;
+    rowsPerPage: CMSIBCommonInterface;
+    overflowControl: CMSIBCommonInterface;
+    paginationType: CMSIBCommonInterface;
+    paginationAliginment: CMSIBCommonInterface;
+    displayResults: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum PaymentMethodSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,24 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: CMSIBCommonInterface;
+    dividerBetweenItems: CMSIBCommonInterface;
+    itemSpacing: CMSIBCommonInterface;
+    itemPadding: CMSIBCommonInterface;
+    ItemContentAlignment: CMSIBCommonInterface;
+    overflowItems: CMSIBCommonInterface;
+    maxItemsToDisplay: CMSIBCommonInterface;
+    imageBehavior: CMSIBCommonInterface;
+    itemsPerRow: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum ProductHighlightsSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,39 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: CMSIBCommonInterface;
+    dividerBetweenItems: CMSIBCommonInterface;
+    itemSpacing: CMSIBCommonInterface;
+    itemPadding: CMSIBCommonInterface;
+    ItemContentAlignment: CMSIBCommonInterface;
+    overflowItems: CMSIBCommonInterface;
+    maxItemsToDisplay: CMSIBCommonInterface;
+    header: CMSIBCommonInterface;
+    headerHeight: CMSIBCommonInterface;
+    rowHeight: CMSIBCommonInterface;
+    headerDivider: CMSIBCommonInterface;
+    rowDivider: CMSIBCommonInterface;
+    columnDivider: CMSIBCommonInterface;
+    alternativeRowColors: CMSIBCommonInterface;
+    headerCellPadding: CMSIBCommonInterface;
+    rowCellPadding: CMSIBCommonInterface;
+    contentAlignment: CMSIBCommonInterface;
+    rowsPerPage: CMSIBCommonInterface;
+    overflowControl: CMSIBCommonInterface;
+    paginationType: CMSIBCommonInterface;
+    paginationAliginment: CMSIBCommonInterface;
+    displayResults: CMSIBCommonInterface;
+    imageBehavior: CMSIBCommonInterface;
+    itemsPerRow: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum ProductPromotionsSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,17 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: CMSIBCommonInterface;
+    displayMinQtyToPurchase: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum QuantitySelectorSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

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

package/dist/video.scss

@@ -0,0 +1,199 @@
+[data-div-type="element"] {
+  &[data-element-type="video"] {
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // 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%;
+      position: relative;
+    }
+
+    &[data-text-position="top"] {
+      .video__container {
+        flex-direction: column;
+      }
+    }
+    &[data-text-position="bottom"] {
+      .video__container {
+        flex-direction: column-reverse;
+      }
+    }
+    &[data-text-position="left"] {
+      .video__container {
+        flex-direction: row;
+      }
+      &[data-widget-alignment="top"] {
+        .video__container {
+          align-items: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        .video__container {
+          align-items: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        .video__container {
+          align-items: flex-end;
+        }
+      }
+    }
+    &[data-text-position="right"] {
+      .video__container {
+        flex-direction: row-reverse;
+      }
+      &[data-widget-alignment="top"] {
+        .video__container {
+          align-items: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        .video__container {
+          align-items: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        .video__container {
+          align-items: flex-end;
+        }
+      }
+    }
+
+    &[data-widget-border="true"] {
+      .video__container {
+        border-color: var(--_ctm-dn-vo-wt-dn-br-cr, var(--_tst-dn-vo-wt-dn-br-cr));
+        border-style: var(--_ctm-dn-vo-wt-dn-br-se, var(--_tst-dn-vo-wt-dn-br-se));
+        border-width: var(--_ctm-dn-vo-wt-dn-br-wh, var(--_tst-dn-vo-wt-dn-br-wh));
+      }
+    }
+
+    &[data-widget-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    &[data-content-border="true"] {
+      .video__content {
+        border-color: var(--_ctm-dn-vo-tt-cr-dn-br-cr, var(--_tst-dn-vo-tt-cr-dn-br-cr));
+        border-style: var(--_ctm-dn-vo-tt-cr-dn-br-se, var(--_tst-dn-vo-tt-cr-dn-br-se));
+        border-width: var(--_ctm-dn-vo-tt-cr-dn-br-wh, var(--_tst-dn-vo-tt-cr-dn-br-wh));
+      }
+    }
+
+    &[data-content-shadow="false"] {
+      --_show-text-content-shadow: none;
+    }
+    &[data-icon-background-shape="circle"] {
+      .video__icon {
+        border-radius: 50%;
+      }
+    }
+    &[data-icon-background-shape="rectange"] {
+      .video__icon {
+        border-radius: 6px;
+      }
+    }
+
+    .video__container {
+      display: flex;
+      gap: var(--_ctm-dn-vo-wt-lt-wt-tt-ad-im-sg, var(--_tst-dn-vo-wt-lt-wt-tt-ad-im-sg));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      background-color: var(--_ctm-dn-vo-wt-dn-bd-cr, var(--_tst-dn-vo-wt-dn-bd-cr));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      flex-direction: var(--_sf-fd-bn);
+      align-items: center;
+      justify-content: var(--_sf-jc, center);
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-vo-wt-dn-sw-ae, var(--_tst-dn-vo-tt-cr-dn-sw-ae))
+          var(--_ctm-dn-vo-wt-dn-sw-br, var(--_tst-vo-se-sw-br))
+          var(--_ctm-dn-vo-wt-dn-sw-sd, var(--_tst-vo-se-sw-sd))
+          var(--_ctm-dn-vo-wt-dn-sw-cr, var(--_tst-dn-vo-tt-cr-dn-sw-cr))
+      );
+      width: 100%;
+      height: auto;
+
+      border-radius: var(--_ctm-dn-vo-wt-dn-br-rs, var(--_tst-dn-vo-wt-dn-br-rs));
+
+      .video__content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--_ctm-dn-vo-tt-lt-tt-vl-pg, var(--_ctm-dn-vo-tt-lt-tt-vl-pg))
+          var(--_ctm-dn-vo-tt-lt-tt-hl-pg, var(--_tst-dn-vo-tt-lt-tt-hl-pg));
+        gap: var(--_ctm-dn-vo-tt-lt-te-ad-dn-sg, var(--_tst-dn-vo-tt-lt-te-ad-dn-sg));
+        background-color: var(--_ctm-dn-vo-tt-cr-dn-bd-cr, var(--_tst-dn-vo-tt-cr-dn-bd-cr));
+        border-radius: var(--_ctm-dn-vo-tt-cr-dn-br-rs, var(--_tst-dn-vo-tt-cr-dn-br-rs));
+        box-shadow: var(
+          --_show-text-content-shadow,
+          var(--_ctm-dn-vo-tt-cr-dn-sw-ae, var(--_tst-dn-vo-tt-cr-dn-sw-ae))
+            var(--_ctm-dn-vo-tt-cr-dn-sw-br, var(--_tst-vo-se-sw-br))
+            var(--_ctm-dn-vo-tt-cr-dn-sw-sd, var(--_tst-vo-se-sw-sd))
+            var(--_ctm-dn-vo-tt-cr-dn-sw-cr, var(--_tst-dn-vo-tt-cr-dn-sw-cr))
+        );
+        h3 {
+          color: var(--_ctm-dn-vo-wt-dn-cr, var(--_tst-dn-vo-wt-dn-cr));
+          font-family: var(--_ctm-dn-vo-wt-dn-ft-fy, var(--_tst-dn-vo-wt-dn-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-vo-wt-dn-ft-se, var(--_tst-dn-vo-wt-dn-ft-se));
+          font-weight: var(--_ctm-dn-vo-wt-dn-ft-wt, var(--_tst-dn-vo-wt-dn-ft-wt));
+          font-style: var(--_ctm-dn-vo-wt-dn-ft-se-ic, var(--_tst-dn-vo-wt-dn-ft-se-ic));
+          text-align: var(--_ctm-dn-vo-wt-dn-tt-an, var(--_tst-dn-vo-wt-dn-tt-an));
+          letter-spacing: var(--_ctm-dn-vo-wt-dn-lr-sg, var(--_tst-dn-vo-wt-dn-lr-sg));
+          line-height: var(--_ctm-dn-vo-wt-dn-le-ht, var(--_tst-dn-vo-wt-dn-le-ht));
+          text-decoration: var(--_ctm-dn-vo-wt-dn-ue);
+        }
+        p {
+          color: var(--_ctm-dn-vo-wt-dn-cr-dc, var(--_tst-dn-vo-wt-dn-cr-dc));
+          font-family: var(--_ctm-dn-vo-wt-dn-ft-fy-dc, var(--_tst-dn-vo-wt-dn-ft-fy-dc)),
+            sans-serif;
+          font-size: var(--_ctm-dn-vo-wt-dn-ft-se-dc, var(--_tst-dn-vo-wt-dn-ft-se-dc));
+          font-weight: var(--_ctm-dn-vo-wt-dn-ft-wt-dc, var(--_tst-dn-vo-wt-dn-ft-wt-dc));
+          font-style: var(--_ctm-dn-vo-wt-dn-ft-se-ic-dc, var(--_tst-dn-vo-wt-dn-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-vo-wt-dn-tt-an-dc, var(--_tst-dn-vo-wt-dn-tt-an-dc));
+          letter-spacing: var(--_ctm-dn-vo-wt-dn-lr-sg-dc, var(--_tst-dn-vo-wt-dn-lr-sg-dc));
+          line-height: var(--_ctm-dn-vo-wt-dn-le-ht-dc, var(--_tst-dn-vo-wt-dn-le-ht-dc));
+          text-decoration: var(--_ctm-dn-vo-wt-dn-ue-dc);
+        }
+      }
+
+      .video__data {
+        video {
+          max-width: 100%;
+          width: 100%;
+        }
+      }
+      .video__thumbnail {
+        position: relative;
+        .placeholder__img {
+          max-width: 100%;
+          // position: absolute;
+          // left: 0;
+          // top: 0;
+        }
+
+        .video__icon {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: var(--_ctm-dn-py-pe-bd-cr, var(--_tst-dn-py-pe-bd-cr));
+          padding: 5%;
+          width: var(--_ctm-dn-py-pe-se + 40);
+          height: var(--_ctm-dn-py-pe-se + 40);
+
+          svg {
+            width: var(--_ctm-dn-py-pe-se, var(--_tst-dn-py-pe-se));
+            height: var(--_ctm-dn-py-pe-se, var(--_tst-dn-py-pe-se));
+            path {
+              stroke: var(--_ctm-dn-py-pe-in-c1, var(--_tst-dn-py-pe-in-c1));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/volume-pricing.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="volumePricing"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    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%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/widget.scss

@@ -1 +1,23 @@
-
+@import "./section.scss";
+@import "./grid.scss";
+@import "./container.scss";
+@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";

package/package.json

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