@sc-360-v2/storefront-cms-library 0.2.93 → 0.2.95

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 (38) hide show
  1. package/dist/breadcrumbs.scss +574 -269
  2. package/dist/builder.js +1 -1
  3. package/dist/button.scss +4 -1
  4. package/dist/cart-details.scss +191 -6
  5. package/dist/cartDropdownOverlay.scss +19 -4
  6. package/dist/grid.scss +21 -49
  7. package/dist/icon-list.scss +110 -0
  8. package/dist/icons.js +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/map.scss +505 -334
  11. package/dist/product-image.scss +25 -7
  12. package/dist/quantity-selector.scss +1 -0
  13. package/dist/quick-order-pad.scss +2 -2
  14. package/dist/quotes.scss +660 -62
  15. package/dist/repeater-grid-toggle.scss +58 -0
  16. package/dist/repeater.scss +181 -151
  17. package/dist/rfqs.scss +661 -62
  18. package/dist/spotlight.scss +1608 -66
  19. package/dist/types/builder/elements/form-builder/index.d.ts +42 -0
  20. package/dist/types/builder/elements/icon-list/index.d.ts +40 -0
  21. package/dist/types/builder/elements/order-status/index.d.ts +27 -0
  22. package/dist/types/builder/enums/index.d.ts +16 -2
  23. package/dist/types/builder/index.d.ts +3 -1
  24. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +15 -5
  25. package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
  26. package/dist/types/builder/tools/element-edit/icon-list.d.ts +164 -0
  27. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  28. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +15 -0
  29. package/dist/types/builder/tools/element-edit/product-image.d.ts +1 -0
  30. package/dist/types/builder/tools/element-edit/quotes.d.ts +33 -3
  31. package/dist/types/builder/tools/element-edit/repeater.d.ts +7 -0
  32. package/dist/types/builder/tools/element-edit/rfqs.d.ts +33 -3
  33. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +133 -10
  34. package/dist/types/builder/tools/element-edit/spotlight.d.ts +55 -3
  35. package/dist/types/global/types.d.ts +4 -0
  36. package/dist/variant-picker.scss +1 -0
  37. package/dist/widget.scss +1 -0
  38. package/package.json +1 -1
