@sc-360-v2/storefront-cms-library 0.3.85 → 0.3.87

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 (26) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bundle.scss +1 -1
  3. package/dist/bundleDetails.scss +1 -1
  4. package/dist/cart-details.scss +0 -4
  5. package/dist/embroider-preview-element.scss +94 -0
  6. package/dist/embroider-template-1.scss +417 -0
  7. package/dist/embroidery.scss +177 -0
  8. package/dist/icons.js +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/my-templates.scss +250 -268
  11. package/dist/request-for-quotes.scss +9 -6
  12. package/dist/types/builder/elements/embroidery/index.d.ts +39 -0
  13. package/dist/types/builder/elements/form-builder/index.d.ts +1 -0
  14. package/dist/types/builder/enums/index.d.ts +4 -1
  15. package/dist/types/builder/index.d.ts +2 -1
  16. package/dist/types/builder/tools/element-edit/allocations.d.ts +295 -0
  17. package/dist/types/builder/tools/element-edit/embroidery.d.ts +795 -0
  18. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  19. package/dist/types/builder/tools/element-edit/volumePricing copy.d.ts +207 -0
  20. package/dist/types/builder/tools/element-edit/volumePricing.d.ts +5 -78
  21. package/dist/uom-selector.scss +4 -4
  22. package/dist/volume-pricing copy 2.scss +1491 -0
  23. package/dist/volume-pricing.scss +438 -740
  24. package/dist/website.js +1 -1
  25. package/dist/widget.scss +2 -0
  26. package/package.json +1 -1
package/dist/my-templates.scss CHANGED
@@ -53,272 +53,254 @@
53
53
  // }
54
54
  }
55
55
 
