@sc-360-v2/storefront-cms-library 0.3.5 → 0.3.8

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 (52) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/builder.js.LICENSE.txt +1 -1
  3. package/dist/bulk-order-pad.scss +13 -8
  4. package/dist/button copy.scss +2 -1
  5. package/dist/checkout.scss +141 -16
  6. package/dist/common-element.scss +6 -0
  7. package/dist/confirmationModal.scss +79 -0
  8. package/dist/dropdownTemplate.scss +71 -8
  9. package/dist/employee-bulk-order.scss +547 -0
  10. package/dist/fb-dropdown.scss +124 -0
  11. package/dist/filter-results.scss +324 -0
  12. package/dist/filters.scss +1324 -31
  13. package/dist/form-preview.scss +163 -108
  14. package/dist/functions.js +1 -1
  15. package/dist/globals.scss +6 -0
  16. package/dist/icon-list.scss +11 -11
  17. package/dist/icons.js +1 -1
  18. package/dist/index.js +1 -1
  19. package/dist/layouter-pro-item.scss +6 -0
  20. package/dist/layouter-pro.scss +30 -2
  21. package/dist/menu-v2.scss +5 -2
  22. package/dist/modal.scss +13 -6
  23. package/dist/past-orders.scss +770 -26
  24. package/dist/product-actions.scss +254 -393
  25. package/dist/product-basic-elements.scss +12 -12
  26. package/dist/product-options.scss +73 -46
  27. package/dist/quotes.scss +1 -0
  28. package/dist/repeater.scss +5 -2
  29. package/dist/text-temp-v2.scss +2 -2
  30. package/dist/toggle-button.scss +32 -0
  31. package/dist/types/builder/constants/data-connectors.d.ts +55 -0
  32. package/dist/types/builder/elements/form-builder/index.d.ts +15 -0
  33. package/dist/types/builder/elements/product-sizechart/index.d.ts +26 -0
  34. package/dist/types/builder/elements/user-elements/index.d.ts +30 -0
  35. package/dist/types/builder/enums/data-connectors.d.ts +21 -0
  36. package/dist/types/builder/enums/index.d.ts +5 -1
  37. package/dist/types/builder/index.d.ts +4 -1
  38. package/dist/types/builder/tools/element-edit/common.d.ts +8 -0
  39. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  40. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +14 -1
  41. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +9 -2
  42. package/dist/types/builder/tools/element-edit/pastOrders.d.ts +61 -1
  43. package/dist/types/builder/tools/element-edit/productActions.d.ts +100 -1
  44. package/dist/types/builder/tools/element-edit/productSizeChart.d.ts +98 -0
  45. package/dist/types/builder/tools/element-edit/profile.d.ts +26 -2
  46. package/dist/types/builder/tools/element-edit/quantitySelector.d.ts +16 -2
  47. package/dist/types/builder/tools/element-edit/userElements.d.ts +555 -0
  48. package/dist/types/global/types.d.ts +2 -1
  49. package/dist/user-elements.scss +1375 -0
  50. package/dist/variant-picker.scss +132 -84
  51. package/dist/widget.scss +5 -0
  52. package/package.json +5 -1
@@ -31,10 +31,8 @@ $minWidth: 70px;
31
31
  .option__title {
32
32
  margin-bottom: 4px;
33
33
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
34
- font-family: var(
35
- --_ctm-mob-dn-on-te-ft-fy,
36
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
37
- ),
34
+ font-family:
35
+ var(--_ctm-mob-dn-on-te-ft-fy, var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))),
38
36
  sans-serif;
39
37
  font-size: var(
40
38
  --_ctm-mob-dn-on-te-ft-se,
@@ -118,7 +116,8 @@ $minWidth: 70px;
118
116
  --_ctm-mob-dn-sw-me-is-bn-bd-cr,
119
117
  var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
120
118
  );