package/dist/repeater-grid-toggle.scss ADDED
@@ -0,0 +1,58 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $selector: ".repeater__view__toggle";
5
+ $wrapper: ".tgl__wrapper";
6
+
7
+ @mixin FlexRepeaterGridToggleCSS() {
8
+ #{$selector} {
9
+ position: var(--_p-absolute);
10
+ z-index: calc(var(--_higher-zIndex, 99999) - 2);
11
+ left: var(--_sf-rp-gt-t3-left-vl, 0px);
12
+ right: var(--_sf-rp-gt-t3-right-vl, auto);
13
+ bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
14
+ top: var(--_sf-rp-gt-t3-top-vl, 0px);
15
+
16
+ & > div {
17
+ &#{$wrapper} {
18
+ display: var(--_d-flex);
19
+ align-items: center;
20
+ border: 1px solid var(--_primary-100);
21
+ --_br-6: 6px;
22
+ --_width-40: 40px;
23
+ border-radius: var(--_br-6);
24
+ background-color: var(--_base-white);
25
+
26
+ & > button {
27
+ display: var(--_d-flex);
28
+ $size: var(--_width-40);
29
+ width: $size;
30
+ height: $size;
31
+ align-items: center;
32
+ justify-content: center;
33
+
34
+ &:first-of-type {
35
+ border-radius: var(--_br-6) 0 0 var(--_br-6);
36
+ }
37
+ &:last-of-type {
38
+ border-radius: 0 var(--_br-6) var(--_br-6) 0;
39
+ }
40
+
41
+ &[data-style-active="true"] {
42
+ --_sf-at-pt-cl: var(--_primary-500);
43
+ background: var(--_primary-100);
44
+ }
45
+
46
+ svg {
47
+ width: calc(#{$size} * 0.5);
48
+ height: calc(#{$size} * 0.5);
49
+
50
+ path {
51
+ stroke: var(--_sf-at-pt-cl, var(--_gray-500));
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }
package/dist/repeater.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./repeater-embla-controls.scss" as *;
4
+ @use "./repeater-grid-toggle.scss" as *;
5
+ @use "../functions.scss" as *;
4
6
  $childItemSelector: '[data-element-type="repeater-item"]';
5
7
  $sliderControlDragging: "[flex-slider-control-moving='true']";
6
8
  $rai: "repeater-advertise-item";
@@ -91,202 +93,230 @@ $rai: "repeater-advertise-item";
91
93
  );
92
94
  padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
93
95
 
94
- &.grd {
96
+ &[data-grid-toggle="enable"] {
97
+ position: var(--_p-relative);
98
+ @include FlexRepeaterGridToggleCSS();
99
+ }
100
+
101
+ &.lst_vw {
95
102
  & > div {
96
103
  &.wrapper {
97
- width: 100%;
98
- display: grid;
99
- grid-template-columns: repeat(
100
- auto-fit,
101
- minmax(
102
- var(
103
- --_ctm-mob-rep-lt-mn-cn-wh,
104
- var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))
105
- ),
106
- 1fr
107
- )
108
- );
104
+ display: var(--_d-grid);
105
+ row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt);
106
+ grid-template-columns: 100%;
109
107
  grid-template-rows: repeat(
110
108
  auto-fit,
111
- minmax(
112
- var(
113
- --_ctm-mob-rep-lt-mn-rw-ht,
114
- var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))
115
- ),
116
- 1fr
117
- )
109
+ minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
118
110
  );
119
111
 
120
- div {
121
- &#{$childItemSelector},
122
- &.#{$rai} {
112
+ & > div {
113
+ &#{$childItemSelector} {
123
114
  width: 100%;
124
115
  }
125
116
  }
126
117
  }
127
118
  }
128
119
  }
129
-
130
- &.crds {
131
- & > div {
132
- &.wrapper {
133
- display: flex !important;
134
- flex-wrap: wrap;
135
- width: 100%;
136
- height: auto !important;
137
- min-height: 100px !important;
138
- }
139
- }
140
- &:not(.stimsfrRws) {
120
+ &:not(.lst_vw) {
121
+ &.grd {
141
122
  & > div {
142
123
  &.wrapper {
143
- justify-content: center;
144
- & > div {
124
+ width: 100%;
125
+ display: grid;
126
+ grid-template-columns: repeat(
127
+ auto-fit,
128
+ minmax(
129
+ var(
130
+ --_ctm-mob-rep-lt-mn-cn-wh,
131
+ var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))
132
+ ),
133
+ 1fr
134
+ )
135
+ );
136
+ grid-template-rows: repeat(
137
+ auto-fit,
138
+ minmax(
139
+ var(
140
+ --_ctm-mob-rep-lt-mn-rw-ht,
141
+ var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))
142
+ ),
143
+ 1fr
144
+ )
145
+ );
146
+
147
+ div {
145
148
  &#{$childItemSelector},
146
149
  &.#{$rai} {
147
- // width: var(--_ctm-rep-lt-wh);
148
- --_col-count: var(--_sf-gd-ct, 3);
149
- --_col-gap: 0px;
150
- width: 163px;
151
- height: 100px;
152
- // grid-template-rows: minmax(
153
- // max(
154
- // 0.5px,
155
- // 0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
156
- // ),
157
- // auto
158
- // );
159
- // grid-template-rows: ;
150
+ width: 100%;
160
151
  }
161
152
  }
162
153
  }
163
154
  }
164
155
  }
165
156
 
