@sc-360-v2/storefront-cms-library 0.3.62 → 0.3.63

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 (45) hide show
  1. package/dist/add-products-tab copy.scss +9 -8
  2. package/dist/add-products-tab.scss +9 -8
  3. package/dist/badge.scss +87 -83
  4. package/dist/builder.js +1 -1
  5. package/dist/cart-details.scss +25 -22
  6. package/dist/cart-summary.scss +17 -143
  7. package/dist/cart-wrapper.scss +127 -0
  8. package/dist/cartDropdownOverlay.scss +23 -4
  9. package/dist/checkout.scss +96 -573
  10. package/dist/dropdownTemplate.scss +58 -4
  11. package/dist/icon-list.scss +25 -19
  12. package/dist/icons.js +1 -1
  13. package/dist/image-for-product.scss +19 -0
  14. package/dist/index.js +1 -1
  15. package/dist/item-stock.scss +27 -26
  16. package/dist/mega-menu-container.scss +96 -0
  17. package/dist/mega-menu.scss +832 -0
  18. package/dist/menu-v2.scss +30 -5
  19. package/dist/modal.scss +168 -8
  20. package/dist/order-status.scss +18 -15
  21. package/dist/past-orders.scss +279 -271
  22. package/dist/payment-methods.scss +72 -69
  23. package/dist/position-module.scss +2 -1
  24. package/dist/prefix-list.scss +3 -0
  25. package/dist/quick-links.scss +49 -46
  26. package/dist/quick-order-pad.scss +3 -0
  27. package/dist/quotes.scss +123 -117
  28. package/dist/rfqs.scss +123 -117
  29. package/dist/simple-list.scss +264 -0
  30. package/dist/templates.scss +299 -0
  31. package/dist/types/builder/elements/cart-wrapper/index.d.ts +44 -0
  32. package/dist/types/builder/elements/mega-menu/index.d.ts +47 -0
  33. package/dist/types/builder/elements/mega-menu-container/index.d.ts +44 -0
  34. package/dist/types/builder/elements/simple-list/index.d.ts +47 -0
  35. package/dist/types/builder/enums/index.d.ts +7 -1
  36. package/dist/types/builder/index.d.ts +5 -1
  37. package/dist/types/builder/tools/element-edit/cart-wrapper.d.ts +16 -0
  38. package/dist/types/builder/tools/element-edit/index.d.ts +5 -1
  39. package/dist/types/builder/tools/element-edit/mega-menu.d.ts +41 -0
  40. package/dist/types/builder/tools/element-edit/megaMenuContainer.d.ts +9 -0
  41. package/dist/types/builder/tools/element-edit/simple-list.d.ts +37 -0
  42. package/dist/types/website/constants/data-connectors.d.ts +18 -0
  43. package/dist/website.js +1 -1
  44. package/dist/widget.scss +4 -0
  45. package/package.json +1 -1
@@ -250,12 +250,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
250
250
  display: flex;
251
251
  flex-direction: column;
252
252
  gap: 12px;
253
+ font-weight: normal;
253
254
 
254
255
  .radio-label {
255
- display: flex;
256
+ display: inline-flex;
256
257
  align-items: center;
257
258
  gap: 8px;
258
259
  cursor: pointer;
260
+ width: fit-content;
261
+ span {
262
+ color: var(--_gray-500);
263
+ span {
264
+ color: var(--_gray-900);
265
+ font-weight: 500;
266
+ }
267
+ }
259
268
  }
260
269
  }
261
270
 
@@ -274,6 +283,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
274
283
  align-items: center;
275
284
  gap: 1rem;
276
285
 
286
+ .dropdown {
287
+ display: flex;
288
+ flex-direction: column;
289
+ gap: 6px;
290
+ }
291
+
277
292
  // .dropdown {
278
293
  // flex: 1;
279
294
  // display: flex;
@@ -354,6 +369,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
354
369
  white-space: nowrap;
355
370
  align-self: stretch;
356
371
  align-items: flex-start;
372
+ margin-left: 130px;
357
373
 
358
374
  .delete-icon-container {
359
375
  display: flex;
@@ -469,29 +485,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
469
485
 
470
486
  .product_image {
471
487
  width: 130px;
472
- background-size: 100%;
488
+ background-size: contain;
473
489
  height: 130px;
490
+ background-color: var(--_gray-50);
491
+ border-radius: 4px;
474
492
  background-repeat: no-repeat;
475
493
  background-position: center;
476
- background-color: #eaeaea;
477
-
478
- border-style: var(
479
- --_ctm-mob-dn-pt-ie-ss-br-se,
480
- var(--_ctm-tab-dn-pt-ie-ss-br-se, var(--_ctm-dn-pt-ie-ss-br-se))
481
- );
482
- border-width: var(
483
- --_ctm-mob-dn-pt-ie-ss-br-wh,
484
- var(--_ctm-tab-dn-pt-ie-ss-br-wh, var(--_ctm-dn-pt-ie-ss-br-wh))
485
- );
486
- // border: ;
487
- border-radius: var(
488
- --_ctm-mob-dn-pt-ie-ss-br-rs,
489
- var(--_ctm-tab-dn-pt-ie-ss-br-rs, var(--_ctm-dn-pt-ie-ss-br-rs))
490
- );
491
- border-color: var(
492
- --_ctm-mob-dn-pt-ie-ss-br-cr,
493
- var(--_ctm-tab-dn-pt-ie-ss-br-cr, var(--_ctm-dn-pt-ie-ss-br-cr))
494
- );
494
+ border: 1px solid var(--_gray-200);
495
495
  }
496
496
 
497
497
  .product_info_wrapper {
@@ -566,7 +566,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
566
566
  .product_code {
567
567
  display: flex;
568
568
  align-items: center;
569
- gap: 6px;
570
569
  align-self: stretch;
571
570
  flex-wrap: wrap;
572
571
 
@@ -906,6 +905,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
906
905
  display: flex;
907
906
  align-items: center;
908
907
  gap: 16px;
908
+ & > a,
909
+ span {
910
+ cursor: pointer;
911
+ }
909
912
  & > * {
910
913
  display: flex;
911
914
  align-items: center;
@@ -248,46 +248,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
248
248
  var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp))
249
249
  );
250
250
  align-items: flex-start;
251
-
252
- .cart_summary_product_img {
251
+ .cart_summary_pro_container {
253
252
  width: 80px;
254
253
  height: 80px;
255
- background-color: var(
256
- --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
257
- var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr))
258
- );
259
- border-color: var(
260
- --_ctm-mob-dn-pt-wt-pt-ie-br-cr,
261
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr))
262
- );
263
- border-style: var(
264
- --_ctm-mob-dn-pt-wt-pt-ie-br-se,
265
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se))
266
- );
267
- border-width: var(
268
- --_ctm-mob-dn-pt-wt-pt-ie-br-wh,
269
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh))
270
- );
271
- border-radius: var(
272
- --_ctm-mob-dn-pt-wt-pt-ie-br-rs,
273
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs))
274
- );
275
- box-shadow: var(
276
- --_ctm-mob-dn-pt-wt-pt-ie-sw-ae,
277
- var(--_ctm-tab-dn-pt-wt-pt-ie-sw-ae, var(--_ctm-dn-pt-wt-pt-ie-sw-ae))
278
- )
279
- var(
280
- --_ctm-mob-dn--pt-wt-pt-ie-sw-br,
281
- var(--_ctm-tab-dn--pt-wt-pt-ie-sw-br, var(--_ctm-dn--pt-wt-pt-ie-sw-br))
282
- )
283
- var(
284
- --_ctm-mob-dn-pt-wt-pt-ie-sw-sd,
285
- var(--_ctm-tab-dn-pt-wt-pt-ie-sw-sd, var(--_ctm-dn-pt-wt-pt-ie-sw-sd))
286
- )
287
- var(
288
- --_ctm-mob-dn-pt-wt-pt-ie-sw-cr,
289
- var(--_ctm-tab-dn-pt-wt-pt-ie-sw-cr, var(--_ctm-dn-pt-wt-pt-ie-sw-cr))
290
- );
254
+ display: flex;
255
+ justify-content: center;
256
+ align-items: center;
257
+ border: 1px solid var(--_gray-200);
258
+ border-radius: 4px;
259
+ .cart_summary_product_img {
260
+ max-width: 100%;
261
+ max-height: 100%;
262
+ }
291
263
  }
292
264
 
293
265
  .cart_summary_product_content_wrapper {
@@ -535,42 +507,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
535
507
  align-self: stretch;
536
508
  justify-content: space-between;
537
509
  .cart_summary_number_text {
538
- font-family: var(
539
- --_ctm-mob-dn-nr-of-is-ft-fy,
540
- var(--_ctm-tab-dn-nr-of-is-ft-fy, var(--_ctm-dn-nr-of-is-ft-fy))
541
- );
542
- color: var(
543
- --_ctm-mob-dn-nr-of-is-cr,
544
- var(--_ctm-tab-dn-nr-of-is-cr, var(--_ctm-dn-nr-of-is-cr))
545
- );
546
- font-weight: var(
547
- --_ctm-mob-dn-nr-of-is-ft-wt,
548
- var(--_ctm-tab-dn-nr-of-is-ft-wt, var(--_ctm-dn-nr-of-is-ft-wt))
549
- );
550
- font-size: var(
551
- --_ctm-mob-dn-nr-of-is-ft-se,
552
- var(--_ctm-tab-dn-nr-of-is-ft-se, var(--_ctm-dn-nr-of-is-ft-se))
553
- );
554
- text-decoration: var(
555
- --_ctm-mob-dn-nr-of-is-ue,
556
- var(--_ctm-tab-dn-nr-of-is-ue, var(--_ctm-dn-nr-of-is-ue))
557
- );
558
- letter-spacing: var(
559
- --_ctm-mob-dn-nr-of-is-lr-sg,
560
- var(--_ctm-tab-dn-nr-of-is-lr-sg, var(--_ctm-dn-nr-of-is-lr-sg))
561
- );
562
- line-height: var(
563
- --_ctm-mob-dn-nr-of-is-le-ht,
564
- var(--_ctm-tab-dn-nr-of-is-le-ht, var(--_ctm-dn-nr-of-is-le-ht))
565
- );
566
- font-style: var(
567
- --_ctm-mob-dn-nr-of-is-ft-se-ic,
568
- var(--_ctm-tab-dn-nr-of-is-ft-se-ic, var(--_ctm-dn-nr-of-is-ft-se-ic))
569
- );
570
- text-align: var(
571
- --_ctm-mob-dn-nr-of-is-tt-an,
572
- var(--_ctm-tab-dn-nr-of-is-tt-an, var(--_ctm-dn-nr-of-is-tt-an))
573
- );
510
+ color: var(--_gray-500);
511
+ font-size: 14px;
512
+ font-weight: 400;
574
513
  }
575
514
  .cart_summary_number_value {
576
515
  font-family: var(
@@ -616,42 +555,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
616
555
  flex-direction: column;
617
556
  gap: 8px;
618
557
  .cart_summary_shippingLabel_text {
619
- font-family: var(
620
- --_ctm-mob-dn-sg-cs-ft-fy,
621
- var(--_ctm-tab-dn-sg-cs-ft-fy, var(--_ctm-dn-sg-cs-ft-fy))
622
- );
623
- color: var(
624
- --_ctm-mob-dn-sg-cs-cr,
625
- var(--_ctm-tab-dn-sg-cs-cr, var(--_ctm-dn-sg-cs-cr))
626
- );
627
- font-weight: var(
628
- --_ctm-mob-dn-sg-cs-ft-wt,
629
- var(--_ctm-tab-dn-sg-cs-ft-wt, var(--_ctm-dn-sg-cs-ft-wt))
630
- );
631
- font-size: var(
632
- --_ctm-mob-dn-sg-cs-ft-se,
633
- var(--_ctm-tab-dn-sg-cs-ft-se, var(--_ctm-dn-sg-cs-ft-se))
634
- );
635
- text-decoration: var(
636
- --_ctm-mob-dn-sg-cs-ue,
637
- var(--_ctm-tab-dn-sg-cs-ue, var(--_ctm-dn-sg-cs-ue))
638
- );
639
- letter-spacing: var(
640
- --_ctm-mob-dn-sg-cs-lr-sg,
641
- var(--_ctm-tab-dn-sg-cs-lr-sg, var(--_ctm-dn-sg-cs-lr-sg))
642
- );
643
- line-height: var(
644
- --_ctm-mob-dn-sg-cs-le-ht,
645
- var(--_ctm-tab-dn-sg-cs-le-ht, var(--_ctm-dn-sg-cs-le-ht))
646
- );
647
- font-style: var(
648
- --_ctm-mob-dn-sg-cs-ft-se-ic,
649
- var(--_ctm-tab-dn-sg-cs-ft-se-ic, var(--_ctm-dn-sg-cs-ft-se-ic))
650
- );
651
- text-align: var(
652
- --_ctm-mob-dn-sg-cs-tt-an,
653
- var(--_ctm-tab-dn-sg-cs-tt-an, var(--_ctm-dn-sg-cs-tt-an))
654
- );
558
+ font-size: 14px;
559
+ color: var(--_gray-500);
655
560
  }
656
561
  .cart_summary_shippingLabel_value {
657
562
  font-family: var(
@@ -692,39 +597,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
692
597
  );
693
598
  }
694
599
  .cart_summary_tax_text {
695
- font-family: var(
696
- --_ctm-mob-dn-tx-ft-fy,
697
- var(--_ctm-tab-dn-tx-ft-fy, var(--_ctm-dn-tx-ft-fy))
698
- );
699
- color: var(--_ctm-mob-dn-tx-cr, var(--_ctm-tab-dn-tx-cr, var(--_ctm-dn-tx-cr)));
700
- font-weight: var(
701
- --_ctm-mob-dn-tx-ft-wt,
702
- var(--_ctm-tab-dn-tx-ft-wt, var(--_ctm-dn-tx-ft-wt))
703
- );
704
- font-size: var(
705
- --_ctm-mob-dn-tx-ft-se,
706
- var(--_ctm-tab-dn-tx-ft-se, var(--_ctm-dn-tx-ft-se))
707
- );
708
- text-decoration: var(
709
- --_ctm-mob-dn-tx-ue,
710
- var(--_ctm-tab-dn-tx-ue, var(--_ctm-dn-tx-ue))
711
- );
712
- letter-spacing: var(
713
- --_ctm-mob-dn-tx-lr-sg,
714
- var(--_ctm-tab-dn-tx-lr-sg, var(--_ctm-dn-tx-lr-sg))
715
- );
716
- line-height: var(
717
- --_ctm-mob-dn-tx-le-ht,
718
- var(--_ctm-tab-dn-tx-le-ht, var(--_ctm-dn-tx-le-ht))
719
- );
720
- font-style: var(
721
- --_ctm-mob-dn-tx-ft-se-ic,
722
- var(--_ctm-tab-dn-tx-ft-se-ic, var(--_ctm-dn-tx-ft-se-ic))
723
- );
724
- text-align: var(
725
- --_ctm-mob-dn-tx-tt-an,
726
- var(--_ctm-tab-dn-tx-tt-an, var(--_ctm-dn-tx-tt-an))
727
- );
600
+ font-size: 14px;
601
+ color: var(--_gray-500);
728
602
  }
729
603
  .cart_summary_tax_value {
730
604
  font-family: var(
@@ -0,0 +1,127 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $activeElementSelector: "[data-has-clicked='true']";
5
+ [data-div-type="element"] {
6
+ &[data-element-type="cartWrapper"] {
7
+ // width: var(--_sf-cartw-nw-wh);
8
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ // width: calc(
10
+ // 1% *
11
+ // var(
12
+ // --_ctm-mob-cartw-ele-nw-wh-vl,
13
+ // var(--_ctm-tab-cartw-ele-nw-wh-vl, var(--_ctm-cartw-ele-nw-wh-vl)),
14
+ // auto
15
+ // )
16
+ // );
17
+ // width: 100%;
18
+ // height: var(--_ctm-cartw-lt-ht);
19
+
20
+ width: calc(
21
+ 1% *
22
+ var(
23
+ --_ctm-mob-cartw-ele-nw-wh-vl,
24
+ var(--_ctm-tab-cartw-ele-nw-wh-vl, var(--_ctm-cartw-ele-nw-wh-vl, auto))
25
+ )
26
+ );
27
+ margin: var(
28
+ --_ctm-mob-cartw-lt-mn,
29
+ var(--_ctm-tab-cartw-lt-mn, var(--_ctm-cartw-lt-mn, var(--_ctm-lt-mn)))
30
+ );
31
+
32
+ &[data-view-state="full"] {
33
+ & > .wrapper {
34
+ grid-template-rows: auto !important;
35
+ }
36
+ }
37
+ & > div {
38
+ &.wrapper {
39
+ width: 100%;
40
+ min-height: prepareMediaVariable(--_ctm-cartw-lt-mn-ht);
41
+ padding: var(--_ctm-mob-cartw-lt-pg, var(--_ctm-tab-cartw-lt-pg, var(--_ctm-cartw-lt-pg)));
42
+
43
+ background-color: var(
44
+ --_ctm-mob-cartw-dn-bd-cr,
45
+ var(--_ctm-tab-cartw-dn-bd-cr, var(--_ctm-cartw-dn-bd-cr))
46
+ );
47
+ background-image: var(
48
+ --_ctm-mob-cartw-dn-bd-ie,
49
+ var(--_ctm-tab-cartw-dn-bd-ie, var(--_ctm-cartw-dn-bd-ie))
50
+ );
51
+ background-attachment: var(
52
+ --_ctm-mob-cartw-dn-bd-at,
53
+ var(--_ctm-tab-cartw-dn-bd-at, var(--_ctm-cartw-dn-bd-at))
54
+ );
55
+ background-position: var(
56
+ --_ctm-mob-cartw-dn-bd-pn,
57
+ var(--_ctm-tab-cartw-dn-bd-pn, var(--_ctm-cartw-dn-bd-pn))
58
+ );
59
+ background-repeat: var(
60
+ --_ctm-mob-cartw-dn-bd-rt,
61
+ var(--_ctm-tab-cartw-dn-bd-rt, var(--_ctm-cartw-dn-bd-rt))
62
+ );
63
+ background-size: var(
64
+ --_ctm-mob-cartw-dn-bd-se,
65
+ var(--_ctm-tab-cartw-dn-bd-se, var(--_ctm-cartw-dn-bd-se))
66
+ );
67
+ border-radius: var(
68
+ --_ctm-mob-cartw-dn-br-rs,
69
+ var(--_ctm-tab-cartw-dn-br-rs, var(--_ctm-cartw-dn-br-rs))
70
+ );
71
+ border-color: var(
72
+ --_ctm-mob-cartw-dn-br-cr,
73
+ var(--_ctm-tab-cartw-dn-br-cr, var(--_ctm-cartw-dn-br-cr))
74
+ );
75
+ border-style: var(
76
+ --_ctm-mob-cartw-dn-br-se,
77
+ var(--_ctm-tab-cartw-dn-br-se, var(--_ctm-cartw-dn-br-se))
78
+ );
79
+ border-width: var(
80
+ --_ctm-mob-cartw-dn-br-wh,
81
+ var(--_ctm-tab-cartw-dn-br-wh, var(--_ctm-cartw-dn-br-wh))
82
+ );
83
+ box-shadow: var(
84
+ --_hover-show-shadow,
85
+ var(
86
+ --_sf-hr-bx-sw,
87
+ var(
88
+ --_show-shadow,
89
+ var(
90
+ --_ctm-mob-dn-dt-se-sw-ae,
91
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
92
+ )
93
+ var(
94
+ --_ctm-mob-dn-dt-se-sw-br,
95
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
96
+ )
97
+ var(
98
+ --_ctm-mob-dn-dt-se-sw-sd,
99
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
100
+ )
101
+ var(
102
+ --_ctm-mob-dn-dt-se-sw-cr,
103
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
104
+ )
105
+ )
106
+ )
107
+ );
108
+ }
109
+ }
110
+
111
+ // &[data-view-state="full"] {
112
+ // width: auto;
113
+ // margin: 0;
114
+ // justify-self: stretch !important;
115
+ // align-self: stretch !important;
116
+ // cursor: auto;
117
+ // &:is(#{$activeElementSelector}) {
118
+ // & > div {
119
+ // &[data-div-type="wrapper__layer"] {
120
+ // --_sf-vt-zz: visible;
121
+ // --_sf-op-zz: 1;
122
+ // }
123
+ // }
124
+ // }
125
+ // }
126
+ }
127
+ }
@@ -16,6 +16,7 @@ $button-padding: 6px 12px;
16
16
  .cart-dropdown-container {
17
17
  position: relative;
18
18
  display: inline-block;
19
+
19
20
  .overlay-panel {
20
21
  margin-top: 10px;
21
22
  }
@@ -120,6 +121,23 @@ $button-padding: 6px 12px;
120
121
  max-height: 250px;
121
122
  padding: 4px;
122
123
  overflow-y: auto;
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 2px;
127
+ &.empty_message {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ font-size: 14px;
132
+ font-weight: 500;
133
+ height: 100%;
134
+ .option {
135
+ cursor: auto;
136
+ &:hover {
137
+ background-color: none !important;
138
+ }
139
+ }
140
+ }
123
141
 
124
142
  .option {
125
143
  display: flex;
@@ -161,6 +179,7 @@ $button-padding: 6px 12px;
161
179
  margin-right: 8px;
162
180
  width: auto;
163
181
  cursor: pointer;
182
+ accent-color: var(--_primary-400);
164
183
  }
165
184
 
166
185
  input[type="radio"] {
@@ -184,18 +203,18 @@ $button-padding: 6px 12px;
184
203
  .dropdown_overlay_secondary_button {
185
204
  background: transparent;
186
205
  border: 1px solid transparent;
187
- color: $text-color;
206
+ color: var(--_gray-600);
188
207
  cursor: pointer;
189
208
  display: flex;
190
209
  align-items: center;
191
210
  justify-content: center;
192
211
  flex: 1 0 0;
193
212
  margin: $spacing-md 0px;
213
+ border-radius: 4px;
194
214
 
195
215
  &:hover {
196
- border: 1px solid $primary-color;
197
- border-radius: 4px;
198
- color: $primary-color;
216
+ color: var(--_primary-400);
217
+ background-color: var(--_gray-100);
199
218
  }
200
219
  }
201
220