121
- font-family: var(
119
+ font-family:
120
+ var(
122
121
  --_ctm-mob-dn-sw-me-is-bn-ft-fy,
123
122
  var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
124
123
  ),
@@ -231,6 +230,11 @@ $minWidth: 70px;
231
230
 
232
231
  cursor: pointer;
233
232
  overflow: hidden;
233
+ .product-select-image {
234
+ object-fit: cover;
235
+ width: 100%;
236
+ height: 100%;
237
+ }
234
238
  &[data-background-shape="circle"] {
235
239
  border-radius: 50%;
236
240
  }
@@ -513,39 +517,58 @@ $minWidth: 70px;
513
517
  }
514
518
  }
515
519
 
520
+ // &.disabled {
521
+ // cursor: not-allowed;
522
+ // opacity: 0.4;
523
+ // &[data-swatch-type="Swatch Image"] {
524
+ // position: relative;
525
+ // overflow: hidden;
526
+ // &::after {
527
+ // content: "";
528
+ // width: 172%;
529
+ // height: 1px;
530
+ // position: absolute;
531
+ // background: #f00;
532
+ // left: -14px;
533
+ // transform: rotate(48deg);
534
+ // /* -webkit-transform: rotate(48deg); */
535
+ // -moz-transform: rotate(48deg);
536
+ // top: 14px;
537
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
538
+ // }
539
+ // &::before {
540
+ // content: "";
541
+ // width: 164%;
542
+ // height: 1px;
543
+ // position: absolute;
544
+ // background: #f00;
545
+ // left: -14px;
546
+ // transform: rotate(-48deg);
547
+ // -webkit-transform: rotate(-48deg);
548
+ // -moz-transform: rotate(-48deg);
549
+ // top: 14px;
550
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
551
+ // }
552
+ // }
553
+ // }
554
+
555
+ position: relative;
556
+
516
557
  &.disabled {
558
+ color: #aaa;
559
+ background-color: #f9f9f9;
560
+ border-color: #ddd;
517
561
  cursor: not-allowed;
518
- opacity: 0.4;
519
- &[data-swatch-type="Swatch Image"] {
520
- position: relative;
521
- overflow: hidden;
522
- &::after {
523
- content: "";
524
- width: 172%;
525
- height: 1px;
526
- position: absolute;
527
- background: #f00;
528
- left: -14px;
529
- transform: rotate(48deg);
530
- /* -webkit-transform: rotate(48deg); */
531
- -moz-transform: rotate(48deg);
532
- top: 14px;
533
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
534
- }
535
- &::before {
536
- content: "";
537
- width: 164%;
538
- height: 1px;
539
- position: absolute;
540
- background: #f00;
541
- left: -14px;
542
- transform: rotate(-48deg);
543
- -webkit-transform: rotate(-48deg);
544
- -moz-transform: rotate(-48deg);
545
- top: 14px;
546
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
547
- }
548
- }
562
+ opacity: 0.3;
563
+ overflow: hidden;
564
+ }
565
+
566
+ .cross-line {
567
+ position: absolute;
568
+ inset: 0;
569
+ background-color: #cccccc;
570
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
571
+ pointer-events: none;
549
572
  }
550
573
  .product-select-image {
551
574
  width: 100%;
@@ -600,7 +623,8 @@ $minWidth: 70px;
600
623
  --_ctm-mob-dn-sw-me-is-bn-bd-cr,
601
624
  var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
602
625
  );