166
- &.stimsfrRws {
157
+ &.crds {
167
158
  & > div {
168
159
  &.wrapper {
169
- align-self: center;
170
- & > div {
171
- &#{$childItemSelector},
172
- &.#{$rai} {
173
- // --_col-count: var(--_sf-gd-ct, 3);
174
- --_col-count: var(
175
- --_ctm-mob-rep-lt-st-is-pr-rw,
176
- var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3))
177
- );
178
- --_col-gap: var(
179
- --_ctm-mob-rep-lt-im-gp,
180
- var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
181
- );
182
- width: calc(
183
- (100% / var(--_col-count)) -
184
- (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
185
- );
186
- flex: 0 0
187
- calc(
160
+ display: flex !important;
161
+ flex-wrap: wrap;
162
+ width: 100%;
163
+ height: auto !important;
164
+ min-height: 100px !important;
165
+ }
166
+ }
167
+ &:not(.stimsfrRws) {
168
+ & > div {
169
+ &.wrapper {
170
+ justify-content: center;
171
+ & > div {
172
+ &#{$childItemSelector},
173
+ &.#{$rai} {
174
+ // width: var(--_ctm-rep-lt-wh);
175
+ --_col-count: var(--_sf-gd-ct, 3);
176
+ --_col-gap: 0px;
177
+ width: 163px;
178
+ height: 100px;
179
+ // grid-template-rows: minmax(
180
+ // max(
181
+ // 0.5px,
182
+ // 0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
183
+ // ),
184
+ // auto
185
+ // );
186
+ // grid-template-rows: ;
187
+ }
188
+ }
189
+ }
190
+ }
191
+ }
192
+
193
+ &.stimsfrRws {
194
+ & > div {
195
+ &.wrapper {
196
+ align-self: center;
197
+ & > div {
198
+ &#{$childItemSelector},
199
+ &.#{$rai} {
200
+ // --_col-count: var(--_sf-gd-ct, 3);
201
+ --_col-count: var(
202
+ --_ctm-mob-rep-lt-st-is-pr-rw,
203
+ var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3))
204
+ );
205
+ --_col-gap: var(
206
+ --_ctm-mob-rep-lt-im-gp,
207
+ var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
208
+ );
209
+ width: calc(
188
210
  (100% / var(--_col-count)) -
189
211
  (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
190
212
  );
191
- align-self: stretch;
192
- // height: 100px;
193
- grid-template-rows: minmax(
194
- max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
195
- auto
196
- );
197
- grid-template-columns: minmax(0px, 1fr);
198
- // min-height: 50px !important;
199
- grid-template-rows:
200
- minmax(
201
- max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
202
- auto
203
- )
204
- minmax(
205
- max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
213
+ flex: 0 0
214
+ calc(
215
+ (100% / var(--_col-count)) -
216
+ (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
217
+ );
218
+ align-self: stretch;
219
+ // height: 100px;
220
+ grid-template-rows: minmax(
221
+ max(
222
+ 0.5px,
223
+ 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
224
+ ),
206
225
  auto
207
226
  );
227
+ grid-template-columns: minmax(0px, 1fr);
228
+ // min-height: 50px !important;
229
+ grid-template-rows:
230
+ minmax(
231
+ max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
232
+ auto
233
+ )
234
+ minmax(
235
+ max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
236
+ auto
237
+ );
238
+ }
208
239
  }
209
240
  }
210
241
  }
211
242
  }
212
243
  }
213
- }
214
-
215
- &.sld {
216
- &:is(:not(#{$sliderControlDragging} *)) {
217
- overflow: clip;
218
- }
219
- height: auto;
220
- --_sf-sl-ct-ic-dt-at-cl: var(
221
- --_ctm-mob-rep-lt-cl-ae-cr,
222
- var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
223
- );
224
- // &:is([data-control-type="1"]) {
225
- // @include CMSRepeaterEmblaControlStyles(1);
226
- // }
227
- @for $i from 1 through 3 {
228
- &:is([data-control-type="#{$i}"]) {
229
- @if ($i == 3) {
230
- overflow-y: visible;
244
+ &.sld {
245
+ &:is(:not(#{$sliderControlDragging} *)) {
246
+ overflow: clip;
247
+ }
248
+ height: auto;
249
+ --_sf-sl-ct-ic-dt-at-cl: var(
250
+ --_ctm-mob-rep-lt-cl-ae-cr,
251
+ var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
252
+ );
253
+ // &:is([data-control-type="1"]) {
254
+ // @include CMSRepeaterEmblaControlStyles(1);
255
+ // }
256
+ @for $i from 1 through 3 {
257
+ &:is([data-control-type="#{$i}"]) {
258
+ @if ($i == 3) {
259
+ overflow-y: visible;
260
+ }
261
+ @include CMSRepeaterEmblaControlStyles($i);
231
262
  }
232
- @include CMSRepeaterEmblaControlStyles($i);
233
263
  }
234
- }
235
264
 
236
- & > div {
237
- &.wrapper {
238
- &.embla__container {
239
- display: flex !important;
240
- --_embla-slide-space: var(
241
- --_ctm-mob-rep-lt-im-gp,
242
- var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp))
243
- );
244
- min-height: 100px !important;
245
- --_embla-col-count: var(
246
- --_ctm-mob-rep-lt-st-is-pr-se,
247
- var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3))
248
- );
249
- // gap: 0px !important;
250
- // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
251
- width: 100%;
252
- height: 100%;
253
- & > .embla__slide {
254
- --_sf-cl-vl: calc(
255
- (100% / var(--_embla-col-count, 3)) -
256
- (
257
- ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
258
- (var(--_embla-col-count, 3))
259
- )
265
+ & > div {
266
+ &.wrapper {
267
+ &.embla__container {
268
+ display: flex !important;
269
+ --_embla-slide-space: var(
270
+ --_ctm-mob-rep-lt-im-gp,
271
+ var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp))
260
272
  );
261
- // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
262
- // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
263
- flex: 0 0 var(--_sf-cl-vl);
264
- width: var(--_sf-cl-vl);
265
- grid-template-rows: minmax(
266
- max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
267
- auto
273
+ min-height: 100px !important;
274
+ --_embla-col-count: var(
275
+ --_ctm-mob-rep-lt-st-is-pr-se,
276
+ var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3))
268
277
  );
269
- grid-template-columns: minmax(0px, 1fr);
270
- // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
271
- // padding-left: 0px !important;
278
+ // gap: 0px !important;
279
+ // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
280
+ width: 100%;
281
+ height: 100%;
282
+ & > .embla__slide {
283
+ --_sf-cl-vl: calc(
284
+ (100% / var(--_embla-col-count, 3)) -
285
+ (
286
+ ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
287
+ (var(--_embla-col-count, 3))
288
+ )
289
+ );
290
+ // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
291
+ // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
292
+ flex: 0 0 var(--_sf-cl-vl);
293
+ width: var(--_sf-cl-vl);
294
+ grid-template-rows: minmax(
295
+ max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
296
+ auto
297
+ );
298
+ grid-template-columns: minmax(0px, 1fr);
299
+ // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
300
+ // padding-left: 0px !important;
272
301
 
273
- img {
274
- width: 100%;
302
+ img {
303
+ width: 100%;
304
+ }
275
305
  }
276
306
  }
277
307
  }
278
308
  }
279
309
  }
280
- }
281
- & > div {
282
- &.wrapper {
283
- gap: var(
284
- --_ctm-mob-rep-lt-im-gp,
285
- var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
286
- );
287
- // width: 100%;
288
- // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
289
- // grid-auto-rows: minmax(100px, 1fr);
310
+ & > div {
311
+ &.wrapper {
312
+ gap: var(
313
+ --_ctm-mob-rep-lt-im-gp,
314
+ var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
315
+ );
316
+ // width: 100%;
317
+ // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
318
+ // grid-auto-rows: minmax(100px, 1fr);
319
+ }
290
320
  }
291
321
  }
292
322
  .repeater-advertise-item {