@sc-360-v2/storefront-cms-library 0.4.21 → 0.4.23

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 (12) hide show
  1. package/dist/allocations.scss +11 -4
  2. package/dist/builder.js +1 -1
  3. package/dist/countdown.scss +16 -12
  4. package/dist/order-status.scss +86 -37
  5. package/dist/section.scss +8 -1
  6. package/dist/types/builder/tools/element-edit/common.d.ts +6 -0
  7. package/dist/types/builder/tools/element-edit/countdown.d.ts +4 -25
  8. package/dist/types/builder/tools/element-edit/productPrice.d.ts +12 -1
  9. package/dist/types/website/constants/data-connector-souces.d.ts +410 -0
  10. package/dist/types/website/index.d.ts +2 -1
  11. package/dist/website.js +1 -1
  12. package/package.json +1 -1
package/dist/countdown.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  [data-div-type="element"] {
5
6
  &[data-element-type="countdown"] {
@@ -284,7 +285,8 @@
284
285
  h1 {
285
286
  color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));
286
287
 
287
- font-family: var(
288
+ font-family:
289
+ var(
288
290
  --_ctm-mob-dn-cn-wt-ft-fy,
289
291
  var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy))
290
292
  ),
@@ -332,7 +334,8 @@
332
334
  var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc))
333
335
  );
334
336
 
