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

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.
Files changed (46) hide show
  1. package/dist/brand-basic-elements.scss +214 -0
  2. package/dist/brand.scss +43 -0
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +1 -1
  5. package/dist/bundle-basic-elements.scss +421 -0
  6. package/dist/bundle.scss +42 -0
  7. package/dist/button.scss +189 -47
  8. package/dist/category.scss +42 -0
  9. package/dist/categoryWidget.scss +29 -0
  10. package/dist/container.scss +24 -3
  11. package/dist/editor-core.scss +86 -13
  12. package/dist/faq.scss +301 -78
  13. package/dist/gallery-slider-temp.scss +520 -432
  14. package/dist/grid.scss +27 -10
  15. package/dist/hotspot.scss +6 -10
  16. package/dist/htmlElement.js +1 -1
  17. package/dist/icons.js +1 -1
  18. package/dist/image-temp.scss +18 -8
  19. package/dist/index.js +1 -1
  20. package/dist/map.scss +5 -12
  21. package/dist/product-basic-elements.scss +7 -3
  22. package/dist/product-highlights.scss +4 -9
  23. package/dist/product-image.scss +4 -1
  24. package/dist/productDetails.scss +2 -1
  25. package/dist/repeater-embla-controls.scss +202 -0
  26. package/dist/repeater-item.scss +3 -1
  27. package/dist/repeater.scss +106 -9
  28. package/dist/section.scss +39 -17
  29. package/dist/stack.scss +53 -11
  30. package/dist/sub-category.scss +43 -0
  31. package/dist/tabs.scss +135 -0
  32. package/dist/text-temp.scss +1 -1
  33. package/dist/types/builder/elements/brand-image/index.d.ts +30 -0
  34. package/dist/types/builder/elements/tab/index.d.ts +25 -8
  35. package/dist/types/builder/enums/index.d.ts +37 -3
  36. package/dist/types/builder/index.d.ts +2 -1
  37. package/dist/types/builder/interfaces/global.d.ts +11 -0
  38. package/dist/types/builder/tools/element-edit/brandImage.d.ts +27 -0
  39. package/dist/types/builder/tools/element-edit/filters.d.ts +46 -0
  40. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +1 -1
  41. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  42. package/dist/types/builder/tools/element-edit/repeater.d.ts +22 -2
  43. package/dist/types/builder/tools/element-edit/tabs.d.ts +259 -36
  44. package/dist/types/global/types.d.ts +1 -0
  45. package/dist/variant-picker.scss +3 -2
  46. package/package.json +1 -1
package/dist/types/builder/tools/element-edit/tabs.d.ts CHANGED
@@ -14,8 +14,20 @@ export interface TabControlInterface {
14
14
  overflowTabs: CMSIBCommonInterface;
15
15
  spacingBetweenRows: CMSIBCommonInterface;
16
16
  }
