@sc-360-v2/storefront-cms-library 0.1.99 → 0.2.1

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

@@ -14,8 +14,20 @@ export interface TabControlInterface {
     overflowTabs: CMSIBCommonInterface;
     spacingBetweenRows: CMSIBCommonInterface;
 }
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design",
+    DEFAULT_STATE = "defaultState",
+    HOVER_STATE = "hoverState",
+    SELECTED_STATE = "selected",
+    TAB_CONTAINER = "tabContainer",
+    TAB_CONTENT_CONTAINER = "tabContentContainer",
+    TABS = "tabs"
+}
 export declare const getDefaultData: () => {
     layout: {
+        selectorKey: SelectorKeysEnum;
         adjustment: CMSIBCommonInterface | undefined;
         width: {
             [key: string]: any;
@@ -45,21 +57,25 @@ export declare const getDefaultData: () => {
         };
         tabSpacing: {
             value: number;
+            unit: number;
             property: string;
             propertyType: CMSElementEditTypes;
         };
-        tabContainer: {
+        tabContainerSpacing: {
             value: number;
+            unit: number;
             property: string;
             propertyType: CMSElementEditTypes;
         };
         horizontalPadding: {
             value: number;
+            unit: number;
             property: string;
             propertyType: CMSElementEditTypes;
         };
         verticalPadding: {
             value: number;
+            unit: number;
             property: string;
             propertyType: CMSElementEditTypes;
         };
@@ -70,11 +86,13 @@ export declare const getDefaultData: () => {
         };
         spacingBetweenRows: {
             value: number;
+            unit: number;
             property: string;
             propertyType: CMSElementEditTypes;
         };
     };
     design: {
+        selectorKey: SelectorKeysEnum;
         tabContainer: {
             borderColor: CMSIBCommonInterface;
             borderStyle: CMSIBCommonInterface;
@@ -92,24 +110,100 @@ export declare const getDefaultData: () => {
             saturation: import("../../interfaces/global").CMSIBSizeInterface;
             highlights: import("../../interfaces/global").CMSIBSizeInterface;
             shadows: import("../../interfaces/global").CMSIBSizeInterface;
+            selectorKey: SelectorKeysEnum;
         };
         tabs: {
-            borderColor: CMSIBCommonInterface;
-            borderStyle: CMSIBCommonInterface;
-            borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
-            showBorder: CMSIBCommonInterface;
-            backgroundColor: 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;
-            exposure: import("../../interfaces/global").CMSIBSizeInterface;
-            contrast: import("../../interfaces/global").CMSIBSizeInterface;
-            saturation: import("../../interfaces/global").CMSIBSizeInterface;
-            highlights: import("../../interfaces/global").CMSIBSizeInterface;
-            shadows: import("../../interfaces/global").CMSIBSizeInterface;
+            selectorKey: SelectorKeysEnum;
+            defaultState: {
+                theme: CMSIBCommonInterface;
+                font: CMSIBCommonInterface;
+                fontSize: import("../../interfaces/global").CMSIBSizeInterface;
+                textColor: CMSIBCommonInterface;
+                bold: CMSIBCommonInterface;
+                italic: CMSIBCommonInterface;
+                linethrough: CMSIBCommonInterface;
+                underline: CMSIBCommonInterface;
+                textAlign: CMSIBCommonInterface;
+                characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
+                lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
+                borderColor: CMSIBCommonInterface;
+                borderStyle: CMSIBCommonInterface;
+                borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+                showBorder: CMSIBCommonInterface;
+                backgroundColor: 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;
+                exposure: import("../../interfaces/global").CMSIBSizeInterface;
+                contrast: import("../../interfaces/global").CMSIBSizeInterface;
+                saturation: import("../../interfaces/global").CMSIBSizeInterface;
+                highlights: import("../../interfaces/global").CMSIBSizeInterface;
+                shadows: import("../../interfaces/global").CMSIBSizeInterface;
+                selectorKey: SelectorKeysEnum;
+            };
+            hoverState: {
+                theme: CMSIBCommonInterface;
+                font: CMSIBCommonInterface;
+                fontSize: import("../../interfaces/global").CMSIBSizeInterface;
+                textColor: CMSIBCommonInterface;
+                bold: CMSIBCommonInterface;
+                italic: CMSIBCommonInterface;
+                linethrough: CMSIBCommonInterface;
+                underline: CMSIBCommonInterface;
+                textAlign: CMSIBCommonInterface;
+                characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
+                lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
+                borderColor: CMSIBCommonInterface;
+                borderStyle: CMSIBCommonInterface;
+                borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+                showBorder: CMSIBCommonInterface;
+                backgroundColor: 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;
+                exposure: import("../../interfaces/global").CMSIBSizeInterface;
+                contrast: import("../../interfaces/global").CMSIBSizeInterface;
+                saturation: import("../../interfaces/global").CMSIBSizeInterface;
+                highlights: import("../../interfaces/global").CMSIBSizeInterface;
+                shadows: import("../../interfaces/global").CMSIBSizeInterface;
+                selectorKey: SelectorKeysEnum;
+            };
+            selectedState: {
+                theme: CMSIBCommonInterface;
+                font: CMSIBCommonInterface;
+                fontSize: import("../../interfaces/global").CMSIBSizeInterface;
+                textColor: CMSIBCommonInterface;
+                bold: CMSIBCommonInterface;
+                italic: CMSIBCommonInterface;
+                linethrough: CMSIBCommonInterface;
+                underline: CMSIBCommonInterface;
+                textAlign: CMSIBCommonInterface;
+                characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
+                lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
+                borderColor: CMSIBCommonInterface;
+                borderStyle: CMSIBCommonInterface;
+                borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+                showBorder: CMSIBCommonInterface;
+                backgroundColor: 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;
+                exposure: import("../../interfaces/global").CMSIBSizeInterface;
+                contrast: import("../../interfaces/global").CMSIBSizeInterface;
+                saturation: import("../../interfaces/global").CMSIBSizeInterface;
+                highlights: import("../../interfaces/global").CMSIBSizeInterface;
+                shadows: import("../../interfaces/global").CMSIBSizeInterface;
+                selectorKey: SelectorKeysEnum;
+            };
         };
         tabContentContainer: {
             borderColor: CMSIBCommonInterface;
@@ -128,29 +222,158 @@ export declare const getDefaultData: () => {
             saturation: import("../../interfaces/global").CMSIBSizeInterface;
             highlights: import("../../interfaces/global").CMSIBSizeInterface;
             shadows: import("../../interfaces/global").CMSIBSizeInterface;
-        };
-        arrows: {
-            borderColor: CMSIBCommonInterface;
-            borderStyle: CMSIBCommonInterface;
-            borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
-            showBorder: CMSIBCommonInterface;
-            backgroundColor: 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;
-            exposure: import("../../interfaces/global").CMSIBSizeInterface;
-            contrast: import("../../interfaces/global").CMSIBSizeInterface;
-            saturation: import("../../interfaces/global").CMSIBSizeInterface;
-            highlights: import("../../interfaces/global").CMSIBSizeInterface;
-            shadows: import("../../interfaces/global").CMSIBSizeInterface;
+            selectorKey: SelectorKeysEnum;
         };
     };
     content: {
+        selectorKey: SelectorKeysEnum;
         tabContent: {
-            value: string[];
+            value: {
+                title: string;
+                contentSource: {
+                    title: string;
+                    content: {
+                        id: string;
+                        attributes: {
+                            BUILDER: {
+                                dataDivType: string;
+                                dataType: string;
+                                dataElementType: string;
+                                dataDropElement: string;
+                                dataElementSubChild: boolean;
+                            };
+                            HTML: {
+                                role: string;
+                                id: string;
+                            };
+                            CUSTOM: {};
+                        };
+                        childIds: never[];
+                        children: {};
+                        styles: {
+                            minHeight: string;
+                            minWidth: string;
+                            maxWidth: string;
+                            maxHeight: string;
+                            gridArea: string;
+                            display: string;
+                            boxSizing: string;
+                            rowGap: string;
+                            columnGap: string;
+                            gridTemplateRows: string;
+                            gridTemplateColumns: string;
+                            color?: string | undefined;
+                            fontSize?: string | undefined;
+                            fontWeight?: string | undefined;
+                            lineHeight?: string | number | undefined;
+                            fontFamily?: string | undefined;
+                            textAlign?: string | undefined;
+                            textDecoration?: string | undefined;
+                            letterSpacing?: string | undefined;
+                            backgroundColor?: string | undefined;
+                            backgroundImage?: string | undefined;
+                            backgroundSize?: string | undefined;
+                            backgroundRepeat?: string | undefined;
+                            backgroundPosition?: string | undefined;
+                            width?: string | number | undefined;
+                            height?: string | number | undefined;
+                            margin?: string | number | undefined;
+                            padding?: string | number | undefined;
+                            border?: string | undefined;
+                            borderRadius?: string | number | undefined;
+                            overflow?: string | undefined;
+                            marginLeft?: string | undefined;
+                            marginTop?: string | undefined;
+                            marginBottom?: string | undefined;
+                            marginRight?: string | undefined;
+                            flexDirection?: string | undefined;
+                            justifyContent?: string | undefined;
+                            alignItems?: string | undefined;
+                            flexWrap?: string | undefined;
+                            flex?: string | number | undefined;
+                            justifySelf?: string | undefined;
+                            alignSelf?: string | undefined;
+                            position?: string | undefined;
+                            top?: string | number | undefined;
+                            right?: string | number | undefined;
+                            bottom?: string | number | undefined;
+                            left?: string | number | undefined;
+                            zIndex?: number | undefined;
+                            opacity?: number | undefined;
+                            boxShadow?: string | undefined;
+                            cursor?: string | undefined;
+                            transition?: string | undefined;
+                            transform?: string | undefined;
+                            visibility?: string | undefined;
+                            objectFit?: string | undefined;
+                            objectPosition?: string | undefined;
+                        };
+                        responsiveBehaviour: string;
+                        uniqueKey: string;
+                        isMaximized: boolean;
+                        editedStyles: {
+                            "--_ctm-con-lt-wh": string;
+                            "--_ctm-con-lt-ht": string;
+                            "--_ctm-con-lt-mn": string;
+                            "--_ctm-con-lt-pg": string;
+                            "--_ctm-con-lt-ow": string;
+                            "--_ctm-con-lt-sl": string;
+                            "--_ctm-con-lt-dy-sr": string;
+                            "--_ctm-con-lt-pn": string;
+                            "--_ctm-con-lt-pn-to": string;
+                            "--_ctm-con-dn-bd-cr": string;
+                            "--_ctm-con-dn-br-cr": string;
+                            "--_ctm-con-dn-br-se": string;
+                            "--_ctm-con-dn-br-wh": string;
+                            "--_ctm-con-dn-sw-cr": string;
+                            "--_ctm-con-dn-sw-br": string;
+                            "--_ctm-con-dn-sw-sd": string;
+                            "--_ctm-con-dn-sw-ae": string;
+                        };
+                        controls: {
+                            layout: {};
+                            design: {
+                                showBorder: {
+                                    value: boolean;
+                                    propertyType: string;
+                                };
+                                showShadow: {
+                                    value: boolean;
+                                    property: string;
+                                    propertyType: string;
+                                };
+                            };
+                            dataConnector: {
+                                dataConnector: {
+                                    value: {
+                                        isConnected: boolean;
+                                        key: string;
+                                        url: null;
+                                        enum: null;
+                                        dataSource: null;
+                                        selectedItem: null;
+                                        keyMappings: null;
+                                    };
+                                    property: string;
+                                    propertyType: string;
+                                };
+                                dynamicData: {
+                                    value: null;
+                                    property: string;
+                                    propertyType: string;
+                                };
+                            };
+                            elementMetaData: {
+                                id: string;
+                                dataElementType: string;
+                                propertyType: string;
+                            };
+                        };
+                        sort: number;
+                    };
+                };
+                key: string;
+            }[];
             property: string;
             propertyType: CMSElementEditTypes;
         };

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

@@ -36,3 +36,4 @@ export type StackDirectionType = "horizontal" | "vertical";
 export type ObjectFitValue = "fill" | "contain" | "cover" | "none" | "scale-down" | string;
 export type ObjectPositionValue = string;
 export type RepeaterDisplayStyleType = "grid" | "list" | "slider" | "cards";
+export type RepeaterSliderControlTypes = "Arrows & Dots" | "Arrows" | "Dots" | "None";

package/dist/variant-picker.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@import "./functions.scss";
+// @use "./functions.scss";
 [data-div-type="element"] {
   &[data-element-type="variantPicker"] {
     // width: var(--_lt-wh);
@@ -42,6 +42,7 @@
         display: flex;
         flex-direction: column;
         gap: var(--_ctm-lt-on-te-ve-sg);
+        padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
         .title {
           margin-bottom: 4px;
         }
@@ -54,7 +55,7 @@
             flex-direction: column;
           }
           .item {
-            padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
+            // padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
             background-color: var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr);
             // height: 30px;
             // width: 30px;

package/dist/widget.scss

@@ -1,45 +1,48 @@
-@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";
-@import "./product-highlights.scss";
-@import "./payment-methods.scss";
-@import "./shipping-estimator.scss";
-@import "./amount-estimator.scss";
-@import "./quantity-selector.scss";
-@import "./product-promotions.scss";
-@import "./bulk-variant-picker.scss";
-@import "./variant-picker.scss";
-@import "./uom-selector.scss";
-@import "./product-image.scss";
-@import "./product-basic-elements.scss";
-@import "./lightbox.scss";
-@import "./cart.scss";
-@import "./profile.scss";
-@import "./product.scss";
-@import "./productDetails.scss";
-@import "./menu.scss";
-@import "./product-options.scss";
-
-@import "./section.scss";
-@import "./grid.scss";
-@import "./container.scss";
-@import "./stack.scss";
-@import "./repeater.scss";
-@import "./repeater-item.scss";
+// Note: please import only widget related css only in this
+@use "./video.scss";
+@use "./social.scss";
+@use "./faq.scss";
+@use "./table.scss";
+@use "./tabs.scss";
+@use "./button.scss";
+@use "./code-temp.scss";
+@use "./embed-temp.scss";
+@use "./text-temp.scss";
+@use "./image-temp.scss";
+@use "./gallery-slider-temp.scss";
+@use "./scroll.scss";
+@use "./countdown.scss";
+@use "./hotspot.scss";
+@use "./map.scss";
+@use "./product-price.scss";
+@use "./product-actions.scss";
+@use "./volume-pricing.scss";
+@use "./product-inventory.scss";
+@use "./store-locations.scss";
+@use "./pickup-locations.scss";
+@use "./product-highlights.scss";
+@use "./payment-methods.scss";
+@use "./shipping-estimator.scss";
+@use "./amount-estimator.scss";
+@use "./quantity-selector.scss";
+@use "./product-promotions.scss";
+@use "./bulk-variant-picker.scss";
+@use "./variant-picker.scss";
+@use "./uom-selector.scss";
+@use "./product-image.scss";
+@use "./product-basic-elements.scss";
+@use "./lightbox.scss";
+@use "./cart.scss";
+@use "./profile.scss";
+@use "./product.scss";
+@use "./productDetails.scss";
+@use "./menu.scss";
+@use "./product-options.scss";
+@use "./brand-basic-elements.scss";
+@use "./brand.scss";
+@use "./bundle-basic-elements.scss";
+@use "./bundle.scss";
+@use "./category.scss";
+@use "./sub-category.scss";
+@use "./categoryWidget.scss";
+@use "./filters.scss";

package/package.json

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

package/dist/functions.scss

@@ -1,133 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-
-$breakPoints: (
-  desktop: (
-    min: 1024px,
-    max: 99999px,
-  ),
-  mobile: (
-    min: 100px,
-    max: 1023px,
-  ),
-  laptop: (
-    min: 1024px,
-    max: 1367px,
-  ),
-  small: (
-    min: 50px,
-    max: 399px,
-  ),
-);
-
-@mixin prepareMediaQueries($list) {
-  @each $mediaKey, $mediaValue in $breakPoints {
-    $maxWidth: map.get($mediaValue, max);
-    $minWidth: map.get($mediaValue, min);
-    @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
-      @each $key, $value in $defaultValues {
-        $value1: map.get($value, $mediaKey);
-        @if ($value1 != null) {
-          #{$key}: $value1;
-        }
-      }
-    }
-  }
-}
-
-@mixin restrictToLinesShow($count, $type: "optional") {
-  display: -webkit-box;
-  -webkit-line-clamp: $count;
-  overflow: clip;
-  text-overflow: ellipsis;
-  @if ($type == "optional") {
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-orient: $type;
-  }
-}
-
-@function getListOfResponsive($desktop, $mobile, $latop: "optional") {
-  $list: (
-    desktop: $desktop,
-    mobile: $mobile,
-  );
-  @if ($latop != "optional") {
-    $list: map-merge(
-      $list,
-      (
-        laptop: $latop,
-      )
-    );
-  }
-  @return $list;
-}
-
-@function getTranstionValue($property, $duration: "normal") {
-  $dur: var(--_anim-duration);
-  @if ($duration == "slow") {
-    $dur: var(--_anim-duration-slow);
-  }
-  @return $property #{$dur} var(--_anim-timing-function-v4);
-}
-
-@function getRepeatColWidth($colcount, $colgap) {
-  @return repeat(
-    var($colcount),
-    calc((100% / var($colcount)) - (((var($colcount) - 1) * (var($colgap))) / (var($colcount))))
-  );
-}
-
-@function getCommonHasNavContainer() {
-  $css: ();
-  $props: (
-    display: var(--_d-flex),
-    flex-wrap: wrap,
-    justify-content: space-between,
-    gap: var(--_default-row-gap) var(--_default-col-gap),
-  );
-  $css: map-merge($css, $props);
-  @return $css;
-}
-
-@mixin prepareCustomClassCSSProps($props) {
-  @each $key, $value in $props {
-    @if ($key == class) {
-      @each $classKey, $classValue in $value {
-        .#{$classKey} {
-          @each $key1, $value1 in $classValue {
-            @if ($key1 == common) {
-              @each $key2, $value2 in $value1 {
-                #{$key2}: #{$value2};
-              }
-            } @else {
-              @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
-                @each $key2, $value2 in $value1 {
-                  #{$key2}: #{$value2};
-                }
-              }
-            }
-          }
-          // @include getcssprops($classValue, $breakPoints);
-        }
-      }
-    } @else {
-      #{$key} {
-        @each $key1, $value1 in $value {
-          @if ($key1 == common) {
-            @each $key2, $value2 in $value1 {
-              #{$key2}: #{$value2};
-            }
-          } @else {
-            @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
-              @each $key2, $value2 in $value1 {
-                #{$key2}: #{$value2};
-              }
-            }
-          }
-          // @include getcssprops($value, $breakPoints);
-        }
-      }
-    }
-  }
-}