@sc-360-v2/storefront-cms-library 0.2.99 → 0.2.100

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 (16) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bundleDetails.scss +808 -678
  3. package/dist/icon-list.scss +16 -15
  4. package/dist/item-stock.scss +38 -76
  5. package/dist/modal.scss +320 -0
  6. package/dist/payment-methods.scss +71 -1
  7. package/dist/product-basic-elements.scss +285 -132
  8. package/dist/text-temp-v2.scss +2 -0
  9. package/dist/types/builder/elements/bundle-details/index.d.ts +30 -0
  10. package/dist/types/builder/enums/index.d.ts +1 -0
  11. package/dist/types/builder/index.d.ts +2 -1
  12. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +627 -10
  13. package/dist/types/builder/tools/element-edit/itemStock.d.ts +11 -0
  14. package/dist/variant-picker.scss +233 -106
  15. package/dist/volume-pricing.scss +1 -1
  16. package/package.json +1 -1
package/dist/variant-picker.scss CHANGED
@@ -104,47 +104,6 @@ $minWidth: 70px;
104
104
  var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
105
105
  );
106
106
 
107
- .title {
108
- margin-bottom: 4px;
109
- color: var(
110
- --_ctm-mob-dn-on-te-cr,
111
- var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr))
112
- );
113
- font-family: var(
114
- --_ctm-mob-dn-on-te-ft-fy,
115
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
116
- ),
117
- sans-serif;
118
- font-size: var(
119
- --_ctm-mob-dn-on-te-ft-se,
120
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
121
- );
122
- font-weight: var(
123
- --_ctm-mob-dn-on-te-ft-wt,
124
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
125
- );
126
- font-style: var(
127
- --_ctm-mob-dn-on-te-ft-se-ic,
128
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
129
- );
130
- text-align: var(
131
- --_ctm-mob-dn-on-te-tt-an,
132
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
133
- );
134
- letter-spacing: var(
135
- --_ctm-mob-dn-on-te-lr-sg,
136
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
137
- );
138
- line-height: var(
139
- --_ctm-mob-dn-on-te-le-ht,
140
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
141
- );
142
- text-decoration: var(
143
- --_ctm-mob-dn-on-te-ue,
144
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
145
- );
146
- }
147
-
148
107
  .select__group {
149
108
  display: flex;
150
109
  flex-direction: row;
@@ -247,14 +206,14 @@ $minWidth: 70px;
247
206
  var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
248
207
  );
249
208
 