335
- font-family: var(
337
+ font-family:
338
+ var(
336
339
  --_ctm-mob-dn-cn-wt-ft-fy-dc,
337
340
  var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
338
341
  ),
@@ -420,7 +423,8 @@
420
423
  width: 100%;
421
424
  display: inline-block;
422
425
  color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
423
- font-family: var(
426
+ font-family:
427
+ var(
424
428
  --_ctm-mob-dn-cr-se-ft-fy,
425
429
  var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
426
430
  ),
@@ -464,7 +468,8 @@
464
468
  --_ctm-mob-dn-cr-se-cr-dc,
465
469
  var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
466
470
  );
467
- font-family: var(
471
+ font-family:
472
+ var(
468
473
  --_ctm-mob-dn-cr-se-ft-fy-dc,
469
474
  var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
470
475
  ),
@@ -513,7 +518,8 @@
513
518
 
514
519
  .countdown label {
515
520
  color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
516
- font-family: var(
521
+ font-family:
522
+ var(
517
523
  --_ctm-mob-dn-cr-se-ft-fy,
518
524
  var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
519
525
  ),
@@ -557,7 +563,8 @@
557
563
  --_ctm-mob-dn-cr-se-cr-dc,
558
564
  var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
559
565
  );
560
- font-family: var(
566
+ font-family:
567
+ var(
561
568
  --_ctm-mob-dn-cr-se-ft-fy-dc,
562
569
  var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
563
570
  ),
@@ -597,15 +604,12 @@
597
604
  align-items: center;
598
605
  justify-content: center;
599
606
  svg {
600
- width: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
601
- height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
607
+ width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
608
+ height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
602
609
  margin-top: 6px;
603
610
 
604
611
  path {
605
- stroke: var(
606
- --_ctm-mob-dn-dr-se-in-cr,
607
- var(--_ctm-tab-dn-dr-se-in-cr, var(--_ctm-dn-dr-se-in-cr))
608
- );
612
+ stroke: prepareMediaVariable(--_ctm-dn-dr-se-in-cr);
609
613
  }
610
614
  }
611
615
  }
package/dist/order-status.scss CHANGED
@@ -1,6 +1,11 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
+ $defaultValues: (
5
+ --_column-count-two: getListOfResponsive(2, 1),
6
+ --_column-count-three: getListOfResponsive(3, 1, 2),
7
+ --_column-count: getListOfResponsive(3, 2, 2),
8
+ );
4
9
 
5
10
  [data-div-type="element"] {
6
11
  &[data-element-type="orderStatus"] {
@@ -33,6 +38,7 @@
33
38
  }
34
39
 
35
40
  .order-confirmation {
41
+ @include prepareMediaQueries($defaultValues);
36
42
  display: flex;
37
43
  flex-direction: column;
38
44
  padding: prepareMediaVariable(--_ctm-dn-or-wt-pg);
@@ -396,7 +402,8 @@
396
402
 
397
403
  .order-details-wrapper {
398
404
  display: grid;
399
- grid-template-columns: 2fr 1fr;
405
+ // grid-template-columns: 2fr 1fr;
406
+ grid-template-columns: repeat(var(--_column-count-two, 2), 1fr);
400
407
  border-color: var(
401
408
  --_ctm-mob-dn-or-cr-br-cr,
402
409
  var(--_ctm-tab-dn-or-cr-br-cr, var(--_ctm-dn-or-cr-br-cr))
@@ -684,7 +691,8 @@
684
691
 
685
692
  /* Second row: three equal columns */
686
693
  &:nth-child(2) {
687
- grid-template-columns: repeat(3, 1fr);
694
+ // grid-template-columns: repeat(3, 1fr);
695
+ grid-template-columns: repeat(var(--_column-count, 3), 2fr);
688
696
  margin-top: 24px;
689
697
  }
690
698
 
@@ -704,11 +712,11 @@
704
712
  --_ctm-mob-dn-or-io-or-ne-ft-fy,
705
713
  var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
706
714
  );
707
- // font-size: var(
708
- // --_ctm-mob-dn-or-io-or-ne-ft-se,
709
- // var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
710
- // );
711
- font-size: 14px;
715
+ font-size: var(
716
+ --_ctm-mob-dn-or-io-or-ne-ft-se,
717
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
718
+ );
719
+ // font-size: 14px;
712
720
  color: var(
713
721
  --_ctm-mob-dn-or-io-or-ne-cr,
714
722
  var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
@@ -755,11 +763,11 @@
755
763
  --_ctm-mob-dn-or-io-or-id-ft-fy,
756
764
  var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
757
765
  );
758
- // font-size: var(
759
- // --_ctm-mob-dn-or-io-or-id-ft-se,
760
- // var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
761
- // );
762
- font-size: 16px;
766
+ font-size: var(
767
+ --_ctm-mob-dn-or-io-or-id-ft-se,
768
+ var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
769
+ );
770
+ // font-size: 16px;
763
771
  color: var(
764
772
  --_ctm-mob-dn-or-io-or-id-cr,
765
773
  var(--_ctm-tab-dn-or-io-or-id-cr, var(--_ctm-dn-or-io-or-id-cr))
@@ -872,11 +880,11 @@
872
880
  --_ctm-mob-dn-or-io-or-de-ft-fy,
873
881
  var(--_ctm-tab-dn-or-io-or-de-ft-fy, var(--_ctm-dn-or-io-or-de-ft-fy))
874
882
  );
875
- // font-size: var(
876
- // --_ctm-mob-dn-or-io-or-de-ft-se,
877
- // var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
878
- // );
879
- font-size: 14px;
883
+ font-size: var(
884
+ --_ctm-mob-dn-or-io-or-de-ft-se,
885
+ var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
886
+ );
887
+ // font-size: 14px;
880
888
  color: var(
881
889
  --_ctm-mob-dn-or-io-or-de-cr,
882
890
  var(--_ctm-tab-dn-or-io-or-de-cr, var(--_ctm-dn-or-io-or-de-cr))
@@ -919,10 +927,47 @@
919
927
  .shipping-method,
920
928
  .payment-mode {
921
929
  .sgmd_title {
922
- font-size: 14px;
930
+ // font-size: 14px;
931
+ // color: var(
932
+ // --_ctm-mob-dn-or-io-or-io-hr-cr,
933
+ // var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
934
+ // );
935
+ font-family: var(
936
+ --_ctm-mob-dn-or-io-or-ne-ft-fy,
937
+ var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
938
+ );
939
+ font-size: var(
940
+ --_ctm-mob-dn-or-io-or-ne-ft-se,
941
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
942
+ );
943
+ // font-size: 14px;
923
944
  color: var(
924
- --_ctm-mob-dn-or-io-or-io-hr-cr,
925
- var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
945
+ --_ctm-mob-dn-or-io-or-ne-cr,
946
+ var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
947
+ );
948
+ font-weight: var(
949
+ --_ctm-mob-dn-or-io-or-ne-ft-wt,
950
+ var(--_ctm-tab-dn-or-io-or-ne-ft-wt, var(--_ctm-dn-or-io-or-ne-ft-wt))
951
+ );
952
+ text-decoration: var(
953
+ --_ctm-mob-dn-or-io-or-ne-ue,
954
+ var(--_ctm-tab-dn-or-io-or-ne-ue, var(--_ctm-dn-or-io-or-ne-ue))
955
+ );
956
+ letter-spacing: var(
957
+ --_ctm-mob-dn-or-io-or-ne-lr-sg,
958
+ var(--_ctm-tab-dn-or-io-or-ne-lr-sg, var(--_ctm-dn-or-io-or-ne-lr-sg))
959
+ );
960
+ line-height: var(
961
+ --_ctm-mob-dn-or-io-or-ne-le-ht,
962
+ var(--_ctm-tab-dn-or-io-or-ne-le-ht, var(--_ctm-dn-or-io-or-ne-le-ht))
963
+ );
964
+ font-style: var(
965
+ --_ctm-mob-dn-or-io-or-ne-ft-se-ic,
966
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se-ic, var(--_ctm-dn-or-io-or-ne-ft-se-ic))
967
+ );
968
+ text-align: var(
969
+ --_ctm-mob-dn-or-io-or-ne-tt-an,
970
+ var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
926
971
  );
927
972
  }
928
973
  .sgmd_details {
@@ -1172,7 +1217,8 @@
1172
1217
 
1173
1218
  .items-grid {
1174
1219
  display: grid;
1175
- grid-template-columns: repeat(3, 1fr);
1220
+ // grid-template-columns: repeat(3, 1fr);
1221
+ grid-template-columns: repeat(var(--_column-count-three, 3), 1fr);
1176
1222
  gap: var(
1177
1223
  --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
1178
1224
  var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
@@ -1291,6 +1337,9 @@
1291
1337
  // }
1292
1338
 
1293
1339
  .item-details {
1340
+ display: flex;
1341
+ flex-direction: column;
1342
+ gap: 4px;
1294
1343
  flex: 1;
1295
1344
 
1296
1345
  .item-name {
@@ -1299,7 +1348,7 @@
1299
1348
  -webkit-box-orient: vertical;
1300
1349
  overflow: hidden;
1301
1350
  text-overflow: ellipsis;
1302
- margin: 0 0 4px;
1351
+ // margin: 0 0 4px;
1303
1352
  // font-size: 14px;
1304
1353
  // font-weight: 600;
1305
1354
  // color: var(--_gray-900);
@@ -1355,11 +1404,11 @@
1355
1404
  --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1356
1405
  var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1357
1406
  );
1358
- // font-size: var(
1359
- // --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1360
- // var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1361
- // );
1362
- font-size: 12px;
1407
+ font-size: var(
1408
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1409
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1410
+ );
1411
+ // font-size: 12px;
1363
1412
  color: var(
1364
1413
  --_ctm-mob-dn-pt-wt-pt-ce-cr,
1365
1414
  var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
@@ -1398,11 +1447,11 @@
1398
1447
  --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
1399
1448
  var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy))
1400
1449
  );
1401
- // font-size: var(
1402
- // --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1403
- // var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1404
- // );
1405
- font-size: 12px;
1450
+ font-size: var(
1451
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1452
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1453
+ );
1454
+ // font-size: 12px;
1406
1455
  color: var(
1407
1456
  --_ctm-mob-dn-pt-wt-pt-qy-cr,
1408
1457
  var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr))
@@ -1528,11 +1577,11 @@
1528
1577
  --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1529
1578
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1530
1579
  );
1531
- // font-size: var(
1532
- // --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1533
- // var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1534
- // );
1535
- font-size: 12px;
1580
+ font-size: var(
1581
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1582
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1583
+ );
1584
+ // font-size: 12px;
1536
1585
  color: var(
1537
1586
  --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
1538
1587
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc))
package/dist/section.scss CHANGED
@@ -122,7 +122,10 @@ section {
122
122
  }
123
123
  &[data-div-type="cms-section-wrapper"] {
124
124
  // max-width: var(--_sf-wp-mx-wt);
125
- max-width: min(100%, prepareMediaVariable(--_ctm-sec-lt-wh)) !important;
125
+ max-width: var(
126
+ --_sf-dt-sec-mw,
127
+ min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))
128
+ ) !important;
126
129
  // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
127
130
  margin-inline: auto;
128
131
  position: var(--_p-relative);
@@ -132,6 +135,10 @@ section {
132
135
  padding: prepareMediaVariable(--_ctm-sec-lt-pg);
133
136
  column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
134
137
  row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
138
+
139
+ &[data-vf="true"] {
140
+ --_sf-dt-sec-mw: 100%;
141
+ }
135
142
  }
136
143
  }
137
144
  }
package/dist/types/builder/tools/element-edit/common.d.ts CHANGED
@@ -118,3 +118,9 @@ export declare const overflowDefaultSchema: {
118
118
  displayScrollbar: CMSIBCommonInterface | undefined;
119
119
  maxHeight: CMSIBSizeInterface | undefined;
120
120
  };
121
+ export declare const iconProperty: {
122
+ icon: CMSIBIconInterface | undefined;
123
+ showIcon: CMSIBCommonInterface | undefined;
124
+ iconSize: CMSIBSizeInterface;
125
+ iconColor: CMSIBCommonInterface;
126
+ };
package/dist/types/builder/tools/element-edit/countdown.d.ts CHANGED
@@ -609,32 +609,11 @@ export declare const getDefaultData: () => {
609
609
  blur: import("../../interfaces/global").CMSIBSizeInterface;
610
610
  };
611
611
  dividerStyle: {
612
+ icon: import("../../interfaces/global").CMSIBIconInterface | undefined;
613
+ showIcon: CMSIBCommonInterface | undefined;
614
+ iconSize: import("../../interfaces/global").CMSIBSizeInterface;
615
+ iconColor: CMSIBCommonInterface;
612
616
  selectorKey: SelectorKeysEnum;
613
- shape: {
614
- value: string;
615
- property: string;
616
- propertyType: CMSElementEditTypes;
617
- };
618
- size: {
619
- value: string;
620
- property: string;
621
- unit: number;
622
- propertyType: CMSElementEditTypes;
623
- };
624
- iconColor: {
625
- value: {
626
- hex: string;
627
- rgb: {
628
- r: string;
629
- g: string;
630
- b: string;
631
- a: number;
632
- };
633
- };
634
- property: string;
635
- propertyType: CMSElementEditTypes;
636
- parentRef: string;
637
- };
638
617
  };
639
618
  };
640
619
  };
package/dist/types/builder/tools/element-edit/productPrice.d.ts CHANGED
@@ -15,7 +15,15 @@ export declare enum SelectorKeysEnum {
15
15
  EMBELLISHMENT_PRICE = "embellishmentPrice",
16
16
  PRODUCT_TAX = "productTax",
17
17
  PRODUCT_SHIPPING_PRICE = "productShippingPrice",
18
- DATA_CONNECTOR = "dataConnector"
18
+ DATA_CONNECTOR = "dataConnector",
19
+ GIFT_CARD = "giftCard",
20
+ CARD_WRAPPER = "cardWrapper",
21
+ CARD = "card",
22
+ TITLES = "titles",
23
+ LABELS = "labels",
24
+ INPUTS = "inputs",
25
+ DEFAULT_STATE = "defaultState",
26
+ SELECTED_STATE = "selected"
19
27
  }
20
28
  export interface selfLayoutInterface {
21
29
  selectorKey: string;
@@ -29,6 +37,9 @@ export interface selfDesignInterface {
29
37
  productPrice: {
30
38
  [key: string]: any;
31
39
  };
40
+ giftCard: {
41
+ [key: string]: any;
42
+ };
32
43
  uomStyle: {
33
44
  [key: string]: any;
34
45
  };