@sc-360-v2/storefront-cms-library 0.3.3 → 0.3.4

package/dist/product-options.scss

@@ -165,7 +165,7 @@
           var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
         );
 
-        // new
+        // for shadow
         --_sf-hr-sw-ae: var(
           --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
           var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
@@ -182,6 +182,46 @@
           --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
           var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
         );
+
+        // for font
+
+        --_sf-hr-cr: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-cr,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-cr, var(--_ctm-dn-on-ve-se-hr-se-cr))
+        );
+        --_sf-hr-ft-fy: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-ft-fy,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-on-ve-se-hr-se-ft-fy))
+        );
+        --_sf-hr-ft-se: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-ft-se,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se, var(--_ctm-dn-on-ve-se-hr-se-ft-se))
+        );
+        --_sf-hr-ft-wt: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-ft-wt,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-on-ve-se-hr-se-ft-wt))
+        );
+        --_sf-hr-ft-se-ic: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-ft-se-ic,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-on-ve-se-hr-se-ft-se-ic))
+        );
+        --_sf-hr-tt-an: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-tt-an,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-tt-an, var(--_ctm-dn-on-ve-se-hr-se-tt-an))
+        );
+        --_sf-hr-lr-sg: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-lr-sg,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-on-ve-se-hr-se-lr-sg))
+        );
+        --_sf-hr-le-ht: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-le-ht,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-le-ht, var(--_ctm-dn-on-ve-se-hr-se-le-ht))
+        );
+
+        --_sf-hr-ue: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-ue,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
+        );
       }
       .swatch__item[data-selected="true"] {
         --_sf-sd-bd-cr: var(
@@ -217,6 +257,46 @@
           --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
           var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
         );
+
+        // for font
+
+        --_sf-sd-cr: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-cr,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-cr, var(--_ctm-dn-on-ve-se-sd-se-cr))
+        );
+        --_sf-sd-ft-fy: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-ft-fy,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-on-ve-se-sd-se-ft-fy))
+        );
+        --_sf-sd-ft-se: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-ft-se,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se, var(--_ctm-dn-on-ve-se-sd-se-ft-se))
+        );
+        --_sf-sd-ft-wt: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-ft-wt,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-on-ve-se-sd-se-ft-wt))
+        );
+        --_sf-sd-ft-se-ic: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-ft-se-ic,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-on-ve-se-sd-se-ft-se-ic))
+        );
+        --_sf-sd-tt-an: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-tt-an,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-tt-an, var(--_ctm-dn-on-ve-se-sd-se-tt-an))
+        );
+        --_sf-sd-lr-sg: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-lr-sg,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-on-ve-se-sd-se-lr-sg))
+        );
+        --_sf-sd-le-ht: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-le-ht,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-le-ht, var(--_ctm-dn-on-ve-se-sd-se-le-ht))
+        );
+
+        --_sf-sd-ue: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-ue,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
+        );
       }
 
       .swatch__item {
@@ -228,8 +308,16 @@
         justify-content: center;
         // border: 1px solid gray;
 
-        height: prepareMediaVariable(--_ctm-lt-sh-im-se);
-        width: prepareMediaVariable(--_ctm-lt-sh-im-se);
+        &[data-display-style="Swatch"] {
+          height: prepareMediaVariable(--_ctm-lt-sh-im-se);
+          width: prepareMediaVariable(--_ctm-lt-sh-im-se);
+        }
+        &[data-display-style="Single Select"] {
+          min-width: 20px;
+          min-height: 20px;
+          box-sizing: content-box;
+        }
+
         gap: prepareMediaVariable(--_ctm-lt-im-gp);
         padding: prepareMediaVariable(--_ctm-lt-sh-im-pg);
 
@@ -245,7 +333,8 @@
           var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
           var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
           var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
-        & div {
+        & div,
+        .product-select-image {
           height: 100%;
           width: 100%;
         }
@@ -257,24 +346,27 @@
           border-radius: 5px;
         }
         &[data-background-shape="capsule"] {
-          --toggle-height: var(--_ctm-lt-sh-im-se);
-          --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
+          &:not([data-display-style="Single Select"]) {
+            --toggle-height: var(--_ctm-lt-sh-im-se);
+            --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
 
-          width: var(--toggle-width);
-          height: var(--toggle-height);
+            width: var(--toggle-width);
+            height: var(--toggle-height);
+          }
 
           border-radius: var(--toggle-height); /* Full pill shape */
           box-sizing: border-box;
         }
         &[data-swatch-shape="circle"] {
-          & div {
+          & div,
+          .product-select-image {
             border-radius: 50%;
-            width: var(--_ctm-lt-sh-im-se);
           }
           // border-radius: 50%;
         }
         &[data-swatch-shape="capsule"] {
-          & div {
+          & div,
+          .product-select-image {
             // border-radius: 50%;
             width: 100%;
             height: 100%;
@@ -302,14 +394,15 @@
           }
 
           &[data-swatch-shape-hover="circle"] {
-            & div {
+            & div,
+            .product-select-image {
               border-radius: 50%;
-              width: var(--_ctm-lt-sh-im-se);
             }
             // border-radius: 50%;
           }
           &[data-swatch-shape-hover="capsule"] {
-            & div {
+            & div,
+            .product-select-image {
               // border-radius: 50%;
               width: 100%;
               height: 100%;
@@ -317,7 +410,8 @@
             }
           }
           &[data-swatch-shape-hover="square"] {
-            & div {
+            & div,
+            .product-select-image {
               border-radius: 5px;
             }
           }
@@ -353,13 +447,14 @@
             box-sizing: border-box;
           }
           &[data-swatch-shape-selected="circle"] {
-            & div {
+            & div,
+            .product-select-image {
               border-radius: 50%;
-              width: var(--_ctm-lt-sh-im-se);
             }
           }
           &[data-swatch-shape-selected="capsule"] {
-            & div {
+            & div,
+            .product-select-image {
               // border-radius: 50%;
               width: 100%;
               height: 100%;
@@ -367,11 +462,28 @@
             }
           }
           &[data-swatch-shape-selected="square"] {
-            & div {
+            & div,
+            .product-select-image {
               border-radius: 5px;
             }
           }
         }
+
+        .option__value__text {
+          color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-cr));
+          font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-fy)),
+            sans-serif;
+          font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
+          font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
+          font-style: var(
+            --_sf-sd-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic)
+          );
+          text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
+          letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
+          line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
+          text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
+        }
       }
 
       .disabled {
@@ -410,6 +522,19 @@
         }
       }
 
+      .option__value__text {
+        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-cr));
+        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-fy)),
+          sans-serif;
+        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
+        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
+        font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic));
+        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
+        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
+        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
+        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
+      }
+
       .product-select-image {
         height: 100%;
         width: 100%;

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

@@ -6,6 +6,7 @@ export interface CMSElementEditPopupLayoutInterface {
         [key: string]: CMSIBSizeInterface | any;
     };
     height?: CMSIBSizeInterface;
+    minHeight?: CMSIBSizeInterface;
     margin?: CSSPaddingValues;
     padding?: CSSPaddingValues;
     overflowContent?: CMSIBCommonInterface;

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

@@ -31,6 +31,30 @@ interface selfLayoutInterface {
 }
 interface selfDesignInterface {
     selectorKey: string;
+    filtersWidget: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    checkboxStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    clearAllText: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    chipButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    optionLabels: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    moreButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
 }
 export declare enum SelectorKeysEnum {
     LAYOUT = "layout",
@@ -41,7 +65,21 @@ export declare enum SelectorKeysEnum {
     SELECTED_STATE = "selected",
     TAB_CONTAINER = "tabContainer",
     TAB_CONTENT_CONTAINER = "tabContentContainer",
-    TABS = "tabs"
+    TABS = "tabs",
+    FILTERS_WIDGET = "filtersWidget",
+    CHECKBOX_STYLE = "checkboxStyle",
+    CHECKBOX_DEFAULT_STATE = "checkboxDefaultState",
+    CHECKBOX_HOVER_STATE = "checkboxHoverState",
+    CLEAR_ALL_BUTTON = "clearAllText",
+    CHIP_BUTTON = "chipButton",
+    CLEAR_ALL_BUTTON_DEFAULT_STATE = "clearAllButtonDefaultState",
+    CLEAR_ALL_BUTTON_HOVER_STATE = "clearAllButtonHoverState",
+    CHIP_BUTTON_DEFAULT_STATE = "chipButtonDefaultState",
+    CHIP_BUTTON_HOVER_STATE = "chipButtonHoverState",
+    OPTION_STYLE = "optionStyle",
+    MORE_BUTTON = "moreButton",
+    MORE_BUTTON_DEFAULT_STATE = "moreButtonDefaultState",
+    MORE_BUTTON_HOVER_STATE = "moreButtonHoverState"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -1,11 +1,13 @@
-import { AlignItemsValue, JustifyContentValue, LayouterDisplayStyleType } from "../../../../components/global/types";
-import { CMSCSSUnitTypesEnums } from "../../enums";
+import { AlignItemsValue, FlexDirectionValue, JustifyContentValue, LayouterProDisplayStyleType } from "../../../../components/global/types";
 import { CMSIBCommonInterface, PaddingProps } from "../../interfaces/global";
 import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
 interface selfLayoutInterface {
     selectorKey: string;
     displayStyle: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
-        value: LayouterDisplayStyleType;
+        value: LayouterProDisplayStyleType;
+    };
+    direction?: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: FlexDirectionValue;
     };
     itemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & PaddingProps;
     justifyContent: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
@@ -18,14 +20,6 @@ interface selfLayoutInterface {
         isShow: boolean;
         value: string | number | any;
     };
-    minColumnWidth: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
-        value: string | number | any;
-        unit: CMSCSSUnitTypesEnums;
-    };
-    minRowHeight: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
-        value: string | number | any;
-        unit: CMSCSSUnitTypesEnums;
-    };
 }
 export interface selfDesignInterface {
     selectorKey: string;

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

@@ -16,11 +16,12 @@ export interface ButtonLayoutInterface {
     showCompareListAs: CMSIBCommonInterface;
     addToQuote: CMSIBCommonInterface;
     addToOrderTemplate: CMSIBCommonInterface;
-    notifyMeInventoryNotifications: CMSIBCommonInterface;
-    downloadProductInformation: CMSIBCommonInterface;
+    notifyMe: CMSIBCommonInterface;
+    download: CMSIBCommonInterface;
     displayStyle: CMSIBCommonInterface;
     itemSpacing: CMSIBCommonInterface;
     maxItemsToDisplay: CMSIBCommonInterface;
+    noOfItemsToShow: CMSIBCommonInterface;
     overflowItems: CMSIBCommonInterface;
     openItemsIn: CMSIBCommonInterface;
     addToCartMetaData: CMSIBCommonInterface;

package/dist/types/global/types.d.ts

@@ -41,6 +41,7 @@ export type RepeaterSliderControlTypes = "Arrows & Dots" | "Arrows" | "Dots" | "
 export type DeviceVisibilityByOptionsType = "HTML" | "CSS" | "NONE";
 export type CustomEventCallback<T = any> = (data: T) => void;
 export type LayouterDisplayStyleType = "rows" | "columns" | "slider" | "grid";
+export type LayouterProDisplayStyleType = "flex-box" | "grid";
 export type SpotlightDisplayStyleType = "carousel" | "slider";
 export type SpotlightSectionType = "single" | "multi";
 export type SpotlightLineDisplayType = "solid" | "dots";