56
- .template_wrapper {
57
- width: 100%;
58
-
59
- .template_section {
60
- width: 100%;
61
- display: flex;
62
- justify-content: space-between;
63
- align-items: center;
64
- margin-bottom: 24px;
65
-
66
- h2 {
67
- font-size: 24px;
68
- }
69
-
70
- .back_to_cart {
71
- color: var(--_primary-400);
72
-
73
- &:hover {
74
- text-decoration: underline;
75
- }
76
- }
77
- }
78
-
79
- .template_body {
80
- display: flex;
81
- gap: 60px;
82
- justify-content: space-between;
83
-
84
- .template_col_left {
85
- width: 100%;
86
- height: 400px;
87
- background-color: var(--_base-white);
88
-
89
- .wishlist-modal {
90
- display: flex;
91
- flex-direction: column;
92
- width: 100%;
93
-
94
- .wishlist-modal-section {
95
- // padding: 16px 24px 24px 24px;
96
- gap: 16px !important;
97
- overflow-x: hidden;
98
- display: flex;
99
- flex-direction: column;
100
-
101
- .form-group {
102
- display: flex;
103
- flex-direction: column;
104
- gap: 8px;
105
- max-width: 500px;
106
-
107
- label {
108
- display: block;
109
- font-size: 0.875rem;
110
- font-weight: 500;
111
- color: #374151;
112
- }
113
-
114
- .primary_text_label {
115
- font-weight: 700;
116
- }
117
-
118
- input[type="radio"],
119
- textarea {
120
- width: 100%;
121
- padding: 0.5rem 0.75rem;
122
- font-size: 0.875rem;
123
- border: 1px solid #d1d5db;
124
- border-radius: 0.375rem;
125
- outline: none;
126
- box-sizing: border-box;
127
- transition: all 0.2s;
128
-
129
- &:focus {
130
- border-color: #2563eb;
131
- // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
132
- }
133
-
134
- &[type="radio"] {
135
- width: fit-content;
136
- height: fit-content;
137
- }
138
- }
139
-
140
- .radio-group {
141
- display: flex;
142
- flex-direction: column;
143
- gap: 12px;
144
- font-weight: normal;
145
-
146
- .radio-label {
147
- display: inline-flex;
148
- align-items: center;
149
- gap: 8px;
150
- cursor: pointer;
151
- width: fit-content;
152
-
153
- span {
154
- color: var(--_gray-500);
155
-
156
- span {
157
- color: var(--_gray-900);
158
- font-weight: 500;
159
- }
160
- }
161
- }
162
- }
163
-
164
- textarea {
165
- min-height: 100px;
166
- resize: vertical;
167
- }
168
-
169
- .global-can-edit {
170
- display: flex;
171
- flex-direction: column;
172
- align-items: flex-start;
173
- margin-left: 20px;
174
- margin-top: 6px;
175
- gap: 6px;
176
-
177
- input[type="checkbox"] {
178
- margin: 0;
179
- width: 16px;
180
- height: 16px;
181
- cursor: pointer;
182
- }
183
-
184
- span {
185
- font-size: 0.875rem;
186
- font-weight: 600;
187
- color: var(--_gray-900);
188
- margin-left: -15px;
189
- }
190
- }
191
- }
192
-
193
- input[type="text"] {
194
- height: 40px;
195
- border: 1px solid var(--_gray-300);
196
- border-radius: 6px;
197
- padding-inline: 16px;
198
- }
199
- }
200
- }
201
-
202
- .action-buttons {
203
- display: flex;
204
- gap: 1rem;
205
- align-items: center;
206
- // justify-content: flex-end;
207
- flex: 1 1 auto;
208
- // padding: 16px 24px;
209
- // border-top: 1px solid var(--_gray-200);
210
- gap: 12px;
211
- margin-block: 24px;
212
- padding-bottom: 24px;
213
-
214
- button {
215
- padding: 12px 16px;
216
- border-radius: 6px;
217
- }
218
-
219
- .create-btn {
220
- display: flex;
221
- justify-content: center;
222
- align-items: center;
223
- gap: 8px;
224
- background-color: var(--_primary-400);
225
- color: var(--_base-white);
226
-
227
- &.disabled {
228
- opacity: 0.5;
229
- pointer-events: none;
230
- }
231
-
232
- .loader {
233
- animation: rotate-icon 1s linear infinite;
234
- display: inline-block;
235
- transform-origin: center;
236
-
237
- svg path {
238
- stroke: var(--_primary-200);
239
- }
240
- }
241
-
242
- &:hover {
243
- background-color: var(--_primary-500);
244
- }
245
- }
246
-
247
- .discard-btn {
248
- &:hover {
249
- background-color: var(--_gray-50);
250
- color: var(--_gray-900);
251
- }
252
- }
253
- }
254
- }
255
-
256
- .template_col_right {
257
- width: 400px;
258
- height: fit-content;
259
- background-color: var(--_base-white);
260
-
261
- .template_summary_wrapper {
262
- border: 1px solid var(--_gray-300);
263
- border-radius: 4px;
264
- width: 350px;
265
-
266
- .template_summary_header {
267
- padding: 12px 16px;
268
- border-bottom: 1px solid var(--_gray-300);
269
- font-size: 16px;
270
- font-weight: 600;
271
- background-color: #f5f5f5;
272
- }
273
-
274
- .template_summary_body {
275
- .template_summary_items {
276
- padding: 16px;
277
- display: flex;
278
- flex-direction: column;
279
- gap: 8px;
280
-
281
- .template_summary_item {
282
- display: flex;
283
- justify-content: space-between;
284
- gap: 16px;
285
-
286
- .template_summary_item_details {
287
- display: flex;
288
- gap: 16px;
289
-
290
- .template_summary_item_pro_info {
291
- h5 {
292
- font-size: 16px;
293
- font-weight: 600;
294
- color: var(--_gray-900);
295
- }
296
-
297
- .template_summary_item_pro_qty {
298
- color: var(--_gray-500);
299
- font-size: 12px;
300
-
301
- span {
302
- display: block;
303
- }
304
-
305
- .qty {
306
- color: var(--_gray-900);
307
- }
308
- }
309
- }
310
- }
311
-
312
- .template_summary_item_detail_price {
313
- font-size: 16px;
314
- font-weight: 600;
315
- color: var(--_gray-900);
316
- }
317
- }
318
- }
319
- }
320
- }
321
- }
322
- }
323
- }
56
+ .template_wrapper {
57
+ width: 100%;
58
+ .template_section {
59
+ width: 100%;
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ margin-bottom: 24px;
64
+ h2 {
65
+ font-size: 24px;
66
+ }
67
+ .back_to_cart {
68
+ color: var(--_primary-400);
69
+ &:hover {
70
+ text-decoration: underline;
71
+ }
72
+ }
73
+ }
74
+ .template_body {
75
+ display: flex;
76
+ gap: 60px;
77
+ justify-content: space-between;
78
+ .template_col_left {
79
+ width: 100%;
80
+ height: 400px;
81
+ background-color: var(--_base-white);
82
+ .wishlist-modal {
83
+ display: flex;
84
+ flex-direction: column;
85
+ width: 100%;
86
+
87
+ .wishlist-modal-section {
88
+ // padding: 16px 24px 24px 24px;
89
+ gap: 16px !important;
90
+ overflow-x: hidden;
91
+ display: flex;
92
+ flex-direction: column;
93
+
94
+ .form-group {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 8px;
98
+ max-width: 500px;
99
+
100
+ label {
101
+ display: block;
102
+ font-size: 0.875rem;
103
+ font-weight: 500;
104
+ color: #374151;
105
+ }
106
+
107
+ .primary_text_label {
108
+ font-weight: 700;
109
+ }
110
+
111
+ input[type="radio"],
112
+ textarea {
113
+ width: 100%;
114
+ padding: 0.5rem 0.75rem;
115
+ font-size: 0.875rem;
116
+ border: 1px solid #d1d5db;
117
+ border-radius: 0.375rem;
118
+ outline: none;
119
+ box-sizing: border-box;
120
+ transition: all 0.2s;
121
+
122
+ &:focus {
123
+ border-color: #2563eb;
124
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
125
+ }
126
+
127
+ &[type="radio"] {
128
+ width: fit-content;
129
+ height: fit-content;
130
+ }
131
+ }
132
+
133
+ .radio-group {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 12px;
137
+ font-weight: normal;
138
+
139
+ .radio-label {
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ cursor: pointer;
144
+ width: fit-content;
145
+
146
+ span {
147
+ color: var(--_gray-500);
148
+
149
+ span {
150
+ color: var(--_gray-900);
151
+ font-weight: 500;
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ textarea {
158
+ min-height: 100px;
159
+ resize: vertical;
160
+ }
161
+
162
+ .global-can-edit {
163
+ display: flex;
164
+ flex-direction: column;
165
+ align-items: flex-start;
166
+ margin-left: 20px;
167
+ margin-top: 6px;
168
+ gap: 6px;
169
+
170
+ input[type="checkbox"] {
171
+ margin: 0;
172
+ width: 16px;
173
+ height: 16px;
174
+ cursor: pointer;
175
+ }
176
+
177
+ span {
178
+ font-size: 0.875rem;
179
+ font-weight: 600;
180
+ color: var(--_gray-900);
181
+ margin-left: -15px;
182
+ }
183
+ }
184
+ }
185
+ input[type="text"] {
186
+ height: 40px;
187
+ border: 1px solid var(--_gray-300);
188
+ border-radius: 6px;
189
+ padding-inline: 16px;
190
+ }
191
+ }
192
+ }
193
+ .action-buttons {
194
+ display: flex;
195
+ gap: 1rem;
196
+ align-items: center;
197
+ // justify-content: flex-end;
198
+ flex: 1 1 auto;
199
+ // padding: 16px 24px;
200
+ // border-top: 1px solid var(--_gray-200);
201
+ gap: 12px;
202
+ margin-block: 24px;
203
+ padding-bottom: 24px;
204
+ button {
205
+ padding: 12px 16px;
206
+ border-radius: 6px;
207
+ }
208
+ .create-btn {
209
+ display: flex;
210
+ justify-content: center;
211
+ align-items: center;
212
+ gap: 8px;
213
+ background-color: var(--_primary-400);
214
+ color: var(--_base-white);
215
+ &.disabled {
216
+ opacity: 0.5;
217
+ pointer-events: none;
218
+ }
219
+ .loader {
220
+ animation: rotate-icon 1s linear infinite;
221
+ display: inline-block;
222
+ transform-origin: center;
223
+
224
+ svg path {
225
+ stroke: var(--_primary-200);
226
+ }
227
+ }
228
+
229
+ &:hover {
230
+ background-color: var(--_primary-500);
231
+ }
232
+ }
233
+ .discard-btn {
234
+ &:hover {
235
+ background-color: var(--_gray-50);
236
+ color: var(--_gray-900);
237
+ }
238
+ }
239
+ }
240
+ }
241
+ .template_col_right {
242
+ width: 400px;
243
+ height: fit-content;
244
+ background-color: var(--_base-white);
245
+ .template_summary_wrapper {
246
+ border: 1px solid var(--_gray-300);
247
+ border-radius: 4px;
248
+ width: 360px;
249
+ .template_summary_header {
250
+ padding: 12px 16px;
251
+ border-bottom: 1px solid var(--_gray-300);
252
+ font-size: 16px;
253
+ font-weight: 600;
254
+ background-color: #f5f5f5;
255
+ }
256
+ .template_summary_body {
257
+ .template_summary_items {
258
+ padding: 16px;
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 8px;
262
+ .template_summary_item {
263
+ display: flex;
264
+ justify-content: space-between;
265
+ gap: 12px;
266
+ .template_summary_item_details {
267
+ display: flex;
268
+ gap: 12px;
269
+ .template_summary_item_pro_info {
270
+ h5 {
271
+ font-size: 16px;
272
+ font-weight: 600;
273
+ color: var(--_gray-900);
274
+ width: 160px;
275
+ display: -webkit-box;
276
+ line-clamp: 2;
277
+ -webkit-line-clamp: 2;
278
+ -webkit-box-orient: vertical;
279
+ overflow: hidden;
280
+ text-overflow: ellipsis;
281
+ }
282
+ .template_summary_item_pro_qty {
283
+ color: var(--_gray-500);
284
+ font-size: 12px;
285
+ span {
286
+ display: block;
287
+ }
288
+ .qty {
289
+ color: var(--_gray-900);
290
+ }
291
+ }
292
+ }
293
+ }
294
+ .template_summary_item_detail_price {
295
+ font-size: 16px;
296
+ font-weight: 600;
297
+ color: var(--_gray-900);
298
+ }
299
+ }
300
+ }
301
+ }
302
+ }
303
+ }
304
+ }
305
+ }
324
306
  }
package/dist/request-for-quotes.scss CHANGED
@@ -65,6 +65,7 @@
65
65
  .quotes_body {
66
66
  display: flex;
67
67
  gap: 60px;
68
+ justify-content: space-between;
68
69
  .quote-items {
69
70
  flex: 2;
70
71
  .quote-item {
@@ -256,8 +257,7 @@
256
257
  background: var(--_base-white);
257
258
  border: 1px solid var(--_gray-300);
258
259
  border-radius: 4px;
259
- width: 100%;
260
- max-width: 400px;
260
+ width: 400px;
261
261
  overflow: hidden;
262
262
  height: fit-content;
263
263
  position: sticky;
@@ -358,8 +358,7 @@
358
358
  background: var(--_base-white);
359
359
  border: 1px solid var(--_gray-300);
360
360
  border-radius: 4px;
361
- width: 100%;
362
- max-width: 400px;
361
+ width: 400px;
363
362
  overflow: hidden;
364
363
  height: fit-content;
365
364
  top: 10px;
@@ -376,6 +375,8 @@
376
375
 
377
376
  &_body {
378
377
  padding: 16px;
378
+ max-height: calc(100vh - 420px);
379
+ overflow: auto;
379
380
  }
380
381
 
381
382
  &_row {
@@ -407,7 +408,6 @@
407
408
  text-decoration: underline;
408
409
  }
409
410
  }
410
-
411
411
  &_divider {
412
412
  border: none;
413
413
  border-top: 1px dashed var(--_gray-300);
@@ -446,7 +446,7 @@
446
446
 
447
447
  &_input_box {
448
448
  display: flex;
449
- align-items: center;
449
+ // align-items: center;
450
450
  border: 1px solid var(--_gray-300);
451
451
  border-radius: 6px;
452
452
  padding: 8px 12px;
@@ -581,6 +581,9 @@
581
581
  gap: 8px;
582
582
  }
583
583
  }
584
+ .cpn__checkmark__icon {
585
+ display: flex;
586
+ }
584
587
  }
585
588
 
586
589
  // .accordion-element {
package/dist/types/builder/elements/embroidery/index.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ import { CMSHTMLAttributes } from "../../../global/attributes";
2
+ import { CommonStyleProperties } from "../../../global/style-properties";
3
+ import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
4
+ import { BuilderAttributes } from "../common";
5
+ export interface EmbroideryStyleProperties extends CommonStyleProperties {
6
+ minWidth: string;
7
+ maxWidth: string;
8
+ maxHeight: string;
9
+ gridArea: string;
10
+ display: DisplayValue;
11
+ boxSizing: string;
12
+ }
13
+ export declare const getDefaultStyles: () => EmbroideryStyleProperties;
14
+ export interface CommonContainerElementAttributes extends CMSHTMLAttributes {
15
+ role?: string;
16
+ ariaLabel?: string;
17
+ ariaDescribedBy?: string;
18
+ id?: string;
19
+ className?: string;
20
+ lang?: string;
21
+ dataMeta?: string;
22
+ }
23
+ export interface EmbroideryElementInterface {
24
+ id?: string | number;
25
+ uniqueKey?: string | number;
26
+ attributes?: {
27
+ BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType" | "dataDropElement">;
28
+ HTML?: CommonContainerElementAttributes;
29
+ CUSTOM?: any;
30
+ };
31
+ styles?: EmbroideryStyleProperties;
32
+ editedStyles?: CommonStyleProperties;
33
+ responsiveBehaviour: ResponsiveBehaviourTypes;
34
+ children: any;
35
+ childIds: any[];
36
+ previewImage?: string;
37
+ parentKey?: any;
38
+ childIdsV2?: any[];
39
+ }
package/dist/types/builder/elements/form-builder/index.d.ts CHANGED
@@ -257,6 +257,7 @@ export interface FormGridLayoutInterface {
257
257
  maxW?: number;
258
258
  minH?: number;
259
259
  minW?: number;
260
+ resizeHandles?: ("s" | "e" | "w" | "n" | "se" | "sw" | "ne" | "nw")[];
260
261
  }
261
262
  export declare enum FormConfirmationOption {
262
263
  ShowMessage = 1,
package/dist/types/builder/enums/index.d.ts CHANGED
@@ -76,6 +76,7 @@ export declare enum CMSToolIdTypes {
76
76
  menuItemWrapper = "cms-menu-item-wrapper",
77
77
  animation = "flex-animation-element",
78
78
  categoryGroupsWrapper = "cms-category-groups-wrapper",
79
+ BundleWrapper = "cms-bundle-wrapper",
79
80
  cartWrapper = "cms-cart-element-wrapper"
80
81
  }
81
82
  export declare enum CMSElementSelectors {
@@ -351,6 +352,7 @@ export declare const CMSElementsListEnum: {
351
352
  MY_TEMPLATES: string;
352
353
  MY_WISHLIST: string;
353
354
  REQUEST_FOR_QUOTE: string;
355
+ EMBROIDERY: string;
354
356
  };
355
357
  export declare enum CMSResponsiveModeEnums {
356
358
  DESKTOP = "desktop",
@@ -415,7 +417,8 @@ export declare enum CMSCustomEventsListEnums {
415
417
  FORM_BUILDER_STATE = "formBuilderState",
416
418
  EMBROIDERY_PLAYGROUND_STATE = "embroideryPlaygroundState",
417
419
  FLEX_BUILDER_ANIMATION_TEMP_STATE = "flexBuilderAnimationTempState",
418
- FLEX_EDITOR_SCROLL_TRIGGER = "flexEditorScrollTrigger"
420
+ FLEX_EDITOR_SCROLL_TRIGGER = "flexEditorScrollTrigger",
421
+ FLEX_EMBROIDERY_SESSION_DATA_V2 = "flexEmbroiderySessionDataV2"
419
422
  }
420
423
  export declare enum FlexAppVersionEnums {
421
424
  NESTEDJSON = 1,