603
- font-family: var(
626
+ font-family:
627
+ var(
604
628
  --_ctm-mob-dn-sw-me-is-bn-ft-fy,
605
629
  var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
606
630
  ),
@@ -730,10 +754,8 @@ $minWidth: 70px;
730
754
  // font is pending
731
755
 
732
756
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
733
- font-family: var(
734
- --_sf-hr-ft-fy,
735
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
736
- ),
757
+ font-family:
758
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
737
759
  sans-serif;
738
760
  font-size: var(
739
761
  --_sf-hr-ft-se,
@@ -771,7 +793,7 @@ $minWidth: 70px;
771
793
  border-radius: 5px;
772
794
  }
773
795
  &[data-background-shape="capsule"] {
774
- border-radius: 30px; /* Full pill shape */
796
+ border-radius: 40px; /* Full pill shape */
775
797
  box-sizing: border-box;
776
798
  }
777
799
 
@@ -975,10 +997,8 @@ $minWidth: 70px;
975
997
  // font is pending
976
998
 
977
999
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
978
- font-family: var(
979
- --_sf-sd-ft-fy,
980
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
981
- ),
1000
+ font-family:
1001
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
982
1002
  sans-serif;
983
1003
  font-size: var(
984
1004
  --_sf-sd-ft-se,
@@ -1014,37 +1034,54 @@ $minWidth: 70px;
1014
1034
  border: 0px;
1015
1035
  border-bottom: 2px solid var(--_primary-400);
1016
1036
  }
1037
+ // &.disabled {
1038
+ // cursor: not-allowed;
1039
+ // opacity: 0.4;
1040
+ // position: relative;
1041
+ // overflow: hidden;
1042
+ // &::after {
1043
+ // content: "";
1044
+ // width: 172%;
1045
+ // height: 1px;
1046
+ // position: absolute;
1047
+ // background: #f00;
1048
+ // left: -14px;
1049
+ // transform: rotate(48deg);
1050
+ // /* -webkit-transform: rotate(48deg); */
1051
+ // -moz-transform: rotate(48deg);
1052
+ // top: 14px;
1053
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1054
+ // }
1055
+ // &::before {
1056
+ // content: "";
1057
+ // width: 164%;
1058
+ // height: 1px;
1059
+ // position: absolute;
1060
+ // background: #f00;
1061
+ // left: -14px;
1062
+ // transform: rotate(-48deg);
1063
+ // -webkit-transform: rotate(-48deg);
1064
+ // -moz-transform: rotate(-48deg);
1065
+ // top: 14px;
1066
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1067
+ // }
1068
+ // }
1069
+ position: relative;
1070
+
1017
1071
  &.disabled {
1072
+ color: #aaa;
1073
+ background-color: #f9f9f9;
1074
+ border-color: #ddd;
1018
1075
  cursor: not-allowed;
1019
- opacity: 0.4;
1020
- position: relative;
1021
1076
  overflow: hidden;
1022
- &::after {
1023
- content: "";
1024
- width: 172%;
1025
- height: 1px;
1026
- position: absolute;
1027
- background: #f00;
1028
- left: -14px;
1029
- transform: rotate(48deg);
1030
- /* -webkit-transform: rotate(48deg); */
1031
- -moz-transform: rotate(48deg);
1032
- top: 14px;
1033
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1034
- }
1035
- &::before {
1036
- content: "";
1037
- width: 164%;
1038
- height: 1px;
1039
- position: absolute;
1040
- background: #f00;
1041
- left: -14px;
1042
- transform: rotate(-48deg);
1043
- -webkit-transform: rotate(-48deg);
1044
- -moz-transform: rotate(-48deg);
1045
- top: 14px;
1046
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1047
- }
1077
+ }
1078
+
1079
+ .cross-line {
1080
+ position: absolute;
1081
+ inset: 0;
1082
+ background-color: #cccccc;
1083
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1084
+ pointer-events: none;
1048
1085
  }
1049
1086
  }
1050
1087
  }
@@ -1058,7 +1095,9 @@ $minWidth: 70px;
1058
1095
  width: 100%;
1059
1096
  display: flex;
1060
1097
  top: calc(
1061
- calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px) /
1098
+ calc(
1099
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1100
+ ) /
1062
1101
  2
1063
1102
  );
1064
1103
  }
@@ -1067,7 +1106,8 @@ $minWidth: 70px;
1067
1106
  .title {
1068
1107
  margin-bottom: 4px;
1069
1108
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1070
- font-family: var(
1109
+ font-family:
1110
+ var(
1071
1111
  --_ctm-mob-dn-on-te-ft-fy,
1072
1112
  var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1073
1113
  ),
@@ -1301,7 +1341,8 @@ $minWidth: 70px;
1301
1341
  top: calc(
1302
1342
  calc(
1303
1343
  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1304
- ) / 2
1344
+ ) /
1345
+ 2
1305
1346
  );
1306
1347
  }
1307
1348
  }
@@ -1325,7 +1366,8 @@ $minWidth: 70px;
1325
1366
  --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1326
1367
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1327
1368
  )
1328
- ) / 2
1369
+ ) /
1370
+ 2
1329
1371
  );
1330
1372
  }
1331
1373
  }
@@ -1633,7 +1675,8 @@ $minWidth: 70px;
1633
1675
  var(
1634
1676
  --_ctm-mob-lt-gd-os-dy-se-an-sg,
1635
1677
  var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1636
- ) / 2
1678
+ ) /
1679
+ 2
1637
1680
  );
1638
1681
  }
1639
1682
  }
@@ -2033,7 +2076,8 @@ $minWidth: 70px;
2033
2076
  var(
2034
2077
  --_ctm-mob-dn-pn-as-aw-se,
2035
2078
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2036
- ) + 8px
2079
+ ) +
2080
+ 8px
2037
2081
  )
2038
2082
  );
2039
2083
  }
@@ -2043,7 +2087,8 @@ $minWidth: 70px;
2043
2087
  var(
2044
2088
  --_ctm-mob-dn-pn-le-le-ht,
2045
2089
  var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2046
- ) + 20px
2090
+ ) +
2091
+ 20px
2047
2092
  )
2048
2093
  );
2049
2094
  }
@@ -2053,7 +2098,8 @@ $minWidth: 70px;
2053
2098
  var(
2054
2099
  --_ctm-mob-dn-pn-ds-dt-se,
2055
2100
  var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2056
- ) + 20px
2101
+ ) +
2102
+ 20px
2057
2103
  )
2058
2104
  );
2059
2105
  }
@@ -2165,13 +2211,15 @@ $minWidth: 70px;
2165
2211
  var(
2166
2212
  --_ctm-mob-dn-pn-as-aw-se,
2167
2213
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2168
- ) * 0.5
2214
+ ) *
2215
+ 0.5
2169
2216
  );
2170
2217
  height: calc(
2171
2218
  var(
2172
2219
  --_ctm-mob-dn-pn-as-aw-se,
2173
2220
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2174
- ) * 0.5
2221
+ ) *
2222
+ 0.5
2175
2223
  );
2176
2224
  path {
2177
2225
  stroke: var(
package/dist/widget.scss CHANGED
@@ -106,3 +106,8 @@
106
106
  @use "./dropdownTemplate.scss";
107
107
  @use "./layouter-pro.scss";
108
108
  @use "./layouter-pro-item.scss";
109
+ @use "./user-elements.scss";
110
+ @use "./filter-results.scss";
111
+ @use "./toggle-button.scss";
112
+ @use "./employee-bulk-order.scss";
113
+ @use "./confirmationModal.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.5",
3
+ "version": "0.3.8",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {
@@ -12,6 +12,10 @@
12
12
  "import": "./dist/htmlElement.js",
13
13
  "types": "./dist/types/html-elements/elements.d.ts"
14
14
  },
15
+ "./dataConnectors": {
16
+ "import": "./dist/htmlElement.js",
17
+ "types": "./dist/types/html-elements/elements.d.ts"
18
+ },
15
19
  "./css": {
16
20
  "import": "./dist/css.js",
17
21
  "types": "./dist/types/css/cssVariables.d.ts"