@tet/tet-components 1.3.46-staging → 1.3.47-staging

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 (157) hide show
  1. package/dist/cjs/index-d323e22a.js +8 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/tet-accordion.cjs.entry.js +6 -6
  4. package/dist/cjs/tet-address-offers-view.cjs.entry.js +1 -1
  5. package/dist/cjs/tet-b2b-service-calculator.cjs.entry.js +1 -1
  6. package/dist/cjs/tet-border-radius.cjs.entry.js +1 -1
  7. package/dist/cjs/tet-business-lines.cjs.entry.js +1 -1
  8. package/dist/cjs/tet-colors.cjs.entry.js +3 -3
  9. package/dist/cjs/tet-components.cjs.js +1 -1
  10. package/dist/cjs/tet-datepicker-header_4.cjs.entry.js +5 -5
  11. package/dist/cjs/tet-datepicker.cjs.entry.js +4 -4
  12. package/dist/cjs/tet-expansion-panel.cjs.entry.js +1 -1
  13. package/dist/cjs/tet-font-weight.cjs.entry.js +1 -1
  14. package/dist/cjs/tet-fonts.cjs.entry.js +1 -1
  15. package/dist/cjs/tet-grid.cjs.entry.js +1 -1
  16. package/dist/cjs/tet-layout.cjs.entry.js +1 -1
  17. package/dist/cjs/tet-link.cjs.entry.js +1 -1
  18. package/dist/cjs/tet-navigation-mobile.cjs.entry.js +3 -3
  19. package/dist/cjs/tet-news-card-list.cjs.entry.js +1 -1
  20. package/dist/cjs/tet-notification.cjs.entry.js +1 -1
  21. package/dist/cjs/tet-number-input_2.cjs.entry.js +1 -1
  22. package/dist/cjs/tet-range-slider_2.cjs.entry.js +7 -7
  23. package/dist/cjs/tet-spacing.cjs.entry.js +1 -1
  24. package/dist/cjs/tet-stepper-v3.cjs.entry.js +42 -0
  25. package/dist/cjs/tet-textarea.cjs.entry.js +2 -2
  26. package/dist/cjs/tet-thank-you-view-v3.cjs.entry.js +92 -0
  27. package/dist/cjs/tet-tooltip.cjs.entry.js +1 -1
  28. package/dist/collection/collection-manifest.json +2 -0
  29. package/dist/collection/components/basic/steppers/tet-stepper-v3/test/tet-stepper-v3.spec.js +135 -0
  30. package/dist/collection/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.css +486 -0
  31. package/dist/collection/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.js +89 -0
  32. package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-header/tet-datepicker-header.js +2 -2
  33. package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-month-view/tet-datepicker-month-view.js +1 -1
  34. package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js +1 -1
  35. package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-year-view/tet-datepicker-year-view.js +1 -1
  36. package/dist/collection/components/simple/inputs/tet-datepicker/tet-datepicker.js +4 -4
  37. package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js +7 -7
  38. package/dist/collection/components/simple/inputs/tet-stepper-input/tet-stepper-input.js +1 -1
  39. package/dist/collection/components/simple/inputs/tet-textarea/tet-textarea.js +2 -2
  40. package/dist/collection/components/simple/lists/tet-news-card-list/tet-news-card-list.js +1 -1
  41. package/dist/collection/components/simple/menu/tet-navigation-mobile/tet-navigation-mobile.js +3 -3
  42. package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js +6 -6
  43. package/dist/collection/components/simple/structural/tet-expansion-panel/tet-expansion-panel.js +1 -1
  44. package/dist/collection/components/simple/text-blocks/tet-notification/tet-notification.js +1 -1
  45. package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.js +1 -1
  46. package/dist/collection/components/views/tet-address-offers-view/tet-address-offers-view.js +1 -1
  47. package/dist/collection/components/views/tet-b2b-service-calculator/tet-b2b-service-calculator.js +1 -1
  48. package/dist/collection/components/views/tet-business-lines/tet-business-lines.js +1 -1
  49. package/dist/collection/components/views/tet-thank-you-view-v3/test/tet-thank-you-view-v3.spec.js +175 -0
  50. package/dist/collection/components/views/tet-thank-you-view-v3/tet-thank-you-view-v3.css +469 -0
  51. package/dist/collection/components/views/tet-thank-you-view-v3/tet-thank-you-view-v3.js +357 -0
  52. package/dist/collection/docs/styling/border-radius/tet-border-radius.js +1 -1
  53. package/dist/collection/docs/styling/colors/tet-colors.js +3 -3
  54. package/dist/collection/docs/styling/font-weight/tet-font-weight.js +1 -1
  55. package/dist/collection/docs/styling/fonts/tet-fonts.js +1 -1
  56. package/dist/collection/docs/styling/layout/tet-layout.js +1 -1
  57. package/dist/collection/docs/styling/link/tet-link.js +1 -1
  58. package/dist/collection/docs/styling/spacing/tet-spacing.js +1 -1
  59. package/dist/collection/docs/styling/tet-grid/tet-grid.js +1 -1
  60. package/dist/components/index.js +4 -0
  61. package/dist/components/{p-5c4658bd.js → p-119593ca.js} +7 -7
  62. package/dist/components/{p-fd090867.js → p-2e917489.js} +2 -2
  63. package/dist/components/{p-93a87e22.js → p-30eb6d1b.js} +1 -1
  64. package/dist/components/p-72404267.js +62 -0
  65. package/dist/components/{p-634cfb54.js → p-7cc9438a.js} +1 -1
  66. package/dist/components/{p-4e09bf04.js → p-b58f8745.js} +1 -1
  67. package/dist/components/{p-52b93702.js → p-c5831a5c.js} +1 -1
  68. package/dist/components/{p-be496f5f.js → p-dffa2398.js} +1 -1
  69. package/dist/components/{p-afca8b65.js → p-faf19942.js} +1 -1
  70. package/dist/components/tet-accordion.js +6 -6
  71. package/dist/components/tet-address-offers-view.js +1 -1
  72. package/dist/components/tet-b2b-service-calculator.js +2 -2
  73. package/dist/components/tet-border-radius.js +1 -1
  74. package/dist/components/tet-business-lines.js +1 -1
  75. package/dist/components/tet-cloud-configurator.js +1 -1
  76. package/dist/components/tet-colors.js +3 -3
  77. package/dist/components/tet-datepicker-header.js +1 -1
  78. package/dist/components/tet-datepicker-month-view.js +1 -1
  79. package/dist/components/tet-datepicker-multi-year-view.js +1 -1
  80. package/dist/components/tet-datepicker-year-view.js +1 -1
  81. package/dist/components/tet-datepicker.js +8 -8
  82. package/dist/components/tet-expansion-panel.js +1 -1
  83. package/dist/components/tet-font-weight.js +1 -1
  84. package/dist/components/tet-fonts.js +1 -1
  85. package/dist/components/tet-grid.js +1 -1
  86. package/dist/components/tet-layout.js +1 -1
  87. package/dist/components/tet-link.js +1 -1
  88. package/dist/components/tet-macd-view.js +1 -1
  89. package/dist/components/tet-navigation-mobile.js +3 -3
  90. package/dist/components/tet-news-card-list.js +1 -1
  91. package/dist/components/tet-notification.js +1 -1
  92. package/dist/components/tet-range-slider.js +1 -1
  93. package/dist/components/tet-referral.js +1 -1
  94. package/dist/components/tet-spacing.js +1 -1
  95. package/dist/components/tet-stepper-input.js +1 -1
  96. package/dist/components/tet-stepper-v3.d.ts +11 -0
  97. package/dist/components/tet-stepper-v3.js +6 -0
  98. package/dist/components/tet-table.js +1 -1
  99. package/dist/components/tet-textarea.js +2 -2
  100. package/dist/components/tet-thank-you-view-v3.d.ts +11 -0
  101. package/dist/components/tet-thank-you-view-v3.js +137 -0
  102. package/dist/components/tet-tooltip.js +1 -1
  103. package/dist/esm/index-8ac89426.js +8 -0
  104. package/dist/esm/loader.js +1 -1
  105. package/dist/esm/tet-accordion.entry.js +6 -6
  106. package/dist/esm/tet-address-offers-view.entry.js +1 -1
  107. package/dist/esm/tet-b2b-service-calculator.entry.js +1 -1
  108. package/dist/esm/tet-border-radius.entry.js +1 -1
  109. package/dist/esm/tet-business-lines.entry.js +1 -1
  110. package/dist/esm/tet-colors.entry.js +3 -3
  111. package/dist/esm/tet-components.js +1 -1
  112. package/dist/esm/tet-datepicker-header_4.entry.js +5 -5
  113. package/dist/esm/tet-datepicker.entry.js +4 -4
  114. package/dist/esm/tet-expansion-panel.entry.js +1 -1
  115. package/dist/esm/tet-font-weight.entry.js +1 -1
  116. package/dist/esm/tet-fonts.entry.js +1 -1
  117. package/dist/esm/tet-grid.entry.js +1 -1
  118. package/dist/esm/tet-layout.entry.js +1 -1
  119. package/dist/esm/tet-link.entry.js +1 -1
  120. package/dist/esm/tet-navigation-mobile.entry.js +3 -3
  121. package/dist/esm/tet-news-card-list.entry.js +1 -1
  122. package/dist/esm/tet-notification.entry.js +1 -1
  123. package/dist/esm/tet-number-input_2.entry.js +1 -1
  124. package/dist/esm/tet-range-slider_2.entry.js +7 -7
  125. package/dist/esm/tet-spacing.entry.js +1 -1
  126. package/dist/esm/tet-stepper-v3.entry.js +38 -0
  127. package/dist/esm/tet-textarea.entry.js +2 -2
  128. package/dist/esm/tet-thank-you-view-v3.entry.js +88 -0
  129. package/dist/esm/tet-tooltip.entry.js +1 -1
  130. package/dist/tet-components/{p-474dd436.entry.js → p-044a7b2b.entry.js} +1 -1
  131. package/dist/tet-components/{p-e31d543a.entry.js → p-14d87f89.entry.js} +1 -1
  132. package/dist/tet-components/{p-43bcfad3.entry.js → p-207ada6c.entry.js} +1 -1
  133. package/dist/tet-components/{p-4864da73.entry.js → p-20cc9991.entry.js} +1 -1
  134. package/dist/tet-components/p-2220ef34.entry.js +1 -0
  135. package/dist/tet-components/{p-3b6ad95f.entry.js → p-2b0a581e.entry.js} +1 -1
  136. package/dist/tet-components/{p-f4723461.entry.js → p-3f5a370b.entry.js} +1 -1
  137. package/dist/tet-components/{p-88a1be78.entry.js → p-4be33a22.entry.js} +1 -1
  138. package/dist/tet-components/{p-3d1093ac.entry.js → p-57bd2425.entry.js} +1 -1
  139. package/dist/tet-components/{p-17028ff9.entry.js → p-597d61a8.entry.js} +1 -1
  140. package/dist/tet-components/{p-3e5ef8bd.entry.js → p-65ce99cc.entry.js} +1 -1
  141. package/dist/tet-components/{p-7fd1cbd0.entry.js → p-6f8c1afd.entry.js} +1 -1
  142. package/dist/tet-components/{p-833f5a7b.entry.js → p-77f042d2.entry.js} +1 -1
  143. package/dist/tet-components/{p-25f8f58c.entry.js → p-7a13374d.entry.js} +1 -1
  144. package/dist/tet-components/{p-f125b69a.entry.js → p-8294a69c.entry.js} +1 -1
  145. package/dist/tet-components/{p-51093fb8.entry.js → p-9610bfff.entry.js} +1 -1
  146. package/dist/tet-components/{p-15b70f90.entry.js → p-9a3b6409.entry.js} +1 -1
  147. package/dist/tet-components/p-a9533650.entry.js +1 -0
  148. package/dist/tet-components/{p-c016df1b.entry.js → p-c3678283.entry.js} +1 -1
  149. package/dist/tet-components/{p-2fb2eb5a.entry.js → p-d00bb23c.entry.js} +1 -1
  150. package/dist/tet-components/{p-56570570.entry.js → p-dff84742.entry.js} +1 -1
  151. package/dist/tet-components/{p-cf4d36b7.entry.js → p-ed41da68.entry.js} +1 -1
  152. package/dist/tet-components/{p-aef89e2d.entry.js → p-fa9be8d1.entry.js} +1 -1
  153. package/dist/tet-components/{p-48b0ca02.entry.js → p-fd04e87c.entry.js} +1 -1
  154. package/dist/tet-components/tet-components.esm.js +1 -1
  155. package/dist/types/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.d.ts +22 -0
  156. package/dist/types/components.d.ts +185 -0
  157. package/package.json +1 -1
@@ -0,0 +1,486 @@
1
+ /* Tet design styles */
2
+ @font-face{font-family:Avenir Next;src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix);src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix) format("eot"),url(assets/fonts/3c3e10968ffc97c2a52c5830f9886d1f.woff2) format("woff2"),url(assets/fonts/660fbf858d30d7685fa4b166080f5980.woff) format("woff"),url(assets/fonts/2b7748589092fd1a10b806abdfb562ff.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix);src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix) format("eot"),url(assets/fonts/aad36ecead30948bb30fe0ef818b749c.woff2) format("woff2"),url(assets/fonts/c437d7752feaf3f056bbf8613e898d3a.woff) format("woff"),url(assets/fonts/b8df4d02ef5de13a813917a85bc4a9c4.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix);src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix) format("eot"),url(assets/fonts/4d52f8276a74ea8efbad833ed790367c.woff2) format("woff2"),url(assets/fonts/a067695dd1b87e927f4056c040d84669.woff) format("woff"),url(assets/fonts/510a664af9771b72d4ce5e637109ca3c.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix);src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix) format("eot"),url(assets/fonts/63f5acc71d9852468683a4bfe824a28f.woff2) format("woff2"),url(assets/fonts/ed94c737da267752ce0abd79bb003ff6.woff) format("woff"),url(assets/fonts/6302f55a6dc6b12365177dc89b7d63cf.ttf) format("truetype");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix);src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix) format("eot"),url(assets/fonts/1fe7da97fe9dbe1349aca9b54b5fdf69.woff2) format("woff2"),url(assets/fonts/dacc6a84278e221422902af99579ada5.woff) format("woff"),url(assets/fonts/e530c573663a3a07243d303fbf7db508.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix);src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix) format("eot"),url(assets/fonts/93ec0034623fc696601ab99aba652d4c.woff2) format("woff2"),url(assets/fonts/d73c8eb1c13abe1237366aa3ee829a59.woff) format("woff"),url(assets/fonts/7b6dcef99f3f4b23346e23925ec8678f.ttf) format("truetype");font-weight:600;font-style:italic;font-display:swap}
3
+ .tet-icon{font-family:Tet Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}@font-face{font-family:Tet Icons;src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot);src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot?#iefix) format("embedded-opentype"),url(assets/fonts/25f10ef322a1220b2e9e11db38b73892.woff2) format("woff2"),url(assets/fonts/fed75ac1edcf1c25cdd8612d2c365f9a.woff) format("woff"),url(assets/fonts/df7fbe67cabb13cb837172a73c46378a.ttf) format("truetype"),url(assets/fonts/5486d8c87e2abc6c13ed952a6cc96658.svg#tet-icons) format("svg");font-weight:400;font-style:normal}.tet-icon:before{content:"\E84E"}.tet-icon--sm{font-size:1.125rem}.tet-icon--md{font-size:1.5rem}.tet-icon--lg{font-size:2.25rem}.tet-icon--xl{font-size:3rem}.tet-icon--xxl{font-size:4rem}.tet-icon--0{font-size:0}.tet-icon--1{font-size:.0625rem}.tet-icon--2{font-size:.125rem}.tet-icon--3{font-size:.1875rem}.tet-icon--4{font-size:.25rem}.tet-icon--5{font-size:.3125rem}.tet-icon--6{font-size:.375rem}.tet-icon--7{font-size:.4375rem}.tet-icon--8{font-size:.5rem}.tet-icon--9{font-size:.5625rem}.tet-icon--10{font-size:.625rem}.tet-icon--11{font-size:.6875rem}.tet-icon--12{font-size:.75rem}.tet-icon--13{font-size:.8125rem}.tet-icon--14{font-size:.875rem}.tet-icon--15{font-size:.9375rem}.tet-icon--16{font-size:1rem}.tet-icon--17{font-size:1.0625rem}.tet-icon--18{font-size:1.125rem}.tet-icon--19{font-size:1.1875rem}.tet-icon--20{font-size:1.25rem}.tet-icon--21{font-size:1.3125rem}.tet-icon--22{font-size:1.375rem}.tet-icon--23{font-size:1.4375rem}.tet-icon--24{font-size:1.5rem}.tet-icon--25{font-size:1.5625rem}.tet-icon--26{font-size:1.625rem}.tet-icon--27{font-size:1.6875rem}.tet-icon--28{font-size:1.75rem}.tet-icon--29{font-size:1.8125rem}.tet-icon--30{font-size:1.875rem}.tet-icon--31{font-size:1.9375rem}.tet-icon--32{font-size:2rem}.tet-icon--33{font-size:2.0625rem}.tet-icon--34{font-size:2.125rem}.tet-icon--35{font-size:2.1875rem}.tet-icon--36{font-size:2.25rem}.tet-icon--37{font-size:2.3125rem}.tet-icon--38{font-size:2.375rem}.tet-icon--39{font-size:2.4375rem}.tet-icon--40{font-size:2.5rem}.tet-icon--41{font-size:2.5625rem}.tet-icon--42{font-size:2.625rem}.tet-icon--43{font-size:2.6875rem}.tet-icon--44{font-size:2.75rem}.tet-icon--45{font-size:2.8125rem}.tet-icon--46{font-size:2.875rem}.tet-icon--47{font-size:2.9375rem}.tet-icon--48{font-size:3rem}.tet-icon--49{font-size:3.0625rem}.tet-icon--50{font-size:3.125rem}.tet-icon--51{font-size:3.1875rem}.tet-icon--52{font-size:3.25rem}.tet-icon--53{font-size:3.3125rem}.tet-icon--54{font-size:3.375rem}.tet-icon--55{font-size:3.4375rem}.tet-icon--56{font-size:3.5rem}.tet-icon--57{font-size:3.5625rem}.tet-icon--58{font-size:3.625rem}.tet-icon--59{font-size:3.6875rem}.tet-icon--60{font-size:3.75rem}.tet-icon--61{font-size:3.8125rem}.tet-icon--62{font-size:3.875rem}.tet-icon--63{font-size:3.9375rem}.tet-icon--64{font-size:4rem}.tet-icon--65{font-size:4.0625rem}.tet-icon--66{font-size:4.125rem}.tet-icon--67{font-size:4.1875rem}.tet-icon--68{font-size:4.25rem}.tet-icon--69{font-size:4.3125rem}.tet-icon--70{font-size:4.375rem}.tet-icon--71{font-size:4.4375rem}.tet-icon--72{font-size:4.5rem}.tet-icon--73{font-size:4.5625rem}.tet-icon--74{font-size:4.625rem}.tet-icon--75{font-size:4.6875rem}.tet-icon--76{font-size:4.75rem}.tet-icon--77{font-size:4.8125rem}.tet-icon--78{font-size:4.875rem}.tet-icon--79{font-size:4.9375rem}.tet-icon--80{font-size:5rem}.tet-icon--81{font-size:5.0625rem}.tet-icon--82{font-size:5.125rem}.tet-icon--83{font-size:5.1875rem}.tet-icon--84{font-size:5.25rem}.tet-icon--85{font-size:5.3125rem}.tet-icon--86{font-size:5.375rem}.tet-icon--87{font-size:5.4375rem}.tet-icon--88{font-size:5.5rem}.tet-icon--89{font-size:5.5625rem}.tet-icon--90{font-size:5.625rem}.tet-icon--91{font-size:5.6875rem}.tet-icon--92{font-size:5.75rem}.tet-icon--93{font-size:5.8125rem}.tet-icon--94{font-size:5.875rem}.tet-icon--95{font-size:5.9375rem}.tet-icon--96{font-size:6rem}.tet-icon--97{font-size:6.0625rem}.tet-icon--98{font-size:6.125rem}.tet-icon--99{font-size:6.1875rem}.tet-icon--100{font-size:6.25rem}.tet-icon--101{font-size:6.3125rem}.tet-icon__add:before{content:"\E800"}.tet-icon__alert-circled:before{content:"\E801"}.tet-icon__alert:before{content:"\E802"}.tet-icon__bank:before{content:"\E803"}.tet-icon__box:before{content:"\E804"}.tet-icon__download:before{content:"\E805"}.tet-icon__burger:before{content:"\E806"}.tet-icon__cancel:before{content:"\E807"}.tet-icon__printer:before{content:"\E808"}.tet-icon__cart-add:before{content:"\E809"}.tet-icon__cart-remove:before{content:"\E80A"}.tet-icon__cart:before{content:"\E80B"}.tet-icon__chat:before{content:"\E80C"}.tet-icon__arrow-up:before{content:"\E80D"}.tet-icon__calendar:before{content:"\E80E"}.tet-icon__help-circled:before{content:"\E80F"}.tet-icon__edit:before{content:"\E810"}.tet-icon__external-link:before{content:"\E811"}.tet-icon__gift:before{content:"\E812"}.tet-icon__person:before{content:"\E813"}.tet-icon__heart:before{content:"\E814"}.tet-icon__language:before{content:"\E815"}.tet-icon__help:before{content:"\E816"}.tet-icon__home-1:before{content:"\E817"}.tet-icon__location:before{content:"\E818"}.tet-icon__home-3:before{content:"\E819"}.tet-icon__chart-even:before{content:"\E81A"}.tet-icon__info-2:before{content:"\E81B"}.tet-icon__key:before{content:"\E81C"}.tet-icon__info:before{content:"\E81D"}.tet-icon__lock-opened:before{content:"\E81E"}.tet-icon__lock-outlined:before{content:"\E81F"}.tet-icon__lock:before{content:"\E820"}.tet-icon__laptop-filled:before{content:"\E821"}.tet-icon__mail:before{content:"\E822"}.tet-icon__options:before{content:"\E823"}.tet-icon__chart-uneven:before{content:"\E824"}.tet-icon__mail-2:before{content:"\E825"}.tet-icon__remove:before{content:"\E826"}.tet-icon__mobile-filled:before{content:"\E827"}.tet-icon__ilu-calendar-check:before{content:"\E828"}.tet-icon__settings-outlined:before{content:"\E829"}.tet-icon__tablet:before{content:"\E82A"}.tet-icon__thumb-up:before{content:"\E82B"}.tet-icon__ilu-purchase:before{content:"\E82C"}.tet-icon__chart-even-outlined:before{content:"\E82D"}.tet-icon__movie:before{content:"\E82E"}.tet-icon__percent:before{content:"\E82F"}.tet-icon__ilu-change-whenever:before{content:"\E830"}.tet-icon__truck:before{content:"\E831"}.tet-icon__zero:before{content:"\E832"}.tet-icon__attach:before{content:"\E833"}.tet-icon__cloud-done:before{content:"\E834"}.tet-icon__cloud-download:before{content:"\E835"}.tet-icon__cloud-upload:before{content:"\E836"}.tet-icon__cloud:before{content:"\E837"}.tet-icon__folder:before{content:"\E838"}.tet-icon__remote:before{content:"\E839"}.tet-icon__router:before{content:"\E83A"}.tet-icon__shield-filled:before{content:"\E83B"}.tet-icon__shield:before{content:"\E83C"}.tet-icon__ilu-devices:before{content:"\E83D"}.tet-icon__ilu-get-points:before{content:"\E83E"}.tet-icon__tv:before{content:"\E83F"}.tet-icon__ilu-internet:before{content:"\E840"}.tet-icon__wifi-outlined:before{content:"\E841"}.tet-icon__wifi:before{content:"\E842"}.tet-icon__description-outlined:before{content:"\E843"}.tet-icon__laptop:before{content:"\E844"}.tet-icon__chart-uneven-outlined:before{content:"\E845"}.tet-icon__meter:before{content:"\E846"}.tet-icon__mobile:before{content:"\E847"}.tet-icon__phone:before{content:"\E848"}.tet-icon__plug-filled:before{content:"\E849"}.tet-icon__plug:before{content:"\E84A"}.tet-icon__print:before{content:"\E84B"}.tet-icon__camera:before{content:"\E84C"}.tet-icon__clock:before{content:"\E84D"}.tet-icon__placeholder:before{content:"\E84E"}.tet-icon__tv-filled:before{content:"\E84F"}.tet-icon__arrow-down:before{content:"\E850"}.tet-icon__arrow-left:before{content:"\E851"}.tet-icon__arrow-right:before{content:"\E852"}.tet-icon__description:before{content:"\E853"}.tet-icon__login:before{content:"\E854"}.tet-icon__check:before{content:"\E855"}.tet-icon__chevron-down:before{content:"\E856"}.tet-icon__chevron-left:before{content:"\E857"}.tet-icon__chevron-right:before{content:"\E858"}.tet-icon__chevron-up:before{content:"\E859"}.tet-icon__close-circled:before{content:"\E85A"}.tet-icon__close:before{content:"\E85B"}.tet-icon__more-horizontal:before{content:"\E85C"}.tet-icon__more-vertical:before{content:"\E85D"}.tet-icon__refresh:before{content:"\E85E"}.tet-icon__facebook:before{content:"\E85F"}.tet-icon__instagram:before{content:"\E860"}.tet-icon__linkedin:before{content:"\E861"}.tet-icon__people:before{content:"\E862"}.tet-icon__logout:before{content:"\E863"}.tet-icon__share:before{content:"\E864"}.tet-icon__twitter:before{content:"\E865"}.tet-icon__cancel-filled:before{content:"\E866"}.tet-icon__done:before{content:"\E867"}.tet-icon__star-filled:before{content:"\E868"}.tet-icon__star:before{content:"\E869"}.tet-icon__clipboard:before{content:"\E86A"}.tet-icon__ilu-calendar:before{content:"\E86B"}.tet-icon__check-circled:before{content:"\E86C"}.tet-icon__ilu-choose-channels:before{content:"\E86D"}.tet-icon__search:before{content:"\E86E"}.tet-icon__warning:before{content:"\E86F"}.tet-icon__ilu-clock-1:before{content:"\E870"}.tet-icon__ilu-fold:before{content:"\E871"}.tet-icon__ilu-letter:before{content:"\E872"}.tet-icon__ilu-pay:before{content:"\E873"}.tet-icon__ilu-meter:before{content:"\E874"}.tet-icon__ilu-sign:before{content:"\E875"}.tet-icon__smart-watch-filled:before{content:"\E876"}.tet-icon__washing-machine-filled:before{content:"\E877"}.tet-icon__bullet:before{content:"\E878"}.tet-icon__sound:before{content:"\E879"}.tet-icon__dropdown:before{content:"\E87A"}.tet-icon__mask-pass:before{content:"\E87B"}.tet-icon__select:before{content:"\E87C"}.tet-icon__text-area-sizing:before{content:"\E87D"}.tet-icon__unmask-pass:before{content:"\E87E"}.tet-icon__bullet-small:before{content:"\E882"}.tet-icon__electric-bolt:before{content:"\E880"}.tet-icon__sun:before{content:"\E881"}
4
+ :host {
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ *,
9
+ *:before,
10
+ *:after {
11
+ box-sizing: inherit;
12
+ padding: 0;
13
+ margin: 0;
14
+ }
15
+
16
+ :host {
17
+ --color-gray-light: #cdd2de;
18
+ --color-ta070: #f5f6f8;
19
+ --color-ta080: #e6e8ee;
20
+ --color-ta100: #cdd2de;
21
+ --color-ta200: #9ba5be;
22
+ --color-ta300: #69789c;
23
+ --color-ta500: #1e356a;
24
+ --color-ta600: #051d59;
25
+ --color-tc090: #d6e6fd;
26
+ --color-tc100: #d1dffe;
27
+ --color-tc300: #75a1fb;
28
+ --color-tc500: #1a70f6;
29
+ --color-tc600: #0060f5;
30
+ --color-td500: #00F1F2;
31
+ --color-td600: #01cbe0;
32
+ --color-tf600: #f53b2a;
33
+ --color-tg300: #2b3036;
34
+ --color-tg400: #1d2128;
35
+ --color-tg500: #12171e;
36
+ --color-tg600: #01050c;
37
+ --color-th500: #f5f5f5;
38
+ --color-ti500: #869198;
39
+ --color-ti600: #aeb7bc;
40
+ --text-font: Gilroy, serif;
41
+ --text-color-darker: var(--color-ta600);
42
+ --text-color-dark: var(--color-ta500);
43
+ --text-color-dark-theme: var(--color-th500);
44
+ --icons-font: Tet Icons, serif;
45
+ }
46
+
47
+ .icon.tet-search {
48
+ font-family: var(--icons-font);
49
+ font-weight: 400;
50
+ font-style: normal;
51
+ font-size: 1.25rem;
52
+ display: inline-block;
53
+ line-height: 1;
54
+ text-transform: none;
55
+ letter-spacing: normal;
56
+ word-wrap: normal;
57
+ white-space: nowrap;
58
+ direction: ltr;
59
+ speak: none;
60
+ -webkit-font-smoothing: antialiased;
61
+ text-rendering: optimizeLegibility;
62
+ -moz-osx-font-smoothing: grayscale;
63
+ }
64
+ .icon.tet-search::before {
65
+ content: "\e86e";
66
+ }
67
+ .icon.tet-close-circled {
68
+ font-family: var(--icons-font);
69
+ font-weight: 400;
70
+ font-style: normal;
71
+ font-size: 1.25rem;
72
+ display: inline-block;
73
+ line-height: 1;
74
+ text-transform: none;
75
+ letter-spacing: normal;
76
+ word-wrap: normal;
77
+ white-space: nowrap;
78
+ direction: ltr;
79
+ speak: none;
80
+ -webkit-font-smoothing: antialiased;
81
+ text-rendering: optimizeLegibility;
82
+ -moz-osx-font-smoothing: grayscale;
83
+ }
84
+ .icon.tet-close-circled::before {
85
+ content: "\e85a";
86
+ }
87
+ .icon.tet-close {
88
+ font-family: var(--icons-font);
89
+ font-weight: 400;
90
+ font-style: normal;
91
+ font-size: 1.25rem;
92
+ display: inline-block;
93
+ line-height: 1;
94
+ text-transform: none;
95
+ letter-spacing: normal;
96
+ word-wrap: normal;
97
+ white-space: nowrap;
98
+ direction: ltr;
99
+ speak: none;
100
+ -webkit-font-smoothing: antialiased;
101
+ text-rendering: optimizeLegibility;
102
+ -moz-osx-font-smoothing: grayscale;
103
+ }
104
+ .icon.tet-close::before {
105
+ content: "\e85b";
106
+ }
107
+ .icon.tet-check-circled {
108
+ font-family: var(--icons-font);
109
+ font-weight: 400;
110
+ font-style: normal;
111
+ font-size: 1.25rem;
112
+ display: inline-block;
113
+ line-height: 1;
114
+ text-transform: none;
115
+ letter-spacing: normal;
116
+ word-wrap: normal;
117
+ white-space: nowrap;
118
+ direction: ltr;
119
+ speak: none;
120
+ -webkit-font-smoothing: antialiased;
121
+ text-rendering: optimizeLegibility;
122
+ -moz-osx-font-smoothing: grayscale;
123
+ }
124
+ .icon.tet-check-circled::before {
125
+ content: "\e86c";
126
+ }
127
+ .icon.tet-check {
128
+ font-family: var(--icons-font);
129
+ font-weight: 400;
130
+ font-style: normal;
131
+ font-size: 1.25rem;
132
+ display: inline-block;
133
+ line-height: 1;
134
+ text-transform: none;
135
+ letter-spacing: normal;
136
+ word-wrap: normal;
137
+ white-space: nowrap;
138
+ direction: ltr;
139
+ speak: none;
140
+ -webkit-font-smoothing: antialiased;
141
+ text-rendering: optimizeLegibility;
142
+ -moz-osx-font-smoothing: grayscale;
143
+ }
144
+ .icon.tet-check::before {
145
+ content: "\e855";
146
+ }
147
+ .icon.tet-chevron-up {
148
+ font-family: var(--icons-font);
149
+ font-weight: 400;
150
+ font-style: normal;
151
+ font-size: 1.25rem;
152
+ display: inline-block;
153
+ line-height: 1;
154
+ text-transform: none;
155
+ letter-spacing: normal;
156
+ word-wrap: normal;
157
+ white-space: nowrap;
158
+ direction: ltr;
159
+ speak: none;
160
+ -webkit-font-smoothing: antialiased;
161
+ text-rendering: optimizeLegibility;
162
+ -moz-osx-font-smoothing: grayscale;
163
+ }
164
+ .icon.tet-chevron-up::before {
165
+ content: "\e859";
166
+ }
167
+ .icon.tet-chevron-down {
168
+ font-family: var(--icons-font);
169
+ font-weight: 400;
170
+ font-style: normal;
171
+ font-size: 1.25rem;
172
+ display: inline-block;
173
+ line-height: 1;
174
+ text-transform: none;
175
+ letter-spacing: normal;
176
+ word-wrap: normal;
177
+ white-space: nowrap;
178
+ direction: ltr;
179
+ speak: none;
180
+ -webkit-font-smoothing: antialiased;
181
+ text-rendering: optimizeLegibility;
182
+ -moz-osx-font-smoothing: grayscale;
183
+ }
184
+ .icon.tet-chevron-down::before {
185
+ content: "\e856";
186
+ }
187
+ .icon.tet-clipboard {
188
+ font-family: var(--icons-font);
189
+ font-weight: 400;
190
+ font-style: normal;
191
+ font-size: 1.25rem;
192
+ display: inline-block;
193
+ line-height: 1;
194
+ text-transform: none;
195
+ letter-spacing: normal;
196
+ word-wrap: normal;
197
+ white-space: nowrap;
198
+ direction: ltr;
199
+ speak: none;
200
+ -webkit-font-smoothing: antialiased;
201
+ text-rendering: optimizeLegibility;
202
+ -moz-osx-font-smoothing: grayscale;
203
+ }
204
+ .icon.tet-clipboard::before {
205
+ content: "\e86a";
206
+ }
207
+ .icon.tet-info {
208
+ font-family: var(--icons-font);
209
+ font-weight: 400;
210
+ font-style: normal;
211
+ font-size: 1.25rem;
212
+ display: inline-block;
213
+ line-height: 1;
214
+ text-transform: none;
215
+ letter-spacing: normal;
216
+ word-wrap: normal;
217
+ white-space: nowrap;
218
+ direction: ltr;
219
+ speak: none;
220
+ -webkit-font-smoothing: antialiased;
221
+ text-rendering: optimizeLegibility;
222
+ -moz-osx-font-smoothing: grayscale;
223
+ }
224
+ .icon.tet-info::before {
225
+ content: "\e81d";
226
+ }
227
+ .icon.tet-done {
228
+ font-family: var(--icons-font);
229
+ font-weight: 400;
230
+ font-style: normal;
231
+ font-size: 1.25rem;
232
+ display: inline-block;
233
+ line-height: 1;
234
+ text-transform: none;
235
+ letter-spacing: normal;
236
+ word-wrap: normal;
237
+ white-space: nowrap;
238
+ direction: ltr;
239
+ speak: none;
240
+ -webkit-font-smoothing: antialiased;
241
+ text-rendering: optimizeLegibility;
242
+ -moz-osx-font-smoothing: grayscale;
243
+ }
244
+ .icon.tet-done::before {
245
+ content: "\e867";
246
+ }
247
+
248
+ @font-face {
249
+ font-family: "Gilroy";
250
+ font-style: normal;
251
+ font-weight: 400;
252
+ font-display: swap;
253
+ src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
254
+ }
255
+ @font-face {
256
+ font-family: "Gilroy";
257
+ font-style: normal;
258
+ font-weight: 500;
259
+ font-display: swap;
260
+ src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
261
+ }
262
+ @font-face {
263
+ font-family: "Gilroy";
264
+ font-style: normal;
265
+ font-weight: 600;
266
+ font-display: swap;
267
+ src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
268
+ }
269
+ @font-face {
270
+ font-family: "Gilroy";
271
+ font-style: normal;
272
+ font-weight: 700;
273
+ font-display: swap;
274
+ src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
275
+ }
276
+ @font-face {
277
+ font-family: "Inter";
278
+ font-style: normal;
279
+ font-weight: 400;
280
+ font-display: swap;
281
+ src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
282
+ }
283
+ @font-face {
284
+ font-family: "Inter";
285
+ font-style: normal;
286
+ font-weight: 500;
287
+ font-display: swap;
288
+ src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
289
+ }
290
+ @font-face {
291
+ font-family: "Inter";
292
+ font-style: normal;
293
+ font-weight: 600;
294
+ font-display: swap;
295
+ src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
296
+ }
297
+ @font-face {
298
+ font-family: "Gilroy";
299
+ font-style: normal;
300
+ font-weight: 400;
301
+ font-display: swap;
302
+ src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
303
+ }
304
+ @font-face {
305
+ font-family: "Gilroy";
306
+ font-style: normal;
307
+ font-weight: 500;
308
+ font-display: swap;
309
+ src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
310
+ }
311
+ @font-face {
312
+ font-family: "Gilroy";
313
+ font-style: normal;
314
+ font-weight: 600;
315
+ font-display: swap;
316
+ src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
317
+ }
318
+ @font-face {
319
+ font-family: "Gilroy";
320
+ font-style: normal;
321
+ font-weight: 700;
322
+ font-display: swap;
323
+ src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
324
+ }
325
+ @font-face {
326
+ font-family: "Inter";
327
+ font-style: normal;
328
+ font-weight: 400;
329
+ font-display: swap;
330
+ src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
331
+ }
332
+ @font-face {
333
+ font-family: "Inter";
334
+ font-style: normal;
335
+ font-weight: 500;
336
+ font-display: swap;
337
+ src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
338
+ }
339
+ @font-face {
340
+ font-family: "Inter";
341
+ font-style: normal;
342
+ font-weight: 600;
343
+ font-display: swap;
344
+ src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
345
+ }
346
+ :host {
347
+ --font-family-fallback: Gilroy, Arial, sans-serif;
348
+ --font-family-headline: Gilroy;
349
+ --font-family-content: Inter, var(--font-family-fallback);
350
+ font-family: var(--font-family-content);
351
+ }
352
+
353
+ :host {
354
+ /**
355
+ * @prop --stepper-step-active-color: The color of active step line and icon
356
+ * @prop --stepper-step-non-active-color: The color of non-active step line and icon
357
+ * @prop --stepper-step-check-color: The color used in check icon
358
+ * @prop --stepper-step-description-color: The color of step description text
359
+ * @prop --stepper-step-title-color: The color of step title text
360
+ * @prop --stepper-step-content-background: The color of step content background
361
+ * @prop --stepper-step-shadow: The shadow of step content
362
+ */
363
+ --stepper-step-active-color: var(--tc-blue-40);
364
+ --stepper-step-non-active-color: var(--tc-border-tertiary);
365
+ --stepper-step-check-color: var(--tc-layer-primary);
366
+ --stepper-step-description-color: var(--tc-text-secondary);
367
+ --stepper-step-title-color: var(--tc-text-primary);
368
+ --stepper-step-content-background: var(--tc-layer-primary);
369
+ --stepper-step-shadow: var(--tc-elevation-one);
370
+ display: flex;
371
+ justify-content: center;
372
+ align-items: center;
373
+ }
374
+
375
+ .stepper {
376
+ width: 100%;
377
+ list-style: none;
378
+ }
379
+ .stepper.dark {
380
+ --stepper-step-active-color: var(--tc-blue-40-dark);
381
+ --stepper-step-non-active-color: var(--tc-border-tertiary-dark);
382
+ --stepper-step-check-color: var(--tc-layer-inverse-primary-dark);
383
+ --stepper-step-description-color: var(--tc-text-secondary-dark);
384
+ --stepper-step-title-color: var(--tc-text-primary-dark);
385
+ --stepper-step-content-background: var(--tc-layer-primary-dark);
386
+ --stepper-step-shadow: var(--tc-elevation-one-dark);
387
+ }
388
+ .stepper .step {
389
+ position: relative;
390
+ display: flex;
391
+ }
392
+ .stepper .step:first-child .line.top, .stepper .step:last-child .line.bottom {
393
+ display: none;
394
+ }
395
+ .stepper .step .status-wrapper {
396
+ position: relative;
397
+ display: flex;
398
+ justify-content: center;
399
+ align-items: center;
400
+ width: 2.5rem;
401
+ margin-right: 1rem;
402
+ }
403
+ @media only screen and (max-width: 31.1875rem) {
404
+ .stepper .step .status-wrapper {
405
+ width: 2rem;
406
+ }
407
+ }
408
+ .stepper .step .status-wrapper .line {
409
+ position: absolute;
410
+ width: 0.125rem;
411
+ background-color: var(--stepper-step-non-active-color);
412
+ }
413
+ .stepper .step .status-wrapper .line.top {
414
+ top: 0;
415
+ bottom: 50%;
416
+ }
417
+ .stepper .step .status-wrapper .line.bottom {
418
+ top: 50%;
419
+ bottom: 0;
420
+ }
421
+ .stepper .step .status-wrapper .circle {
422
+ position: absolute;
423
+ width: 1.25rem;
424
+ height: 1.25rem;
425
+ background: var(--stepper-step-content-background);
426
+ border: 0.25rem solid var(--stepper-step-non-active-color);
427
+ border-radius: 50%;
428
+ }
429
+ .stepper .step .status-wrapper.active .line.top,
430
+ .stepper .step .status-wrapper.active .line.bottom.next-step-active {
431
+ background-color: var(--stepper-step-active-color);
432
+ }
433
+ .stepper .step .status-wrapper.active .circle {
434
+ border-color: var(--stepper-step-active-color);
435
+ }
436
+ .stepper .step .status-wrapper .check-icon {
437
+ position: absolute;
438
+ display: flex;
439
+ justify-content: center;
440
+ align-items: center;
441
+ width: 2.5rem;
442
+ height: 2.5rem;
443
+ background: var(--stepper-step-active-color);
444
+ border-radius: 50%;
445
+ }
446
+ @media only screen and (max-width: 31.1875rem) {
447
+ .stepper .step .status-wrapper .check-icon {
448
+ width: 2rem;
449
+ height: 2rem;
450
+ }
451
+ }
452
+ .stepper .step .status-wrapper .check-icon .check {
453
+ --icon-size: 1.656rem;
454
+ --icon-color: var(--stepper-step-check-color);
455
+ }
456
+ @media only screen and (max-width: 31.1875rem) {
457
+ .stepper .step .status-wrapper .check-icon .check {
458
+ --icon-size: 1.344rem;
459
+ }
460
+ }
461
+ .stepper .step .content {
462
+ flex: 1;
463
+ padding: 1rem 1.5rem;
464
+ margin: 0.25rem 0;
465
+ box-shadow: var(--stepper-step-shadow);
466
+ background: var(--stepper-step-content-background);
467
+ border-radius: 1rem;
468
+ }
469
+ @media only screen and (max-width: 31.1875rem) {
470
+ .stepper .step .content {
471
+ padding: 1rem;
472
+ }
473
+ }
474
+ .stepper .step .content-title {
475
+ font: 600 1.125rem/1.75rem "Inter", "Gilroy, Arial, sans-serif";
476
+ color: var(--stepper-step-title-color);
477
+ }
478
+ @media only screen and (max-width: 31.1875rem) {
479
+ .stepper .step .content-title {
480
+ font: 600 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
481
+ }
482
+ }
483
+ .stepper .step .content-description {
484
+ font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
485
+ color: var(--stepper-step-description-color);
486
+ }
@@ -0,0 +1,89 @@
1
+ import { h, Host } from "@stencil/core";
2
+ /**
3
+ * A simple stepper component.
4
+ */
5
+ export class TetStepperV3 {
6
+ constructor() {
7
+ this.renderStep = (step, index) => {
8
+ var _a;
9
+ const nextStepActive = (_a = this.stepperData[index + 1]) === null || _a === void 0 ? void 0 : _a.active;
10
+ return (h("li", { class: "step" }, h("div", { class: { 'status-wrapper': true, 'active': step.active } }, h("div", { class: "line top" }), h("div", { class: { 'line': true, 'bottom': true, 'next-step-active': nextStepActive } }), this.renderStepIcon(step.icon)), h("div", { class: "content" }, this.renderStepTitle(step === null || step === void 0 ? void 0 : step.title), this.renderStepDescription(step === null || step === void 0 ? void 0 : step.description))));
11
+ };
12
+ this.renderStepIcon = (icon) => {
13
+ if (icon === 'check') {
14
+ return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
15
+ }
16
+ return h("div", { class: "circle" });
17
+ };
18
+ this.renderStepTitle = (title) => {
19
+ return title ? h("div", { class: "content-title", innerHTML: title }) : null;
20
+ };
21
+ this.renderStepDescription = (description) => {
22
+ return description ? h("div", { class: "content-description", innerHTML: description }) : null;
23
+ };
24
+ this.stepperData = [];
25
+ this.theme = 'light';
26
+ }
27
+ render() {
28
+ return (h(Host, { key: 'dece3c166882cf3b80550bf563c240a74873dcae' }, h("ol", { key: '91bfd3c1f28dae1ae4b56721a0d695b250ed2f94', class: {
29
+ stepper: true,
30
+ [this.theme]: true
31
+ } }, this.stepperData.map(this.renderStep.bind(this)))));
32
+ }
33
+ static get is() { return "tet-stepper-v3"; }
34
+ static get encapsulation() { return "shadow"; }
35
+ static get originalStyleUrls() {
36
+ return {
37
+ "$": ["tet-stepper-v3.scss"]
38
+ };
39
+ }
40
+ static get styleUrls() {
41
+ return {
42
+ "$": ["tet-stepper-v3.css"]
43
+ };
44
+ }
45
+ static get properties() {
46
+ return {
47
+ "stepperData": {
48
+ "type": "unknown",
49
+ "mutable": false,
50
+ "complexType": {
51
+ "original": "StepperV3StepInterface[]",
52
+ "resolved": "StepperV3StepInterface[]",
53
+ "references": {
54
+ "StepperV3StepInterface": {
55
+ "location": "local",
56
+ "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.tsx",
57
+ "id": "src/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.tsx::StepperV3StepInterface"
58
+ }
59
+ }
60
+ },
61
+ "required": false,
62
+ "optional": false,
63
+ "docs": {
64
+ "tags": [],
65
+ "text": "An array of data to show in the stepper"
66
+ },
67
+ "defaultValue": "[]"
68
+ },
69
+ "theme": {
70
+ "type": "string",
71
+ "mutable": false,
72
+ "complexType": {
73
+ "original": "'light' | 'dark'",
74
+ "resolved": "\"dark\" | \"light\"",
75
+ "references": {}
76
+ },
77
+ "required": false,
78
+ "optional": false,
79
+ "docs": {
80
+ "tags": [],
81
+ "text": "The theme of the component."
82
+ },
83
+ "attribute": "theme",
84
+ "reflect": false,
85
+ "defaultValue": "'light'"
86
+ }
87
+ };
88
+ }
89
+ }
@@ -51,9 +51,9 @@ export class TetDatepickerHeader {
51
51
  this.internalDateChanged.emit(newDate);
52
52
  }
53
53
  render() {
54
- return (h("div", { key: 'b728519049d5a6c66d0f43c8997bf4ff25202b4b', class: "header" }, this.datepickerView !== 'year'
54
+ return (h("div", { key: 'e7ba3f37861a2885daa91d83931f54806d35e5d9', class: "header" }, this.datepickerView !== 'year'
55
55
  ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
56
- : h("div", null), h("div", { key: 'e1b999d9bed5be2eec5c7c7c083b82f4a71b8573', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '1d98c85536c4f917d11608d4f6c7aa60a10ac96f', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
56
+ : h("div", null), h("div", { key: '42893ca05833946f33455cba0b28689d9dfb1fee', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'a9b275586ae2e30c678bbfd73ed291a4a950e1eb', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
57
57
  ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
58
58
  : h("div", null)));
59
59
  }
@@ -156,7 +156,7 @@ export class TetDatepickerMonthView {
156
156
  return date.toDateString() === this.currentDate.toDateString();
157
157
  }
158
158
  render() {
159
- return (h(Host, { key: 'd22c70e154ea1533c3e5609ef9acb7dac0422f50' }, h("div", { key: '13eb00c8c00a78e0c1ecdc43920b1dc912226d06', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '9ad78ab1bcb98c269bfc7c4bc06cad05b005d8c5', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
159
+ return (h(Host, { key: 'fe427edbdc99dd540cc676934c15af21ecd63448' }, h("div", { key: '6f79b0b63d2feaa82b03c87458ff56513eda24e0', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'b0c9afeb4a4002af751575d4a4e17c2ca775df1a', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
160
160
  }
161
161
  static get is() { return "tet-datepicker-month-view"; }
162
162
  static get encapsulation() { return "shadow"; }
@@ -29,7 +29,7 @@ export class TetDatepickerMultiYearView {
29
29
  this.years = this.getYears(this.internalDate);
30
30
  }
31
31
  render() {
32
- return (h("div", { key: '768970c71b22cccb2141c409a75272f8735e7ad2', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
32
+ return (h("div", { key: '5d44d96f15909feb53a1d47e65abbfcbe0113fff', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
33
33
  }
34
34
  static get is() { return "tet-datepicker-multi-year-view"; }
35
35
  static get encapsulation() { return "shadow"; }
@@ -34,7 +34,7 @@ export class TetDatepickerYearView {
34
34
  return this.todayDate.getMonth() === monthIndex;
35
35
  }
36
36
  render() {
37
- return (h("div", { key: '915baeab946c5d9c3d41dd92146cf2533d2cf01a', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
37
+ return (h("div", { key: '1b139e987779fb41d1aa70bcfc66e993527d1dcb', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
38
38
  }
39
39
  static get is() { return "tet-datepicker-year-view"; }
40
40
  static get encapsulation() { return "shadow"; }
@@ -94,10 +94,10 @@ export class TetDatepicker {
94
94
  this.rangeDatesChanged.emit(newDates);
95
95
  }
96
96
  render() {
97
- return (h("div", { key: 'cf214d36e68a59d50a57f0b324ddd77480f28ae5', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '6131eccac4608725d9177da82337bc4cbc4ee835', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '121e1c38b34ede7e6f0f88aa5ee6df96b634b5f9', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
98
- h("tet-datepicker-month-view", { key: 'c1f5a49dd3762f93ed4e9ac0099ca1756e813560', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
99
- h("tet-datepicker-multi-year-view", { key: '268736bee10084216fe1fdfa8558028a5a8f4e26', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
100
- h("tet-datepicker-year-view", { key: '92201bd1de3471c5ce3f0bc9bf2a2be894131296', selectedDate: this.date, internalDate: this.internalDate }))));
97
+ return (h("div", { key: 'ec1cfcb4cb61607d6fde08d72f5d8ec67960e2fd', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '380dd06ac2eef3763d487f1f3402d5aa319152f2', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '829dfca521223b2a7295af97c8b5a1a0415a24bb', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
98
+ h("tet-datepicker-month-view", { key: '07570e6f6a97936ab39254f7b7abc4102a709dec', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
99
+ h("tet-datepicker-multi-year-view", { key: 'e3341301d62e62f2ab41e1c65a0500cf531cddd9', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
100
+ h("tet-datepicker-year-view", { key: '2c4ce88a9b0130530ede910d4499d4682cc00f01', selectedDate: this.date, internalDate: this.internalDate }))));
101
101
  }
102
102
  static get is() { return "tet-datepicker"; }
103
103
  static get encapsulation() { return "shadow"; }