17
+ export declare enum SelectorKeysEnum {
18
+ LAYOUT = "layout",
19
+ CONTENT = "content",
20
+ DESIGN = "design",
21
+ DEFAULT_STATE = "defaultState",
22
+ HOVER_STATE = "hoverState",
23
+ SELECTED_STATE = "selected",
24
+ TAB_CONTAINER = "tabContainer",
25
+ TAB_CONTENT_CONTAINER = "tabContentContainer",
26
+ TABS = "tabs"
27
+ }
17
28
  export declare const getDefaultData: () => {
18
29
  layout: {
30
+ selectorKey: SelectorKeysEnum;
19
31
  adjustment: CMSIBCommonInterface | undefined;
20
32
  width: {
21
33
  [key: string]: any;
@@ -45,21 +57,25 @@ export declare const getDefaultData: () => {
45
57
  };
46
58
  tabSpacing: {
47
59
  value: number;
60
+ unit: number;
48
61
  property: string;
49
62
  propertyType: CMSElementEditTypes;
50
63
  };
51
- tabContainer: {
64
+ tabContainerSpacing: {
52
65
  value: number;
66
+ unit: number;
53
67
  property: string;
54
68
  propertyType: CMSElementEditTypes;
55
69
  };
56
70
  horizontalPadding: {
57
71
  value: number;
72
+ unit: number;
58
73
  property: string;
59
74
  propertyType: CMSElementEditTypes;
60
75
  };
61
76
  verticalPadding: {
62
77
  value: number;
78
+ unit: number;
63
79
  property: string;
64
80
  propertyType: CMSElementEditTypes;
65
81
  };
@@ -70,11 +86,13 @@ export declare const getDefaultData: () => {
70
86
  };
71
87
  spacingBetweenRows: {
72
88
  value: number;
89
+ unit: number;
73
90
  property: string;
74
91
  propertyType: CMSElementEditTypes;
75
92
  };
76
93
  };
77
94
  design: {
95
+ selectorKey: SelectorKeysEnum;
78
96
  tabContainer: {
79
97
  borderColor: CMSIBCommonInterface;
80
98
  borderStyle: CMSIBCommonInterface;
@@ -92,24 +110,100 @@ export declare const getDefaultData: () => {
92
110
  saturation: import("../../interfaces/global").CMSIBSizeInterface;
93
111
  highlights: import("../../interfaces/global").CMSIBSizeInterface;
94
112
  shadows: import("../../interfaces/global").CMSIBSizeInterface;
113
+ selectorKey: SelectorKeysEnum;
95
114
  };
96
115
  tabs: {
97
- borderColor: CMSIBCommonInterface;
98
- borderStyle: CMSIBCommonInterface;
99
- borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
100
- showBorder: CMSIBCommonInterface;
101
- backgroundColor: CMSIBCommonInterface;
102
- showShadow: CMSIBCommonInterface;
103
- shadowColor: CMSIBCommonInterface;
104
- blur: import("../../interfaces/global").CMSIBSizeInterface;
105
- spread: import("../../interfaces/global").CMSIBSizeInterface;
106
- angle: import("../../interfaces/global").CMSIBSizeInterface;
107
- borderRadius: import("../../interfaces/global").CSSPaddingValues;
108
- exposure: import("../../interfaces/global").CMSIBSizeInterface;
109
- contrast: import("../../interfaces/global").CMSIBSizeInterface;
110
- saturation: import("../../interfaces/global").CMSIBSizeInterface;
111
- highlights: import("../../interfaces/global").CMSIBSizeInterface;
112
- shadows: import("../../interfaces/global").CMSIBSizeInterface;
116
+ selectorKey: SelectorKeysEnum;
117
+ defaultState: {
118
+ theme: CMSIBCommonInterface;
119
+ font: CMSIBCommonInterface;
120
+ fontSize: import("../../interfaces/global").CMSIBSizeInterface;
121
+ textColor: CMSIBCommonInterface;
122
+ bold: CMSIBCommonInterface;
123
+ italic: CMSIBCommonInterface;
124
+ linethrough: CMSIBCommonInterface;
125
+ underline: CMSIBCommonInterface;
126
+ textAlign: CMSIBCommonInterface;
127
+ characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
128
+ lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
129
+ borderColor: CMSIBCommonInterface;
130
+ borderStyle: CMSIBCommonInterface;
131
+ borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
132
+ showBorder: CMSIBCommonInterface;
133
+ backgroundColor: CMSIBCommonInterface;
134
+ showShadow: CMSIBCommonInterface;
135
+ shadowColor: CMSIBCommonInterface;
136
+ blur: import("../../interfaces/global").CMSIBSizeInterface;
137
+ spread: import("../../interfaces/global").CMSIBSizeInterface;
138
+ angle: import("../../interfaces/global").CMSIBSizeInterface;
139
+ borderRadius: import("../../interfaces/global").CSSPaddingValues;
140
+ exposure: import("../../interfaces/global").CMSIBSizeInterface;
141
+ contrast: import("../../interfaces/global").CMSIBSizeInterface;
142
+ saturation: import("../../interfaces/global").CMSIBSizeInterface;
143
+ highlights: import("../../interfaces/global").CMSIBSizeInterface;
144
+ shadows: import("../../interfaces/global").CMSIBSizeInterface;
145
+ selectorKey: SelectorKeysEnum;
146
+ };
147
+ hoverState: {
148
+ theme: CMSIBCommonInterface;
149
+ font: CMSIBCommonInterface;
150
+ fontSize: import("../../interfaces/global").CMSIBSizeInterface;
151
+ textColor: CMSIBCommonInterface;
152
+ bold: CMSIBCommonInterface;
153
+ italic: CMSIBCommonInterface;
154
+ linethrough: CMSIBCommonInterface;
155
+ underline: CMSIBCommonInterface;
156
+ textAlign: CMSIBCommonInterface;
157
+ characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
158
+ lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
159
+ borderColor: CMSIBCommonInterface;
160
+ borderStyle: CMSIBCommonInterface;
161
+ borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
162
+ showBorder: CMSIBCommonInterface;
163
+ backgroundColor: CMSIBCommonInterface;
164
+ showShadow: CMSIBCommonInterface;
165
+ shadowColor: CMSIBCommonInterface;
166
+ blur: import("../../interfaces/global").CMSIBSizeInterface;
167
+ spread: import("../../interfaces/global").CMSIBSizeInterface;
168
+ angle: import("../../interfaces/global").CMSIBSizeInterface;
169
+ borderRadius: import("../../interfaces/global").CSSPaddingValues;
170
+ exposure: import("../../interfaces/global").CMSIBSizeInterface;
171
+ contrast: import("../../interfaces/global").CMSIBSizeInterface;
172
+ saturation: import("../../interfaces/global").CMSIBSizeInterface;
173
+ highlights: import("../../interfaces/global").CMSIBSizeInterface;
174
+ shadows: import("../../interfaces/global").CMSIBSizeInterface;
175
+ selectorKey: SelectorKeysEnum;
176
+ };
177
+ selectedState: {
178
+ theme: CMSIBCommonInterface;
179
+ font: CMSIBCommonInterface;
180
+ fontSize: import("../../interfaces/global").CMSIBSizeInterface;
181
+ textColor: CMSIBCommonInterface;
182
+ bold: CMSIBCommonInterface;
183
+ italic: CMSIBCommonInterface;
184
+ linethrough: CMSIBCommonInterface;
185
+ underline: CMSIBCommonInterface;
186
+ textAlign: CMSIBCommonInterface;
187
+ characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
188
+ lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
189
+ borderColor: CMSIBCommonInterface;
190
+ borderStyle: CMSIBCommonInterface;
191
+ borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
192
+ showBorder: CMSIBCommonInterface;
193
+ backgroundColor: CMSIBCommonInterface;
194
+ showShadow: CMSIBCommonInterface;
195
+ shadowColor: CMSIBCommonInterface;
196
+ blur: import("../../interfaces/global").CMSIBSizeInterface;
197
+ spread: import("../../interfaces/global").CMSIBSizeInterface;
198
+ angle: import("../../interfaces/global").CMSIBSizeInterface;
199
+ borderRadius: import("../../interfaces/global").CSSPaddingValues;
200
+ exposure: import("../../interfaces/global").CMSIBSizeInterface;
201
+ contrast: import("../../interfaces/global").CMSIBSizeInterface;
202
+ saturation: import("../../interfaces/global").CMSIBSizeInterface;
203
+ highlights: import("../../interfaces/global").CMSIBSizeInterface;
204
+ shadows: import("../../interfaces/global").CMSIBSizeInterface;
205
+ selectorKey: SelectorKeysEnum;
206
+ };
113
207
  };
114
208
  tabContentContainer: {
115
209
  borderColor: CMSIBCommonInterface;
@@ -128,29 +222,158 @@ export declare const getDefaultData: () => {
128
222
  saturation: import("../../interfaces/global").CMSIBSizeInterface;
129
223
  highlights: import("../../interfaces/global").CMSIBSizeInterface;
130
224
  shadows: import("../../interfaces/global").CMSIBSizeInterface;
131
- };
132
- arrows: {
133
- borderColor: CMSIBCommonInterface;
134
- borderStyle: CMSIBCommonInterface;
135
- borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
136
- showBorder: CMSIBCommonInterface;
137
- backgroundColor: CMSIBCommonInterface;
138
- showShadow: CMSIBCommonInterface;
139
- shadowColor: CMSIBCommonInterface;
140
- blur: import("../../interfaces/global").CMSIBSizeInterface;
141
- spread: import("../../interfaces/global").CMSIBSizeInterface;
142
- angle: import("../../interfaces/global").CMSIBSizeInterface;
143
- borderRadius: import("../../interfaces/global").CSSPaddingValues;
144
- exposure: import("../../interfaces/global").CMSIBSizeInterface;
145
- contrast: import("../../interfaces/global").CMSIBSizeInterface;
146
- saturation: import("../../interfaces/global").CMSIBSizeInterface;
147
- highlights: import("../../interfaces/global").CMSIBSizeInterface;
148
- shadows: import("../../interfaces/global").CMSIBSizeInterface;
225
+ selectorKey: SelectorKeysEnum;
149
226
  };
150
227
  };
151
228
  content: {
229
+ selectorKey: SelectorKeysEnum;
152
230
  tabContent: {
153
- value: string[];
231
+ value: {
232
+ title: string;
233
+ contentSource: {
234
+ title: string;
235
+ content: {
236
+ id: string;
237
+ attributes: {
238
+ BUILDER: {
239
+ dataDivType: string;
240
+ dataType: string;
241
+ dataElementType: string;
242
+ dataDropElement: string;
243
+ dataElementSubChild: boolean;
244
+ };
245
+ HTML: {
246
+ role: string;
247
+ id: string;
248
+ };
249
+ CUSTOM: {};
250
+ };
251
+ childIds: never[];
252
+ children: {};
253
+ styles: {
254
+ minHeight: string;
255
+ minWidth: string;
256
+ maxWidth: string;
257
+ maxHeight: string;
258
+ gridArea: string;
259
+ display: string;
260
+ boxSizing: string;
261
+ rowGap: string;
262
+ columnGap: string;
263
+ gridTemplateRows: string;
264
+ gridTemplateColumns: string;
265
+ color?: string | undefined;
266
+ fontSize?: string | undefined;
267
+ fontWeight?: string | undefined;
268
+ lineHeight?: string | number | undefined;
269
+ fontFamily?: string | undefined;
270
+ textAlign?: string | undefined;
271
+ textDecoration?: string | undefined;
272
+ letterSpacing?: string | undefined;
273
+ backgroundColor?: string | undefined;
274
+ backgroundImage?: string | undefined;
275
+ backgroundSize?: string | undefined;
276
+ backgroundRepeat?: string | undefined;
277
+ backgroundPosition?: string | undefined;
278
+ width?: string | number | undefined;
279
+ height?: string | number | undefined;
280
+ margin?: string | number | undefined;
281
+ padding?: string | number | undefined;
282
+ border?: string | undefined;
283
+ borderRadius?: string | number | undefined;
284
+ overflow?: string | undefined;
285
+ marginLeft?: string | undefined;
286
+ marginTop?: string | undefined;
287
+ marginBottom?: string | undefined;
288
+ marginRight?: string | undefined;
289
+ flexDirection?: string | undefined;
290
+ justifyContent?: string | undefined;
291
+ alignItems?: string | undefined;
292
+ flexWrap?: string | undefined;
293
+ flex?: string | number | undefined;
294
+ justifySelf?: string | undefined;
295
+ alignSelf?: string | undefined;
296
+ position?: string | undefined;
297
+ top?: string | number | undefined;
298
+ right?: string | number | undefined;
299
+ bottom?: string | number | undefined;
300
+ left?: string | number | undefined;
301
+ zIndex?: number | undefined;
302
+ opacity?: number | undefined;
303
+ boxShadow?: string | undefined;
304
+ cursor?: string | undefined;
305
+ transition?: string | undefined;
306
+ transform?: string | undefined;
307
+ visibility?: string | undefined;
308
+ objectFit?: string | undefined;
309
+ objectPosition?: string | undefined;
310
+ };
311
+ responsiveBehaviour: string;
312
+ uniqueKey: string;
313
+ isMaximized: boolean;
314
+ editedStyles: {
315
+ "--_ctm-con-lt-wh": string;
316
+ "--_ctm-con-lt-ht": string;
317
+ "--_ctm-con-lt-mn": string;
318
+ "--_ctm-con-lt-pg": string;
319
+ "--_ctm-con-lt-ow": string;
320
+ "--_ctm-con-lt-sl": string;
321
+ "--_ctm-con-lt-dy-sr": string;
322
+ "--_ctm-con-lt-pn": string;
323
+ "--_ctm-con-lt-pn-to": string;
324
+ "--_ctm-con-dn-bd-cr": string;
325
+ "--_ctm-con-dn-br-cr": string;
326
+ "--_ctm-con-dn-br-se": string;
327
+ "--_ctm-con-dn-br-wh": string;
328
+ "--_ctm-con-dn-sw-cr": string;
329
+ "--_ctm-con-dn-sw-br": string;
330
+ "--_ctm-con-dn-sw-sd": string;
331
+ "--_ctm-con-dn-sw-ae": string;
332
+ };
333
+ controls: {
334
+ layout: {};
335
+ design: {
336
+ showBorder: {
337
+ value: boolean;
338
+ propertyType: string;
339
+ };
340
+ showShadow: {
341
+ value: boolean;
342
+ property: string;
343
+ propertyType: string;
344
+ };
345
+ };
346
+ dataConnector: {
347
+ dataConnector: {
348
+ value: {
349
+ isConnected: boolean;
350
+ key: string;
351
+ url: null;
352
+ enum: null;
353
+ dataSource: null;
354
+ selectedItem: null;
355
+ keyMappings: null;
356
+ };
357
+ property: string;
358
+ propertyType: string;
359
+ };
360
+ dynamicData: {
361
+ value: null;
362
+ property: string;
363
+ propertyType: string;
364
+ };
365
+ };
366
+ elementMetaData: {
367
+ id: string;
368
+ dataElementType: string;
369
+ propertyType: string;
370
+ };
371
+ };
372
+ sort: number;
373
+ };
374
+ };
375
+ key: string;
376
+ }[];
154
377
  property: string;
155
378
  propertyType: CMSElementEditTypes;
156
379
  };
package/dist/types/global/types.d.ts CHANGED
@@ -36,3 +36,4 @@ export type StackDirectionType = "horizontal" | "vertical";
36
36
  export type ObjectFitValue = "fill" | "contain" | "cover" | "none" | "scale-down" | string;
37
37
  export type ObjectPositionValue = string;
38
38
  export type RepeaterDisplayStyleType = "grid" | "list" | "slider" | "cards";
39
+ export type RepeaterSliderControlTypes = "Arrows & Dots" | "Arrows" | "Dots" | "None";
package/dist/variant-picker.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @import "./functions.scss";
3
+ @use "./functions.scss";
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="variantPicker"] {
6
6
  // width: var(--_lt-wh);
@@ -42,6 +42,7 @@
42
42
  display: flex;
43
43
  flex-direction: column;
44
44
  gap: var(--_ctm-lt-on-te-ve-sg);
45
+ padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
45
46
  .title {
46
47
  margin-bottom: 4px;
47
48
  }
@@ -54,7 +55,7 @@
54
55
  flex-direction: column;
55
56
  }
56
57
  .item {
57
- padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
58
+ // padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
58
59
  background-color: var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr);
59
60
  // height: 30px;
60
61
  // width: 30px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.1.99",
3
+ "version": "0.2.00",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {