@sc-360-v2/storefront-cms-library 0.2.70 → 0.2.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,43 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="marchandiserSets"] {
8
+ // width: var(--_sf-con-nw-wh);
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-march-ele-nw-wh-vl,
15
+ var(--_ctm-tab-march-ele-nw-wh-vl, var(--_ctm-march-ele-nw-wh-vl))
16
+ )
17
+ )
18
+ );
19
+ // width: calc(1% * var(--_ctm-prod-lt-wh, auto));
20
+ // width: ;
21
+
22
+ // width: 100%;
23
+ // height: var(--_ctm-pro-lt-ht) !important;
24
+ // width: 100%;
25
+ height: auto;
26
+ margin: var(--_ctm-march-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
27
+ background: var(--_ctm-march-dn-bd-cr);
28
+ min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
29
+
30
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
31
+ // min-height: 100px !important;
32
+ // }
33
+
34
+ & > div {
35
+ &.wrapper {
36
+ width: 100%;
37
+ // grid-template-rows: auto !important;
38
+ grid-template-columns: 100% !important;
39
+ // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
40
+ }
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,98 @@
1
+ /// <reference types="react" />
2
+ export declare const FB_GRID_COLS = 12;
3
+ export declare const FB_GRID_ROWS = 1;
4
+ export declare const FB_CELL_HEIGHT = 70;
5
+ export declare const FB_CONTAINER_PADDING = 20;
6
+ export declare const FB_GRID_MIN_WIDTH = 4;
7
+ export declare enum FBModeEnum {
8
+ Edit = 1,
9
+ Preview = 2
10
+ }
11
+ export declare enum FormComponentTypeEnum {
12
+ Input = "input",
13
+ Select = "select",
14
+ Textarea = "textarea",
15
+ Button = "button",
16
+ Content = "content"
17
+ }
18
+ export declare enum FormElementTypeEnum {
19
+ Text = "text",
20
+ Email = "email",
21
+ Tel = "tel",
22
+ Url = "url",
23
+ Number = "number",
24
+ Password = "password",
25
+ Date = "date",
26
+ Textarea = "textarea",
27
+ Select = "select",
28
+ Checkbox = "checkbox",
29
+ Radio = "radio",
30
+ Button = "button",
31
+ Heading1 = "heading1",
32
+ Heading2 = "heading2",
33
+ Paragraph = "paragraph",
34
+ Image = "image",
35
+ Video = "video",
36
+ ListUnordered = "list-unordered",
37
+ ListOrdered = "list-ordered",
38
+ Link = "link",
39
+ Html = "html"
40
+ }
41
+ export interface FormComponentConfig {
42
+ icon?: string;
43
+ label: {
44
+ value: string;
45
+ state: boolean;
46
+ };
47
+ required: boolean;
48
+ placeholder: {
49
+ value: string;
50
+ state: boolean;
51
+ };
52
+ description?: {
53
+ value: string;
54
+ state: boolean;
55
+ };
56
+ limitCharacters?: {
57
+ value: {
58
+ min: number;
59
+ max: number;
60
+ };
61
+ state: boolean;
62
+ };
63
+ fieldKey?: string;
64
+ options?: string[];
65
+ src?: string;
66
+ captionsSrc?: string;
67
+ href?: string;
68
+ html?: string;
69
+ type: FormComponentTypeEnum;
70
+ fieldType: FormElementTypeEnum;
71
+ w: number;
72
+ h: number;
73
+ }
74
+ export interface SidebarElementItem extends FormComponentConfig {
75
+ categoryId?: number;
76
+ subcategoryId?: number;
77
+ }
78
+ export interface FormGridProps {
79
+ layout: FormGridLayoutInterface[];
80
+ width: number;
81
+ mode: FBModeEnum;
82
+ onLayoutChange?: (layout: any) => void;
83
+ isDraggable?: boolean;
84
+ children: React.ReactNode;
85
+ }
86
+ export interface FormGridLayoutInterface {
87
+ w: number;
88
+ h: number;
89
+ x: number;
90
+ y: number;
91
+ i: string;
92
+ moved: boolean;
93
+ static: boolean;
94
+ maxH?: number;
95
+ maxW?: number;
96
+ minH?: number;
97
+ minW?: number;
98
+ }
@@ -0,0 +1,71 @@
1
+ import { CommonStyleProperties } from "../../../global/style-properties";
2
+ import { DisplayValue, MarginValue, PaddingValue, ResponsiveBehaviourTypes } from "../../../global/types";
3
+ import { CMSHTMLAttributes } from "../../../global/attributes";
4
+ import { CMSGridsContainer } from "../grid";
5
+ import { BuilderAttributes } from "../common";
6
+ export interface MarchandiserSetsAttributes extends CMSHTMLAttributes {
7
+ role?: string;
8
+ ariaLabel?: string;
9
+ ariaDescribedBy?: string;
10
+ id?: string;
11
+ className?: string;
12
+ lang?: string;
13
+ dataMeta?: string;
14
+ }
15
+ export interface MarchandiserSetsStyleAttributes extends CommonStyleProperties {
16
+ minHeight?: string;
17
+ height?: string;
18
+ minWidth?: string;
19
+ maxWidth?: string;
20
+ maxHeight?: string;
21
+ gridArea?: string;
22
+ display?: DisplayValue;
23
+ boxSizing?: string;
24
+ rowGap?: string;
25
+ columnGap?: string;
26
+ gridTemplateRows?: string;
27
+ gridTemplateColumns?: string;
28
+ padding?: PaddingValue;
29
+ marginLeft?: MarginValue;
30
+ marginTop?: MarginValue;
31
+ marginBottom?: MarginValue;
32
+ marginRight?: MarginValue;
33
+ }
34
+ export declare const getDefaultStyles: () => MarchandiserSetsStyleAttributes;
35
+ export declare const getSectionDefaultStyles: () => MarchandiserSetsStyleAttributes;
36
+ export interface VariationConditionInterface {
37
+ customer?: any[];
38
+ user?: any[];
39
+ relation?: any;
40
+ }
41
+ export interface SectionVariationInterface {
42
+ condition?: VariationConditionInterface;
43
+ attributes?: {
44
+ BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType">;
45
+ HTML?: MarchandiserSetsAttributes;
46
+ CUSTOM?: any;
47
+ };
48
+ styles?: MarchandiserSetsStyleAttributes;
49
+ editedStyles?: CommonStyleProperties;
50
+ sectionStyles?: CommonStyleProperties;
51
+ grids?: CMSGridsContainer;
52
+ responsiveBehaviour: ResponsiveBehaviourTypes;
53
+ highestGrid?: number | any;
54
+ gtc?: CMSGridsContainer;
55
+ gtr?: CMSGridsContainer;
56
+ childIds: any[];
57
+ }
58
+ export interface CMSMarchandiserSetsInterface {
59
+ id?: string | number;
60
+ uniqueKey?: string | number;
61
+ variations?: {
62
+ [key: string]: SectionVariationInterface;
63
+ };
64
+ styles?: MarchandiserSetsStyleAttributes;
65
+ sort?: number;
66
+ dataContentType?: string;
67
+ isMaximized?: boolean;
68
+ parentKey?: any;
69
+ childIdsV2?: any[];
70
+ children?: any;
71
+ }
@@ -42,4 +42,5 @@ export interface TabsV2ElementInterface {
42
42
  isMaximized?: boolean;
43
43
  parentKey?: any;
44
44
  childIdsV2?: any[];
45
+ builderAt?: number;
45
46
  }
@@ -61,7 +61,8 @@ export declare enum CMSToolIdTypes {
61
61
  tabsWrapper = "cms-tabs-wrapper",
62
62
  gridSwapBtn = "cms-grid-swap-btn",
63
63
  lightBox = "cms_lt_bx_mn",
64
- lightBoxV2Wrapper = "cms-light-box-wrapper"
64
+ lightBoxV2Wrapper = "cms-light-box-wrapper",
65
+ marchandiserSetsWrapper = "cms-marchandiser-sets-wrapper"
65
66
  }
66
67
  export declare enum CMSElementSelectors {
67
68
  iframeSelector = "iframe[data-title='iframe__playground']",
@@ -119,7 +120,8 @@ export declare enum CMSElementSelectors {
119
120
  tabsV2Element = "div[data-element-type='tabs-v2']",
120
121
  imageHotspot = "div[data-element-type='imageHotspot']",
121
122
  gridSwapBtn = "div[data-cms-tool='cms-grid-swap-btn']",
122
- lightBox = "#cms_lt_bx_mn"
123
+ lightBox = "#cms_lt_bx_mn",
124
+ marchandiserSetsElement = "div[data-element-type='marchandiserSets']"
123
125
  }
124
126
  export declare enum CMSToolAttributes {
125
127
  id = "data-cms-tool",
@@ -285,6 +287,7 @@ export declare const CMSElementsListEnum: {
285
287
  LINE: string;
286
288
  TABS_V2: string;
287
289
  TABS_CONTAINER: string;
290
+ MARCHANDISER_SETS: string;
288
291
  };
289
292
  export declare enum CMSResponsiveModeEnums {
290
293
  DESKTOP = "desktop",
@@ -59,4 +59,6 @@ import * as itemStockSchema from "./elements/item-stock/index";
59
59
  import * as lineItemSchema from "./elements/line/index";
60
60
  import * as tabsV2Schema from "./elements/tab-v2/index";
61
61
  import * as tabsContainerSchema from "./elements/tab-container/index";
62
- export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, };
62
+ import * as marchandiserSetsSchema from "./elements/marchandiser-sets/index";
63
+ import * as formBuilder from "./elements/form-builder/index";
64
+ export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, };
@@ -7,6 +7,7 @@ export declare enum SelectorKeysEnum {
7
7
  LAYOUT = "layout",
8
8
  CONTENT = "content",
9
9
  DESIGN = "design",
10
+ CART_ITEM_STYLES = "cartItemStyles",
10
11
  CART_HEADING_STYLES = "cartHeadingStyles",
11
12
  CART_ACTION_STYLES = "cartActionStyles",
12
13
  PRODUCT_ACTIONS_STYLES = "productActionsStyles",
@@ -58,7 +59,7 @@ export declare const getDefaultData: () => {
58
59
  propertyType: CMSElementEditTypes;
59
60
  };
60
61
  continueShoppingLinkTo: {
61
- value: string;
62
+ value: null;
62
63
  property: string;
63
64
  propertyType: CMSElementEditTypes;
64
65
  };
@@ -115,7 +116,16 @@ export declare const getDefaultData: () => {
115
116
  };
116
117
  design: {
117
118
  selectorKey: SelectorKeysEnum;
118
- cardHeadingStyles: {
119
+ cartItemStyles: {
120
+ selectorKey: SelectorKeysEnum;
121
+ padding: import("../../interfaces/global").CSSPaddingValues | undefined;
122
+ margin: import("../../interfaces/global").CSSPaddingValues | undefined;
123
+ height: import("../../interfaces/global").CMSIBSizeInterface | undefined;
124
+ showShadow: CMSIBCommonInterface;
125
+ shadowColor: CMSIBCommonInterface;
126
+ borderRadius: import("../../interfaces/global").CSSPaddingValues;
127
+ };
128
+ cartHeadingStyles: {
119
129
  theme: CMSIBCommonInterface;
120
130
  font: CMSIBCommonInterface;
121
131
  fontSize: import("../../interfaces/global").CMSIBSizeInterface;
@@ -135,7 +145,7 @@ export declare const getDefaultData: () => {
135
145
  spread: import("../../interfaces/global").CMSIBSizeInterface;
136
146
  angle: import("../../interfaces/global").CMSIBSizeInterface;
137
147
  };
138
- cardActionStyles: {
148
+ cartActionStyles: {
139
149
  theme: CMSIBCommonInterface;
140
150
  font: CMSIBCommonInterface;
141
151
  fontSize: import("../../interfaces/global").CMSIBSizeInterface;
@@ -298,7 +308,7 @@ export declare const getDefaultData: () => {
298
308
  property: string;
299
309
  propertyType: CMSElementEditTypes;
300
310
  };
301
- showOptions: {
311
+ showProductOptions: {
302
312
  value: boolean;
303
313
  property: string;
304
314
  propertyType: CMSElementEditTypes;
@@ -74,4 +74,5 @@ import * as allocationDetails from "./allocationDetails";
74
74
  import * as line from "./line";
75
75
  import * as tabsV2 from "./tabsV2";
76
76
  import * as tabContainer from "./tabContainer";
77
- export { amountEstimator, bulkVariantPicker, button, code, staticText, 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, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, allocationDetails, line, tabsV2, tabContainer, };
77
+ import * as marchandiserSets from "./marchandiserSets";
78
+ export { amountEstimator, bulkVariantPicker, button, code, staticText, 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, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, };
@@ -0,0 +1,147 @@
1
+ import { CMSCSSUnitTypesEnums, CMSElementEditTypes } from "../../enums";
2
+ import { CMSIBCommonInterface } from "../../interfaces/global";
3
+ import { CMSElementEditPopupInterface } from "./common";
4
+ export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
5
+ }
6
+ export interface selfDesignInterface {
7
+ selectorKey: string;
8
+ }
9
+ export declare enum SelectorKeysEnum {
10
+ LAYOUT = "layout",
11
+ CONTENT = "content",
12
+ DESIGN = "design",
13
+ DATA_CONNECTOR = "dataConnector"
14
+ }
15
+ export declare const getDefaultData: () => {
16
+ layout: {
17
+ selectorKey: SelectorKeysEnum;
18
+ width: {
19
+ value: string;
20
+ unit: CMSCSSUnitTypesEnums;
21
+ };
22
+ height: {
23
+ value: string;
24
+ unit: CMSCSSUnitTypesEnums;
25
+ property?: any;
26
+ propertyType?: any;
27
+ isReadOnly?: boolean | undefined;
28
+ parentRef?: string | undefined;
29
+ };
30
+ margin: import("../../interfaces/global").CSSPaddingValues | undefined;
31
+ padding: import("../../interfaces/global").CSSPaddingValues | undefined;
32
+ overflowContent: CMSIBCommonInterface | undefined;
33
+ scrollDirection: CMSIBCommonInterface | undefined;
34
+ displayScrollbar: CMSIBCommonInterface | undefined;
35
+ positionType: CMSIBCommonInterface | undefined;
36
+ pinTo: CMSIBCommonInterface | undefined;
37
+ };
38
+ design: {
39
+ exposure: import("../../interfaces/global").CMSIBSizeInterface;
40
+ contrast: import("../../interfaces/global").CMSIBSizeInterface;
41
+ saturation: import("../../interfaces/global").CMSIBSizeInterface;
42
+ highlights: import("../../interfaces/global").CMSIBSizeInterface;
43
+ shadows: import("../../interfaces/global").CMSIBSizeInterface;
44
+ theme: CMSIBCommonInterface;
45
+ font: CMSIBCommonInterface;
46
+ fontSize: import("../../interfaces/global").CMSIBSizeInterface;
47
+ textColor: CMSIBCommonInterface;
48
+ bold: CMSIBCommonInterface;
49
+ italic: CMSIBCommonInterface;
50
+ linethrough: CMSIBCommonInterface;
51
+ underline: CMSIBCommonInterface;
52
+ textAlign: CMSIBCommonInterface;
53
+ characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
54
+ lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
55
+ backgroundColor: CMSIBCommonInterface;
56
+ backgroundRepeat: CMSIBCommonInterface;
57
+ backgroundSize: CMSIBCommonInterface;
58
+ backgroundAttachment: CMSIBCommonInterface;
59
+ backgroundPosition: CMSIBCommonInterface;
60
+ backgroundPositionX: CMSIBCommonInterface;
61
+ backgroundPositionY: CMSIBCommonInterface;
62
+ backgroundImage: CMSIBCommonInterface;
63
+ selectorKey: SelectorKeysEnum;
64
+ borderColor: CMSIBCommonInterface;
65
+ borderStyle: CMSIBCommonInterface;
66
+ borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
67
+ showBorder: CMSIBCommonInterface;
68
+ showShadow: CMSIBCommonInterface;
69
+ shadowColor: CMSIBCommonInterface;
70
+ blur: import("../../interfaces/global").CMSIBSizeInterface;
71
+ spread: import("../../interfaces/global").CMSIBSizeInterface;
72
+ angle: import("../../interfaces/global").CMSIBSizeInterface;
73
+ borderRadius: import("../../interfaces/global").CSSPaddingValues;
74
+ };
75
+ content: {
76
+ selectorKey: SelectorKeysEnum;
77
+ title: {
78
+ value: string;
79
+ property: string;
80
+ propertyType: CMSElementEditTypes;
81
+ };
82
+ showProductTitle: {
83
+ value: boolean;
84
+ property: string;
85
+ propertyType: CMSElementEditTypes;
86
+ };
87
+ showQuantity: {
88
+ value: boolean;
89
+ property: string;
90
+ propertyType: CMSElementEditTypes;
91
+ };
92
+ showPrice: {
93
+ value: boolean;
94
+ property: string;
95
+ propertyType: CMSElementEditTypes;
96
+ };
97
+ showProductCode: {
98
+ value: boolean;
99
+ property: string;
100
+ propertyType: CMSElementEditTypes;
101
+ };
102
+ showOptions: {
103
+ value: boolean;
104
+ property: string;
105
+ propertyType: CMSElementEditTypes;
106
+ };
107
+ showProductImage: {
108
+ value: boolean;
109
+ property: string;
110
+ propertyType: CMSElementEditTypes;
111
+ };
112
+ showCustomizations: {
113
+ value: boolean;
114
+ property: string;
115
+ propertyType: CMSElementEditTypes;
116
+ };
117
+ showEdit: {
118
+ value: boolean;
119
+ property: string;
120
+ propertyType: CMSElementEditTypes;
121
+ };
122
+ showMoveToWishlist: {
123
+ value: boolean;
124
+ property: string;
125
+ propertyType: CMSElementEditTypes;
126
+ };
127
+ showRemove: {
128
+ value: boolean;
129
+ property: string;
130
+ propertyType: CMSElementEditTypes;
131
+ };
132
+ };
133
+ dataConnector: {
134
+ selectorKey: SelectorKeysEnum;
135
+ dataConnector: {
136
+ value: {
137
+ dataSource: string;
138
+ childSource: string;
139
+ keyMappings: {
140
+ image: string;
141
+ };
142
+ };
143
+ property: string;
144
+ propertyType: CMSElementEditTypes;
145
+ };
146
+ };
147
+ };
@@ -35,7 +35,12 @@ export declare const getDefaultData: () => {
35
35
  property: string;
36
36
  propertyType: CMSElementEditTypes;
37
37
  };
38
- tabAlignment: {
38
+ alignItems: {
39
+ value: string;
40
+ property: string;
41
+ propertyType: CMSElementEditTypes;
42
+ };
43
+ justifyContent: {
39
44
  value: string;
40
45
  property: string;
41
46
  propertyType: CMSElementEditTypes;
package/dist/widget.scss CHANGED
@@ -73,3 +73,4 @@
73
73
  @use "./form-preview.scss";
74
74
  @use "./customization-tree.scss";
75
75
  @use "./modal.scss";
76
+ @use "./marchandiserSets.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.2.70",
3
+ "version": "0.2.72",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {