@sc-360-v2/storefront-cms-library 0.1.98 → 0.2.0

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

@@ -0,0 +1,46 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: CMSIBCommonInterface;
+    openFilterAs: CMSIBCommonInterface;
+    displayType: CMSIBCommonInterface;
+    selectionType: CMSIBCommonInterface;
+    allowSearchForEachFilter: CMSIBCommonInterface;
+    dividerBetweenFilters: CMSIBCommonInterface;
+    maxValuesToDisplay: CMSIBCommonInterface;
+    overflowControl: CMSIBCommonInterface;
+    showSubCategoriesFilter: CMSIBCommonInterface;
+    showBrandsFilter: CMSIBCommonInterface;
+    showPriceFilter: CMSIBCommonInterface;
+    showCustomAttributesFilter: CMSIBCommonInterface;
+    firstFilterAlwaysOpen: CMSIBCommonInterface;
+    allowMultipleFiltersOpen: CMSIBCommonInterface;
+    horizontalSpacingBetweenItems: CMSIBCommonInterface;
+    sliderControl: CMSIBCommonInterface;
+    controlPosition: CMSIBCommonInterface;
+    loopImages: CMSIBCommonInterface;
+    displaySliderScrollbar: CMSIBCommonInterface;
+    autoplay: CMSIBCommonInterface;
+    openItemsIn: CMSIBCommonInterface;
+    showMoreItems: CMSIBCommonInterface;
+    verticalSpacingBetweenItems: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+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: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -62,10 +62,10 @@ export interface selfDesignInterface {
         angle: CMSIBCommonInterface;
         spread: CMSIBCommonInterface;
         blur: CMSIBCommonInterface;
-        position: controlInterface;
     };
     tooltipDesign: {
         selectorKey: string;
+        position: controlInterface;
         tooltipWidth: controlInterface;
         tooltipHeight: controlInterface;
         horizontalAlignment: controlInterface;

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

@@ -44,4 +44,10 @@ import * as repeater from "./repeater";
 import * as repeaterItem from "./repeaterItem";
 import * as menu from "./menu";
 import * as productOptions from "./productOptions";
-export { amountEstimator, bulkVariantPicker, button, code, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, };
+import * as brand from "./brand";
+import * as bundle from "./bundle";
+import * as category from "./category";
+import * as subCategory from "./subCategory";
+import * as brandImage from "./brandImage";
+import * as filters from "./filters";
+export { amountEstimator, bulkVariantPicker, button, code, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, };

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

@@ -1,6 +1,6 @@
-import { AlignItemsValue, JustifyContentValue, RepeaterDisplayStyleType } from "../../../../components/global/types";
+import { AlignItemsValue, JustifyContentValue, RepeaterDisplayStyleType, RepeaterSliderControlTypes } from "../../../../components/global/types";
 import { CMSCSSUnitTypesEnums } from "../../enums";
-import { CMSIBCommonInterface, PaddingProps } from "../../interfaces/global";
+import { CMSIBCommonInterface, CMSIBSizeInterface, PaddingProps } from "../../interfaces/global";
 import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
 interface selfLayoutInterface {
     selectorKey: string;
@@ -26,6 +26,26 @@ interface selfLayoutInterface {
         value: string | number | any;
         unit: CMSCSSUnitTypesEnums;
     };
+    setItemsPerSlide: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+    };
+    sliderControl: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: RepeaterSliderControlTypes;
+    };
+    arrowIconSize: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    dotSize: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    controlActiveColor: CMSIBCommonInterface;
+    selectedSlideControlTheme?: CMSIBCommonInterface;
+    autoplay: CMSIBCommonInterface;
+    autoplayDuration: CMSIBSizeInterface;
+    stopOnMouseEnter: CMSIBCommonInterface;
+    stopOnInteraction: CMSIBCommonInterface;
 }
 export interface selfDesignInterface {
     selectorKey: string;

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

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

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/package.json

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