250
- &[data-dt-se-bd-se="circle"] {
209
+ &[data-swatch-shape="circle"] {
251
210
  border-radius: 999px;
252
211
  }
253
- &[data-dt-se-bd-se="square"],
254
- &[data-dt-se-bd-se="none"] {
212
+ &[data-swatch-shape="square"],
213
+ &[data-swatch-shape="none"] {
255
214
  border-radius: 0px;
256
215
  }
257
- &[data-dt-se-bd-se="rounded"] {
216
+ &[data-swatch-shape="rounded"] {
258
217
  border-radius: var(
259
218
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
260
219
  var(
@@ -284,10 +243,10 @@ $minWidth: 70px;
284
243
 
285
244
  // height: 30px;
286
245
  // width: 30px;
287
- // &[data-dt-se-bd-se="Circle"] {
246
+ // &[data-swatch-shape="Circle"] {
288
247
  // border-radius: 50%;
289
248
  // }
290
- // &[data-dt-se-bd-se="None"] {
249
+ // &[data-swatch-shape="None"] {
291
250
  // height: 0;
292
251
  // width: 0;
293
252
  // }
@@ -296,14 +255,14 @@ $minWidth: 70px;
296
255
  --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
297
256
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
298
257
  );
299
- &[data-dt-se-bd-se="circle"] {
258
+ &[data-swatch-shape="circle"] {
300
259
  border-radius: 999px;
301
260
  }
302
- &[data-dt-se-bd-se="square"],
303
- &[data-dt-se-bd-se="none"] {
261
+ &[data-swatch-shape="square"],
262
+ &[data-swatch-shape="none"] {
304
263
  border-radius: 0px;
305
264
  }
306
- &[data-dt-se-bd-se="rounded"] {
265
+ &[data-swatch-shape="rounded"] {
307
266
  border-radius: var(
308
267
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
309
268
  var(
@@ -332,10 +291,10 @@ $minWidth: 70px;
332
291
  }
333
292
  // height: 30px;
334
293
  // width: 30px;
335
- // &[data-dt-se-bd-se="Circle"] {
294
+ // &[data-swatch-shape="Circle"] {
336
295
  // border-radius: 50%;
337
296
  // }
338
- // &[data-dt-se-bd-se="None"] {
297
+ // &[data-swatch-shape="None"] {
339
298
  // height: 0;
340
299
  // width: 0;
341
300
  // }
@@ -384,14 +343,14 @@ $minWidth: 70px;
384
343
  )
385
344
  );
386
345
 
387
- &[data-dt-se-bd-se="circle"] {
346
+ &[data-swatch-shape="circle"] {
388
347
  border-radius: 999px;
389
348
  }
390
- &[data-dt-se-bd-se="square"],
391
- &[data-dt-se-bd-se="none"] {
349
+ &[data-swatch-shape="square"],
350
+ &[data-swatch-shape="none"] {
392
351
  border-radius: 0px;
393
352
  }
394
- &[data-dt-se-bd-se="rounded"] {
353
+ &[data-swatch-shape="rounded"] {
395
354
  border-radius: var(
396
355
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
397
356
  var(
@@ -420,10 +379,10 @@ $minWidth: 70px;
420
379
  }
421
380
  // height: 30px;
422
381
  // width: 30px;
423
- // &[data-dt-se-bd-se="Circle"] {
382
+ // &[data-swatch-shape="Circle"] {
424
383
  // border-radius: 50%;
425
384
  // }
426
- // &[data-dt-se-bd-se="None"] {
385
+ // &[data-swatch-shape="None"] {
427
386
  // height: 0;
428
387
  // width: 0;
429
388
  // }
@@ -504,13 +463,13 @@ $minWidth: 70px;
504
463
 
505
464
  cursor: pointer;
506
465
  overflow: hidden;
507
- &[data-dt-se-sh-se="circle"] {
466
+ &[data-swatch-shape="circle"] {
508
467
  border-radius: 999px;
509
468
  }
510
- &[data-dt-se-sh-se="square"] {
469
+ &[data-swatch-shape="square"] {
511
470
  border-radius: 0px;
512
471
  }
513
- &[data-dt-se-sh-se="rounded"] {
472
+ &[data-swatch-shape="rounded"] {
514
473
  border-radius: var(
515
474
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
516
475
  var(
@@ -717,46 +676,6 @@ $minWidth: 70px;
717
676
  var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
718
677
  );
719
678
 
720
- .title {
721
- margin-bottom: 4px;
722
- color: var(
723
- --_ctm-mob-dn-on-te-cr,
724
- var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr))
725
- );
726
- font-family: var(
727
- --_ctm-mob-dn-on-te-ft-fy,
728
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
729
- ),
730
- sans-serif;
731
- font-size: var(
732
- --_ctm-mob-dn-on-te-ft-se,
733
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
734
- );
735
- font-weight: var(
736
- --_ctm-mob-dn-on-te-ft-wt,
737
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
738
- );
739
- font-style: var(
740
- --_ctm-mob-dn-on-te-ft-se-ic,
741
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
742
- );
743
- text-align: var(
744
- --_ctm-mob-dn-on-te-tt-an,
745
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
746
- );
747
- letter-spacing: var(
748
- --_ctm-mob-dn-on-te-lr-sg,
749
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
750
- );
751
- line-height: var(
752
- --_ctm-mob-dn-on-te-le-ht,
753
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
754
- );
755
- text-decoration: var(
756
- --_ctm-mob-dn-on-te-ue,
757
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
758
- );
759
- }
760
679
  .select__group {
761
680
  display: flex;
762
681
  gap: 8px;
@@ -866,6 +785,176 @@ $minWidth: 70px;
866
785
  minmax(auto, 1fr)
867
786
  );
868
787
  }
788
+
789
+ .item {
790
+ background-color: var(
791
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-bd-cr,
792
+ var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
793
+ );
794
+
795
+ &[data-swatch-shape="circle"] {
796
+ border-radius: 999px;
797
+ }
798
+ &[data-swatch-shape="square"],
799
+ &[data-swatch-shape="none"] {
800
+ border-radius: 0px;
801
+ }
802
+ &[data-swatch-shape="rounded"] {
803
+ border-radius: var(
804
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
805
+ var(
806
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
807
+ var(
808
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
809
+ var(
810
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
811
+ var(
812
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
813
+ var(
814
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
815
+ var(
816
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
817
+ var(
818
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
819
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
820
+ )
821
+ )
822
+ )
823
+ )
824
+ )
825
+ )
826
+ )
827
+ );
828
+ }
829
+ &:hover {
830
+ background-color: var(
831
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
832
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
833
+ );
834
+ &[data-swatch-shape="circle"] {
835
+ border-radius: 999px;
836
+ }
837
+ &[data-swatch-shape="square"],
838
+ &[data-swatch-shape="none"] {
839
+ border-radius: 0px;
840
+ }
841
+ &[data-swatch-shape="rounded"] {
842
+ border-radius: var(
843
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
844
+ var(
845
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
846
+ var(
847
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
848
+ var(
849
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
850
+ var(
851
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
852
+ var(
853
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
854
+ var(
855
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
856
+ var(
857
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
858
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
859
+ )
860
+ )
861
+ )
862
+ )
863
+ )
864
+ )
865
+ )
866
+ );
867
+ }
868
+ // height: 30px;
869
+ // width: 30px;
870
+ // &[data-swatch-shape="Circle"] {
871
+ // border-radius: 50%;
872
+ // }
873
+ // &[data-swatch-shape="None"] {
874
+ // height: 0;
875
+ // width: 0;
876
+ // }
877
+ }
878
+ &.selected_item {
879
+ width: fit-content;
880
+ background-color: var(
881
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
882
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
883
+ );
884
+ border-radius: var(
885
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
886
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
887
+ );
888
+
889
+ border-color: var(
890
+ --_show-border-im-se,
891
+ var(
892
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
893
+ var(
894
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
895
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
896
+ )
897
+ )
898
+ );
899
+
900
+ border-style: var(
901
+ --_show-border-im-se,
902
+ var(
903
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
904
+ var(
905
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
906
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
907
+ )
908
+ )
909
+ );
910
+
911
+ border-width: var(
912
+ --_show-border-im-se,
913
+ var(
914
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
915
+ var(
916
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
917
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
918
+ )
919
+ )
920
+ );
921
+
922
+ &[data-swatch-shape="circle"] {
923
+ border-radius: 999px;
924
+ }
925
+ &[data-swatch-shape="square"],
926
+ &[data-swatch-shape="none"] {
927
+ border-radius: 0px;
928
+ }
929
+ &[data-swatch-shape="rounded"] {
930
+ border-radius: var(
931
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
932
+ var(
933
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
934
+ var(
935
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
936
+ var(
937
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
938
+ var(
939
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
940
+ var(
941
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
942
+ var(
943
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
944
+ var(
945
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
946
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
947
+ )
948
+ )
949
+ )
950
+ )
951
+ )
952
+ )
953
+ )
954
+ );
955
+ }
956
+ }
957
+ }
869
958
  .select__group__item {
870
959
  transition: color 0.3s ease;
871
960
  padding: 5px 12px;
@@ -907,14 +996,14 @@ $minWidth: 70px;
907
996
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
908
997
  );
909
998
 
910
- &[data-dt-se-bd-se="circle"] {
999
+ &[data-swatch-shape="circle"] {
911
1000
  border-radius: 999px;
912
1001
  }
913
- &[data-dt-se-bd-se="square"],
914
- &[data-dt-se-bd-se="none"] {
1002
+ &[data-swatch-shape="square"],
1003
+ &[data-swatch-shape="none"] {
915
1004
  border-radius: 0;
916
1005
  }
917
- &[data-dt-se-bd-se="rounded"] {
1006
+ &[data-swatch-shape="rounded"] {
918
1007
  border-radius: var(
919
1008
  --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
920
1009
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
@@ -1259,6 +1348,44 @@ $minWidth: 70px;
1259
1348
  );
1260
1349
  }
1261
1350
  }
1351
+
1352
+ .title {
1353
+ margin-bottom: 4px;
1354
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1355
+ font-family: var(
1356
+ --_ctm-mob-dn-on-te-ft-fy,
1357
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1358
+ ),
1359
+ sans-serif;
1360
+ font-size: var(
1361
+ --_ctm-mob-dn-on-te-ft-se,
1362
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1363
+ );
1364
+ font-weight: var(
1365
+ --_ctm-mob-dn-on-te-ft-wt,
1366
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1367
+ );
1368
+ font-style: var(
1369
+ --_ctm-mob-dn-on-te-ft-se-ic,
1370
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
1371
+ );
1372
+ text-align: var(
1373
+ --_ctm-mob-dn-on-te-tt-an,
1374
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1375
+ );
1376
+ letter-spacing: var(
1377
+ --_ctm-mob-dn-on-te-lr-sg,
1378
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1379
+ );
1380
+ line-height: var(
1381
+ --_ctm-mob-dn-on-te-le-ht,
1382
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1383
+ );
1384
+ text-decoration: var(
1385
+ --_ctm-mob-dn-on-te-ue,
1386
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1387
+ );
1388
+ }
1262
1389
  }
1263
1390
  //Dropdown
1264
1391
  .est__dropdown__main {
package/dist/volume-pricing.scss CHANGED
@@ -71,7 +71,7 @@
71
71
  .uom__selector {
72
72
  padding: 10px;
73
73
  width: 100%;
74
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
74
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
75
75
  .uom__container {
76
76
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
77
77
  // border: 1px solid rgba(75, 69, 70, 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.2.99",
3
+ "version": "0.2.100",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {