q2-tecton-elements 1.45.3 → 1.46.0

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 (285) hide show
  1. package/dist/cjs/click-elsewhere_2.cjs.entry.js +1 -1
  2. package/dist/cjs/click-elsewhere_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/{index-0430339e.js → index-c385e32f.js} +1 -1
  4. package/dist/cjs/{index-0430339e.js.map → index-c385e32f.js.map} +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/q2-btn_2.cjs.entry.js +2 -1
  7. package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
  8. package/dist/cjs/q2-calendar.cjs.entry.js +3 -3
  9. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  10. package/dist/cjs/q2-carousel.cjs.entry.js +33 -2
  11. package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
  12. package/dist/cjs/q2-currency.cjs.entry.js +1 -1
  13. package/dist/cjs/q2-currency.cjs.entry.js.map +1 -1
  14. package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
  15. package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
  16. package/dist/cjs/q2-input.cjs.entry.js +17 -10
  17. package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
  18. package/dist/cjs/q2-item.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-item.cjs.entry.js.map +1 -1
  20. package/dist/cjs/q2-list.cjs.entry.js +1 -1
  21. package/dist/cjs/q2-list.cjs.entry.js.map +1 -1
  22. package/dist/cjs/q2-optgroup.cjs.entry.js +59 -0
  23. package/dist/cjs/q2-optgroup.cjs.entry.js.map +1 -0
  24. package/dist/cjs/{q2-optgroup_2.cjs.entry.js → q2-option.cjs.entry.js} +1 -52
  25. package/dist/cjs/q2-option.cjs.entry.js.map +1 -0
  26. package/dist/cjs/q2-pagination.cjs.entry.js +22 -3
  27. package/dist/cjs/q2-pagination.cjs.entry.js.map +1 -1
  28. package/dist/cjs/q2-pill.cjs.entry.js +2 -2
  29. package/dist/cjs/q2-pill.cjs.entry.js.map +1 -1
  30. package/dist/cjs/q2-relative-time.cjs.entry.js +2 -2
  31. package/dist/cjs/q2-section.cjs.entry.js +2 -2
  32. package/dist/cjs/q2-select.cjs.entry.js +4 -5
  33. package/dist/cjs/q2-select.cjs.entry.js.map +1 -1
  34. package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-stepper-pane.cjs.entry.js.map +1 -1
  36. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +6 -6
  37. package/dist/cjs/q2-stepper-vertical.cjs.entry.js.map +1 -1
  38. package/dist/cjs/q2-stepper.cjs.entry.js +2 -2
  39. package/dist/cjs/q2-stepper.cjs.entry.js.map +1 -1
  40. package/dist/cjs/q2-tab-container.cjs.entry.js +2 -2
  41. package/dist/cjs/q2-tab-container.cjs.entry.js.map +1 -1
  42. package/dist/cjs/q2-tab-pane.cjs.entry.js +1 -1
  43. package/dist/cjs/q2-tag.cjs.entry.js +1 -1
  44. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  45. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  46. package/dist/cjs/q2-textarea.cjs.entry.js.map +1 -1
  47. package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
  48. package/dist/collection/components/click-elsewhere/click-elsewhere.js.map +1 -1
  49. package/dist/collection/components/q2-btn/q2-btn.js +29 -5
  50. package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
  51. package/dist/collection/components/q2-calendar/q2-calendar.css +3 -0
  52. package/dist/collection/components/q2-calendar/q2-calendar.js +1 -1
  53. package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
  54. package/dist/collection/components/q2-carousel/q2-carousel.js +33 -2
  55. package/dist/collection/components/q2-carousel/q2-carousel.js.map +1 -1
  56. package/dist/collection/components/q2-currency/q2-currency.css +4 -0
  57. package/dist/collection/components/q2-data-table/q2-data-table.js +6 -6
  58. package/dist/collection/components/q2-dropdown/q2-dropdown.js +1 -1
  59. package/dist/collection/components/q2-dropdown/q2-dropdown.js.map +1 -1
  60. package/dist/collection/components/q2-input/q2-input.js +43 -15
  61. package/dist/collection/components/q2-input/q2-input.js.map +1 -1
  62. package/dist/collection/components/q2-item/q2-item.css +11 -11
  63. package/dist/collection/components/q2-list/q2-list.css +8 -5
  64. package/dist/collection/components/q2-option-list/q2-option-list.js +2 -2
  65. package/dist/collection/components/q2-pagination/q2-pagination.css +17 -2
  66. package/dist/collection/components/q2-pagination/q2-pagination.js +53 -2
  67. package/dist/collection/components/q2-pagination/q2-pagination.js.map +1 -1
  68. package/dist/collection/components/q2-pill/q2-pill.js +2 -2
  69. package/dist/collection/components/q2-pill/q2-pill.js.map +1 -1
  70. package/dist/collection/components/q2-popover/q2-popover.js +1 -1
  71. package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
  72. package/dist/collection/components/q2-section/q2-section.js +2 -2
  73. package/dist/collection/components/q2-select/q2-select.js +21 -5
  74. package/dist/collection/components/q2-select/q2-select.js.map +1 -1
  75. package/dist/collection/components/q2-stepper/q2-stepper.js +2 -2
  76. package/dist/collection/components/q2-stepper/q2-stepper.js.map +1 -1
  77. package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +4 -4
  78. package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js.map +1 -1
  79. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +6 -6
  80. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js.map +1 -1
  81. package/dist/collection/components/q2-tab-container/q2-tab-container.js +2 -2
  82. package/dist/collection/components/q2-tab-container/q2-tab-container.js.map +1 -1
  83. package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
  84. package/dist/collection/components/q2-tag/q2-tag.js +1 -1
  85. package/dist/collection/components/q2-textarea/q2-textarea.css +2 -2
  86. package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
  87. package/dist/components/click-elsewhere2.js.map +1 -1
  88. package/dist/components/index2.js +1 -1
  89. package/dist/components/q2-btn2.js +4 -2
  90. package/dist/components/q2-btn2.js.map +1 -1
  91. package/dist/components/q2-calendar.js +2 -2
  92. package/dist/components/q2-calendar.js.map +1 -1
  93. package/dist/components/q2-carousel.js +33 -2
  94. package/dist/components/q2-carousel.js.map +1 -1
  95. package/dist/components/q2-currency.js +1 -1
  96. package/dist/components/q2-currency.js.map +1 -1
  97. package/dist/components/q2-dropdown.js +1 -1
  98. package/dist/components/q2-dropdown.js.map +1 -1
  99. package/dist/components/q2-input2.js +20 -12
  100. package/dist/components/q2-input2.js.map +1 -1
  101. package/dist/components/q2-item.js +1 -1
  102. package/dist/components/q2-item.js.map +1 -1
  103. package/dist/components/q2-list.js +1 -1
  104. package/dist/components/q2-list.js.map +1 -1
  105. package/dist/components/q2-message2.js +1 -1
  106. package/dist/components/q2-option-list2.js +1 -1
  107. package/dist/components/q2-pagination.js +64 -13
  108. package/dist/components/q2-pagination.js.map +1 -1
  109. package/dist/components/q2-pill.js +2 -2
  110. package/dist/components/q2-pill.js.map +1 -1
  111. package/dist/components/q2-popover2.js +2 -2
  112. package/dist/components/q2-relative-time.js +1 -1
  113. package/dist/components/q2-section.js +2 -2
  114. package/dist/components/q2-select.js +1 -711
  115. package/dist/components/q2-select.js.map +1 -1
  116. package/dist/components/q2-select2.js +715 -0
  117. package/dist/components/q2-select2.js.map +1 -0
  118. package/dist/components/q2-stepper-pane.js +2 -2
  119. package/dist/components/q2-stepper-pane.js.map +1 -1
  120. package/dist/components/q2-stepper-vertical.js +6 -6
  121. package/dist/components/q2-stepper-vertical.js.map +1 -1
  122. package/dist/components/q2-stepper.js +2 -2
  123. package/dist/components/q2-stepper.js.map +1 -1
  124. package/dist/components/q2-tab-container.js +2 -2
  125. package/dist/components/q2-tab-container.js.map +1 -1
  126. package/dist/components/q2-tab-pane.js +1 -1
  127. package/dist/components/q2-tag.js +1 -1
  128. package/dist/components/q2-textarea.js +1 -1
  129. package/dist/components/q2-textarea.js.map +1 -1
  130. package/dist/components/tecton-tab-pane.js +2 -2
  131. package/dist/esm/click-elsewhere_2.entry.js +1 -1
  132. package/dist/esm/click-elsewhere_2.entry.js.map +1 -1
  133. package/dist/esm/{index-e940b40e.js → index-f0dfb099.js} +1 -1
  134. package/dist/esm/{index-e940b40e.js.map → index-f0dfb099.js.map} +1 -1
  135. package/dist/esm/loader.js +1 -1
  136. package/dist/esm/q2-btn_2.entry.js +2 -1
  137. package/dist/esm/q2-btn_2.entry.js.map +1 -1
  138. package/dist/esm/q2-calendar.entry.js +3 -3
  139. package/dist/esm/q2-calendar.entry.js.map +1 -1
  140. package/dist/esm/q2-carousel.entry.js +33 -2
  141. package/dist/esm/q2-carousel.entry.js.map +1 -1
  142. package/dist/esm/q2-currency.entry.js +1 -1
  143. package/dist/esm/q2-currency.entry.js.map +1 -1
  144. package/dist/esm/q2-dropdown.entry.js +1 -1
  145. package/dist/esm/q2-dropdown.entry.js.map +1 -1
  146. package/dist/esm/q2-input.entry.js +17 -10
  147. package/dist/esm/q2-input.entry.js.map +1 -1
  148. package/dist/esm/q2-item.entry.js +1 -1
  149. package/dist/esm/q2-item.entry.js.map +1 -1
  150. package/dist/esm/q2-list.entry.js +1 -1
  151. package/dist/esm/q2-list.entry.js.map +1 -1
  152. package/dist/esm/q2-optgroup.entry.js +55 -0
  153. package/dist/esm/q2-optgroup.entry.js.map +1 -0
  154. package/dist/esm/{q2-optgroup_2.entry.js → q2-option.entry.js} +3 -53
  155. package/dist/esm/q2-option.entry.js.map +1 -0
  156. package/dist/esm/q2-pagination.entry.js +22 -3
  157. package/dist/esm/q2-pagination.entry.js.map +1 -1
  158. package/dist/esm/q2-pill.entry.js +2 -2
  159. package/dist/esm/q2-pill.entry.js.map +1 -1
  160. package/dist/esm/q2-relative-time.entry.js +2 -2
  161. package/dist/esm/q2-section.entry.js +2 -2
  162. package/dist/esm/q2-select.entry.js +4 -5
  163. package/dist/esm/q2-select.entry.js.map +1 -1
  164. package/dist/esm/q2-stepper-pane.entry.js +2 -2
  165. package/dist/esm/q2-stepper-pane.entry.js.map +1 -1
  166. package/dist/esm/q2-stepper-vertical.entry.js +6 -6
  167. package/dist/esm/q2-stepper-vertical.entry.js.map +1 -1
  168. package/dist/esm/q2-stepper.entry.js +2 -2
  169. package/dist/esm/q2-stepper.entry.js.map +1 -1
  170. package/dist/esm/q2-tab-container.entry.js +2 -2
  171. package/dist/esm/q2-tab-container.entry.js.map +1 -1
  172. package/dist/esm/q2-tab-pane.entry.js +1 -1
  173. package/dist/esm/q2-tag.entry.js +1 -1
  174. package/dist/esm/q2-tecton-elements.js +1 -1
  175. package/dist/esm/q2-textarea.entry.js +1 -1
  176. package/dist/esm/q2-textarea.entry.js.map +1 -1
  177. package/dist/esm/tecton-tab-pane.entry.js +2 -2
  178. package/dist/q2-tecton-elements/{p-685b821c.entry.js → p-0eff37c6.entry.js} +2 -2
  179. package/dist/q2-tecton-elements/{p-fcc84527.entry.js → p-12326313.entry.js} +2 -2
  180. package/dist/q2-tecton-elements/p-12326313.entry.js.map +1 -0
  181. package/dist/q2-tecton-elements/p-176ad382.entry.js +2 -0
  182. package/dist/q2-tecton-elements/p-176ad382.entry.js.map +1 -0
  183. package/dist/q2-tecton-elements/{p-f4d77672.entry.js → p-195a133c.entry.js} +2 -2
  184. package/dist/q2-tecton-elements/p-1b37b8c6.entry.js +2 -0
  185. package/dist/q2-tecton-elements/p-1b37b8c6.entry.js.map +1 -0
  186. package/dist/q2-tecton-elements/{p-bfe9d688.entry.js → p-1c4aa7e3.entry.js} +2 -2
  187. package/dist/q2-tecton-elements/p-1c4aa7e3.entry.js.map +1 -0
  188. package/dist/q2-tecton-elements/p-1e927478.entry.js +2 -0
  189. package/dist/q2-tecton-elements/p-1e927478.entry.js.map +1 -0
  190. package/dist/q2-tecton-elements/p-36398b59.entry.js +2 -0
  191. package/dist/q2-tecton-elements/p-36398b59.entry.js.map +1 -0
  192. package/dist/q2-tecton-elements/{p-7ce6e587.js → p-3c42c90f.js} +1 -1
  193. package/dist/q2-tecton-elements/p-66af375f.entry.js +2 -0
  194. package/dist/q2-tecton-elements/p-66af375f.entry.js.map +1 -0
  195. package/dist/q2-tecton-elements/p-6ebe37ea.entry.js +2 -0
  196. package/dist/q2-tecton-elements/p-6ebe37ea.entry.js.map +1 -0
  197. package/dist/q2-tecton-elements/p-79df783e.entry.js +2 -0
  198. package/dist/q2-tecton-elements/p-79df783e.entry.js.map +1 -0
  199. package/dist/q2-tecton-elements/p-7e1dc7e8.entry.js +2 -0
  200. package/dist/q2-tecton-elements/p-7e1dc7e8.entry.js.map +1 -0
  201. package/dist/q2-tecton-elements/{p-05b015a8.entry.js → p-87bbeb9c.entry.js} +2 -2
  202. package/dist/q2-tecton-elements/{p-05b015a8.entry.js.map → p-87bbeb9c.entry.js.map} +1 -1
  203. package/dist/q2-tecton-elements/p-89305707.entry.js +2 -0
  204. package/dist/q2-tecton-elements/p-89305707.entry.js.map +1 -0
  205. package/dist/q2-tecton-elements/{p-debd5249.entry.js → p-ad274c67.entry.js} +2 -2
  206. package/dist/q2-tecton-elements/{p-debd5249.entry.js.map → p-ad274c67.entry.js.map} +1 -1
  207. package/dist/q2-tecton-elements/{p-68556733.entry.js → p-c56b58e9.entry.js} +2 -2
  208. package/dist/q2-tecton-elements/p-c56b58e9.entry.js.map +1 -0
  209. package/dist/q2-tecton-elements/{p-2436c843.entry.js → p-cb4f9b33.entry.js} +2 -2
  210. package/dist/q2-tecton-elements/p-cb4f9b33.entry.js.map +1 -0
  211. package/dist/q2-tecton-elements/{p-5dc5c4e2.entry.js → p-d013e05d.entry.js} +2 -2
  212. package/dist/q2-tecton-elements/p-d013e05d.entry.js.map +1 -0
  213. package/dist/q2-tecton-elements/p-d1522382.entry.js +2 -0
  214. package/dist/q2-tecton-elements/p-d1522382.entry.js.map +1 -0
  215. package/dist/q2-tecton-elements/{p-63192fac.entry.js → p-da7fc914.entry.js} +2 -2
  216. package/dist/q2-tecton-elements/p-e3230823.entry.js +2 -0
  217. package/dist/q2-tecton-elements/p-e3230823.entry.js.map +1 -0
  218. package/dist/q2-tecton-elements/{p-b376c111.entry.js → p-e47dbfbe.entry.js} +2 -2
  219. package/dist/q2-tecton-elements/{p-a214077c.entry.js → p-e4a2469f.entry.js} +2 -2
  220. package/dist/q2-tecton-elements/p-fc9f43f8.entry.js +2 -0
  221. package/dist/q2-tecton-elements/p-fc9f43f8.entry.js.map +1 -0
  222. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  223. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
  224. package/dist/test/elements/q2-calendar-test.e2e.js +1 -1
  225. package/dist/test/elements/q2-calendar-test.e2e.js.map +1 -1
  226. package/dist/test/elements/q2-carousel-test.e2e.js +67 -1
  227. package/dist/test/elements/q2-carousel-test.e2e.js.map +1 -1
  228. package/dist/test/elements/q2-detail/q2-list-test.e2e.js +1 -1
  229. package/dist/test/elements/q2-detail/q2-list-test.e2e.js.map +1 -1
  230. package/dist/test/elements/q2-input-test.e2e.js +25 -2
  231. package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
  232. package/dist/test/elements/q2-pagination-test.e2e.js +22 -0
  233. package/dist/test/elements/q2-pagination-test.e2e.js.map +1 -1
  234. package/dist/test/elements/q2-pill-test.e2e.js +21 -2
  235. package/dist/test/elements/q2-pill-test.e2e.js.map +1 -1
  236. package/dist/test/elements/q2-select-test.e2e.js +26 -8
  237. package/dist/test/elements/q2-select-test.e2e.js.map +1 -1
  238. package/dist/test/elements/q2-stepper-test.e2e.js +10 -17
  239. package/dist/test/elements/q2-stepper-test.e2e.js.map +1 -1
  240. package/dist/test/elements/q2-stepper-vertical-test.e2e.js +20 -4
  241. package/dist/test/elements/q2-stepper-vertical-test.e2e.js.map +1 -1
  242. package/dist/test/elements/q2-tab-container-test.e2e.js +10 -4
  243. package/dist/test/elements/q2-tab-container-test.e2e.js.map +1 -1
  244. package/dist/types/components/q2-btn/q2-btn.d.ts +14 -3
  245. package/dist/types/components/q2-carousel/q2-carousel.d.ts +2 -0
  246. package/dist/types/components/q2-input/q2-input.d.ts +10 -3
  247. package/dist/types/components.d.ts +50 -4
  248. package/package.json +3 -3
  249. package/dist/cjs/q2-optgroup_2.cjs.entry.js.map +0 -1
  250. package/dist/esm/q2-optgroup_2.entry.js.map +0 -1
  251. package/dist/q2-tecton-elements/p-1c17d118.entry.js +0 -2
  252. package/dist/q2-tecton-elements/p-1c17d118.entry.js.map +0 -1
  253. package/dist/q2-tecton-elements/p-2436c843.entry.js.map +0 -1
  254. package/dist/q2-tecton-elements/p-3b1ea100.entry.js +0 -2
  255. package/dist/q2-tecton-elements/p-3b1ea100.entry.js.map +0 -1
  256. package/dist/q2-tecton-elements/p-445990a8.entry.js +0 -2
  257. package/dist/q2-tecton-elements/p-445990a8.entry.js.map +0 -1
  258. package/dist/q2-tecton-elements/p-4b81a121.entry.js +0 -2
  259. package/dist/q2-tecton-elements/p-4b81a121.entry.js.map +0 -1
  260. package/dist/q2-tecton-elements/p-50bd4437.entry.js +0 -2
  261. package/dist/q2-tecton-elements/p-50bd4437.entry.js.map +0 -1
  262. package/dist/q2-tecton-elements/p-5dc5c4e2.entry.js.map +0 -1
  263. package/dist/q2-tecton-elements/p-68556733.entry.js.map +0 -1
  264. package/dist/q2-tecton-elements/p-7c12ba02.entry.js +0 -2
  265. package/dist/q2-tecton-elements/p-7c12ba02.entry.js.map +0 -1
  266. package/dist/q2-tecton-elements/p-a977e723.entry.js +0 -2
  267. package/dist/q2-tecton-elements/p-a977e723.entry.js.map +0 -1
  268. package/dist/q2-tecton-elements/p-b3d10d52.entry.js +0 -2
  269. package/dist/q2-tecton-elements/p-b3d10d52.entry.js.map +0 -1
  270. package/dist/q2-tecton-elements/p-bfe9d688.entry.js.map +0 -1
  271. package/dist/q2-tecton-elements/p-bffda54d.entry.js +0 -2
  272. package/dist/q2-tecton-elements/p-bffda54d.entry.js.map +0 -1
  273. package/dist/q2-tecton-elements/p-cadceb00.entry.js +0 -2
  274. package/dist/q2-tecton-elements/p-cadceb00.entry.js.map +0 -1
  275. package/dist/q2-tecton-elements/p-d1a9ed3d.entry.js +0 -2
  276. package/dist/q2-tecton-elements/p-d1a9ed3d.entry.js.map +0 -1
  277. package/dist/q2-tecton-elements/p-fcc84527.entry.js.map +0 -1
  278. /package/dist/q2-tecton-elements/{p-685b821c.entry.js.map → p-0eff37c6.entry.js.map} +0 -0
  279. /package/dist/q2-tecton-elements/{p-f4d77672.entry.js.map → p-195a133c.entry.js.map} +0 -0
  280. /package/dist/q2-tecton-elements/{p-7ce6e587.js.map → p-3c42c90f.js.map} +0 -0
  281. /package/dist/q2-tecton-elements/{p-63192fac.entry.js.map → p-da7fc914.entry.js.map} +0 -0
  282. /package/dist/q2-tecton-elements/{p-b376c111.entry.js.map → p-e47dbfbe.entry.js.map} +0 -0
  283. /package/dist/q2-tecton-elements/{p-a214077c.entry.js.map → p-e4a2469f.entry.js.map} +0 -0
  284. /package/dist/types/workspace/workspace/{tecton-production_release_1.45.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/elements/q2-detail/slot-component.d.ts +0 -0
  285. /package/dist/types/workspace/workspace/{tecton-production_release_1.45.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","activeElement","document","body","tagName","componentWillLoad","connectedCallback","forEach","eventName","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","setFixedCSSProperties","async","controlElement","containerElement","currentDirection","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","popoverRight","visualViewport","width","block","style","setProperty","offsetWidth","height","waitForNextPaint","setAbsoluteCSSProperties","align","controlStyle","getComputedStyle","controlSize","parseInt","borderTopWidth","borderBottomWidth","undefined","componentDidLoad","removeViewportListeners","toggle","scrollContainerTo","options","scrollTo","openChanged","popoverStateChanged","addViewportListeners","show","clearCSSProperties","minHeightProvided","popoverStateHandler","detail","stopPropagation","actualDirection","direction","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","passive","capture","screen","orientation","removeProperty","setDirectionAndShow","isOpen","mode","maxHeight","windowHeight","maxSpaceAbove","maxSpaceBelow","_c","distanceToIframeBottom","viewableSpaceBelow","innerHeight","outletOffset","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","render","containerClasses","push","h","key","ref","el","class","join","contentElement"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'click-elsewhere',\n shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n /**\n * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n */\n mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n isCurrentlyFocused: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the user clicks outside the element\n */\n @Event() change: EventEmitter;\n\n /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n /* tslint:disable:no-empty */\n componentWillLoad() {}\n /* tslint:enable:no-empty */\n\n connectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.addEventListener(eventName, this.mouseHandler);\n });\n window.addEventListener('blur', this.windowBlurHandler);\n }\n\n disconnectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.removeEventListener(eventName, this.mouseHandler);\n });\n window.removeEventListener('blur', this.windowBlurHandler);\n }\n\n findActiveElement(): Element | null {\n let workingElement = document.activeElement!;\n while (true) {\n if (!workingElement || !workingElement.shadowRoot) {\n return workingElement;\n }\n workingElement = workingElement.shadowRoot.activeElement;\n }\n }\n\n shadowEventTarget(event: any): Element {\n return event.composedPath()[0] || event.target;\n }\n\n shadowContains(child: any): boolean {\n /**\n * shadow-dom enabled version of Node.contains()\n */\n\n while (true) {\n if (child === this.hostElement) {\n return true;\n }\n if (!child) {\n return false;\n }\n\n child = child.parentNode || child.host;\n }\n }\n\n originatesInSlots(target: Element): boolean {\n const slots = this.hostElement.querySelectorAll('slot');\n\n for (const currentSlot of Array.from(slots)) {\n const lightNodes =\n (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n this.hostElement.childNodes;\n\n for (const currentNode of Array.from(lightNodes)) {\n if (currentNode.contains(target)) {\n return true;\n }\n }\n }\n\n return false;\n }\n\n mouseHandler = (event: Event): void => {\n const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n const aboutToBeFocused =\n this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n this.isCurrentlyFocused = false;\n this.change.emit();\n return;\n }\n this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n };\n\n windowBlurHandler = (): void => {\n const activeElement = this.findActiveElement();\n if (\n (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n ) {\n this.isCurrentlyFocused = false;\n this.change.emit();\n return;\n }\n };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n display: none;\n}\n\n.show {\n display: block;\n position: fixed;\n z-index: var-list(--tct-popover-z-index, 50);\n margin: 0;\n padding: 0;\n overflow: auto;\n background: var-list(--tct-popover-background, --app-white, #ffffff);\n color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n min-width: var-list(--tct-popover-min-width, 135px);\n margin-block: var-list(--tct-popover-margin-block, 0);\n box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n border-width: var-list(--tct-popover-border-width, 0);\n border-style: solid;\n border-color: var-list(--tct-popover-border-color, transparent);\n border-radius: var-list(--tct-popover-border-radius, 0);\n // the following --comp variables are set via JS\n max-height: var(--comp-pop-max-height);\n left: var(--comp-pop-left);\n opacity: var(--comp-pop-opacity, 0);\n\n :host([block]) & {\n right: unset;\n width: var(--comp-pop-width);\n min-width: var-list(--tct-popover-min-width, unset);\n }\n\n :host([align='left']) & {\n left: var(--comp-pop-left);\n right: unset;\n }\n\n :host([align='right']) & {\n right: var(--comp-pop-right);\n left: unset;\n }\n\n &.down {\n top: var-list(--tct-popover-top, --comp-pop-top);\n bottom: unset;\n }\n\n &.up {\n top: unset;\n bottom: var(--comp-pop-bottom);\n }\n\n &.legacy {\n position: absolute;\n }\n\n @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Element,\n Watch,\n Method,\n Listen,\n EventEmitter,\n Event,\n State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n /**\n * Force the direction of the popover when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ reflect: true }) direction: 'up' | 'down';\n\n /** Aligns the popover to the left or right side of the control element. */\n @Prop({ reflect: true }) align: 'left' | 'right';\n\n /** Controls whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** Indicates the popover will match the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** The element that controls the popover's behavior. */\n @Prop() controlElement: HTMLElement;\n\n @Prop() mode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() minHeight: number;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the popover is opened or closed.\n */\n @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n @State() currentDirection: 'down' | 'up' = undefined;\n // remove `show` when Popover API is supported in iOS\n @State() show: boolean = false;\n\n containerElement: HTMLDivElement;\n contentElement: HTMLDivElement;\n\n /**\n * The number of pixels to leave between the popover and the edge of the viewport\n */\n displayBuffer = 10;\n\n /** remove when Popover API is supported in iOS */\n orientationChanged: boolean = false;\n\n /// Lifecycle hooks ///\n componentDidLoad() {\n this.handleMinHeight();\n if (this.open) this.determinePopDirection();\n }\n\n disconnectedCallback() {\n this.removeViewportListeners();\n }\n\n /// Methods ///\n @Method()\n async toggle() {\n this.open = !this.open;\n }\n\n @Method()\n async scrollContainerTo(options: ScrollToOptions) {\n this.containerElement.scrollTo(options);\n }\n\n /// Watchers ///\n @Watch('open')\n async openChanged(open: boolean) {\n this.popoverStateChanged.emit({ open });\n\n if (open) {\n this.addViewportListeners();\n this.determinePopDirection();\n } else {\n this.removeViewportListeners();\n this.currentDirection = undefined;\n this.show = false;\n await waitForNextPaint();\n this.clearCSSProperties();\n }\n }\n\n @Watch('minHeight')\n minHeightProvided() {\n this.handleMinHeight();\n }\n\n /// Listeners ///\n @Listen('popoverState')\n popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n const {\n detail: { open },\n } = event;\n if (open === this.open) return;\n\n this.open = open;\n event.stopPropagation();\n }\n\n /// Getters ///\n get actualDirection(): 'up' | 'down' | undefined {\n const { direction } = this;\n switch (direction) {\n case 'up':\n case 'down':\n return direction;\n default:\n return undefined;\n }\n }\n\n get isModule() {\n const isIframe = window !== window.top;\n const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n return isIframe && hasPlatformDimensions;\n }\n\n /// Helpers ///\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\n };\n\n viewPortChanged = () => {\n if (!this.open) return;\n this.determinePopDirection();\n };\n\n viewPortOrientationChanged = () => {\n this.orientationChanged = true;\n this.viewPortChanged();\n };\n\n addViewportListeners() {\n window.addEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n removeViewportListeners() {\n window.removeEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.removeEventListener('scroll', this.viewPortChanged);\n screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n setFixedCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection } = this;\n const {\n top: controlTop,\n bottom: controlBottom,\n left: controlLeft,\n right: controlRight,\n } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n };\n const popoverLeft: number = controlLeft;\n const popoverRight: number = window.visualViewport.width - controlRight;\n\n if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n containerElement.style.setProperty('--comp-pop-right', `${popoverRight}px`);\n\n if (currentDirection === 'up') {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);\n }\n if (currentDirection === 'down') {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n setAbsoluteCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection, align } = this;\n\n if (align === 'right') {\n containerElement.style.setProperty('--comp-pop-right', '0');\n containerElement.style.setProperty('--comp-pop-left', 'unset');\n } else {\n containerElement.style.setProperty('--comp-pop-left', '0');\n containerElement.style.setProperty('--comp-pop-right', 'unset');\n }\n\n if (this.block) {\n containerElement.style.setProperty('--comp-pop-width', '100%');\n }\n\n if (currentDirection === 'up') {\n const controlStyle = getComputedStyle(controlElement);\n const controlSize =\n parseInt(controlStyle.height || '0') +\n parseInt(controlStyle.borderTopWidth || '0') +\n parseInt(controlStyle.borderBottomWidth || '0');\n\n containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n clearCSSProperties() {\n this.containerElement.style.removeProperty('--comp-pop-max-height');\n this.containerElement.style.removeProperty('--comp-pop-top');\n this.containerElement.style.removeProperty('--comp-pop-bottom');\n this.containerElement.style.removeProperty('--comp-pop-left');\n this.containerElement.style.removeProperty('--comp-pop-right');\n this.containerElement.style.removeProperty('--comp-pop-width');\n this.containerElement.style.removeProperty('--comp-pop-opacity');\n }\n\n setDirectionAndShow(direction: 'up' | 'down') {\n // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n // popover can be closed between the time the popover is opened and the time the direction is determined\n const isOpen = this.open;\n if (!isOpen) return;\n\n this.currentDirection = direction;\n this.show = true;\n if (this.mode === 'legacy') {\n this.setAbsoluteCSSProperties();\n } else {\n this.setFixedCSSProperties();\n }\n }\n\n async determinePopDirection() {\n const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n if (containerElement) containerElement.style.maxHeight = null;\n\n await waitForNextPaint();\n\n const { isModule } = this;\n const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n };\n\n let windowHeight: number;\n let maxSpaceAbove: number;\n let maxSpaceBelow: number;\n\n if (isModule) {\n const platformDimensions = window.Tecton?.platformDimensions;\n const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n const viewableSpaceBelow =\n platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);\n const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n windowHeight = platformDimensions.innerHeight;\n // If the top of the module is below the top of the window we just use the controlTop\n // Otherwise we need to add the outletOffset to the controlTop\n maxSpaceAbove =\n (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -\n displayBuffer;\n maxSpaceBelow = isIframeShorterThanWindow\n ? distanceToIframeBottom - displayBuffer\n : viewableSpaceBelow - displayBuffer;\n } else {\n windowHeight = window.visualViewport.height;\n maxSpaceAbove = controlTop - displayBuffer;\n maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n }\n\n const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n const shouldUpdateMaxHeight =\n !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n this.orientationChanged = false;\n const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n switch (currentOrDetermineDirection) {\n case 'up':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n }\n this.setDirectionAndShow('up');\n break;\n case 'down':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n }\n this.setDirectionAndShow('down');\n break;\n default:\n break;\n }\n }\n\n /// DOM ///\n render() {\n const containerClasses = ['container', this.currentDirection];\n if (this.show) containerClasses.push('show');\n if (this.mode === 'legacy') containerClasses.push('legacy');\n\n return (\n <div\n ref={el => (this.containerElement = el)}\n class={containerClasses.join(' ')}\n test-id=\"outerContainer\"\n >\n <div\n ref={el => (this.contentElement = el)}\n class=\"content\"\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r,h as t}from"./p-a5f18e27.js";const e="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.currency{color:var(--tct-currency-color, inherit);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 16px);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 28px);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";const s=e;const n=class{constructor(t){r(this,t);this.amount=undefined;this.currency="USD";this.locale=document.documentElement.lang||"en-US";this.size=undefined;this.signDisplay="auto";this.slotSize=undefined}componentWillLoad(){this.formatCurrency()}get hasPlusMinusSign(){return this.formattedParts.some((r=>r.type==="minusSign"||r.type==="plusSign"))}get plusMinusSign(){const{formattedParts:r,hasPlusMinusSign:t}=this;if(!t)return;const e=r.find((r=>r.type==="minusSign"||r.type==="plusSign"));return e.value}get currencyIsFront(){const r=this.formattedParts.findIndex((r=>r.type==="currency"));if(r===0||r===1)return true;return false}get currencySymbol(){const{formattedParts:r,currencyIsFront:t}=this;const e=r.findIndex((r=>r.type==="currency"));const s=r[e].value;return t?s:" "+s}get shouldSuperscriptSymbol(){if(!this.currencyIsFront||this.sizeProvided)return true;return false}get amountCore(){const{formattedParts:r,shouldSuperscriptFraction:t}=this;let e="";for(const t of r){if(t.type==="integer"||t.type==="decimal"||t.type==="group"||t.type==="literal"){e+=t.value}}if(t&&e[e.length-1]===".")e=e.slice(0,-1);e=e.trimEnd();return e}get fraction(){const{formattedParts:r}=this;const t=r.find((r=>r.type==="fraction"));if(!t)return;return t.value}get shouldSuperscriptFraction(){const{formattedParts:r,currencyIsFront:t,sizeProvided:e}=this;const s=r.findIndex((r=>r.type==="fraction"));const n=r[s-1].value===",";if(n||!t||!e)return false;return true}get sizeProvided(){return!!this.size||!!this.slotSize}get slotSizeValue(){let r=this.slotSize;switch(r){case"xsmall":r="small";break;case"xlarge":r="large";break}return r}get currencyClasses(){const r=["currency"];const t=this.size?this.size:this.slotSizeValue;if(!!t)r.push(`currency-${t}`);return r.join(" ")}propsUpdated(){this.formatCurrency()}formatCurrency(){const r=new Intl.NumberFormat(this.locale,{style:"currency",currency:this.currency,signDisplay:this.signDisplay});this.formattedParts=r.formatToParts(this.amount);this.readableCurrency=r.format(this.amount)}render(){const{hasPlusMinusSign:r,plusMinusSign:e,currencyIsFront:s,currencySymbol:n,shouldSuperscriptSymbol:c,amountCore:i,fraction:o,shouldSuperscriptFraction:a,readableCurrency:u,currencyClasses:l}=this;return t("div",{key:"0a730d73b23a578257b44dc2eb1f8360707cd87b",class:l,"aria-label":u},r&&t("span",{key:"c7b69e0f685fbbbe814a50413fb533b36105453b"},e),s&&t("span",{key:"b7d8aa7ae7f3f48f762fc16932ff4da60beb57db",class:c?"superscript":""},n),t("span",{key:"2c4bbf98fa2fbbafb0cf273b4c3a28b906981e2f"},i),t("span",{key:"1ed2482e9dfd9bda22395877c105651ddcd4e6e5",class:a?"superscript":""},o),!s&&t("span",{key:"dedd3638fea31a7f985f553c4b14be358c031318",class:c?"superscript":""},n))}static get watchers(){return{amount:["propsUpdated"],currency:["propsUpdated"],locale:["propsUpdated"],size:["propsUpdated"],slotSize:["propsUpdated"],signDisplay:["propsUpdated"]}}};n.style=s;export{n as q2_currency};
2
- //# sourceMappingURL=p-7c12ba02.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["q2CurrencyCss","Q2CurrencyStyle0","Q2Currency","document","documentElement","lang","componentWillLoad","this","formatCurrency","hasPlusMinusSign","formattedParts","some","part","type","plusMinusSign","sign","find","value","currencyIsFront","index","findIndex","currencySymbol","currencyIndex","symbol","shouldSuperscriptSymbol","sizeProvided","amountCore","shouldSuperscriptFraction","amount","length","slice","trimEnd","fraction","fractionIndex","commaBeforeFraction","size","slotSize","slotSizeValue","currencyClasses","classes","sizeClass","push","join","propsUpdated","formatOptions","Intl","NumberFormat","locale","style","currency","signDisplay","formatToParts","readableCurrency","format","render","h","key","class"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.currency {\n color: var-list(--tct-currency-color, inherit);\n font-size: var-list(--tct-currency-font-size, inherit);\n font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n color: var-list(--tct-currency-small-color, inherit);\n font-size: var-list(--tct-currency-small-font-size, 24px);\n font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var-list(--tct-currency-small-superscript-color, inherit);\n font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n }\n}\n\n.currency-medium {\n color: var-list(--tct-currency-medium-color, inherit);\n font-size: var-list(--tct-currency-medium-font-size, 42px);\n font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var-list(--tct-currency-medium-superscript-color, inherit);\n font-size: var-list(--tct-currency-medium-superscript-font-size, 16px);\n font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n }\n}\n\n.currency-large {\n color: var-list(--tct-currency-large-color, inherit);\n font-size: var-list(--tct-currency-large-font-size, 70px);\n font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n .superscript {\n vertical-align: super;\n color: var-list(--tct-currency-large-superscript-color, inherit);\n font-size: var-list(--tct-currency-large-superscript-font-size, 28px);\n font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n /** The amount you want formatted. */\n @Prop({ reflect: true }) amount: number;\n\n /** Formats the `amount` to a specific currency. */\n @Prop({ reflect: true }) currency: string = 'USD';\n\n /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n @Prop({ reflect: true }) locale: string | string[] = document.documentElement.lang || 'en-US';\n\n /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large';\n\n /**\n * Determine how the positive or negative sign should display.\n *\n * Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n */\n @Prop({ reflect: true }) signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts. */\n @Prop({ reflect: true }) slotSize: string;\n\n /** @private The parts of the formatted number. */\n formattedParts: Intl.NumberFormatPart[];\n /** @private The full currency for aria-label purposes. */\n readableCurrency: string;\n\n /// Lifecycle Hooks ///\n componentWillLoad(): void | Promise<void> {\n this.formatCurrency();\n }\n\n /// Getters ///\n get hasPlusMinusSign(): boolean {\n return this.formattedParts.some(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n );\n }\n get plusMinusSign(): string {\n const { formattedParts, hasPlusMinusSign } = this;\n if (!hasPlusMinusSign) return;\n\n const sign = formattedParts.find(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n );\n return sign.value;\n }\n\n get currencyIsFront(): boolean {\n const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n if (index === 0 || index === 1) return true;\n return false;\n }\n\n get currencySymbol(): string {\n const { formattedParts, currencyIsFront } = this;\n const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n const symbol = formattedParts[currencyIndex].value;\n return currencyIsFront ? symbol : ' ' + symbol;\n }\n\n get shouldSuperscriptSymbol(): boolean {\n if (!this.currencyIsFront || this.sizeProvided) return true;\n\n return false;\n }\n\n get amountCore(): string {\n const { formattedParts, shouldSuperscriptFraction } = this;\n let amount: string = '';\n\n for (const part of formattedParts) {\n if (\n part.type === 'integer' ||\n part.type === 'decimal' ||\n part.type === 'group' ||\n part.type === 'literal'\n ) {\n amount += part.value;\n }\n }\n\n // removes trailing decimal point if superscripting the fraction\n if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n // removes end whitespace that breaks formatting\n amount = amount.trimEnd();\n\n return amount;\n }\n\n get fraction(): string {\n const { formattedParts } = this;\n const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n if (!fraction) return;\n\n return fraction.value;\n }\n\n get shouldSuperscriptFraction(): boolean {\n const { formattedParts, currencyIsFront, sizeProvided } = this;\n const fractionIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n const commaBeforeFraction = formattedParts[fractionIndex - 1].value === ',';\n\n if (commaBeforeFraction || !currencyIsFront || !sizeProvided) return false;\n\n return true;\n }\n\n get sizeProvided(): boolean {\n return !!this.size || !!this.slotSize;\n }\n\n get slotSizeValue(): string {\n let size = this.slotSize;\n switch (size) {\n case 'xsmall':\n size = 'small';\n break;\n case 'xlarge':\n size = 'large';\n break;\n default:\n break;\n }\n\n return size;\n }\n\n get currencyClasses(): string {\n const classes = ['currency'];\n const sizeClass = this.size ? this.size : this.slotSizeValue;\n\n if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n return classes.join(' ');\n }\n\n /// Watchers ///\n @Watch('amount')\n @Watch('currency')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n propsUpdated() {\n this.formatCurrency();\n }\n\n /// Helpers ///\n formatCurrency() {\n const formatOptions = new Intl.NumberFormat(this.locale, {\n style: 'currency',\n currency: this.currency,\n signDisplay: this.signDisplay,\n });\n this.formattedParts = formatOptions.formatToParts(this.amount);\n this.readableCurrency = formatOptions.format(this.amount);\n }\n\n /// DOM ///\n render() {\n const {\n hasPlusMinusSign,\n plusMinusSign,\n currencyIsFront,\n currencySymbol,\n shouldSuperscriptSymbol,\n amountCore,\n fraction,\n shouldSuperscriptFraction,\n readableCurrency,\n currencyClasses,\n } = this;\n\n return (\n <div\n class={currencyClasses}\n aria-label={readableCurrency}\n >\n {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n <span>{amountCore}</span>\n <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n </div>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as a,F as r,g as i}from"./p-a5f18e27.js";import{o as c,c as s,i as n,l as o}from"./p-42302f6f.js";const l='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';const p=l;const d=class{constructor(a){t(this,a);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.determinePaneChanges=t=>{t.forEach((t=>{var e,a;if(t.type!=="childList")return;if(!t.addedNodes.length&&!t.removedNodes.length)return;if(((e=t.addedNodes[0])===null||e===void 0?void 0:e.nodeType)!==Node.ELEMENT_NODE&&((a=t.removedNodes[0])===null||a===void 0?void 0:a.nodeType)!==Node.ELEMENT_NODE)return;this.buildPaneList()}))};this.buildPaneList=()=>{const{allRootPanes:t}=this;if(!t.length)return;this.structuredPanes=Array.from(t).reduce(((t,e)=>{var a,r;const i=Array.from((r=(a=e.querySelector("[slot=children]"))===null||a===void 0?void 0:a.children)!==null&&r!==void 0?r:[]).filter((({tagName:t})=>t==="Q2-STEPPER-PANE")).map(this.extractDetails);t.push(Object.assign(Object.assign({},this.extractDetails(e)),{children:i}));return t}),[])};this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStepId:a}=this;if(e===a)return;const r=this.allPanes.find((t=>t.id===e));this.change.emit({selectedStep:r,selectedStepId:e,currentStepId:a})};this.onStepKeyDown=(t,e)=>{const{key:a}=t;let r;switch(a){case"ArrowUp":case"ArrowLeft":t.preventDefault();r=this.getStepId(e,"prev");break;case"ArrowDown":case"ArrowRight":t.preventDefault();r=this.getStepId(e,"next");break;case"Home":t.preventDefault();r=this.getStepId(e,"first");break;case"End":t.preventDefault();r=this.getStepId(e,"last");break}if(!r)return;this.focusStepBtn(r,true)};this.currentStepId=undefined;this.structuredPanes=[]}componentWillLoad(){this.setDefaultPane();this.buildPaneList();const t=new MutationObserver(this.determinePaneChanges);const e={childList:true};t.observe(this.hostElement,e);this.allRootPanes.forEach((a=>{const r=a.querySelector("[slot=children]");if(r)t.observe(r,e)}));this.mutationObserver=t}componentDidLoad(){c(this.hostElement);setTimeout((()=>this.showStep(this.currentStepId)),0)}componentWillUpdate(){this.expandedStepChildrenList=null}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.openCurrentStepChildren()}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get allRootPanes(){return Array.from(this.hostElement.querySelectorAll(":scope > q2-stepper-pane"))}get allPanes(){return Array.from(this.hostElement.querySelectorAll("q2-stepper-pane"))}setDefaultPane(){if(this.currentStepId)return;const t=this.hostElement.querySelector("q2-stepper-pane");if(!t)return;if(!t.id)t.id=`step-${s()}`;this.currentStepId=t.id}getStepId(t,e){const a=Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));const r=a.findIndex((e=>e.getAttribute("aria-controls")===t));let i;switch(e){case"prev":i=Math.max(r-1,0);break;case"next":i=Math.min(r+1,a.length-1);break;case"first":i=0;break;case"last":i=a.length-1;break}return a[i].getAttribute("aria-controls")}showStep(t){this.scheduledAfterRender.push(this.resizeIframe);this.showStepPane(t);this.focusStepBtn(t)}extractDetails(t){const{label:e,description:a,status:r}=t;if(!t.id)t.id=`step-${s()}`;return{id:t.id,label:e,description:a,status:r}}resizeIframe(){var t,e;return(e=(t=window===null||window===void 0?void 0:window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||e===void 0?void 0:e.call(t)}openCurrentStepChildren(){const{expandedStepChildrenList:t}=this;const e=this.hostElement.shadowRoot.querySelectorAll(".spacer");e.forEach((e=>{if(t&&e.contains(t)){e.style.height=`${t.clientHeight}px`;if(e.classList.contains("is-open"))return;e.classList.add("is-opening");e.addEventListener("transitionend",(()=>{e.classList.remove("is-opening");e.classList.add("is-open");this.resizeIframe()}),{once:true})}else{e.removeAttribute("style");e.classList.remove("is-open","is-opening")}}))}showStepPane(t){this.allPanes.forEach((e=>{if(e.isActive||e.id===t){e.isActive=t===e.id}}))}focusStepBtn(t,e){const a=this.hostElement.shadowRoot.querySelector(`button[aria-controls="${t}"]`);const r=document.activeElement===this.hostElement;if(!a)return;if(r||e){a.focus()}}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStepId=t.detail.selectedStepId}}delegateFocus(t){if(!n(t,this.hostElement))return;this.focusStepBtn(this.currentStepId,true)}statusChangeHandler(){this.buildPaneList()}currentStepChanged(t){this.showStep(t)}renderStepBtn(t,e){const{currentStepId:r,structuredPanes:i}=this;const c=e===i.length-1;const{id:s,label:n,description:l,status:p}=t;const d=e+1;const v=s===r;const b=n&&`label-${s}`;const h=p==="locked";const u=n&&o(n);const f=n&&l&&`description-${s}`;const g=!n&&o("tecton.element.advancedStepper.number",[`${d}`,`${i.length}`]);let m;if(p==="complete")m="success-filled";else if(p==="error")m="warning-filled";const w=["step-btn"];if(p)w.push(`status-${p}`);const x=t.children.map((t=>t.id));const y=v||x.includes(r);return a("li",{role:"presentation"},a("button",{class:w.join(" "),type:"button","aria-labelledby":b,"aria-describedBy":f,"aria-label":g,"aria-selected":`${v}`,"aria-expanded":!!t.children.length?`${y}`:null,"aria-controls":s,"aria-disabled":h?"true":null,role:"tab",tabIndex:v?0:-1,onKeyDown:t=>!h&&this.onStepKeyDown(t,s),onClick:t=>!h&&this.onStepClick(t,s)},m?a("div",{class:"step-icon"},a("q2-icon",{type:m})):a("div",{class:"step-bubble"},d),n&&a("div",null,a("div",{class:"step-label",id:b},u),l&&a("div",{class:"step-description",id:f},o(l)))),this.renderSpacer(t,u,y,c))}renderSpacer(t,e,r,i){const c=i&&!!t.children.length||!i;const s=["spacer"];if(!i)s.push("has-sibling");return c&&a("div",{class:s.join(" ")},!!t.children.length&&a("ul",{ref:t=>r&&(this.expandedStepChildrenList=t),"aria-hidden":`${!r}`},t.children.map(((t,a,r)=>this.renderChildStepBtn(t,a,r.length,e)))))}renderChildStepBtn(t,e,r,i){const{currentStepId:c}=this;const{id:s,label:n,status:l}=t;const p=e+1;const d=n&&`label-${s}`;const v=s===c;const b=l==="locked";const h=!n&&o("tecton.element.advancedStepper.childNumber",[`${p}`,`${r}`,i]);let u;if(l==="error")u="warning-filled";const f=["step-child-btn"];if(l)f.push(`status-${l}`);return a("li",{role:"presentation"},a("button",{class:f.join(" "),type:"button","aria-labelledby":d,"aria-label":h,"aria-selected":`${v}`,"aria-controls":s,"aria-disabled":b?"true":null,role:"tab",tabIndex:v?0:-1,onKeyDown:t=>!b&&this.onStepKeyDown(t,s),onClick:t=>!b&&this.onStepClick(t,s)},u&&a("div",{class:"step-child-icon"},a("q2-icon",{type:u})),n&&a("div",{class:"step-child-label",id:d},o(n))))}render(){return a(r,{key:"111b2d1fde499840f0bfc3bc7e15aa031ca48352"},a("ul",{key:"cb06c9ee1ce93cc160b07819062cf4f4010be2a7",role:"tablist"},this.structuredPanes.map(((t,e)=>this.renderStepBtn(t,e)))),a("div",{key:"993998a6cc4bedb69065f318c59c729896671947"},a("slot",{key:"12527fc15e44c8ca0c189e797a9e3694143789d0"})))}get hostElement(){return i(this)}static get watchers(){return{currentStepId:["currentStepChanged"]}}};d.style=p;export{d as q2_stepper_vertical};
2
- //# sourceMappingURL=p-a977e723.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["q2StepperVerticalCss","Q2StepperVerticalStyle0","Q2StepperVertical","this","scheduledAfterRender","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","length","removedNodes","_a","nodeType","Node","ELEMENT_NODE","_b","buildPaneList","allRootPanes","structuredPanes","Array","from","reduce","accum","pane","children","querySelector","filter","tagName","map","extractDetails","push","Object","assign","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","change","emit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","mutationObserver","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","disconnectedCallback","disconnect","querySelectorAll","firstEnabledStep","createGuid","goTo","allEnabledStepBtns","shadowRoot","currentStepIndex","findIndex","btn","getAttribute","nextStepIndex","Math","max","min","resizeIframe","showStepPane","label","description","status","window","TectonElements","call","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","once","removeAttribute","isActive","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","defaultChangeHandler","target","detail","delegateFocus","isEventFromElement","statusChangeHandler","currentStepChanged","renderStepBtn","index","isLastStep","stepNumber","isCurrentStep","labelId","isLocked","stepLabel","loc","descriptionId","btnLabel","statusIcon","stepClasses","childIds","child","isExpanded","includes","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","shouldRender","spacerClasses","ref","el","renderChildStepBtn","parentLabel","render","Fragment"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n\n &[aria-disabled] {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\n\ninterface IBaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n children: IBaseStructuredPane[];\n}\n\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n /** The `id` of the currently selected `q2-stepper-pane`. */\n @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n @State() structuredPanes: IStructuredPane[] = [];\n mutationObserver: MutationObserver;\n expandedStepChildrenList: HTMLUListElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n /// Helpers ///\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(\n btn => btn.getAttribute('aria-controls') === currentStepId\n );\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n };\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive || pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[aria-controls=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive || forceFocus) {\n stepBtn.focus();\n }\n }\n\n /// Listeners ///\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n /// Watchers ///\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n /// Event Handlers ///\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n this.change.emit({\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n /// DOM ///\n renderStepBtn(pane: IStructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep || childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n aria-controls={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-controls={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div>\n <slot />\n </div>\n </Fragment>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as i,g as n}from"./p-a5f18e27.js";import{n as a,o,i as s,l as r}from"./p-42302f6f.js";const c="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{text-align:right;display:block;width:100%}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";const d=c;const l=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.handlePageChange=t=>{const{totalPages:e,inputField:i}=this;if(t<1){t=1}else if(t>e){t=e}if(i.value!==`${t}`)i.value=`${t}`;if(!this.hostElement.onchange){this.page=t}this.change.emit({page:t})};this.checkSize=()=>{const{hostElement:t,containerElement:e}=this;const i=this.containerWidth>t.clientWidth;this.isSmall=i;if(i)return;a((()=>{const t=this.containerWidth===e.clientWidth;if(t)return;this.containerWidth=e.clientWidth;this.checkSize()}))};this.autoSize=true;this.total=undefined;this.page=undefined;this.pages=undefined;this.pagesOnly=undefined;this.perPage=undefined;this.recordsOnly=undefined;this.recordType=undefined;this.isSmall=undefined}componentWillLoad(){this.manageResizeObserver()}componentDidLoad(){this.containerWidth=this.containerElement.clientWidth;o(this.hostElement)}disconnectedCallback(){this.removeResizeObserver()}manageResizeObserver(){if(this.autoSize&&!this.recordsOnly&&!this.pagesOnly){if(this.resizeObserver)return;this.resizeObserver=new ResizeObserver((()=>this.checkSize()));this.resizeObserver.observe(this.hostElement);window.addEventListener("resize",this.checkSize)}else{this.isSmall=false;this.removeResizeObserver()}}onHostElementFocus(t){var e;if(!s(t,this.hostElement))return;const{isFullViewHidden:i,containerElement:n,inputField:a}=this;if(i){(e=n.querySelector("q2-btn:not([disabled])"))===null||e===void 0?void 0:e.focus()}else{a.focus()}}get isFullViewHidden(){return this.isSmall||this.recordsOnly||this.pagesOnly}get pageWithDefault(){return this.page||1}get perPageWithDefault(){return this.perPage||10}get totalWithDefault(){return this.total||0}get recordTypeWithDefault(){return this.recordType||r("tecton.element.pagination.defaultRecordType")}get currentRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=(i-1)*t+1;const a=Math.min(i*t,e);return`${n} - ${a}`}get nextRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=i*t+1;const a=Math.min((i+1)*t,e);return`${n} - ${a}`}get prevRange(){const{perPageWithDefault:t,pageWithDefault:e}=this;const i=Math.max(1,(e-2)*t+1);const n=(e-1)*t;return`${i} - ${n}`}get totalPages(){const{pagesOnly:t,totalWithDefault:e,perPageWithDefault:i,pages:n}=this;if(t&&n&&!isNaN(parseInt(`${n}`)))return n;return Math.ceil(e/i)}removeResizeObserver(){var t;if(this.resizeObserver){(t=this.resizeObserver)===null||t===void 0?void 0:t.unobserve(this.hostElement);this.resizeObserver=null;window.removeEventListener("resize",this.checkSize)}}render(){const{pagesOnly:t,recordsOnly:e,isFullViewHidden:n,recordTypeWithDefault:a,totalPages:o,totalWithDefault:s,pageWithDefault:c,currentRange:d,nextRange:l,prevRange:h}=this;const p=c===1;const g=c===o;let u="";let f="";if(t){f=r("tecton.element.pagination.goToPages",{next:c-1,total:o});u=r("tecton.element.pagination.goToPages",{next:c+1,total:o})}else if(e){f=r("tecton.element.pagination.goToRecords",{range:h,recordType:a.toLowerCase(),total:s});u=r("tecton.element.pagination.goToRecords",{range:l,recordType:a.toLowerCase(),total:s})}return i("nav",{key:"74561394c7bdb496d306e959ad5b1e5361e42ec7",class:"container",ref:t=>this.containerElement=t,"aria-label":r("tecton.element.pagination.title")},i("div",{key:"2500a292e1823d4d24136be40a4fa4f9346bc9c8",class:"description","test-id":"description"},t?r("tecton.element.pagination.pages",{current:c,total:o}):r("tecton.element.pagination.description",{range:d,recordType:a.toLowerCase(),total:s.toLocaleString()})),i("div",{key:"653ee492dfd5b7e80d8d1e1eb680364cbdb13f17",class:"btn-group"},i("q2-btn",{key:"512e60ac934efaa54a87862ab81677956d80c7dc",label:r("tecton.element.pagination.goToFirstPage"),disabled:p,hidden:n,onClick:()=>this.handlePageChange(1),"test-id":"firstPageBtn","hide-label":true},i("q2-icon",{key:"7c0c57fbb28c7221467457ced6e2f196f5c0c41a",type:"chevron-double-left"})),i("q2-btn",{key:"5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14",label:f,disabled:p,onClick:()=>this.handlePageChange(c-1),"test-id":"prevPageBtn","hide-label":true},i("q2-icon",{key:"9955d71cb14f809d7794022aff67c4403dd59e0c",type:"chevron-left"}))),i("div",{key:"b7bbe334d869c527093f50b61419cd680dad7205",class:"controls",hidden:n,"test-id":"controls"},i("span",{key:"778f9842501854d5427f481e02924b2f967f8ec7","aria-hidden":"true"},r("tecton.element.pagination.page")),i("div",{key:"2761c3e8acd7150aba435d86c545e0903482163d",class:"input-wrapper",onClick:()=>this.inputField.dispatchEvent(new FocusEvent("focus"))},i("q2-input",{key:"00e1cfc6c391311920928694844875715ed2fd97",type:"number",value:`${c}`,min:1,max:this.totalPages,hideLabel:true,optional:true,label:`${r("tecton.element.pagination.page")} (${r("tecton.element.pagination.ofPages",[o.toLocaleString()])})`,onChange:t=>this.handlePageChange(t.detail.value),"test-id":"pageInput",current:"page",ref:t=>this.inputField=t})),i("span",{key:"f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab","aria-hidden":"true"},r("tecton.element.pagination.ofPages",[o.toLocaleString()]))),i("div",{key:"6acb2c32ca833bdd68fe0e09cee75df7c8abaae3",class:"btn-group"},i("q2-btn",{key:"0ac42aecaf056348a8c2e2729d1e35e7db44750b",label:u,disabled:g,onClick:()=>this.handlePageChange(c+1),"test-id":"nextPageBtn","hide-label":true},i("q2-icon",{key:"f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520",type:"chevron-right"})),i("q2-btn",{key:"2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80",label:"tecton.element.pagination.goToLastPage",disabled:g,hidden:n,onClick:()=>this.handlePageChange(o),"test-id":"lastPageBtn","hide-label":true},i("q2-icon",{key:"88a16778a20430935b7cc5d23393897f426d4548",type:"chevron-double-right"}))))}get hostElement(){return n(this)}static get watchers(){return{recordsOnly:["manageResizeObserver"],pagesOnly:["manageResizeObserver"],autoSize:["manageResizeObserver"]}}};l.style=d;export{l as q2_pagination};
2
- //# sourceMappingURL=p-b3d10d52.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["q2PaginationCss","Q2PaginationStyle0","Q2Pagination","this","handlePageChange","page","totalPages","inputField","value","hostElement","onchange","change","emit","checkSize","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","componentWillLoad","manageResizeObserver","componentDidLoad","overrideFocus","disconnectedCallback","removeResizeObserver","autoSize","recordsOnly","pagesOnly","resizeObserver","ResizeObserver","observe","window","addEventListener","onHostElementFocus","event","isEventFromElement","isFullViewHidden","_a","querySelector","focus","pageWithDefault","perPageWithDefault","perPage","totalWithDefault","total","recordTypeWithDefault","recordType","loc","currentRange","start","end","Math","min","nextRange","prevRange","max","pages","isNaN","parseInt","ceil","unobserve","removeEventListener","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","h","key","class","ref","el","current","toLocaleString","label","disabled","hidden","onClick","type","dispatchEvent","FocusEvent","hideLabel","optional","onChange","detail"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n text-align: right;\n display: block;\n width: 100%;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n /** Determines whether the component uses the dynamic resizing behavior. */\n @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n /** The total number of records to paginate. */\n @Prop({ reflect: true }) total: number;\n\n /** The current page that is being displayed. */\n @Prop({ reflect: true, mutable: true }) page: number;\n\n /**\n * The number of pages that can be displayed.\n * @info\n * Only referenced when `pagesOnly` is true.\n */\n @Prop({ reflect: true, mutable: true }) pages: number;\n\n /** Indicates to only display the current and total pages. */\n @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n\n /** The total number of records displayed on each page. */\n @Prop() perPage: number;\n\n /** Indicates to only display the current and total records. */\n @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n\n /** Description of the record type to be displayed alongside the record count. */\n @Prop() recordType: string;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the page is changed.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ page: number }>;\n\n @State() isSmall: boolean;\n\n inputField: HTMLQ2InputElement;\n containerElement: HTMLElement;\n containerWidth: number;\n resizeObserver: ResizeObserver;\n\n ////////// LIFECYCLE HOOKS ////////\n componentWillLoad(): void {\n this.manageResizeObserver();\n }\n\n componentDidLoad(): void {\n this.containerWidth = this.containerElement.clientWidth;\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n ///////// OBSERVERS /////////\n\n @Watch('recordsOnly')\n @Watch('pagesOnly')\n @Watch('autoSize')\n manageResizeObserver() {\n if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n if (this.resizeObserver) return;\n this.resizeObserver = new ResizeObserver(() => this.checkSize());\n this.resizeObserver.observe(this.hostElement);\n window.addEventListener('resize', this.checkSize);\n } else {\n this.isSmall = false;\n this.removeResizeObserver();\n }\n }\n\n ///////// HOST ELEMENT EVENTS /////////\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const { isFullViewHidden, containerElement, inputField } = this;\n if (isFullViewHidden) {\n containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n } else {\n inputField.focus();\n }\n }\n\n ///////// GETTERS /////////\n\n get isFullViewHidden() {\n return this.isSmall || this.recordsOnly || this.pagesOnly;\n }\n\n get pageWithDefault() {\n return this.page || 1;\n }\n\n get perPageWithDefault() {\n return this.perPage || 10;\n }\n\n get totalWithDefault() {\n return this.total || 0;\n }\n\n get recordTypeWithDefault() {\n return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n }\n\n get currentRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = (page - 1) * perPage + 1;\n const end = Math.min(page * perPage, total);\n return `${start} - ${end}`;\n }\n\n get nextRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = page * perPage + 1;\n const end = Math.min((page + 1) * perPage, total);\n return `${start} - ${end}`;\n }\n\n get prevRange() {\n const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n const start = Math.max(1, (page - 2) * perPage + 1);\n const end = (page - 1) * perPage;\n return `${start} - ${end}`;\n }\n\n get totalPages() {\n const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n return Math.ceil(total / perPage);\n }\n\n ///////// HELPERS /////////\n\n removeResizeObserver() {\n if (this.resizeObserver) {\n this.resizeObserver?.unobserve(this.hostElement);\n this.resizeObserver = null;\n window.removeEventListener('resize', this.checkSize);\n }\n }\n\n handlePageChange = (page: number) => {\n const { totalPages, inputField } = this;\n if (page < 1) {\n page = 1;\n } else if (page > totalPages) {\n page = totalPages;\n }\n\n if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n if (!this.hostElement.onchange) {\n this.page = page;\n }\n\n this.change.emit({ page });\n };\n\n checkSize = () => {\n const { hostElement, containerElement } = this;\n const isOverflowing = this.containerWidth > hostElement.clientWidth;\n this.isSmall = isOverflowing;\n if (isOverflowing) return;\n\n nextPaint(() => {\n const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n if (containerWidthHasNotChanged) return;\n this.containerWidth = containerElement.clientWidth;\n this.checkSize();\n });\n };\n\n render() {\n const {\n pagesOnly,\n recordsOnly,\n isFullViewHidden,\n recordTypeWithDefault: recordType,\n totalPages,\n totalWithDefault: total,\n pageWithDefault: page,\n currentRange,\n nextRange,\n prevRange,\n } = this;\n const onFirstPage = page === 1;\n const onLastPage = page === totalPages;\n\n let nextButtonLabel: string = '';\n let prevButtonLabel: string = '';\n if (pagesOnly) {\n prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n } else if (recordsOnly) {\n prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n range: prevRange,\n recordType: recordType.toLowerCase(),\n total,\n });\n nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n range: nextRange,\n recordType: recordType.toLowerCase(),\n total,\n });\n }\n\n return (\n <nav\n class=\"container\"\n ref={el => (this.containerElement = el)}\n aria-label={loc('tecton.element.pagination.title')}\n >\n <div\n class=\"description\"\n test-id=\"description\"\n >\n {pagesOnly\n ? loc('tecton.element.pagination.pages', {\n current: page,\n total: totalPages,\n })\n : loc('tecton.element.pagination.description', {\n range: currentRange,\n recordType: recordType.toLowerCase(),\n total: total.toLocaleString(),\n })}\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToFirstPage')}\n disabled={onFirstPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(1)}\n test-id=\"firstPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-left\" />\n </q2-btn>\n <q2-btn\n label={prevButtonLabel}\n disabled={onFirstPage}\n onClick={() => this.handlePageChange(page - 1)}\n test-id=\"prevPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n <div\n class=\"controls\"\n hidden={isFullViewHidden}\n test-id=\"controls\"\n >\n <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n <div\n class=\"input-wrapper\"\n onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n >\n <q2-input\n type=\"number\"\n value={`${page}`}\n min={1}\n max={this.totalPages}\n hideLabel\n optional\n label={`${loc('tecton.element.pagination.page')} (${loc(\n 'tecton.element.pagination.ofPages',\n [totalPages.toLocaleString()]\n )})`}\n onChange={event => this.handlePageChange(event.detail.value)}\n test-id=\"pageInput\"\n current=\"page\"\n ref={el => (this.inputField = el)}\n ></q2-input>\n </div>\n <span aria-hidden=\"true\">\n {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n </span>\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={nextButtonLabel}\n disabled={onLastPage}\n onClick={() => this.handlePageChange(page + 1)}\n test-id=\"nextPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n <q2-btn\n label=\"tecton.element.pagination.goToLastPage\"\n disabled={onLastPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(totalPages)}\n test-id=\"lastPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-right\" />\n </q2-btn>\n </div>\n </nav>\n );\n }\n}\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","shadowRoot","querySelector","focus","openDropdown","open","closeDropdown","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onToggleClick","onToggleKeydown","includes","key","preventDefault","focusLastItem","focusFirstItem","onDropdownMenuClick","async","item","disabled","separator","waitForNextPaint","onDropdownMenuKeydown","focusAdjacentItem","resolveMenu","name","window","TectonElements","contextValue","resolvedType","additionalContext","orchestrateResolvedMenuItems","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","hostElement","appendChild","catch","err","resolvedElements","querySelectorAll","removeChild","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","navigateTo","featureName","moduleName","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","innerHTML","onclick","_b","_a","call","overpanelPath","params","undefined","hasCustomButton","determineDropdownItemCount","length","toggleButtonProps","allowedIntents","allowedTypes","type","icon","fab","custom","intent","active","ariaExpanded","className","popDirectionHandler","handleRenamedProp","alignmentHandler","ariaLabelHandler","handleAriaLabel","nameHandler","contextHandler","contextValueHandler","resolvedTypeHandler","additionalContextHandler","delegateFocus","isEventFromElement","popoverStateHandler","detail","scrollContainerTo","top","componentWillLoad","componentDidLoad","overrideFocus","firstItem","dispatchEvent","FocusEvent","lastItem","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","onFocus"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n @Prop({ reflect: true }) additionalContext: string;\n\n /** If `true`, component expands to fill the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /**\n * Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) context: string;\n\n /**\n * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) contextValue: string;\n\n /** Indicates the menu cannot be focused or interacted with. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n @Prop({ reflect: true }) icon: string;\n\n /**\n * The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /**\n * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) name: string;\n\n /** Determine whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /**\n * Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n\n /** Aligns the popover dropdown to the left or right side of the input field. */\n @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n /**\n * Determines the display mode of the popover.\n *\n * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n *\n * @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n */\n @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() popoverMinHeight: number = 150;\n\n /**\n * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) resolvedType: string;\n\n /** The type of button used as the menu toggle. */\n @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n /** @deprecated */\n @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n /** @deprecated */\n @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n privatePopDirection: 'down' | 'up';\n controlElement?: HTMLQ2BtnElement;\n popoverElement?: HTMLQ2PopoverElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n orchestrateResolvedMenuItems() {\n if (!this.name || !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = () =>\n this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n break;\n case 'showOverpanel':\n onClickFn = () =>\n this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.innerHTML = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n get hasCustomButton() {\n return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n }\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n //////// Observers //////////\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n }\n\n ///// Lifecycle Hooks ////////\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n ///// Actions ////////\n focusToggle = () => {\n this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\n };\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = (event: KeyboardEvent) => {\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusLastItem();\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusFirstItem();\n return;\n }\n\n if (['Escape', 'Esc'].includes(event.key)) {\n event.preventDefault();\n this.focusToggle();\n this.closeDropdown();\n return;\n }\n };\n\n onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n const item = event.target as HTMLQ2DropdownItemElement;\n if (!item.disabled && !item.separator) {\n this.closeDropdown();\n await waitForNextPaint();\n this.focusToggle();\n }\n };\n\n focusFirstItem() {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n\n firstItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusLastItem() {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n lastItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n this.hostElement.querySelectorAll(this.dropdownItemSelector)\n );\n\n const activeIndex = dropdownItems.indexOf(activeItem);\n\n if (activeIndex === -1) {\n return;\n }\n\n let targetIndex: number = 0;\n if (direction === 'next') {\n targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n } else if (direction === 'prev') {\n if (activeIndex > 0) {\n targetIndex = activeIndex - 1;\n } else {\n targetIndex = dropdownItems.length - 1;\n }\n }\n const targetItem = dropdownItems[targetIndex];\n targetItem && targetItem.dispatchEvent(new Event('focus'));\n }\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n if (['Escape', 'Esc'].includes(event.key)) {\n this.closeDropdown();\n this.focusToggle();\n return;\n }\n\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n\n const item = event.target as HTMLQ2DropdownItemElement;\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n return;\n }\n if (event.key === 'Tab') {\n event.preventDefault();\n }\n };\n\n /// DOM ///\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomButton ? (\n <div\n test-id=\"dropdownCustom\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"custom-dropdown-button\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode || undefined}\n block={this.block}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n >\n <slot />\n {this.open && (\n <q2-btn\n class=\"sr close-dropdown\"\n onFocus={this.closeDropdown}\n />\n )}\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as i,g as n}from"./p-a5f18e27.js";import{d as a}from"./p-7ce6e587.js";import{l as s,h as r,o as d,i as o,w as l,a as c}from"./p-42302f6f.js";function h(e){const t=new Date(e);if(!a.isValid(t))return;return a.formatISO(t,{representation:"date"})}let u;function f(e){const t=new Date(e);if(!a.isValid(t))return;const i=t.toISOString();if(!u){u=new Intl.DateTimeFormat("en-US",{month:"2-digit",day:"2-digit",year:"numeric",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone})}return u.format(new Date(i))}let v;function p(e){const t=new Date(e);if(!a.isValid(t))return;if(!v){v=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"})}return v.format(t)}let b;function m(e){if(!e)return;const t=new Date(e);if(!a.isValid(t))return;if(!b){b=new Intl.DateTimeFormat("en-US",{month:"long",day:"numeric",year:"numeric",weekday:"long",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone})}return b.format(t)}function y(e){return e.replace(/[d]/g,"E").replace(/[D]/g,"d").replace(/[Y]/g,"y").replace(/[l]/g,"P").replace(/[W]/g,"I")}function g(e){const t=typeof e==="string";if(!t&&e&&a.isValid(new Date(e||undefined))){e=h(e)}else if(!e||!a.isValid(new Date(e))){return undefined}let i;const n=e.split(/[\/\-]/).map((e=>e.padStart(2,"0")));const s=t&&e.length>=24&&e[10]==="T";const r=n.length===3;const d=n.length<3;if(s){e=e.split("T")[0];i=new Date(e)}else if(r){const t=e.includes("/")&&n[2].length===4;if(t)n.unshift(n.pop());i=new Date(Date.UTC(parseInt(n[0]),parseInt(n[1])-1,parseInt(n[2])))}else if(d){const e=new Date;let t;let a;let s;switch(n.length){case 1:t=e.getFullYear();a=n[0];s="01";break;case 2:t=e.getFullYear();a=n[0];s=n[1];break}i=new Date(`${t}-${a}-${s}`)}if(!a.isValid(i))return undefined;i=w(i);return a.isValid(i)?i:undefined}function w(e){const t=e.getTimezoneOffset();return a.setMinutes(e,t+Math.abs(t%60))}function D(e){if(!Array.isArray(e)||e.length===0){return[]}return e.map((e=>g(e)))}function x(e=new Date){return{monthIndex:e.getMonth(),selectedYear:e.getFullYear()}}function k(e="",t=[],i=[],n=[],r,d,o="mm/dd/yyyy",l){let c=true;let u=false;let f="info";let v=`${s("tecton.element.calendar.hint.format")}: ${o}`;if(!e){return{isValid:c,inputDate:new Date(""),isAvailable:u,messageType:f,message:v}}const b=$(e,l);const m=b.getMonth()+1;const y=b.getDate();const g=b.getFullYear();const w=[m,y,g];if(a.isValid(b)){const a=E()[b.getMonth()];if(e.length===10){c=true;f=null;v=null}u=t.includes(b.getDay());const l=h(b);if(u){const e=i.length&&!i.includes(l);const t=n.length&&n.includes(l);const a=r&&r>l;const s=d&&d<l;if(e||t||a||s){u=false}}if(e.length>=5&&!u){c=false;f="error";const e=!a||!y||!g;v=e?`${s("tecton.element.calendar.hint.invalidDate")}: ${o}`:s("tecton.element.calendar.hint.notAvailableDate",[p(b)])}}else{c=false;f="error";v=`${s("tecton.element.calendar.hint.invalidDate")}: ${o}`}return{isValid:c,messageType:f,message:v,inputDate:b,isAvailable:u,calendarPosition:w}}function $(e,t){const i=new Date;let[n,a,s]=e.split("/");if(n==="0")n="01";if(a==="0")a="01";if(e.length===10){return new Date(e)}else if(n&&a&&Number(a)>0){const e=Number(a)<10?`0${Number(a)}`:a;const i=!s||s.length<4?I(n,a,t):s;return new Date(`${n}/${e}/${i}`)}else if(n){return new Date(`${n}/01/${i.getFullYear()}`)}}function I(e,t,i){const n=`${e}/${t}`;const a=new Date;const s=a.getMonth()<9?`0${a.getMonth()+1}`:`${a.getMonth()+1}`;const r=a.getDate()<10?`0${a.getDate()}`:`${a.getDate()}`;const d=`${s}/${r}/${a.getFullYear()}`;let o=a.getFullYear();if(i==="future"&&d.slice(0,5)>n){o=a.getFullYear()+1}else if(i==="past"&&d.slice(0,5)<n){o=a.getFullYear()-1}return o.toString()}function T(e){if(!e){return""}if(e.match(/^[1-9]\/$/)){return`0${e}/`}else if(e.match(/^[0-9]{2}\/[1-9]{1}\/$/)){const t=e.split("/");return`${t[0]}/0${t[1]}/`}return e}function O(e){const t=(e||"").split("-");if(t.length!==3)return"";return`${t[1]}/${t[2]}/${t[0]}`}function V(e,t){return new Date(t,e,1,1,1,1,1).getDay()}function A(){return[s("tecton.element.calendar.days.short.Sunday"),s("tecton.element.calendar.days.short.Monday"),s("tecton.element.calendar.days.short.Tuesday"),s("tecton.element.calendar.days.short.Wednesday"),s("tecton.element.calendar.days.short.Thursday"),s("tecton.element.calendar.days.short.Friday"),s("tecton.element.calendar.days.short.Saturday")]}function C(){return[s("tecton.element.calendar.days.Sunday"),s("tecton.element.calendar.days.Monday"),s("tecton.element.calendar.days.Tuesday"),s("tecton.element.calendar.days.Wednesday"),s("tecton.element.calendar.days.Thursday"),s("tecton.element.calendar.days.Friday"),s("tecton.element.calendar.days.Saturday")]}function E(){return[s("tecton.element.calendar.months.January"),s("tecton.element.calendar.months.February"),s("tecton.element.calendar.months.March"),s("tecton.element.calendar.months.April"),s("tecton.element.calendar.months.May"),s("tecton.element.calendar.months.June"),s("tecton.element.calendar.months.July"),s("tecton.element.calendar.months.August"),s("tecton.element.calendar.months.September"),s("tecton.element.calendar.months.October"),s("tecton.element.calendar.months.November"),s("tecton.element.calendar.months.December")]}function z(e,t){const i=a.getDaysInMonth(new Date(t,e));return[...Array(i).keys()].reduce(((i,n)=>{i.push(new Date(t,e,n+1));return i}),[])}function q(e=127){const t=e&1;const i=e&2;const n=e&4;const a=e&8;const s=e&16;const r=e&32;const d=e&64;const o=[];if(e<=0)return o;if(t)o.push(0);if(i)o.push(1);if(n)o.push(2);if(a)o.push(3);if(s)o.push(4);if(r)o.push(5);if(d)o.push(6);return o}function S(e,t){return e.includes(t.getDay())}function Y(e,t){return!F(e,t)}function F(e,t){return e.some((e=>a.isSameDay(e,t)))}function M(e,t,i,n,a,s,r){const d=[H.bind(null,s,new Date)];if(t===null||t===void 0?void 0:t.length){d.push(F.bind(null,t))}else{d.push(S.bind(null,e))}d.push(Y.bind(null,i));return L(n,a,s,d,r)}function L({monthIndex:e,selectedYear:t},i,n,s,r){const d=!a.isValid(new Date(r));const o=z(e,t).map(((e,t)=>{const a=s.some((t=>!t(e)));const r=P(e,n,i);const o=j(Object.assign(Object.assign({},r),{isInvalid:a,isIncompleteDate:d}));return Object.assign(Object.assign({},r),{isValid:!a,date:e,integer:t+1,isEmpty:false,isActivity:false,classList:o})}));const l=B(V(e,t));const c=U((l.length+o.length)%7);return[...l,...o,...c]}function H(e,t,i){const n=a.isAfter(e===null||e===void 0?void 0:e.startDate,i);const s=a.isBefore(e===null||e===void 0?void 0:e.endDate,i);const r=a.isSameDay(t,i)&&a.isAfter(t,e===null||e===void 0?void 0:e.cutOffTime);return!(n||r||s)}function P(e,t,i){if(!i)i=new Date;const n=i&&a.isSameDay(i,e);const s=a.isSameDay(e,new Date);const r=a.isSameDay(e,t===null||t===void 0?void 0:t.startDate);const d=a.isSameDay(e,t===null||t===void 0?void 0:t.endDate);return{isSelected:n,isToday:s,isStartDate:r,isEndDate:d}}function j({isInvalid:e,isSelected:t,isEndDate:i,isStartDate:n,isToday:a,isIncompleteDate:s}){const r=[];if(!e)r.push("is-valid");if(t)r.push("is-selected");if(i)r.push("is-end-date");if(n)r.push("is-start-date");if(a)r.push("is-today");if(t&&e&&!s)r.push("is-unavailable");return r.join(" ")}function B(e){return K(0,e)}function U(e){if(e===0)return[];return K(e,7)}const W={date:null,integer:null,isActivity:false,isEmpty:true,isValid:false,isToday:false,isSelected:false,isStartDate:false,isEndDate:false,classList:""};function K(e,t){if(e===7)e=0;return[...Array(t-e).keys()].map((()=>Object.assign({},W)))}const N="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer}q2-popover{--comp-min-tappable-size:44px;--comp-table-border-spacing:2px;--comp-min-tappable-size-and-spacing:calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));--comp-popover-padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));--comp-min-table-width:calc(var(--comp-min-tappable-size-and-spacing) * 7);--comp-table-container-border-spacing:calc(var(--comp-table-border-spacing) * 2);--comp-popover-total-padding:calc(var(--comp-popover-padding) * 2);--tct-popover-min-width:calc(\n var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding)\n )}.calendar-field-popup{padding:var(--comp-popover-padding)}.calendar-label{--comp-label-padding:var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--comp-label-padding)}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));text-align:center}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center;border-spacing:var(--comp-table-border-spacing)}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:var(--comp-min-tappable-size);cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-style:solid;border-width:var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));border-color:var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}";const J=N;const Z=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.error=t(this,"error",7);this.success=t(this,"success",7);this.formatModifier="M/D/YYYY";this.defaultFormatString="mm/dd/yyyy";this.scheduledAfterRender=[];this.internalError="";this.dayAbbrStrings=A();this.dayStrings=C();this.monthStrings=E();this.closeCalendar=()=>{if(!this.open)return;this.open=false;this.focusInput()};this.openCalendar=()=>{if(this.readonly||this.open)return;this.selectedMonthYear=x(this.dateValue);this.dateList=this.buildDateList(this.selectedMonthYear);this.open=true};this.toggleCalendar=()=>{if(this.readonly)return;if(this.open){this.closeCalendar()}else{this.openCalendar()}};this.onClickElsewhere=e=>{const t=e.target;if(t.localName==="click-elsewhere"){e.stopPropagation();this.closeCalendar()}};this.onPopupKeyup=e=>{if(e.key==="Escape"||e.key==="Esc"){this.onInputBlur();this.closeCalendar()}};this.onInputInput=({detail:{value:e}})=>{this.typedValue=e};this.onInputKeydown=e=>{const{dateValue:t}=this;switch(e.key){case"ArrowDown":e.preventDefault();this.openCalendar();this.activateDay(t||new Date);break}};this.onInputKeyup=e=>{if(this.disabled){return}switch(e.key){case"Escape":this.onInputBlur();this.closeCalendar();break}if(!this.isTypeable)return;this.typedValue=T(this.typedValue);const{typedValue:t}=this;const i=q(this.daysOfWeekChecksum);const{isValid:n,message:s,messageType:r,inputDate:d,isAvailable:o,calendarPosition:l}=k(t,i,this.validDates,this.invalidDates,this.startDate,this.endDate,this.defaultFormatString,this.assume);if(l){const[e,t,i]=l;const n=new Date(i,e-1,t);if(a.isValid(n)){this.selectedMonthYear=x(n);this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}}if(e.key==="Enter"){if(n||t&&t.length>4&&d&&a.isValid(d)&&o){this.setCompleteInput(d)}else if(this.value){this.value=null;this.change.emit({value:null});this.typedValue=t}if(this.keyboardSelection){this.keyboardSelection=false;this.closeCalendar()}else{this.toggleCalendar()}}else{this.setHints({isValid:n,message:s,messageType:r})}};this.onInputChange=e=>{e.stopPropagation()};this.onInputBlur=()=>{if(!this.isTypeable)return;const e=q(this.daysOfWeekChecksum);const{typedValue:t}=this;const{isValid:i,inputDate:n,isAvailable:s}=k(this.typedValue,e,this.validDates,this.invalidDates,this.startDate,this.endDate,this.defaultFormatString,this.assume);if(!t&&(n===null||n===void 0?void 0:n.toString())==="Invalid Date"){this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"})}else if(i||t&&t.length>4&&n&&a.isValid(n)&&s){this.setCompleteInput(n)}else if(this.value){this.valueOnBlur=this.value;this.value=null;this.change.emit({value:null});this.typedValue=t}};this.onInputFocus=e=>{if(!this.isTypeable)return;if(e.target===this.controlElement){if(this.valueOnBlur&&!this.value){const e=this.typedValue;this.value=this.valueOnBlur;this.typedValue=e;this.valueOnBlur=null}this.closeCalendar()}};this.onInputClick=()=>{if(this.disabled)return;this.toggleCalendar()};this.onRefocus=()=>{var e;(e=this.btnPrevMonth)===null||e===void 0?void 0:e.dispatchEvent(new FocusEvent("focus"))};this.goToMonthYear=(e,t)=>{if(e<0){e=11;t--}else if(e>11){e=0;t++}this.selectedMonthYear={monthIndex:e,selectedYear:t};this.dateList=this.buildDateList(this.selectedMonthYear);this.scheduledAfterRender.push((()=>this.checkActiveCellForBlankness()))};this.selectDate=e=>{const{isValid:t}=this.dateList.find((({date:t})=>a.isSameDay(t,e)));if(!t)return;this.change.emit({value:h(e)});this.typedValue=f(e);this.invalid=false;this.success.emit({value:h(e)})};this.onDateSelection=e=>{const t=e.target.closest("td:not([aria-hidden])");if(!t)return;const i=w(new Date(t.dataset.date));this.selectDate(i);this.closeCalendar()};this.onHeaderControlKeydown=e=>{var t;const i=this.generateDateFromDay(1);const n=(t=this.calendarBody)===null||t===void 0?void 0:t.querySelector('[aria-selected="true"]');if(e.key==="Tab"&&!n){e.preventDefault();this.activateDay(i)}};this.onDateKeydown=e=>{const{monthIndex:t,selectedYear:i}=this.selectedMonthYear;const n=parseInt(e.target.dataset.day);const s=this.generateDateFromDay(n);switch(e.key){case"ArrowUp":e.preventDefault();this.activateDay(a.addDays(s,-7));break;case"ArrowDown":e.preventDefault();this.activateDay(a.addDays(s,7));break;case"ArrowRight":e.preventDefault();this.activateDay(a.addDays(s,1));break;case"ArrowLeft":e.preventDefault();this.activateDay(a.addDays(s,-1));break;case"PageUp":e.preventDefault();if(e.shiftKey)this.goToMonthYear(t,i-1);else this.goToMonthYear(t-1,i);break;case"PageDown":e.preventDefault();if(e.shiftKey)this.goToMonthYear(t,i+1);else this.goToMonthYear(t+1,i);break;case"Home":e.preventDefault();this.activateDay(a.addDays(s,-s.getDay()));break;case"End":e.preventDefault();this.activateDay(a.addDays(s,6-s.getDay()));break;case"Escape":e.preventDefault();this.closeCalendar();this.focusInput();break;case"Enter":e.preventDefault();if(!this.dateList.find((({date:e})=>a.isSameDay(e,s))).isValid)return;this.selectDate(s);this.closeCalendar();this.focusInput();break;case" ":e.preventDefault();if(!this.dateList.find((({date:e})=>a.isSameDay(e,s))).isValid)return;this.selectDate(s);this.focusInput();break}};this.assume="current";this.calendarLabel=undefined;this.clearable=undefined;this.cutoffTime=undefined;this.daysOfWeekChecksum=undefined;this.disabled=undefined;this.disabledMsg=undefined;this.disclaimer=undefined;this.displayFormat=undefined;this.endDate=undefined;this.errors=undefined;this.hideLabel=undefined;this.hints=undefined;this.invalid=undefined;this.invalidDates=undefined;this.label=undefined;this.open=undefined;this.optional=undefined;this.placeholder=undefined;this.popoverAlignment=undefined;this.popoverDirection=undefined;this.popoverMode=null;this.popoverMinHeight=355;this.readonly=undefined;this.startDate=undefined;this.typeable=undefined;this.validDates=undefined;this.value=undefined;this.popDirection=undefined;this.onsuccess=undefined;this.buttonLabel=undefined;this.ariaLabel=undefined;this.keyboardSelection=false;this.typedValue="";this.dateList=undefined;this.hintMessage=this.defaultHintMessage;this.hintMessageType="info"}connectedCallback(){this.selectedMonthYear=x(this.dateValue);this.dateList=this.buildDateList(this.selectedMonthYear);if(this.value&&this.isTypeable&&!this.typedValue){this.typedValue=O(this.value)}this.validateDate()}componentWillLoad(){this.popDirectionHandler();r(this)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((e=>e()));this.scheduledAfterRender=[]}),25)}componentDidLoad(){d(this.hostElement)}get selectedDate(){var e;const t=(e=this.calendarBody)===null||e===void 0?void 0:e.querySelector('[aria-selected="true"]');return t?w(new Date(t.dataset.date)):null}get innerInputField(){var e,t;return(t=(e=this.controlElement)===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".input-field")}get innerInputContainer(){var e,t;return(t=(e=this.controlElement)===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".input-container")}get defaultHintMessage(){return this.typeable?s("tecton.element.calendar.hint.format")+": "+this.defaultFormatString:s("tecton.element.calendar.hint.select")}get canClear(){if(this.isTypeable){return this.clearable&&!!this.typedValue}else{return this.clearable&&!!this.value}}get currentWeeks(){const e=this.dateList.reduce(((e,t,i)=>{const n=Math.floor(i/7);if(!e[n]){e[n]=[]}e[n].push(t);return e}),[]);return e}get formattedValue(){const{typedValue:e,dateValue:t,displayFormat:i,isTypeable:n}=this;if(n)return e;if(t===undefined)return"";if(i)return a.format(t,y(i));return new Intl.DateTimeFormat("en-US",{year:"numeric",month:"2-digit",day:"2-digit",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}).format(t)}get computedPlaceholder(){if(this.disabled&&this.disabledMsg){return s(this.disabledMsg)}if(this.buttonLabel&&(this.disabled||this.placeholder)){return s(this.buttonLabel)}return this.placeholder&&s(this.placeholder)||""}get dateValue(){if(this.isTypeable){return g(this.typedValue)}else{let{value:e}=this;const t=e&&typeof e!=="string"&&"toDate"in e;if(t)return e.toDate();const i=typeof e==="string"&&e.split(" ").length===6&&/GMT-\d{4}/g.test(e);if(i){e=h(e)}return g(e)}}get dateValidators(){const e=new Date(this.cutoffTime||"");return{startDate:g(this.startDate),endDate:g(this.endDate),cutOffTime:a.isValid(e)?e:undefined}}get isTypeable(){return this.typeable}get errorList(){const{errors:e,internalError:t,invalid:i}=this;let n=[];if(t){n=[t]}if(Array.isArray(e)&&e.length){n=e.filter((e=>!!e)).map((e=>s(e))).concat(n)}else if(!t&&i){return["tecton.element.calendar.invalid"]}return n}get hintList(){const{hints:e,hintMessageType:t,hintMessage:i}=this;if(Array.isArray(e)&&e.length)return e.filter((e=>!!e)).map((e=>s(e)));if(t==="info"&&i)return[i];return[]}defaultChangeHandler(e){if(e.target===this.hostElement&&!this.hostElement.onchange&&!!e.detail){this.value=e.detail.value}}defaultErrorHandler(e){if(e.target===this.hostElement&&!this.hostElement.onerror){if(this.hintMessageType==="error"&&this.hintMessage){this.internalError=this.hintMessage}else{this.internalError=s("tecton.element.calendar.hint.invalidDate")}}}defaultSuccessHandler(e){if(e.target!==this.hostElement){return}if(typeof this.onsuccess==="function"){this.onsuccess(e)}else{this.internalError="";if(this.hintMessageType==="error"&&this.hintMessage){this.hintMessage=null;this.hintMessageType=null;this.invalid=false}}}delegateFocus(e){if(!o(e,this.hostElement))return;this.controlElement.shadowRoot.querySelector(".input-field").focus()}handleClear(){this.change.emit({value:null});this.value=null;this.typedValue=""}popoverStateHandler({detail:{open:e}}){if(this.open!==e)this.open=e}_togglePopover(){const e=this.typeable?this.btnCalendarToggle:this.innerInputField;e===null||e===void 0?void 0:e.click();e===null||e===void 0?void 0:e.focus();e.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open)return;this._togglePopover()}async closePopover(){if(!this.open)return;this._togglePopover()}async setValue(e){var t;const i=typeof e==="string"?g(e):e;if(!a.isValid(i))return;await this.openPopover();await l();this.goToMonthYear(i.getMonth(),i.getFullYear());await l();const n=(t=this.calendarTable)===null||t===void 0?void 0:t.querySelector(`td[data-date="${h(i)}"]`);n===null||n===void 0?void 0:n.click()}async typeValue(e){if(!this.typeable)return;const t=typeof e==="string"?g(e):e;const i=f(t);if(!a.isValid(t))return;const{innerInputField:n,controlElement:s}=this;n.focus();n.dispatchEvent(new FocusEvent("focus"));n.value=i;n.dispatchEvent(new InputEvent("input"));s.dispatchEvent(new KeyboardEvent("keyup"))}popDirectionHandler(){c(this,"popDirection","popoverDirection")}ariaLabelObserver(){r(this)}typeableChanged(){this.valueObserver(this.value)}valueObserver(e){if(e===""){this.value=undefined;this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"});return}const t=e&&typeof e!=="string"&&"toDate"in e;const i=t?e.toDate():g(e);const n=f(i);if(this.isTypeable){this.typedValue=n}else{this.controlElement.value=n;this.selectedMonthYear=x(i);this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}if(this.invalid)return;if(n){this.setHints({isValid:true,message:null,messageType:null})}else{this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"})}}daysOfWeekChecksumObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}validDatesObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}invalidDatesObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}startDateObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}endDateObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}cutoffTimeObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}buildDateList(e){const t=D(this.invalidDates);const i=q(this.daysOfWeekChecksum);const n=D(this.validDates);return M(i,n,t,e,this.dateValue,this.dateValidators,this.typedValue)}validateDate(){var e,t,i;try{if(!!this.value){const{dateValue:n}=this;const a=(e=n===null||n===void 0?void 0:n.getMonth())!==null&&e!==void 0?e:undefined;const s=(t=n===null||n===void 0?void 0:n.getFullYear())!==null&&t!==void 0?t:undefined;const{monthIndex:r,selectedYear:d}=this.selectedMonthYear;const o=a===r&&s===d;let l=[];if(!n){l=[]}else if(o){l=this.dateList}else{l=this.buildDateList({monthIndex:a,selectedYear:s})}const c=(i=n===null||n===void 0?void 0:n.getDate())!==null&&i!==void 0?i:undefined;const u=c?!l.find((({integer:e})=>e===c)).isValid:true;if(u){this.error.emit({errors:[{message:`Value passed is invalid: The date ${this.value} is not valid`,errorCode:"generalInvalid"}]})}else{this.success.emit({value:h(n)})}}}catch(e){console.warn("Invalid moment value ",this.dateValue)}}focusInput(){var e;(e=this.controlElement)===null||e===void 0?void 0:e.focus()}checkActiveCellForBlankness(){const e=this.hostElement.shadowRoot.activeElement;if(!e||e.tagName!=="TD"||!e.hasAttribute("aria-hidden"))return;const{calendarBody:t}=this;const i=Array.from(t.querySelectorAll("td"));const n=Array.from(i).indexOf(e);const a=n<15?1:i.filter((e=>!e.hasAttribute("aria-hidden"))).length;this.focusDay(this.generateDateFromDay(a))}generateDateFromDay(e){const{monthIndex:t,selectedYear:i}=this.selectedMonthYear;return new Date(i,t,e)}activateDay(e){this.goToMonthYear(e.getMonth(),e.getFullYear());this.scheduledAfterRender.push((()=>this.focusDay(e)))}async focusDay(e){var t;if(!e)return;await l();(t=this.calendarBody.querySelector(`td[data-day="${e.getDate()}"]`))===null||t===void 0?void 0:t.focus()}render(){return i("click-elsewhere",{key:"22d396332aee124405d7cf50bed74018eefdc7c4",class:this.open?"dropdown-open":undefined,onChange:this.onClickElsewhere},this.inputField(),i("q2-popover",{key:"70e11b37c3cf8c5661fba5e360ed720eec5f0fb3",ref:e=>this.popoverElement=e,controlElement:this.innerInputContainer,open:this.open,direction:this.popoverDirection,minHeight:this.popoverMinHeight,align:this.popoverAlignment,mode:this.popoverMode||undefined,block:true},this.hintField(),this.calendarPopover()))}hintField(){if(!this.hintMessage)return;return i("q2-message",{class:"calendar-hint sr",ref:e=>this.hintMessageElement=e,type:this.hintMessageType},this.hintMessage)}setHints({isValid:e,message:t,messageType:i}){var n;if(t===this.hintMessage)return(n=this.hintMessageElement)===null||n===void 0?void 0:n.present();this.invalid=!e;this.hintMessage=t;this.hintMessageType=i;if(i==="error"&&t){this.internalError=t;this.error.emit({errors:[{message:t,errorCode:"generalInvalid"}]})}}setCompleteInput(e){const t=f(e);this.change.emit({value:h(e)});this.typedValue=t;this.internalError=null;this.setHints({isValid:true,message:null,messageType:null})}inputField(){const{isTypeable:e}=this;return i("q2-input",{ref:e=>this.controlElement=e,class:"calendar-input-field",value:this.formattedValue,label:s(this.label),hideLabel:this.hideLabel,disabled:!!this.disabled,readonly:!!this.readonly,clearable:this.canClear,placeholder:this.computedPlaceholder,optional:!!this.optional,ariaExpanded:`${!!this.open}`,hints:this.hintList,errors:this.errorList,onClick:e?undefined:this.onInputClick,onChange:this.onInputChange,onInput:this.onInputInput,onKeyDown:this.onInputKeydown,onKeyUp:this.onInputKeyup,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"icon-right":e?undefined:"calendar","format-modifier":e?this.formatModifier:this.displayFormat||this.formatModifier,pseudo:!e,type:"date","hide-messages":!e,"test-id":"inputAndCalendarToggle"},e&&i("q2-btn",{ref:e=>this.btnCalendarToggle=e,slot:"input-right",onClick:this.onInputClick,"test-id":"calendarToggle",label:"tecton.element.calendar.toggleAriaLabel","hide-label":true},i("q2-icon",{type:"calendar"})))}calendarPopover(){const{monthIndex:e,selectedYear:t}=this.selectedMonthYear;return i("div",{class:"calendar-field-popup",onKeyUp:this.onPopupKeyup},this.calendarLabel&&i("p",{class:"calendar-label"},s(this.calendarLabel)),i("div",{class:"cal-month-heading"},i("q2-btn",{label:s("tecton.element.calendar.previousMonth"),"hide-label":true,ref:e=>this.btnPrevMonth=e,class:"cal-nav-btn prev-month","test-id":"previousMonthButton",onClick:()=>this.goToMonthYear(e-1,t)},i("q2-icon",{type:"chevron-left"})),i("span",{class:"cal-month-text"},this.monthStrings[e]),i("q2-btn",{label:s("tecton.element.calendar.nextMonth"),"hide-label":true,class:"cal-nav-btn next-month",ref:e=>this.btnNextMonth=e,"test-id":"nextMonthButton",onClick:()=>this.goToMonthYear(e+1,t)},i("q2-icon",{type:"chevron-right"})),i("q2-btn",{label:s("tecton.element.calendar.previousYear"),"hide-label":true,class:"cal-nav-btn prev-year",ref:e=>this.btnPrevYear=e,"test-id":"previousYearButton",onClick:()=>this.goToMonthYear(e,t-1)},i("q2-icon",{type:"chevron-left"})),i("span",{class:"cal-year-text"},this.selectedMonthYear.selectedYear),i("q2-btn",{label:s("tecton.element.calendar.nextYear"),"hide-label":true,class:"cal-nav-btn next-year",ref:e=>this.btnNextYear=e,"test-id":"nextYearButton",onClick:()=>this.goToMonthYear(e,t+1),onKeyDown:this.onHeaderControlKeydown},i("q2-icon",{type:"chevron-right"}))),i("div",{class:"sr","aria-live":"polite",id:"table-label"},`${this.monthStrings[e]} ${t}`),this.calendarDays(),this.disclaimer&&i("div",{class:"calendar-disclaimer"},s(this.disclaimer)),i("q2-btn",{class:"sr refocus-popup",onFocus:this.onRefocus}))}calendarDays(){return i("table",{role:"grid","aria-labelledby":"table-label",ref:e=>this.calendarTable=e},i("thead",null,i("tr",null,[...Array(7).keys()].map((e=>i("th",{scope:"col","aria-label":this.dayStrings[e]},this.dayAbbrStrings[e]))))),i("tbody",{onClick:this.onDateSelection,onKeyDown:this.onDateKeydown,ref:e=>this.calendarBody=e,"test-id":"calendarTableBody"},this.currentWeeks.map((e=>i("tr",null,e.map((e=>{var t;let n="";if(e.isToday)n=`${s("tecton.element.calendar.today")}, `;n+=m(e.date);if(e.isSelected)n+=` (${s("tecton.element.calendar.selected")})`;return i("td",{class:e.classList,"aria-hidden":e.isEmpty?"true":undefined,tabindex:e.isSelected?0:-1,role:e.isSelected?"gridcell":undefined,"aria-selected":e.isSelected?"true":undefined,"aria-disabled":e.isValid?undefined:"true","data-day":e.integer||undefined,"data-date":e.date?h(e.date):undefined},(e===null||e===void 0?void 0:e.isToday)&&i("div",{class:"today-decorator","aria-hidden":"true"},s("tecton.element.calendar.today")),i("div",{"aria-label":n},(t=e===null||e===void 0?void 0:e.integer)!==null&&t!==void 0?t:""))})))))))}get hostElement(){return n(this)}static get watchers(){return{popDirection:["popDirectionHandler"],ariaLabel:["ariaLabelObserver"],typeable:["typeableChanged"],value:["valueObserver"],daysOfWeekChecksum:["daysOfWeekChecksumObserver"],validDates:["validDatesObserver"],invalidDates:["invalidDatesObserver"],startDate:["startDateObserver"],endDate:["endDateObserver"],cutoffTime:["cutoffTimeObserver"]}}};Z.style=J;export{Z as q2_calendar};
2
- //# sourceMappingURL=p-bffda54d.entry.js.map