@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

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 (454) hide show
  1. package/dist/cjs/breakpoints-DIH5Oaz7.js +186 -0
  2. package/dist/cjs/event-from-AKK8RQrn.js +107 -0
  3. package/dist/cjs/{get-root-8102fecd.js → get-root-DmyBVSJ_.js} +1 -1
  4. package/dist/cjs/{index-b60129c4.js → index-CRMt-jq2.js} +1172 -313
  5. package/dist/cjs/index.cjs.js +0 -72
  6. package/dist/cjs/loader.cjs.js +3 -6
  7. package/dist/cjs/{package-29dc73af.js → package-C2pR6Vs2.js} +1 -1
  8. package/dist/cjs/post-accordion_2.cjs.entry.js +183 -0
  9. package/dist/cjs/post-avatar.cjs.entry.js +151 -8
  10. package/dist/cjs/post-back-to-top.cjs.entry.js +86 -9
  11. package/dist/cjs/post-banner.cjs.entry.js +81 -9
  12. package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +62 -8
  13. package/dist/cjs/post-breadcrumbs.cjs.entry.js +119 -7
  14. package/dist/cjs/post-card-control.cjs.entry.js +283 -8
  15. package/dist/cjs/post-closebutton_15.cjs.entry.js +4376 -30
  16. package/dist/cjs/post-collapsible_2.cjs.entry.js +196 -10
  17. package/dist/cjs/post-components.cjs.js +7 -8
  18. package/dist/cjs/post-footer.cjs.entry.js +59 -8
  19. package/dist/cjs/post-linkarea.cjs.entry.js +24 -6
  20. package/dist/cjs/post-popover.cjs.entry.js +151 -8
  21. package/dist/cjs/post-rating.cjs.entry.js +115 -8
  22. package/dist/cjs/post-tab-header.cjs.entry.js +26 -9
  23. package/dist/cjs/post-tab-panel.cjs.entry.js +28 -9
  24. package/dist/cjs/post-tabs.cjs.entry.js +165 -7
  25. package/dist/cjs/post-tag.cjs.entry.js +50 -8
  26. package/dist/cjs/post-tooltip-trigger.cjs.entry.js +5195 -7
  27. package/dist/cjs/post-tooltip.cjs.entry.js +78 -9
  28. package/dist/collection/collection-manifest.json +4 -4
  29. package/dist/collection/components/post-accordion/post-accordion.css +1 -1
  30. package/dist/collection/components/post-accordion/post-accordion.js +39 -23
  31. package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
  32. package/dist/collection/components/post-accordion-item/post-accordion-item.js +26 -12
  33. package/dist/collection/components/post-avatar/post-avatar.js +12 -9
  34. package/dist/collection/components/post-back-to-top/post-back-to-top.js +4 -3
  35. package/dist/collection/components/post-banner/post-banner.js +18 -9
  36. package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +4 -6
  37. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -1
  38. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.js +13 -9
  39. package/dist/collection/components/post-card-control/post-card-control.js +33 -16
  40. package/dist/collection/components/post-collapsible/post-collapsible.js +6 -1
  41. package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +21 -9
  42. package/dist/collection/components/post-footer/post-footer.css +1 -1
  43. package/dist/collection/components/post-footer/post-footer.js +35 -15
  44. package/dist/collection/components/post-header/post-header.css +1 -1
  45. package/dist/collection/components/post-header/post-header.js +28 -16
  46. package/dist/collection/components/post-icon/post-icon.js +66 -54
  47. package/dist/collection/components/post-language-option/post-language-option.css +1 -1
  48. package/dist/collection/components/post-language-option/post-language-option.js +17 -13
  49. package/dist/collection/components/post-language-switch/post-language-switch.css +1 -1
  50. package/dist/collection/components/post-language-switch/post-language-switch.js +43 -24
  51. package/dist/collection/components/post-linkarea/post-linkarea.js +1 -1
  52. package/dist/collection/components/post-list/post-list.js +13 -4
  53. package/dist/collection/components/post-list-item/post-list-item.js +1 -1
  54. package/dist/collection/components/post-logo/post-logo.js +4 -5
  55. package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +1 -1
  56. package/dist/collection/components/post-megadropdown/post-megadropdown.js +12 -6
  57. package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +34 -20
  58. package/dist/collection/components/post-menu/post-menu.css +1 -1
  59. package/dist/collection/components/post-menu/post-menu.js +43 -21
  60. package/dist/collection/components/post-menu-item/post-menu-item.css +1 -0
  61. package/dist/collection/components/post-menu-item/post-menu-item.js +11 -1
  62. package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +9 -5
  63. package/dist/collection/components/post-popover/post-popover.js +20 -6
  64. package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
  65. package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +44 -16
  66. package/dist/collection/components/post-rating/post-rating.js +26 -6
  67. package/dist/collection/components/post-tab-header/post-tab-header.js +4 -6
  68. package/dist/collection/components/post-tab-panel/post-tab-panel.js +4 -6
  69. package/dist/collection/components/post-tabs/post-tabs.js +4 -3
  70. package/dist/collection/components/post-tag/post-tag.js +11 -9
  71. package/dist/collection/components/post-togglebutton/post-togglebutton.js +8 -3
  72. package/dist/collection/components/post-tooltip/post-tooltip.js +25 -7
  73. package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +20 -12
  74. package/dist/collection/index.js +1 -37
  75. package/dist/collection/utils/breakpoints.js +38 -45
  76. package/dist/collection/utils/event-from.js +103 -0
  77. package/dist/collection/utils/index.js +1 -1
  78. package/dist/components/index.js +2315 -37
  79. package/dist/components/p-1KLiMO0w.js +3 -0
  80. package/dist/components/p-8U5GFtQP.js +105 -0
  81. package/dist/components/{post-menu2.js → p-BLhBouGz.js} +51 -30
  82. package/dist/{esm/index-ffccd040.js → components/p-CV7fm1rW.js} +1 -1
  83. package/dist/components/{post-menu-trigger2.js → p-CaPj3whI.js} +14 -12
  84. package/dist/components/{post-breadcrumb-item2.js → p-Cpaqct04.js} +9 -11
  85. package/dist/components/p-CtNCtg2z.js +114 -0
  86. package/dist/components/p-Cx0AiN2A.js +182 -0
  87. package/{loaders/post-collapsible-trigger2.js → dist/components/p-D3LhzIrC.js} +25 -14
  88. package/dist/components/{get-root.js → p-DBHo9yGF.js} +1 -1
  89. package/dist/components/p-DQuPPEca.js +31 -0
  90. package/dist/components/{post-accordion2.js → p-DlEtlaNu.js} +42 -29
  91. package/dist/components/{post-collapsible2.js → p-DphlfQse.js} +11 -8
  92. package/dist/components/{post-popovercontainer2.js → p-elg4VvHg.js} +246 -278
  93. package/{loaders/post-icon2.js → dist/components/p-fmA57Ivd.js} +52 -54
  94. package/dist/components/post-accordion-item.js +1 -1
  95. package/dist/components/post-accordion.js +1 -1
  96. package/dist/components/post-avatar.js +183 -1
  97. package/dist/components/post-back-to-top.js +115 -1
  98. package/dist/components/post-banner.js +120 -1
  99. package/dist/components/post-breadcrumb-item.js +1 -1
  100. package/dist/components/post-breadcrumbs.js +182 -1
  101. package/dist/components/post-card-control.js +322 -1
  102. package/dist/components/post-closebutton.js +37 -1
  103. package/dist/components/post-collapsible-trigger.js +1 -1
  104. package/dist/components/post-collapsible.js +1 -1
  105. package/dist/components/post-footer.js +112 -1
  106. package/dist/components/post-header.js +273 -1
  107. package/dist/components/post-icon.js +1 -1
  108. package/dist/components/post-language-option.js +96 -1
  109. package/dist/components/post-language-switch.js +154 -1
  110. package/dist/components/post-linkarea.js +41 -1
  111. package/dist/components/post-list-item.js +34 -1
  112. package/dist/components/post-list.js +57 -1
  113. package/dist/components/post-logo.js +54 -1
  114. package/dist/components/post-mainnavigation.js +181 -1
  115. package/dist/components/post-megadropdown-trigger.js +132 -1
  116. package/dist/components/post-megadropdown.js +194 -1
  117. package/dist/components/post-menu-item.js +1 -1
  118. package/dist/components/post-menu-trigger.js +1 -1
  119. package/dist/components/post-menu.js +1 -1
  120. package/dist/components/post-popover.js +184 -1
  121. package/dist/components/post-popovercontainer.js +1 -1
  122. package/dist/components/post-rating.js +148 -1
  123. package/dist/components/post-tab-header.js +48 -1
  124. package/dist/components/post-tab-panel.js +50 -1
  125. package/dist/components/post-tabs.js +186 -1
  126. package/dist/components/post-tag.js +82 -1
  127. package/dist/components/post-togglebutton.js +52 -1
  128. package/dist/components/post-tooltip-trigger.js +5218 -1
  129. package/dist/components/post-tooltip.js +110 -1
  130. package/dist/docs.d.ts +8 -0
  131. package/dist/docs.json +426 -118
  132. package/dist/esm/breakpoints-DyVir0ex.js +182 -0
  133. package/dist/esm/event-from-8U5GFtQP.js +105 -0
  134. package/{loaders/get-root.js → dist/esm/get-root-D9QC9-TY.js} +1 -1
  135. package/{loaders/index2.js → dist/esm/index-BWC0gtGU.js} +1 -1
  136. package/dist/esm/{index-f4d19816.js → index-CVhzhVv0.js} +1169 -309
  137. package/dist/esm/index.js +1 -31
  138. package/dist/esm/loader.js +3 -4
  139. package/dist/esm/package-1KLiMO0w.js +3 -0
  140. package/dist/esm/post-accordion_2.entry.js +180 -0
  141. package/dist/esm/post-avatar.entry.js +154 -5
  142. package/dist/esm/post-back-to-top.entry.js +89 -6
  143. package/dist/esm/post-banner.entry.js +85 -7
  144. package/dist/esm/post-breadcrumb-item_2.entry.js +65 -5
  145. package/dist/esm/post-breadcrumbs.entry.js +123 -5
  146. package/dist/esm/post-card-control.entry.js +286 -5
  147. package/dist/esm/post-closebutton_15.entry.js +4362 -10
  148. package/dist/esm/post-collapsible_2.entry.js +199 -7
  149. package/dist/esm/post-components.js +5 -5
  150. package/dist/esm/post-footer.entry.js +62 -5
  151. package/dist/esm/post-linkarea.entry.js +27 -3
  152. package/dist/esm/post-popover.entry.js +155 -6
  153. package/dist/esm/post-rating.entry.js +118 -5
  154. package/dist/esm/post-tab-header.entry.js +29 -6
  155. package/dist/esm/post-tab-panel.entry.js +31 -6
  156. package/dist/esm/post-tabs.entry.js +169 -5
  157. package/dist/esm/post-tag.entry.js +53 -5
  158. package/dist/esm/post-tooltip-trigger.entry.js +5199 -5
  159. package/dist/esm/post-tooltip.entry.js +81 -6
  160. package/dist/post-components/index.esm.js +0 -1
  161. package/dist/post-components/p-0d08ab13.entry.js +1 -0
  162. package/dist/post-components/p-1KLiMO0w.js +1 -0
  163. package/dist/post-components/p-1e006e29.entry.js +1 -0
  164. package/dist/post-components/p-3a5bdb7f.entry.js +1 -0
  165. package/dist/post-components/p-4214b85e.entry.js +1 -0
  166. package/dist/post-components/p-50916d48.entry.js +1 -0
  167. package/dist/post-components/p-5f4126d8.entry.js +1 -0
  168. package/dist/post-components/p-62982420.entry.js +1 -0
  169. package/dist/post-components/p-78f4dd12.entry.js +1 -0
  170. package/dist/post-components/p-7a7d237b.entry.js +1 -0
  171. package/dist/post-components/p-80174475.entry.js +1 -0
  172. package/dist/post-components/p-8U5GFtQP.js +1 -0
  173. package/dist/post-components/p-8d5a4218.entry.js +1 -0
  174. package/dist/post-components/p-8e89ccc1.entry.js +1 -0
  175. package/dist/post-components/p-9003674b.entry.js +1 -0
  176. package/dist/post-components/p-925aee3d.entry.js +1 -0
  177. package/dist/post-components/p-9b446561.entry.js +1 -0
  178. package/dist/post-components/p-9ec29527.entry.js +1 -0
  179. package/dist/post-components/{p-b176309b.js → p-BWC0gtGU.js} +1 -1
  180. package/dist/post-components/{p-6b31a76a.js → p-Bkp2QDth.js} +1 -1
  181. package/dist/post-components/p-CVhzhVv0.js +2 -0
  182. package/dist/post-components/p-DyVir0ex.js +1 -0
  183. package/dist/post-components/p-ec764922.entry.js +1 -0
  184. package/dist/post-components/p-fa550b4a.entry.js +1 -0
  185. package/dist/post-components/p-fb46e260.entry.js +1 -0
  186. package/dist/post-components/post-components.esm.js +1 -1
  187. package/dist/types/components/post-footer/post-footer.d.ts +7 -3
  188. package/dist/types/components/post-header/post-header.d.ts +1 -0
  189. package/dist/types/components/post-icon/post-icon.d.ts +0 -4
  190. package/dist/types/components/post-language-switch/post-language-switch.d.ts +1 -0
  191. package/dist/types/components/post-tag/post-tag.d.ts +1 -1
  192. package/dist/types/components.d.ts +61 -1
  193. package/dist/types/index.d.ts +10 -37
  194. package/dist/types/stencil-public-runtime.d.ts +29 -1
  195. package/dist/types/utils/breakpoints.d.ts +12 -7
  196. package/dist/types/utils/event-from.d.ts +9 -0
  197. package/dist/types/utils/index.d.ts +1 -1
  198. package/hydrate/index.d.ts +273 -0
  199. package/hydrate/index.js +32002 -0
  200. package/hydrate/index.mjs +31994 -0
  201. package/hydrate/package.json +12 -0
  202. package/package.json +45 -17
  203. package/dist/cjs/app-globals-3a1e7e63.js +0 -5
  204. package/dist/cjs/breakpoints-cdf1b747.js +0 -59
  205. package/dist/cjs/event-guard-efabc84f.js +0 -47
  206. package/dist/cjs/heading-levels-608d432e.js +0 -5
  207. package/dist/cjs/post-accordion-c433c493.js +0 -105
  208. package/dist/cjs/post-accordion-item-8d5a301d.js +0 -64
  209. package/dist/cjs/post-accordion-item.cjs.entry.js +0 -16
  210. package/dist/cjs/post-accordion.cjs.entry.js +0 -15
  211. package/dist/cjs/post-avatar-421043df.js +0 -162
  212. package/dist/cjs/post-back-to-top-3cca3803.js +0 -93
  213. package/dist/cjs/post-banner-2e99c9d8.js +0 -87
  214. package/dist/cjs/post-breadcrumbs-1be50860.js +0 -126
  215. package/dist/cjs/post-card-control-0bfdad92.js +0 -290
  216. package/dist/cjs/post-collapsible-trigger-4180b218.js +0 -190
  217. package/dist/cjs/post-footer-92adffac.js +0 -48
  218. package/dist/cjs/post-linkarea-26c457b3.js +0 -30
  219. package/dist/cjs/post-menu-item-d0a53c84.js +0 -68
  220. package/dist/cjs/post-popover-36cead3d.js +0 -150
  221. package/dist/cjs/post-rating-f50a9939.js +0 -109
  222. package/dist/cjs/post-tab-header-f47508da.js +0 -34
  223. package/dist/cjs/post-tab-panel-7c51798b.js +0 -36
  224. package/dist/cjs/post-tabs-2debea01.js +0 -173
  225. package/dist/cjs/post-tag-ac62c57f.js +0 -60
  226. package/dist/cjs/post-togglebutton-43c46511.js +0 -4491
  227. package/dist/cjs/post-tooltip-b7dcfb44.js +0 -74
  228. package/dist/cjs/post-tooltip-trigger-904061b6.js +0 -4685
  229. package/dist/collection/utils/event-guard.js +0 -43
  230. package/dist/components/breakpoints.js +0 -56
  231. package/dist/components/event-guard.js +0 -45
  232. package/dist/components/index2.js +0 -88
  233. package/dist/components/package.js +0 -3
  234. package/dist/components/post-accordion-item2.js +0 -103
  235. package/dist/components/post-avatar2.js +0 -190
  236. package/dist/components/post-back-to-top2.js +0 -118
  237. package/dist/components/post-banner2.js +0 -121
  238. package/dist/components/post-breadcrumbs2.js +0 -184
  239. package/dist/components/post-card-control2.js +0 -325
  240. package/dist/components/post-closebutton2.js +0 -39
  241. package/dist/components/post-collapsible-trigger2.js +0 -125
  242. package/dist/components/post-footer2.js +0 -90
  243. package/dist/components/post-header2.js +0 -397
  244. package/dist/components/post-icon2.js +0 -156
  245. package/dist/components/post-language-option2.js +0 -102
  246. package/dist/components/post-language-switch2.js +0 -143
  247. package/dist/components/post-linkarea2.js +0 -43
  248. package/dist/components/post-list-item2.js +0 -36
  249. package/dist/components/post-list2.js +0 -54
  250. package/dist/components/post-logo2.js +0 -57
  251. package/dist/components/post-mainnavigation2.js +0 -183
  252. package/dist/components/post-megadropdown-trigger2.js +0 -121
  253. package/dist/components/post-megadropdown2.js +0 -190
  254. package/dist/components/post-menu-item2.js +0 -27
  255. package/dist/components/post-popover2.js +0 -178
  256. package/dist/components/post-rating2.js +0 -138
  257. package/dist/components/post-tab-header2.js +0 -52
  258. package/dist/components/post-tab-panel2.js +0 -54
  259. package/dist/components/post-tabs2.js +0 -189
  260. package/dist/components/post-tag2.js +0 -88
  261. package/dist/components/post-togglebutton2.js +0 -51
  262. package/dist/components/post-tooltip-trigger2.js +0 -4703
  263. package/dist/components/post-tooltip2.js +0 -102
  264. package/dist/esm/app-globals-0f993ce5.js +0 -3
  265. package/dist/esm/breakpoints-7812702e.js +0 -56
  266. package/dist/esm/event-guard-538ee077.js +0 -45
  267. package/dist/esm/get-root-1b1af46f.js +0 -15
  268. package/dist/esm/heading-levels-5b7b4349.js +0 -3
  269. package/dist/esm/package-8503eaa8.js +0 -3
  270. package/dist/esm/post-accordion-9365faca.js +0 -103
  271. package/dist/esm/post-accordion-item-2dc8e3b7.js +0 -62
  272. package/dist/esm/post-accordion-item.entry.js +0 -8
  273. package/dist/esm/post-accordion.entry.js +0 -7
  274. package/dist/esm/post-avatar-4f73dc4d.js +0 -160
  275. package/dist/esm/post-back-to-top-8f759d32.js +0 -91
  276. package/dist/esm/post-banner-ad979275.js +0 -85
  277. package/dist/esm/post-breadcrumbs-a20336c7.js +0 -124
  278. package/dist/esm/post-card-control-3c77e778.js +0 -288
  279. package/dist/esm/post-collapsible-trigger-5fd0e193.js +0 -187
  280. package/dist/esm/post-footer-3e117b5a.js +0 -46
  281. package/dist/esm/post-linkarea-16a14609.js +0 -28
  282. package/dist/esm/post-menu-item-b1604fe4.js +0 -65
  283. package/dist/esm/post-popover-49096648.js +0 -148
  284. package/dist/esm/post-rating-405bee8f.js +0 -107
  285. package/dist/esm/post-tab-header-b228c217.js +0 -32
  286. package/dist/esm/post-tab-panel-98110b64.js +0 -34
  287. package/dist/esm/post-tabs-44d9313c.js +0 -171
  288. package/dist/esm/post-tag-99cc9616.js +0 -58
  289. package/dist/esm/post-togglebutton-ea73e63f.js +0 -4475
  290. package/dist/esm/post-tooltip-78cd2988.js +0 -72
  291. package/dist/esm/post-tooltip-trigger-bdb21c45.js +0 -4683
  292. package/dist/post-components/p-0889c759.js +0 -1
  293. package/dist/post-components/p-09dd5aa4.js +0 -1
  294. package/dist/post-components/p-0f9322e5.js +0 -8
  295. package/dist/post-components/p-11572299.js +0 -1
  296. package/dist/post-components/p-19a83519.entry.js +0 -1
  297. package/dist/post-components/p-1afb3c43.entry.js +0 -1
  298. package/dist/post-components/p-214cd032.js +0 -1
  299. package/dist/post-components/p-21e5b028.js +0 -1
  300. package/dist/post-components/p-2320305b.js +0 -1
  301. package/dist/post-components/p-247a1668.js +0 -1
  302. package/dist/post-components/p-2523f97b.entry.js +0 -1
  303. package/dist/post-components/p-2bd3a436.js +0 -1
  304. package/dist/post-components/p-2ce8fbf5.js +0 -1
  305. package/dist/post-components/p-2f879f4e.entry.js +0 -1
  306. package/dist/post-components/p-33e26845.entry.js +0 -1
  307. package/dist/post-components/p-38b1c71e.entry.js +0 -1
  308. package/dist/post-components/p-38d59732.js +0 -1
  309. package/dist/post-components/p-3a67f1ff.js +0 -1
  310. package/dist/post-components/p-41450b6c.entry.js +0 -1
  311. package/dist/post-components/p-4c23ed05.entry.js +0 -1
  312. package/dist/post-components/p-57746c40.js +0 -1
  313. package/dist/post-components/p-6313d72e.entry.js +0 -1
  314. package/dist/post-components/p-64e0b0fc.js +0 -1
  315. package/dist/post-components/p-658a2e34.entry.js +0 -1
  316. package/dist/post-components/p-722ffaae.js +0 -1
  317. package/dist/post-components/p-746d3cd3.entry.js +0 -1
  318. package/dist/post-components/p-79a2dad0.entry.js +0 -1
  319. package/dist/post-components/p-7dd1807c.js +0 -1
  320. package/dist/post-components/p-817fbeaf.js +0 -1
  321. package/dist/post-components/p-85950200.js +0 -1
  322. package/dist/post-components/p-8ebecf22.entry.js +0 -1
  323. package/dist/post-components/p-8ed1cb53.entry.js +0 -1
  324. package/dist/post-components/p-91244b25.js +0 -1
  325. package/dist/post-components/p-91675004.js +0 -1
  326. package/dist/post-components/p-94ebc430.js +0 -1
  327. package/dist/post-components/p-95727a4f.entry.js +0 -1
  328. package/dist/post-components/p-9e461613.js +0 -2
  329. package/dist/post-components/p-a844da3a.entry.js +0 -1
  330. package/dist/post-components/p-af900651.js +0 -1
  331. package/dist/post-components/p-b373659e.entry.js +0 -1
  332. package/dist/post-components/p-b500b245.js +0 -1
  333. package/dist/post-components/p-bf182745.entry.js +0 -1
  334. package/dist/post-components/p-c9b6f9e7.entry.js +0 -1
  335. package/dist/post-components/p-cb7d8f67.entry.js +0 -1
  336. package/dist/post-components/p-e1255160.js +0 -1
  337. package/dist/post-components/p-e28eb73a.js +0 -1
  338. package/dist/types/popover-fn.d.ts +0 -11
  339. package/dist/types/utils/event-guard.d.ts +0 -4
  340. package/loader/package.json +0 -11
  341. package/loaders/breakpoints.js +0 -56
  342. package/loaders/event-guard.js +0 -45
  343. package/loaders/fade.js +0 -11
  344. package/loaders/get-focusable-children.js +0 -35
  345. package/loaders/heading-levels.js +0 -3
  346. package/loaders/index.browser.js +0 -14
  347. package/loaders/index.d.ts +0 -108
  348. package/loaders/index.js +0 -39
  349. package/loaders/long-press-event.js +0 -264
  350. package/loaders/package.js +0 -3
  351. package/loaders/post-accordion-item.d.ts +0 -11
  352. package/loaders/post-accordion-item.js +0 -6
  353. package/loaders/post-accordion-item2.js +0 -103
  354. package/loaders/post-accordion.d.ts +0 -11
  355. package/loaders/post-accordion.js +0 -129
  356. package/loaders/post-avatar.d.ts +0 -11
  357. package/loaders/post-avatar.js +0 -193
  358. package/loaders/post-back-to-top.d.ts +0 -11
  359. package/loaders/post-back-to-top.js +0 -121
  360. package/loaders/post-banner.d.ts +0 -11
  361. package/loaders/post-banner.js +0 -124
  362. package/loaders/post-breadcrumb-item.d.ts +0 -11
  363. package/loaders/post-breadcrumb-item.js +0 -6
  364. package/loaders/post-breadcrumb-item2.js +0 -82
  365. package/loaders/post-breadcrumbs.d.ts +0 -11
  366. package/loaders/post-breadcrumbs.js +0 -187
  367. package/loaders/post-card-control.d.ts +0 -11
  368. package/loaders/post-card-control.js +0 -328
  369. package/loaders/post-closebutton.d.ts +0 -11
  370. package/loaders/post-closebutton.js +0 -42
  371. package/loaders/post-collapsible-trigger.d.ts +0 -11
  372. package/loaders/post-collapsible-trigger.js +0 -6
  373. package/loaders/post-collapsible.d.ts +0 -11
  374. package/loaders/post-collapsible.js +0 -6
  375. package/loaders/post-collapsible2.js +0 -108
  376. package/loaders/post-footer.d.ts +0 -11
  377. package/loaders/post-footer.js +0 -93
  378. package/loaders/post-header.d.ts +0 -11
  379. package/loaders/post-header.js +0 -400
  380. package/loaders/post-icon.d.ts +0 -11
  381. package/loaders/post-icon.js +0 -6
  382. package/loaders/post-language-option.d.ts +0 -11
  383. package/loaders/post-language-option.js +0 -105
  384. package/loaders/post-language-switch.d.ts +0 -11
  385. package/loaders/post-language-switch.js +0 -146
  386. package/loaders/post-linkarea.d.ts +0 -11
  387. package/loaders/post-linkarea.js +0 -46
  388. package/loaders/post-list-item.d.ts +0 -11
  389. package/loaders/post-list-item.js +0 -39
  390. package/loaders/post-list.d.ts +0 -11
  391. package/loaders/post-list.js +0 -57
  392. package/loaders/post-logo.d.ts +0 -11
  393. package/loaders/post-logo.js +0 -60
  394. package/loaders/post-mainnavigation.d.ts +0 -11
  395. package/loaders/post-mainnavigation.js +0 -186
  396. package/loaders/post-megadropdown-trigger.d.ts +0 -11
  397. package/loaders/post-megadropdown-trigger.js +0 -124
  398. package/loaders/post-megadropdown.d.ts +0 -11
  399. package/loaders/post-megadropdown.js +0 -193
  400. package/loaders/post-menu-item.d.ts +0 -11
  401. package/loaders/post-menu-item.js +0 -6
  402. package/loaders/post-menu-item2.js +0 -27
  403. package/loaders/post-menu-trigger.d.ts +0 -11
  404. package/loaders/post-menu-trigger.js +0 -6
  405. package/loaders/post-menu-trigger2.js +0 -109
  406. package/loaders/post-menu.d.ts +0 -11
  407. package/loaders/post-menu.js +0 -6
  408. package/loaders/post-menu2.js +0 -202
  409. package/loaders/post-popover.d.ts +0 -11
  410. package/loaders/post-popover.js +0 -181
  411. package/loaders/post-popovercontainer.d.ts +0 -11
  412. package/loaders/post-popovercontainer.js +0 -6
  413. package/loaders/post-popovercontainer2.js +0 -3051
  414. package/loaders/post-rating.d.ts +0 -11
  415. package/loaders/post-rating.js +0 -141
  416. package/loaders/post-tab-header.d.ts +0 -11
  417. package/loaders/post-tab-header.js +0 -55
  418. package/loaders/post-tab-panel.d.ts +0 -11
  419. package/loaders/post-tab-panel.js +0 -57
  420. package/loaders/post-tabs.d.ts +0 -11
  421. package/loaders/post-tabs.js +0 -192
  422. package/loaders/post-tag.d.ts +0 -11
  423. package/loaders/post-tag.js +0 -91
  424. package/loaders/post-togglebutton.d.ts +0 -11
  425. package/loaders/post-togglebutton.js +0 -54
  426. package/loaders/post-tooltip-trigger.d.ts +0 -11
  427. package/loaders/post-tooltip-trigger.js +0 -4706
  428. package/loaders/post-tooltip.d.ts +0 -11
  429. package/loaders/post-tooltip.js +0 -105
  430. package/loaders/slide.js +0 -25
  431. package/loaders/switch-variants.js +0 -3
  432. /package/dist/cjs/{fade-72d5ef55.js → fade-nS5zzDQS.js} +0 -0
  433. /package/dist/cjs/{index-2b2b85e5.js → index-DtvYdwe1.js} +0 -0
  434. /package/dist/cjs/{index.browser-4af21c17.js → index.browser-Doj636JV.js} +0 -0
  435. /package/dist/cjs/{long-press-event-6e62d113.js → long-press-event-Q8jMUNXD.js} +0 -0
  436. /package/dist/cjs/{placement-b2bb6ec4.js → placement-qEFR9hmI.js} +0 -0
  437. /package/dist/cjs/{slide-cd1f09b3.js → slide-CbBL7A8w.js} +0 -0
  438. /package/dist/components/{index.browser.js → p-BLchVpF6.js} +0 -0
  439. /package/dist/components/{slide.js → p-BuLMaH5t.js} +0 -0
  440. /package/dist/components/{get-focusable-children.js → p-C35MCWIp.js} +0 -0
  441. /package/dist/components/{long-press-event.js → p-C_2k3G1c.js} +0 -0
  442. /package/dist/components/{switch-variants.js → p-DjIHLduJ.js} +0 -0
  443. /package/dist/components/{fade.js → p-SbIC4aZX.js} +0 -0
  444. /package/dist/components/{heading-levels.js → p-r4txK0AC.js} +0 -0
  445. /package/dist/esm/{fade-1f3cacf4.js → fade-SbIC4aZX.js} +0 -0
  446. /package/dist/esm/{index.browser-ff103197.js → index.browser-BLchVpF6.js} +0 -0
  447. /package/dist/esm/{long-press-event-04d24397.js → long-press-event-C_2k3G1c.js} +0 -0
  448. /package/dist/esm/{placement-8d56605d.js → placement-DRiVosES.js} +0 -0
  449. /package/dist/esm/{slide-cd2850ee.js → slide-BuLMaH5t.js} +0 -0
  450. /package/dist/post-components/{p-c65f32b0.js → p-BLchVpF6.js} +0 -0
  451. /package/dist/post-components/{p-9b052461.js → p-BuLMaH5t.js} +0 -0
  452. /package/dist/post-components/{p-8db32dab.js → p-C_2k3G1c.js} +0 -0
  453. /package/dist/post-components/{p-59a38c23.js → p-DRiVosES.js} +0 -0
  454. /package/dist/post-components/{p-64e3de38.js → p-SbIC4aZX.js} +0 -0
@@ -1,4491 +0,0 @@
1
- 'use strict';
2
-
3
- const index = require('./index-b60129c4.js');
4
- const _package = require('./package-29dc73af.js');
5
- const breakpoints = require('./breakpoints-cdf1b747.js');
6
- const slide = require('./slide-cd1f09b3.js');
7
- const eventGuard = require('./event-guard-efabc84f.js');
8
- const index$1 = require('./index-2b2b85e5.js');
9
- const index_browser = require('./index.browser-4af21c17.js');
10
- const placement = require('./placement-b2bb6ec4.js');
11
- const getRoot = require('./get-root-8102fecd.js');
12
-
13
- const focusableSelector = `:where(${[
14
- 'button',
15
- 'input:not([type="hidden"])',
16
- '[tabindex]',
17
- 'select',
18
- 'textarea',
19
- '[contenteditable]',
20
- 'a[href]',
21
- 'iframe',
22
- 'audio[controls]',
23
- 'video[controls]',
24
- 'area[href]',
25
- 'details > summary:first-of-type',
26
- ].join(',')})`;
27
- const focusDisablingSelector = `:where(${[
28
- '[inert]',
29
- '[inert] *',
30
- ':disabled',
31
- 'dialog:not([open]) *',
32
- '[popover]:not(:popover-open) *',
33
- 'details:not([open]) > *:not(details > summary:first-of-type)',
34
- 'details:not([open]) > *:not(details > summary:first-of-type) *',
35
- '[tabindex^="-"]',
36
- '[hidden]:not([hidden="false"])',
37
- ].join(',')})`;
38
- function getFocusableChildren(element) {
39
- const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
40
- const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
41
- const style = window.getComputedStyle(child.parentElement);
42
- return style.display !== 'none' && style.visibility !== 'hidden';
43
- });
44
- return visibleFocusableChildren;
45
- }
46
-
47
- const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
48
- const PostClosebuttonStyle0 = postClosebuttonCss;
49
-
50
- const PostClosebutton = class {
51
- constructor(hostRef) {
52
- index.registerInstance(this, hostRef);
53
- }
54
- render() {
55
- return (index.h(index.Host, { key: '7b5e179b42eefd1823b2b2ef7ee17c94bd9f0ddd', "data-version": _package.version }, index.h("button", { key: '471e68d1ddcfe741f5450d002b2daa86cec0f986', class: "btn btn-icon-close", type: "button" }, index.h("post-icon", { key: '928fa7460988cffa269a29506e68e056f84bcef8', "aria-hidden": "true", name: "closex" }), index.h("span", { key: 'c1501f4a8b7d8d95be7d02576b10143b9e6b0654', class: "visually-hidden" }, index.h("slot", { key: 'a9f1ab8db57486d420db0981090ad2ba5183c289' })))));
56
- }
57
- get host() { return index.getElement(this); }
58
- };
59
- PostClosebutton.style = PostClosebuttonStyle0;
60
-
61
- /* eslint-disable no-undefined,no-param-reassign,no-shadow */
62
-
63
- /**
64
- * Throttle execution of a function. Especially useful for rate limiting
65
- * execution of handlers on events like resize and scroll.
66
- *
67
- * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
68
- * are most useful.
69
- * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
70
- * as-is, to `callback` when the throttled-function is executed.
71
- * @param {object} [options] - An object to configure options.
72
- * @param {boolean} [options.noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
73
- * while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
74
- * one final time after the last throttled-function call. (After the throttled-function has not been called for
75
- * `delay` milliseconds, the internal counter is reset).
76
- * @param {boolean} [options.noLeading] - Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
77
- * immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
78
- * callback will never executed if both noLeading = true and noTrailing = true.
79
- * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
80
- * false (at end), schedule `callback` to execute after `delay` ms.
81
- *
82
- * @returns {Function} A new, throttled, function.
83
- */
84
- function throttle (delay, callback, options) {
85
- var _ref = options || {},
86
- _ref$noTrailing = _ref.noTrailing,
87
- noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
88
- _ref$noLeading = _ref.noLeading,
89
- noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
90
- _ref$debounceMode = _ref.debounceMode,
91
- debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
92
- /*
93
- * After wrapper has stopped being called, this timeout ensures that
94
- * `callback` is executed at the proper times in `throttle` and `end`
95
- * debounce modes.
96
- */
97
- var timeoutID;
98
- var cancelled = false;
99
-
100
- // Keep track of the last time `callback` was executed.
101
- var lastExec = 0;
102
-
103
- // Function to clear existing timeout
104
- function clearExistingTimeout() {
105
- if (timeoutID) {
106
- clearTimeout(timeoutID);
107
- }
108
- }
109
-
110
- // Function to cancel next exec
111
- function cancel(options) {
112
- var _ref2 = options || {},
113
- _ref2$upcomingOnly = _ref2.upcomingOnly,
114
- upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
115
- clearExistingTimeout();
116
- cancelled = !upcomingOnly;
117
- }
118
-
119
- /*
120
- * The `wrapper` function encapsulates all of the throttling / debouncing
121
- * functionality and when executed will limit the rate at which `callback`
122
- * is executed.
123
- */
124
- function wrapper() {
125
- for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
126
- arguments_[_key] = arguments[_key];
127
- }
128
- var self = this;
129
- var elapsed = Date.now() - lastExec;
130
- if (cancelled) {
131
- return;
132
- }
133
-
134
- // Execute `callback` and update the `lastExec` timestamp.
135
- function exec() {
136
- lastExec = Date.now();
137
- callback.apply(self, arguments_);
138
- }
139
-
140
- /*
141
- * If `debounceMode` is true (at begin) this is used to clear the flag
142
- * to allow future `callback` executions.
143
- */
144
- function clear() {
145
- timeoutID = undefined;
146
- }
147
- if (!noLeading && debounceMode && !timeoutID) {
148
- /*
149
- * Since `wrapper` is being called for the first time and
150
- * `debounceMode` is true (at begin), execute `callback`
151
- * and noLeading != true.
152
- */
153
- exec();
154
- }
155
- clearExistingTimeout();
156
- if (debounceMode === undefined && elapsed > delay) {
157
- if (noLeading) {
158
- /*
159
- * In throttle mode with noLeading, if `delay` time has
160
- * been exceeded, update `lastExec` and schedule `callback`
161
- * to execute after `delay` ms.
162
- */
163
- lastExec = Date.now();
164
- if (!noTrailing) {
165
- timeoutID = setTimeout(debounceMode ? clear : exec, delay);
166
- }
167
- } else {
168
- /*
169
- * In throttle mode without noLeading, if `delay` time has been exceeded, execute
170
- * `callback`.
171
- */
172
- exec();
173
- }
174
- } else if (noTrailing !== true) {
175
- /*
176
- * In trailing throttle mode, since `delay` time has not been
177
- * exceeded, schedule `callback` to execute `delay` ms after most
178
- * recent execution.
179
- *
180
- * If `debounceMode` is true (at begin), schedule `clear` to execute
181
- * after `delay` ms.
182
- *
183
- * If `debounceMode` is false (at end), schedule `callback` to
184
- * execute after `delay` ms.
185
- */
186
- timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
187
- }
188
- }
189
- wrapper.cancel = cancel;
190
-
191
- // Return the wrapper function.
192
- return wrapper;
193
- }
194
-
195
- const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-height);--post-logo-height:var(--post-global-header-height);--post-global-controls-top:0}@media screen and (max-width: 1023.98px){:host{position:fixed;inset:0;bottom:auto}}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0;position:relative}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;position:relative;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
196
- const PostHeaderStyle0 = postHeaderCss;
197
-
198
- const PostHeader = class {
199
- get scrollParent() {
200
- const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
201
- if (frozenScrollParent)
202
- return frozenScrollParent;
203
- let element = this.host.parentElement;
204
- while (element) {
205
- const overflow = getComputedStyle(element).overflowY;
206
- if (['auto', 'scroll'].includes(overflow)) {
207
- return element;
208
- }
209
- element = element.parentElement;
210
- }
211
- return document.body;
212
- }
213
- lockBody(newValue, _oldValue, propName) {
214
- const scrollParent = this.scrollParent;
215
- const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
216
- if (this.device !== 'desktop' && mobileMenuExtended) {
217
- scrollParent.setAttribute('data-post-scroll-locked', '');
218
- this.host.addEventListener('keydown', this.keyboardHandler);
219
- }
220
- else {
221
- scrollParent.removeAttribute('data-post-scroll-locked');
222
- this.host.removeEventListener('keydown', this.keyboardHandler);
223
- }
224
- }
225
- constructor(hostRef) {
226
- index.registerInstance(this, hostRef);
227
- this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
228
- this.breakpointChange = (e) => {
229
- this.device = e.detail;
230
- this.switchLanguageSwitchMode();
231
- if (this.device === 'desktop' && this.mobileMenuExtended) {
232
- this.closeMobileMenu();
233
- }
234
- };
235
- this.megadropdownStateHandler = (event) => {
236
- eventGuard.eventGuard(this.host, event, {
237
- targetLocalName: 'post-megadropdown',
238
- delegatorSelector: 'post-header',
239
- }, () => {
240
- this.megadropdownOpen = event.detail.isVisible;
241
- });
242
- };
243
- this.device = breakpoints.breakpoint.get('name');
244
- this.mobileMenuExtended = false;
245
- this.megadropdownOpen = false;
246
- this.handleScrollEvent = this.handleScrollEvent.bind(this);
247
- this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
248
- this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
249
- this.keyboardHandler = this.keyboardHandler.bind(this);
250
- this.handleLinkClick = this.handleLinkClick.bind(this);
251
- }
252
- connectedCallback() {
253
- window.addEventListener('resize', this.throttledResize, { passive: true });
254
- window.addEventListener('scroll', this.handleScrollEvent, {
255
- passive: true,
256
- });
257
- this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
258
- passive: true,
259
- });
260
- document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
261
- this.host.addEventListener('click', this.handleLinkClick);
262
- window.addEventListener('postBreakpoint:name', this.breakpointChange);
263
- this.switchLanguageSwitchMode();
264
- this.updateLocalHeaderHeight();
265
- this.handleScrollParentResize();
266
- this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
267
- }
268
- componentWillRender() {
269
- this.handleScrollEvent();
270
- }
271
- componentDidRender() {
272
- this.getFocusableElements();
273
- this.handleLocalHeaderResize();
274
- }
275
- // Clean up possible side effects when post-header is disconnected
276
- disconnectedCallback() {
277
- const scrollParent = this.scrollParent;
278
- window.removeEventListener('postBreakpoint:name', this.breakpointChange);
279
- window.removeEventListener('resize', this.throttledResize);
280
- window.removeEventListener('scroll', this.handleScrollEvent);
281
- scrollParent.removeEventListener('scroll', this.handleScrollEvent);
282
- document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
283
- this.host.removeEventListener('keydown', this.keyboardHandler);
284
- this.host.removeEventListener('click', this.handleLinkClick);
285
- if (this.scrollParentResizeObserver) {
286
- this.scrollParentResizeObserver.disconnect();
287
- this.scrollParentResizeObserver = null;
288
- }
289
- if (this.localHeaderResizeObserver) {
290
- this.localHeaderResizeObserver.disconnect();
291
- this.localHeaderResizeObserver = null;
292
- }
293
- this.mobileMenuExtended = false;
294
- }
295
- async closeMobileMenu() {
296
- this.mobileMenuAnimation.finish();
297
- const menuButton = this.getMenuButton();
298
- if (menuButton) {
299
- menuButton.toggled = false;
300
- }
301
- this.mobileMenuExtended = false;
302
- }
303
- /**
304
- * Toggles the mobile navigation.
305
- */
306
- async toggleMobileMenu(force) {
307
- if (this.device === 'desktop')
308
- return;
309
- this.mobileMenuAnimation = this.mobileMenuExtended
310
- ? slide.slideUp(this.mobileMenu)
311
- : slide.slideDown(this.mobileMenu);
312
- // Update the state of the toggle button
313
- const menuButton = this.host.querySelector('post-togglebutton');
314
- menuButton.toggled = force ?? !this.mobileMenuExtended;
315
- // Toggle menu visibility before it slides down and after it slides back up
316
- if (this.mobileMenuExtended)
317
- await this.mobileMenuAnimation.finished;
318
- this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
319
- if (this.mobileMenuExtended === false) {
320
- Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
321
- dropdown.hide(false, true);
322
- });
323
- }
324
- }
325
- // Get all the focusable elements in the post-header mobile menu
326
- getFocusableElements() {
327
- // Get elements in the correct order (different as the DOM order)
328
- const focusableEls = [
329
- ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
330
- ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-mainnavigation > .back-button, post-megadropdown-trigger')),
331
- ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
332
- ];
333
- // Add the main toggle menu button to the list of focusable children
334
- const focusableChildren = [
335
- this.host.querySelector('post-togglebutton'),
336
- ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
337
- ];
338
- this.firstFocusableEl = focusableChildren[0];
339
- this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
340
- }
341
- getMenuButton() {
342
- return this.host.querySelector('post-togglebutton');
343
- }
344
- keyboardHandler(e) {
345
- if (e.key === 'Tab' && this.mobileMenuExtended) {
346
- if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
347
- // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
348
- e.preventDefault();
349
- this.lastFocusableEl.focus();
350
- }
351
- else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
352
- // If Tab and last element is focused, focus goes back to the first element of the megadropdown
353
- e.preventDefault();
354
- this.firstFocusableEl.focus();
355
- }
356
- }
357
- }
358
- handleScrollEvent() {
359
- const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
360
- document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
361
- }
362
- updateLocalHeaderHeight() {
363
- const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
364
- document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}px`);
365
- }
366
- updateScrollParentHeight() {
367
- this.host.style.setProperty('--post-header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
368
- }
369
- handleLinkClick(event) {
370
- const target = event.target;
371
- const isLinkInMainNav = target.closest('post-mainnavigation a');
372
- const isLinkInMegadropdown = target.closest('post-megadropdown a');
373
- if (!isLinkInMainNav && !isLinkInMegadropdown) {
374
- return;
375
- }
376
- if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
377
- this.toggleMobileMenu(false);
378
- }
379
- if (this.device === 'desktop' && isLinkInMegadropdown) {
380
- const megadropdownLink = target.closest('post-megadropdown a');
381
- if (megadropdownLink) {
382
- target.closest('post-megadropdown').hide(true);
383
- }
384
- }
385
- }
386
- handleScrollParentResize() {
387
- if (this.scrollParent) {
388
- this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
389
- this.scrollParentResizeObserver.observe(this.scrollParent);
390
- }
391
- }
392
- handleLocalHeaderResize() {
393
- const localHeader = this.host.shadowRoot.querySelector('.local-header');
394
- if (localHeader && !this.localHeaderResizeObserver) {
395
- this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
396
- this.localHeaderResizeObserver.observe(localHeader);
397
- }
398
- }
399
- switchLanguageSwitchMode() {
400
- const variant = this.device === 'desktop' ? 'menu' : 'list';
401
- Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
402
- languageSwitch?.setAttribute('variant', variant);
403
- });
404
- }
405
- renderNavigation() {
406
- const navigationClasses = ['navigation'];
407
- const mobileMenuScrollTop = this.mobileMenu?.scrollTop ?? 0;
408
- if (this.mobileMenuExtended) {
409
- navigationClasses.push('extended');
410
- }
411
- if (this.megadropdownOpen) {
412
- navigationClasses.push('megadropdown-open');
413
- }
414
- return (index.h("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, index.h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, index.h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("div", { class: "navigation-footer" }, index.h("slot", { name: "meta-navigation" }), index.h("slot", { name: "post-language-switch" }))))));
415
- }
416
- render() {
417
- return (index.h(index.Host, { key: 'f48a0da1abf27c8e9ebaf069f56b12b9705ae8ba', "data-version": _package.version }, index.h("div", { key: 'f427fe866ae03d01882f983953e316db8ce61b3f', class: "global-header" }, index.h("div", { key: '1681be355fa453dfe8c7f4e73d74dd52a7dc847c', class: "global-sub" }, index.h("div", { key: '985ee91b791c24947564ac8af001d7a1b3ef04cc', class: "logo" }, index.h("slot", { key: 'e961d5ad800836001ba735ab482e05fe722867ee', name: "post-logo" }))), index.h("div", { key: '353c38aa0dffa907d1dd55c889454ae373ab656b', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '6c1d0b4b518bd35021cf45eceb764975a1f51248', name: "meta-navigation" }), index.h("slot", { key: 'b814a775d1f12ec1e49e720733e90718ee0d64d3', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: 'dda35455f620e178e141aca1ea103e62fe8e7fee', name: "post-language-switch" }), index.h("div", { key: '3c5dfdc7168af7f659b6b9ef62ba01451b257282', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '5b90487f039ac8fe5d8fe7c20ca2851e2c2abc45', name: "post-togglebutton" })))), index.h("div", { key: '7efcbd5e59afafd9fc3fbbe55961bc694c3eeb88', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, index.h("slot", { key: '128925f3547041b2f6890ad9dde7e0c598dbcc22', name: "title" }), index.h("div", { key: 'eaa2bb08500efd23e1593dee585fe7d743986d5d', class: "local-sub" }, index.h("slot", { key: 'ddf6eed8f5303976464899c31c7cb8aa378acd37', name: "local-controls" }), index.h("slot", { key: 'f64f7ba2b47c267c3a52b356a48bd990b4da42d7' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
418
- }
419
- get host() { return index.getElement(this); }
420
- static get watchers() { return {
421
- "device": ["lockBody"],
422
- "mobileMenuExtended": ["lockBody"]
423
- }; }
424
- };
425
- PostHeader.style = PostHeaderStyle0;
426
-
427
- const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
428
- const PostIconStyle0 = postIconCss;
429
-
430
- const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${_package.version}/public/post-icons/`;
431
- const ANIMATION_NAMES = [
432
- 'cylon',
433
- 'cylon-vertical',
434
- 'spin',
435
- 'spin-reverse',
436
- 'fade',
437
- 'throb',
438
- ];
439
- const ANIMATION_KEYS = [...ANIMATION_NAMES];
440
- const PostIcon = class {
441
- constructor(hostRef) {
442
- index.registerInstance(this, hostRef);
443
- this.animation = undefined;
444
- this.base = undefined;
445
- this.flipH = false;
446
- this.flipV = false;
447
- this.name = undefined;
448
- this.rotate = undefined;
449
- this.scale = undefined;
450
- }
451
- validateAnimation() {
452
- index$1.checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
453
- }
454
- validateBase() {
455
- index$1.checkEmptyOrType(this, 'base', 'string');
456
- }
457
- validateName() {
458
- index$1.checkRequiredAndType(this, 'name', 'string');
459
- }
460
- validateRotate() {
461
- index$1.checkEmptyOrType(this, 'rotate', 'number');
462
- }
463
- validateScale() {
464
- index$1.checkEmptyOrType(this, 'scale', 'number');
465
- }
466
- // Construct the icon url from different possible sources
467
- getUrl() {
468
- let url;
469
- const file = `${this.name}.svg`;
470
- // the first definition object which defines a domain, will be used to set the domain of the file url
471
- // the first definition object which defines a slug, will be used to set the slug of the file url
472
- const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
473
- if (breakpoints.IS_BROWSER) {
474
- urlDefinitions.push(this.getUrlDefinition(document.head
475
- .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
476
- ?.getAttribute('data-post-icon-base'), 'relative'));
477
- urlDefinitions.push(this.getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'));
478
- }
479
- // in case no definition defines a domain, a relative url is used to load the icon
480
- const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin;
481
- // in case no definition defines a slug either, the cdn url is used as a fallback
482
- const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
483
- if (origin && slug) {
484
- url = `${origin}${slug}${file}`;
485
- }
486
- else if (!origin && slug) {
487
- url = `${slug}${file}`;
488
- }
489
- else {
490
- url = `${CDN_URL}${file}`;
491
- }
492
- return url;
493
- }
494
- getUrlDefinition(url, allow) {
495
- return {
496
- url: this.getUrlObject(url),
497
- definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
498
- definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
499
- };
500
- }
501
- getUrlObject(url) {
502
- if (url) {
503
- url = url?.endsWith('/') ? url : `${url}/`;
504
- return new URL(url, 'https://url.base');
505
- }
506
- else {
507
- return null;
508
- }
509
- }
510
- definesDomain(url) {
511
- return url ? /^https?:\/\//.test(url) : false;
512
- }
513
- definesSlug(url) {
514
- return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
515
- }
516
- getStyles() {
517
- const url = this.getUrl();
518
- return Object.entries({
519
- '-webkit-mask-image': `url(${url})`,
520
- 'mask-image': `url('${url}')`,
521
- 'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
522
- (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
523
- })
524
- .filter(([_key, value]) => value !== null)
525
- .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
526
- }
527
- componentDidLoad() {
528
- this.validateBase();
529
- this.validateName();
530
- this.validateScale();
531
- this.validateRotate();
532
- this.validateAnimation();
533
- }
534
- render() {
535
- return (index.h(index.Host, { key: 'bc29680e4693c5a18416de667c826c1d57075e15', "data-version": _package.version }, index.h("span", { key: 'b49082668fa3a97bba5a2ffe791c51e9c56deb4e', style: this.getStyles() })));
536
- }
537
- get host() { return index.getElement(this); }
538
- static get watchers() { return {
539
- "animation": ["validateAnimation"],
540
- "base": ["validateBase"],
541
- "name": ["validateName"],
542
- "rotate": ["validateRotate"],
543
- "scale": ["validateScale"]
544
- }; }
545
- };
546
- PostIcon.style = PostIconStyle0;
547
-
548
- const SWITCH_VARIANTS = ['list', 'menu'];
549
-
550
- const postLanguageOptionCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option a{color:var(--post-scheme-color-surface-default-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:2px;text-transform:uppercase}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}";
551
- const PostLanguageOptionStyle0 = postLanguageOptionCss;
552
-
553
- const PostLanguageOption = class {
554
- constructor(hostRef) {
555
- index.registerInstance(this, hostRef);
556
- this.postChange = index.createEvent(this, "postChange", 7);
557
- this.postLanguageOptionInitiallyActive = index.createEvent(this, "postLanguageOptionInitiallyActive", 7);
558
- this.code = undefined;
559
- this.active = undefined;
560
- this.variant = undefined;
561
- this.name = undefined;
562
- this.url = undefined;
563
- }
564
- validateCode() {
565
- index$1.checkRequiredAndType(this, 'code', 'string');
566
- }
567
- validateVariant() {
568
- index$1.checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
569
- }
570
- validateName() {
571
- index$1.checkEmptyOrType(this, 'name', 'string');
572
- }
573
- validateUrl() {
574
- index$1.checkEmptyOrUrl(this, 'url');
575
- }
576
- componentDidLoad() {
577
- this.validateCode();
578
- this.validateName();
579
- this.validateUrl();
580
- if (!this.name && this.isNameRequired()) {
581
- throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
582
- }
583
- if (this.active) {
584
- this.postLanguageOptionInitiallyActive.emit(this.code);
585
- }
586
- }
587
- /**
588
- * Selects the language option programmatically.
589
- */
590
- async select() {
591
- this.active = true;
592
- this.emitChange();
593
- }
594
- emitChange() {
595
- this.postChange.emit(this.code);
596
- }
597
- isNameRequired() {
598
- return this.host.textContent.toLowerCase() === this.code.toLowerCase();
599
- }
600
- render() {
601
- const lang = this.code.toLowerCase();
602
- const emitOnKeyDown = (e) => {
603
- if (e.key === 'Enter' || e.key === ' ') {
604
- this.emitChange();
605
- }
606
- };
607
- return (index.h(index.Host, { key: '71cc893d3f8a09813ada641c8d4511e5d55df593', "data-version": _package.version }, this.url ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null)))));
608
- }
609
- get host() { return index.getElement(this); }
610
- static get watchers() { return {
611
- "code": ["validateCode"],
612
- "variant": ["validateVariant"],
613
- "name": ["validateName"],
614
- "url": ["validateUrl"]
615
- }; }
616
- };
617
- PostLanguageOption.style = PostLanguageOptionStyle0;
618
-
619
- const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}";
620
- const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
621
-
622
- const PostLanguageSwitch = class {
623
- constructor(hostRef) {
624
- index.registerInstance(this, hostRef);
625
- this.menuId = `p${index_browser.nanoid(11)}`;
626
- this.caption = undefined;
627
- this.description = undefined;
628
- this.variant = 'list';
629
- this.activeLang = undefined;
630
- }
631
- get languageOptions() {
632
- return Array.from(this.host.querySelectorAll('post-language-option'));
633
- }
634
- validateCaption() {
635
- index$1.checkRequiredAndType(this, 'caption', 'string');
636
- }
637
- validateDescription() {
638
- index$1.checkRequiredAndType(this, 'description', 'string');
639
- }
640
- validateVariant() {
641
- index$1.checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
642
- this.updateChildrenVariant();
643
- }
644
- componentDidLoad() {
645
- this.validateCaption();
646
- this.validateDescription();
647
- this.validateVariant();
648
- // Initially set variants and active language
649
- // Handles cases where the language-switch is rendered after the language-options have been rendered
650
- this.updateChildrenVariant();
651
- }
652
- /**
653
- * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
654
- */
655
- handlePostChange(event) {
656
- eventGuard.eventGuard(this.host, event, { targetLocalName: 'post-language-option', delegatorSelector: 'post-language-switch' }, () => {
657
- this.activeLang = event.detail;
658
- // Update the active state in the children post-language-option components
659
- this.languageOptions.forEach(lang => {
660
- if (lang.code && lang.code === this.activeLang) {
661
- lang.setAttribute('active', '');
662
- }
663
- else {
664
- lang.removeAttribute('active');
665
- }
666
- });
667
- // Hides the dropdown when an option has been clicked
668
- if (this.variant === 'menu') {
669
- const menu = this.host.shadowRoot.querySelector('post-menu');
670
- menu.hide();
671
- }
672
- });
673
- }
674
- /**
675
- * Handles cases where the language switch is being rendered before options are available
676
- * @param event Initially emitted by <post-langauge-option>
677
- */
678
- handleInitiallyActive(event) {
679
- this.activeLang = event.detail;
680
- }
681
- // Update post-language-option variant to have the correct style
682
- updateChildrenVariant() {
683
- this.languageOptions.forEach(el => {
684
- el.setAttribute('variant', this.variant);
685
- });
686
- }
687
- renderList() {
688
- return (index.h(index.Host, { "data-version": _package.version, role: "list", "aria-label": this.caption }, index.h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, index.h("slot", null))));
689
- }
690
- renderDropdown() {
691
- return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, index.h("slot", null))));
692
- }
693
- render() {
694
- return this.variant === 'list' ? this.renderList() : this.renderDropdown();
695
- }
696
- get host() { return index.getElement(this); }
697
- static get watchers() { return {
698
- "caption": ["validateCaption"],
699
- "description": ["validateDescription"],
700
- "variant": ["validateVariant"]
701
- }; }
702
- };
703
- PostLanguageSwitch.style = PostLanguageSwitchStyle0;
704
-
705
- const postListCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
706
- const PostListStyle0 = postListCss;
707
-
708
- const PostList = class {
709
- constructor(hostRef) {
710
- index.registerInstance(this, hostRef);
711
- this.titleId = undefined;
712
- this.titleHidden = false;
713
- this.horizontal = false;
714
- }
715
- componentWillLoad() {
716
- /**
717
- * Get the id set on the host element or use a random id by default
718
- */
719
- this.titleId = `title-${this.host.id || index_browser.nanoid(6)}`;
720
- }
721
- componentDidLoad() {
722
- this.checkTitle();
723
- }
724
- checkTitle() {
725
- if (!this.titleEl.textContent.trim()) {
726
- console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
727
- }
728
- }
729
- render() {
730
- return (index.h(index.Host, { key: 'b003aa61735359b6a1d95aad8d29c609d5bb3c8b', "data-version": _package.version }, index.h("div", { key: '2f69a2c72dd357767735e10d16f1b7586da6d5a3', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '3982783d438519673a676323339a013d3edb84db' })), index.h("div", { key: 'b8a91c4430774f019cc46aa19393e2a1566204a5', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: '378a51785c4d52df8ae422657a16e8295b405149', name: "post-list-item" }))));
731
- }
732
- get host() { return index.getElement(this); }
733
- };
734
- PostList.style = PostListStyle0;
735
-
736
- const postListItemCss = ":host{display:flex}";
737
- const PostListItemStyle0 = postListItemCss;
738
-
739
- const PostListItem = class {
740
- constructor(hostRef) {
741
- index.registerInstance(this, hostRef);
742
- }
743
- connectedCallback() {
744
- this.host.setAttribute('slot', 'post-list-item');
745
- }
746
- render() {
747
- return (index.h(index.Host, { key: 'c826293ea2a7446bea2f5b223934b444655198a0', role: "listitem", slot: "post-list-item", version: _package.version }, index.h("slot", { key: 'b997f79da2fbc87fbc6a388c118a03c008ad2c23' })));
748
- }
749
- get host() { return index.getElement(this); }
750
- };
751
- PostListItem.style = PostListItemStyle0;
752
-
753
- const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}";
754
- const PostLogoStyle0 = postLogoCss;
755
-
756
- const PostLogo = class {
757
- constructor(hostRef) {
758
- index.registerInstance(this, hostRef);
759
- this.url = undefined;
760
- }
761
- validateUrl() {
762
- index$1.checkEmptyOrUrl(this, 'url');
763
- }
764
- componentDidLoad() {
765
- this.validateUrl();
766
- this.checkDescription();
767
- }
768
- checkDescription() {
769
- if (!this.host.textContent) {
770
- console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
771
- }
772
- }
773
- render() {
774
- const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
775
- const LogoTag = logoLink ? 'a' : 'span';
776
- return (index.h(index.Host, { key: '36074a2357157bd31772d526d800de9251e38513', "data-version": _package.version }, index.h(LogoTag, { key: '5c4caa0e27bd6f6e8db02d8084c4586d7c0cc269', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: '7068754598529e69049af19d78f4ca0df95b8d37', class: "description" }, index.h("slot", { key: '36224f0bbc4fbc83039dcaf70149b45d7720ee96', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: '3e959382c47fc2ac6b8d00ca0f4062f2bc24cb8e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'ebcaac4e579e8e68bec7de577faca31835094c72', id: "Logo" }, index.h("rect", { key: '5098c504998e9b4426cfac36dc7854433736c865', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '45ecebafbf6223c2678c4d0164187419350df0a4', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: '52674edd552289f2ad7be6bf7ad7c9cb1128aaf6', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
777
- }
778
- get host() { return index.getElement(this); }
779
- static get watchers() { return {
780
- "url": ["validateUrl"]
781
- }; }
782
- };
783
- PostLogo.style = PostLogoStyle0;
784
-
785
- const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}";
786
- const PostMainnavigationStyle0 = postMainnavigationCss;
787
-
788
- const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
789
- const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
790
- const PostMainnavigation = class {
791
- constructor(hostRef) {
792
- index.registerInstance(this, hostRef);
793
- this.canScrollLeft = false;
794
- this.canScrollRight = false;
795
- this.scrollRight = this.scrollRight.bind(this);
796
- this.scrollLeft = this.scrollLeft.bind(this);
797
- this.handleMutations = this.handleMutations.bind(this);
798
- this.checkScrollability = this.checkScrollability.bind(this);
799
- this.resizeObserver = new ResizeObserver(this.checkScrollability);
800
- this.mutationObserver = new MutationObserver(this.handleMutations);
801
- }
802
- componentDidLoad() {
803
- setTimeout(() => {
804
- this.fixLayoutShift();
805
- this.checkScrollability();
806
- });
807
- // Observe the navbar for size changes
808
- this.resizeObserver.observe(this.navbar);
809
- // Observe the navabar for mutation changes
810
- this.mutationObserver.observe(this.navbar, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
811
- // Ensure the scroll buttons are correctly displayed or hidden whenever the navbar is scrolled
812
- this.navbar.addEventListener('scrollend', this.checkScrollability);
813
- }
814
- /**
815
- * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
816
- */
817
- disconnectedCallback() {
818
- this.mutationObserver.disconnect();
819
- this.resizeObserver.disconnect();
820
- this.navbar.removeEventListener('scrollend', this.checkScrollability);
821
- }
822
- /**
823
- * Stops the repeated scrolling when the mouse button is released.
824
- */
825
- stopScrolling() {
826
- if (this.scrollRepeatInterval)
827
- clearInterval(this.scrollRepeatInterval);
828
- }
829
- async handleMutations(mutations) {
830
- const addedNodes = mutations.flatMap((mutation) => {
831
- return Array.from(mutation.addedNodes);
832
- });
833
- // Wait for all elements to be hydrated
834
- await Promise.all(addedNodes.map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
835
- this.fixLayoutShift();
836
- this.checkScrollability();
837
- }
838
- get navigationItems() {
839
- return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
840
- }
841
- /**
842
- * Hack to fix the layout shift due to bold text on active elements
843
- */
844
- fixLayoutShift() {
845
- this.navigationItems
846
- .filter(item => !item.matches(':has(.nav-el-active)'))
847
- .forEach(item => {
848
- item.innerHTML = `
849
- <span class="nav-el-active">${item.innerHTML}</span>
850
- <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
851
- `;
852
- });
853
- }
854
- handleBackButtonClick() {
855
- const header = this.navbar.closest('post-header');
856
- if (header)
857
- header.toggleMobileMenu();
858
- }
859
- /**
860
- * Returns whether scrolling is enabled in either the left or right direction.
861
- */
862
- get canScroll() {
863
- return this.canScrollLeft || this.canScrollRight;
864
- }
865
- /**
866
- * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
867
- */
868
- checkScrollability() {
869
- const { scrollLeft, scrollWidth, clientWidth } = this.navbar;
870
- if (scrollWidth === clientWidth) {
871
- // If scroll width equals client width, scrolling is disabled in both directions
872
- this.canScrollLeft = this.canScrollRight = false;
873
- }
874
- else {
875
- this.canScrollLeft = Math.floor(scrollLeft) > 0; // Scrolling left is possible if not at the start
876
- this.canScrollRight = Math.ceil(clientWidth + scrollLeft) < scrollWidth; // Scrolling right is possible if not at the end
877
- }
878
- }
879
- /**
880
- * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
881
- */
882
- handleScrollButtonClick(e, direction) {
883
- if (!this.canScroll || e.button !== 0)
884
- return;
885
- // Disable interaction with the navbar during scrolling
886
- this.temporarilyDisableNavbar();
887
- // Set up the correct scroll function
888
- const scroll = direction === 'right' ? this.scrollRight : this.scrollLeft;
889
- scroll();
890
- // Repeat the scrolling action while the button is held down
891
- this.scrollRepeatInterval = setInterval(() => {
892
- scroll();
893
- }, SCROLL_REPEAT_INTERVAL);
894
- }
895
- scrollRight() {
896
- const scrollRightLeftEdge = document
897
- .querySelector('.scroll-right')
898
- .getBoundingClientRect().left;
899
- for (const navigationItem of this.navigationItems) {
900
- const { right, width } = navigationItem.getBoundingClientRect();
901
- // Scroll to the first navigation item that is less than 75% visible
902
- const isThreeQuartersVisible = right - 0.25 * width < scrollRightLeftEdge;
903
- if (!isThreeQuartersVisible) {
904
- this.navbar.scrollBy({ left: right - scrollRightLeftEdge });
905
- return;
906
- }
907
- }
908
- }
909
- scrollLeft() {
910
- const scrollLeftRightEdge = document
911
- .querySelector('.scroll-left')
912
- .getBoundingClientRect().right;
913
- for (const navigationItem of this.navigationItems.reverse()) {
914
- const { left, width } = navigationItem.getBoundingClientRect();
915
- // Scroll to the first navigation item that is less than 75% visible
916
- const isThreeQuartersVisible = left + 0.25 * width > scrollLeftRightEdge;
917
- if (!isThreeQuartersVisible) {
918
- this.navbar.scrollBy({ left: left - scrollLeftRightEdge });
919
- return;
920
- }
921
- }
922
- }
923
- /**
924
- * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
925
- * Re-enables interactions after a brief delay to avoid blocking the user entirely.
926
- */
927
- temporarilyDisableNavbar() {
928
- if (this.navbarDisableTimer)
929
- clearTimeout(this.navbarDisableTimer);
930
- this.navbar.setAttribute('inert', '');
931
- this.navbarDisableTimer = setTimeout(() => {
932
- this.navbar.removeAttribute('inert');
933
- }, NAVBAR_DISABLE_DURATION);
934
- }
935
- render() {
936
- return (index.h(index.Host, { key: '6cd850555585d87eb25e3f6892b8010f5e4d23d6', slot: "post-mainnavigation", version: _package.version }, index.h("div", { key: '3411008120d072920f4de0b71c9dc014748f1390', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: '2e3747380cb546bd6da77e5ffba2403586205a55', name: "back-button" })), index.h("div", { key: 'e9eedd836b3f679ba2861109db2d0811c1142677', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '628511a2c1812a08828e1aa2b51f26ad01a5a2cf', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '1b660d65e1984e8701a98a369046f391fd177338', ref: el => (this.navbar = el) }, index.h("slot", { key: '0eb35366ac0bd58509afd6a12f68c2b09396a497' })), index.h("div", { key: '11145ad6602e2df78d3c3f4643cc6e4e960775aa', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: '26e795cd00221dbfb1a7632453d0d48993584b0b', "aria-hidden": "true", name: "chevronright" }))));
937
- }
938
- };
939
- PostMainnavigation.style = PostMainnavigationStyle0;
940
-
941
- const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
942
- const PostMegadropdownStyle0 = postMegadropdownCss;
943
-
944
- const PostMegadropdown = class {
945
- constructor(hostRef) {
946
- index.registerInstance(this, hostRef);
947
- this.postToggleMegadropdown = index.createEvent(this, "postToggleMegadropdown", 7);
948
- this.handleClickOutside = (event) => {
949
- if (this.device !== 'desktop')
950
- return;
951
- const target = event.target;
952
- if (this.host.contains(target)) {
953
- return;
954
- }
955
- if (target instanceof HTMLElement) {
956
- const trigger = target.closest('post-megadropdown-trigger');
957
- if (trigger) {
958
- const targetDropdownId = trigger.getAttribute('for');
959
- if (targetDropdownId !== this.host.id) {
960
- return;
961
- }
962
- }
963
- }
964
- this.hide(false);
965
- };
966
- this.device = breakpoints.breakpoint.get('name');
967
- this.isVisible = false;
968
- this.animationClass = null;
969
- }
970
- breakpointChange(e) {
971
- this.device = e.detail;
972
- if (this.device === 'desktop' && this.isVisible) {
973
- this.animationClass = null;
974
- }
975
- }
976
- disconnectedCallback() {
977
- this.removeListeners();
978
- window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
979
- if (PostMegadropdown.activeDropdown === this) {
980
- PostMegadropdown.activeDropdown = null;
981
- }
982
- }
983
- componentWillRender() {
984
- this.getFocusableElements();
985
- }
986
- /**
987
- * Toggles the dropdown visibility based on its current state.
988
- */
989
- async toggle() {
990
- if (this.isVisible) {
991
- this.hide();
992
- }
993
- else {
994
- await this.show();
995
- }
996
- }
997
- /**
998
- * Displays the dropdown.
999
- */
1000
- async show() {
1001
- if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
1002
- // Close the previously active dropdown without animation
1003
- PostMegadropdown.activeDropdown.forceClose();
1004
- }
1005
- else {
1006
- this.animationClass = 'slide-in';
1007
- }
1008
- this.isVisible = true;
1009
- PostMegadropdown.activeDropdown = this;
1010
- this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
1011
- if (this.firstFocusableEl &&
1012
- window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
1013
- this.firstFocusableEl.focus();
1014
- }
1015
- this.addListeners();
1016
- }
1017
- /**
1018
- * Hides the dropdown with an animation.
1019
- */
1020
- async hide(focusParent = true, forceClose = false) {
1021
- this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
1022
- if (forceClose) {
1023
- this.forceClose();
1024
- }
1025
- else {
1026
- this.animationClass = 'slide-out';
1027
- }
1028
- }
1029
- /**
1030
- * Sets focus to the first focusable element within the component.
1031
- */
1032
- async focusFirst() {
1033
- this.firstFocusableEl?.focus();
1034
- }
1035
- connectedCallback() {
1036
- window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
1037
- }
1038
- /**
1039
- * Forces the dropdown to close without animation.
1040
- */
1041
- forceClose() {
1042
- this.isVisible = false;
1043
- this.animationClass = null;
1044
- this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
1045
- this.removeListeners();
1046
- }
1047
- handleAnimationEnd() {
1048
- if (this.animationClass === 'slide-out') {
1049
- this.isVisible = false;
1050
- this.animationClass = null;
1051
- PostMegadropdown.activeDropdown = null;
1052
- this.removeListeners();
1053
- }
1054
- }
1055
- addListeners() {
1056
- this.host.addEventListener('keydown', e => this.keyboardHandler(e));
1057
- document.addEventListener('keyup', e => this.handleTabOutside(e));
1058
- document.addEventListener('mousedown', this.handleClickOutside);
1059
- }
1060
- removeListeners() {
1061
- this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
1062
- document.removeEventListener('keyup', e => this.handleTabOutside(e));
1063
- document.removeEventListener('mousedown', this.handleClickOutside);
1064
- }
1065
- getFocusableElements() {
1066
- const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
1067
- const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
1068
- this.firstFocusableEl = focusableChildren[0];
1069
- this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
1070
- }
1071
- // Loop through the focusable children
1072
- keyboardHandler(e) {
1073
- if (e.key === 'Tab' && this.device !== 'desktop') {
1074
- if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
1075
- // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
1076
- e.preventDefault();
1077
- this.lastFocusableEl.focus();
1078
- }
1079
- else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
1080
- // If TAB and last element is focused, focus goes back to the first element of the megadropdown
1081
- e.preventDefault();
1082
- this.firstFocusableEl.focus();
1083
- }
1084
- }
1085
- }
1086
- handleTabOutside(e) {
1087
- if (e.key === 'Tab' && this.device === 'desktop') {
1088
- if (!this.host.contains(e.target)) {
1089
- this.hide(false);
1090
- }
1091
- }
1092
- }
1093
- render() {
1094
- const containerStyle = this.isVisible ? {} : { display: 'none' };
1095
- return (index.h(index.Host, { key: '7426a12ebaeac0ce3b8402c3da4d5393daca059b', version: _package.version }, index.h("div", { key: 'd47b60c334577f5662f19912f12ce941b4b52d94', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, index.h("div", { key: '2798f217b2b3e43c3c63072884bbbbe7d99ed62f', class: "megadropdown" }, index.h("slot", { key: 'b61f82bbc7f87f65d9b6957e7a4e5d6790b6dd00', name: "megadropdown-title" }), index.h("div", { key: 'f4996a819511cb59185faeedbdcec4be6e6f8a24', class: "megadropdown-content" }, index.h("slot", { key: '54f695c3b3d30a6a1aae7f7dc6f65f4d4d27de68' })), index.h("div", { key: 'b1334295c7d758e20c85b6c6c8cefc31dcf09e20', onClick: () => this.hide(true), class: "back-button" }, index.h("slot", { key: 'c4db69fa3207ce4cb47b725e37b1993820a2a64c', name: "back-button" })), index.h("div", { key: '68b22a3222382586fc749dec63e36edae84360c1', onClick: () => this.hide(true), class: "close-button" }, index.h("slot", { key: '8023b75c931a95dbd9552c1a713790e77e40f526', name: "close-button" }))))));
1096
- }
1097
- get host() { return index.getElement(this); }
1098
- };
1099
- /** Tracks the currently active dropdown instance. */
1100
- PostMegadropdown.activeDropdown = null;
1101
- PostMegadropdown.style = PostMegadropdownStyle0;
1102
-
1103
- const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}@media screen and (max-width: 1023.98px){post-megadropdown-trigger{z-index:4}}";
1104
- const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
1105
-
1106
- const PostMegadropdownTrigger = class {
1107
- constructor(hostRef) {
1108
- index.registerInstance(this, hostRef);
1109
- /**
1110
- * Reference to the slotted button within the trigger, if present.
1111
- * Used to manage click and key events for mega dropdown control.
1112
- */
1113
- this.slottedButton = null;
1114
- /**
1115
- * Tracks whether this trigger's dropdown was expanded before a state change.
1116
- * Used to determine if this trigger should handle focus when its dropdown closes.
1117
- */
1118
- this.wasExpanded = false;
1119
- this.handleKeyDown = (event) => {
1120
- if (event.key === 'Enter' || event.key === ' ') {
1121
- event.preventDefault();
1122
- this.handleToggle();
1123
- if (this.megadropdown && !this.ariaExpanded) {
1124
- setTimeout(() => this.megadropdown.focusFirst(), 100);
1125
- }
1126
- }
1127
- };
1128
- this.handleToggleMegadropdown = (event) => {
1129
- eventGuard.eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
1130
- if (event.target.id === this.for) {
1131
- this.ariaExpanded = event.detail.isVisible;
1132
- // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
1133
- if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
1134
- setTimeout(() => {
1135
- this.slottedButton?.focus();
1136
- }, 100);
1137
- }
1138
- this.wasExpanded = this.ariaExpanded;
1139
- if (this.slottedButton) {
1140
- this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
1141
- }
1142
- }
1143
- });
1144
- };
1145
- this.for = undefined;
1146
- this.ariaExpanded = false;
1147
- }
1148
- /**
1149
- * Watch for changes to the `for` property to validate its type and ensure it is a string.
1150
- * @param forValue - The new value of the `for` property.
1151
- */
1152
- validateControlFor() {
1153
- index$1.checkRequiredAndType(this, 'for', 'string');
1154
- }
1155
- get megadropdown() {
1156
- const ref = document.getElementById(this.for);
1157
- return ref && ref.localName === 'post-megadropdown'
1158
- ? ref
1159
- : null;
1160
- }
1161
- handleToggle() {
1162
- if (this.megadropdown) {
1163
- this.megadropdown.toggle();
1164
- }
1165
- else {
1166
- console.warn(`No post-megadropdown found with ID: ${this.for}`);
1167
- }
1168
- }
1169
- componentDidLoad() {
1170
- this.validateControlFor();
1171
- // Check if the mega dropdown attached to the trigger is expanded or not
1172
- document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
1173
- this.slottedButton = this.host.querySelector('button');
1174
- if (this.slottedButton) {
1175
- this.slottedButton.setAttribute('aria-haspopup', 'menu');
1176
- this.slottedButton.addEventListener('click', () => {
1177
- this.handleToggle();
1178
- });
1179
- this.slottedButton.addEventListener('keydown', this.handleKeyDown);
1180
- }
1181
- else {
1182
- console.warn('No button found within post-megadropdown-trigger');
1183
- }
1184
- }
1185
- disconnectedCallback() {
1186
- document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
1187
- }
1188
- render() {
1189
- return (index.h(index.Host, { key: 'a6b452393957a1468493ef1b8f56d398479a3245', "data-version": _package.version, "tab-index": "-1" }, index.h("button", { key: 'bf9565005a58bbae0dd2424819548c4b635791c1' }, index.h("slot", { key: 'c52d356902e2b38056f2feea0fc90cf5493c8752' }))));
1190
- }
1191
- get host() { return index.getElement(this); }
1192
- static get watchers() { return {
1193
- "for": ["validateControlFor"]
1194
- }; }
1195
- };
1196
- PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;
1197
-
1198
- const postMenuCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}";
1199
- const PostMenuStyle0 = postMenuCss;
1200
-
1201
- const PostMenu = class {
1202
- constructor(hostRef) {
1203
- index.registerInstance(this, hostRef);
1204
- this.toggleMenu = index.createEvent(this, "toggleMenu", 7);
1205
- this.lastFocusedElement = null;
1206
- this.KEYCODES = {
1207
- SPACE: ' ',
1208
- ENTER: 'Enter',
1209
- UP: 'ArrowUp',
1210
- DOWN: 'ArrowDown',
1211
- TAB: 'Tab',
1212
- HOME: 'Home',
1213
- END: 'End',
1214
- ESCAPE: 'Escape',
1215
- };
1216
- this.handleKeyDown = (e) => {
1217
- e.stopPropagation();
1218
- if (e.key === this.KEYCODES.ESCAPE) {
1219
- this.toggle(this.host);
1220
- return;
1221
- }
1222
- if (Object.values(this.KEYCODES).includes(e.key)) {
1223
- this.controlKeyDownHandler(e);
1224
- }
1225
- };
1226
- this.handlePostToggle = (event) => {
1227
- eventGuard.eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
1228
- this.isVisible = event.detail;
1229
- this.toggleMenu.emit(this.isVisible);
1230
- requestAnimationFrame(() => {
1231
- if (this.isVisible) {
1232
- this.lastFocusedElement = this.root?.activeElement;
1233
- const menuItems = this.getSlottedItems();
1234
- if (menuItems.length > 0) {
1235
- menuItems[0].focus();
1236
- }
1237
- }
1238
- else if (this.lastFocusedElement) {
1239
- this.lastFocusedElement.focus();
1240
- }
1241
- });
1242
- });
1243
- };
1244
- this.handleClick = (e) => {
1245
- const target = e.target;
1246
- if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
1247
- this.toggle(this.host);
1248
- }
1249
- };
1250
- this.placement = 'bottom';
1251
- this.isVisible = false;
1252
- }
1253
- validatePlacement() {
1254
- index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
1255
- }
1256
- connectedCallback() {
1257
- this.root = getRoot.getRoot(this.host);
1258
- this.host.addEventListener('keydown', this.handleKeyDown);
1259
- this.host.addEventListener('click', this.handleClick);
1260
- }
1261
- disconnectedCallback() {
1262
- this.host.removeEventListener('keydown', this.handleKeyDown);
1263
- this.host.removeEventListener('click', this.handleClick);
1264
- this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
1265
- }
1266
- componentDidLoad() {
1267
- this.validatePlacement();
1268
- if (this.popoverRef) {
1269
- this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
1270
- }
1271
- }
1272
- /**
1273
- * Toggles the menu visibility based on its current state.
1274
- */
1275
- async toggle(target) {
1276
- if (this.popoverRef) {
1277
- await this.popoverRef.toggle(target);
1278
- }
1279
- else {
1280
- console.error('toggle: popoverRef is null or undefined');
1281
- }
1282
- }
1283
- /**
1284
- * Displays the popover menu, focusing the first menu item.
1285
- *
1286
- * @param target - The HTML element relative to which the popover menu should be displayed.
1287
- */
1288
- async show(target) {
1289
- if (this.popoverRef) {
1290
- await this.popoverRef.show(target);
1291
- }
1292
- else {
1293
- console.error('show: popoverRef is null or undefined');
1294
- }
1295
- }
1296
- /**
1297
- * Hides the popover menu and restores focus to the previously focused element.
1298
- */
1299
- async hide() {
1300
- if (this.popoverRef) {
1301
- await this.popoverRef.hide();
1302
- }
1303
- else {
1304
- console.error('hide: popoverRef is null or undefined');
1305
- }
1306
- }
1307
- controlKeyDownHandler(e) {
1308
- const menuItems = this.getSlottedItems();
1309
- if (!menuItems.length) {
1310
- return;
1311
- }
1312
- let currentIndex = menuItems.findIndex(el => {
1313
- // Check if the item is currently focused within its rendered scope (document or shadow root)
1314
- return el === getRoot.getRoot(el).activeElement;
1315
- });
1316
- switch (e.key) {
1317
- case this.KEYCODES.UP:
1318
- e.preventDefault();
1319
- currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
1320
- break;
1321
- case this.KEYCODES.DOWN:
1322
- e.preventDefault();
1323
- currentIndex = (currentIndex + 1) % menuItems.length;
1324
- break;
1325
- case this.KEYCODES.HOME:
1326
- currentIndex = 0;
1327
- break;
1328
- case this.KEYCODES.END:
1329
- e.preventDefault();
1330
- currentIndex = menuItems.length - 1;
1331
- break;
1332
- case this.KEYCODES.SPACE:
1333
- this.toggle(this.host);
1334
- return;
1335
- case this.KEYCODES.TAB:
1336
- this.toggle(this.host);
1337
- break;
1338
- }
1339
- if (menuItems[currentIndex]) {
1340
- menuItems[currentIndex].focus();
1341
- }
1342
- }
1343
- getSlottedItems() {
1344
- const slot = this.host.shadowRoot.querySelector('slot');
1345
- const slottedElements = slot ? slot.assignedElements() : [];
1346
- return (slottedElements
1347
- // If the element is a slot, get the assigned elements
1348
- .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
1349
- // For each menu item, get any focusable children (e.g., buttons, links)
1350
- .flatMap(el => Array.from(getFocusableChildren(el))));
1351
- }
1352
- render() {
1353
- return (index.h(index.Host, { key: '6d23cab02632b003891301577900c484825f4021', "data-version": _package.version, role: "menu" }, index.h("post-popovercontainer", { key: '4a0e4ed73449f62ffc1e4bd1c1d3fd73718072bc', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: 'cabe298c9aeeb6a8d12aaa638a82ac8a2eb2d320', class: "popover-container", part: "popover-container" }, index.h("slot", { key: 'fe27a3ceda1720b64a77735ef7fe280a4a3d59d9' })))));
1354
- }
1355
- get host() { return index.getElement(this); }
1356
- static get watchers() { return {
1357
- "placement": ["validatePlacement"]
1358
- }; }
1359
- };
1360
- PostMenu.style = PostMenuStyle0;
1361
-
1362
- const postMenuTriggerCss = ":host{display:inline-block}";
1363
- const PostMenuTriggerStyle0 = postMenuTriggerCss;
1364
-
1365
- const PostMenuTrigger = class {
1366
- constructor(hostRef) {
1367
- index.registerInstance(this, hostRef);
1368
- /**
1369
- * Reference to the slotted button within the trigger, if present.
1370
- * Used to manage click and key events for menu control.
1371
- */
1372
- this.slottedButton = null;
1373
- this.handleKeyDown = (e) => {
1374
- if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
1375
- e.preventDefault();
1376
- this.handleToggle();
1377
- }
1378
- };
1379
- this.for = undefined;
1380
- this.ariaExpanded = false;
1381
- }
1382
- /**
1383
- * Watch for changes to the `for` property to validate its type and ensure it is a string.
1384
- * @param forValue - The new value of the `for` property.
1385
- */
1386
- validateControlFor() {
1387
- index$1.checkRequiredAndType(this, 'for', 'string');
1388
- }
1389
- get menu() {
1390
- const ref = this.root.getElementById(this.for);
1391
- return ref && ref.localName === 'post-menu' ? ref : null;
1392
- }
1393
- handleToggle() {
1394
- if (this.menu) {
1395
- this.menu.toggle(this.host);
1396
- }
1397
- else {
1398
- console.warn(`No post-menu found with ID: ${this.for}`);
1399
- }
1400
- }
1401
- connectedCallback() {
1402
- this.root = getRoot.getRoot(this.host);
1403
- }
1404
- componentDidLoad() {
1405
- this.validateControlFor();
1406
- this.slottedButton = this.host.querySelector('button');
1407
- // Check if the slottedButton is within a web component
1408
- if (!this.slottedButton) {
1409
- const webComponent = this.host.querySelector('.menu-trigger-webc');
1410
- if (webComponent.shadowRoot) {
1411
- const slottedButton = webComponent.shadowRoot.querySelector('button');
1412
- if (slottedButton) {
1413
- this.slottedButton = slottedButton;
1414
- }
1415
- }
1416
- }
1417
- if (this.slottedButton) {
1418
- this.slottedButton.setAttribute('aria-haspopup', 'menu');
1419
- // Listen to the `toggleMenu` event emitted by the `post-menu` component
1420
- if (this.menu && this.slottedButton) {
1421
- this.menu.addEventListener('toggleMenu', (event) => {
1422
- this.ariaExpanded = event.detail;
1423
- this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
1424
- });
1425
- }
1426
- this.slottedButton.addEventListener('click', () => {
1427
- this.handleToggle();
1428
- });
1429
- this.slottedButton.addEventListener('keydown', this.handleKeyDown);
1430
- }
1431
- else {
1432
- console.warn('No button found within post-menu-trigger');
1433
- }
1434
- }
1435
- render() {
1436
- return (index.h(index.Host, { key: '4c3732f46a6f1882d38e646b5d23f6c29ad9f4c8', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: '456dbe219d56fe0826bc208201573c9f977f7f79' })));
1437
- }
1438
- get host() { return index.getElement(this); }
1439
- static get watchers() { return {
1440
- "for": ["validateControlFor"]
1441
- }; }
1442
- };
1443
- PostMenuTrigger.style = PostMenuTriggerStyle0;
1444
-
1445
- /**
1446
- * Custom positioning reference element.
1447
- * @see https://floating-ui.com/docs/virtual-elements
1448
- */
1449
-
1450
- const sides = ['top', 'right', 'bottom', 'left'];
1451
- const alignments = ['start', 'end'];
1452
- const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
1453
- const min = Math.min;
1454
- const max = Math.max;
1455
- const round = Math.round;
1456
- const floor = Math.floor;
1457
- const createCoords = v => ({
1458
- x: v,
1459
- y: v
1460
- });
1461
- const oppositeSideMap = {
1462
- left: 'right',
1463
- right: 'left',
1464
- bottom: 'top',
1465
- top: 'bottom'
1466
- };
1467
- const oppositeAlignmentMap = {
1468
- start: 'end',
1469
- end: 'start'
1470
- };
1471
- function clamp(start, value, end) {
1472
- return max(start, min(value, end));
1473
- }
1474
- function evaluate(value, param) {
1475
- return typeof value === 'function' ? value(param) : value;
1476
- }
1477
- function getSide(placement) {
1478
- return placement.split('-')[0];
1479
- }
1480
- function getAlignment(placement) {
1481
- return placement.split('-')[1];
1482
- }
1483
- function getOppositeAxis(axis) {
1484
- return axis === 'x' ? 'y' : 'x';
1485
- }
1486
- function getAxisLength(axis) {
1487
- return axis === 'y' ? 'height' : 'width';
1488
- }
1489
- function getSideAxis(placement) {
1490
- return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
1491
- }
1492
- function getAlignmentAxis(placement) {
1493
- return getOppositeAxis(getSideAxis(placement));
1494
- }
1495
- function getAlignmentSides(placement, rects, rtl) {
1496
- if (rtl === void 0) {
1497
- rtl = false;
1498
- }
1499
- const alignment = getAlignment(placement);
1500
- const alignmentAxis = getAlignmentAxis(placement);
1501
- const length = getAxisLength(alignmentAxis);
1502
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
1503
- if (rects.reference[length] > rects.floating[length]) {
1504
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
1505
- }
1506
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
1507
- }
1508
- function getExpandedPlacements(placement) {
1509
- const oppositePlacement = getOppositePlacement(placement);
1510
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
1511
- }
1512
- function getOppositeAlignmentPlacement(placement) {
1513
- return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
1514
- }
1515
- function getSideList(side, isStart, rtl) {
1516
- const lr = ['left', 'right'];
1517
- const rl = ['right', 'left'];
1518
- const tb = ['top', 'bottom'];
1519
- const bt = ['bottom', 'top'];
1520
- switch (side) {
1521
- case 'top':
1522
- case 'bottom':
1523
- if (rtl) return isStart ? rl : lr;
1524
- return isStart ? lr : rl;
1525
- case 'left':
1526
- case 'right':
1527
- return isStart ? tb : bt;
1528
- default:
1529
- return [];
1530
- }
1531
- }
1532
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
1533
- const alignment = getAlignment(placement);
1534
- let list = getSideList(getSide(placement), direction === 'start', rtl);
1535
- if (alignment) {
1536
- list = list.map(side => side + "-" + alignment);
1537
- if (flipAlignment) {
1538
- list = list.concat(list.map(getOppositeAlignmentPlacement));
1539
- }
1540
- }
1541
- return list;
1542
- }
1543
- function getOppositePlacement(placement) {
1544
- return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
1545
- }
1546
- function expandPaddingObject(padding) {
1547
- return {
1548
- top: 0,
1549
- right: 0,
1550
- bottom: 0,
1551
- left: 0,
1552
- ...padding
1553
- };
1554
- }
1555
- function getPaddingObject(padding) {
1556
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
1557
- top: padding,
1558
- right: padding,
1559
- bottom: padding,
1560
- left: padding
1561
- };
1562
- }
1563
- function rectToClientRect(rect) {
1564
- const {
1565
- x,
1566
- y,
1567
- width,
1568
- height
1569
- } = rect;
1570
- return {
1571
- width,
1572
- height,
1573
- top: y,
1574
- left: x,
1575
- right: x + width,
1576
- bottom: y + height,
1577
- x,
1578
- y
1579
- };
1580
- }
1581
-
1582
- function computeCoordsFromPlacement(_ref, placement, rtl) {
1583
- let {
1584
- reference,
1585
- floating
1586
- } = _ref;
1587
- const sideAxis = getSideAxis(placement);
1588
- const alignmentAxis = getAlignmentAxis(placement);
1589
- const alignLength = getAxisLength(alignmentAxis);
1590
- const side = getSide(placement);
1591
- const isVertical = sideAxis === 'y';
1592
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
1593
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
1594
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
1595
- let coords;
1596
- switch (side) {
1597
- case 'top':
1598
- coords = {
1599
- x: commonX,
1600
- y: reference.y - floating.height
1601
- };
1602
- break;
1603
- case 'bottom':
1604
- coords = {
1605
- x: commonX,
1606
- y: reference.y + reference.height
1607
- };
1608
- break;
1609
- case 'right':
1610
- coords = {
1611
- x: reference.x + reference.width,
1612
- y: commonY
1613
- };
1614
- break;
1615
- case 'left':
1616
- coords = {
1617
- x: reference.x - floating.width,
1618
- y: commonY
1619
- };
1620
- break;
1621
- default:
1622
- coords = {
1623
- x: reference.x,
1624
- y: reference.y
1625
- };
1626
- }
1627
- switch (getAlignment(placement)) {
1628
- case 'start':
1629
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
1630
- break;
1631
- case 'end':
1632
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
1633
- break;
1634
- }
1635
- return coords;
1636
- }
1637
-
1638
- /**
1639
- * Computes the `x` and `y` coordinates that will place the floating element
1640
- * next to a given reference element.
1641
- *
1642
- * This export does not have any `platform` interface logic. You will need to
1643
- * write one for the platform you are using Floating UI with.
1644
- */
1645
- const computePosition$1 = async (reference, floating, config) => {
1646
- const {
1647
- placement = 'bottom',
1648
- strategy = 'absolute',
1649
- middleware = [],
1650
- platform
1651
- } = config;
1652
- const validMiddleware = middleware.filter(Boolean);
1653
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
1654
- let rects = await platform.getElementRects({
1655
- reference,
1656
- floating,
1657
- strategy
1658
- });
1659
- let {
1660
- x,
1661
- y
1662
- } = computeCoordsFromPlacement(rects, placement, rtl);
1663
- let statefulPlacement = placement;
1664
- let middlewareData = {};
1665
- let resetCount = 0;
1666
- for (let i = 0; i < validMiddleware.length; i++) {
1667
- const {
1668
- name,
1669
- fn
1670
- } = validMiddleware[i];
1671
- const {
1672
- x: nextX,
1673
- y: nextY,
1674
- data,
1675
- reset
1676
- } = await fn({
1677
- x,
1678
- y,
1679
- initialPlacement: placement,
1680
- placement: statefulPlacement,
1681
- strategy,
1682
- middlewareData,
1683
- rects,
1684
- platform,
1685
- elements: {
1686
- reference,
1687
- floating
1688
- }
1689
- });
1690
- x = nextX != null ? nextX : x;
1691
- y = nextY != null ? nextY : y;
1692
- middlewareData = {
1693
- ...middlewareData,
1694
- [name]: {
1695
- ...middlewareData[name],
1696
- ...data
1697
- }
1698
- };
1699
- if (reset && resetCount <= 50) {
1700
- resetCount++;
1701
- if (typeof reset === 'object') {
1702
- if (reset.placement) {
1703
- statefulPlacement = reset.placement;
1704
- }
1705
- if (reset.rects) {
1706
- rects = reset.rects === true ? await platform.getElementRects({
1707
- reference,
1708
- floating,
1709
- strategy
1710
- }) : reset.rects;
1711
- }
1712
- ({
1713
- x,
1714
- y
1715
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
1716
- }
1717
- i = -1;
1718
- }
1719
- }
1720
- return {
1721
- x,
1722
- y,
1723
- placement: statefulPlacement,
1724
- strategy,
1725
- middlewareData
1726
- };
1727
- };
1728
-
1729
- /**
1730
- * Resolves with an object of overflow side offsets that determine how much the
1731
- * element is overflowing a given clipping boundary on each side.
1732
- * - positive = overflowing the boundary by that number of pixels
1733
- * - negative = how many pixels left before it will overflow
1734
- * - 0 = lies flush with the boundary
1735
- * @see https://floating-ui.com/docs/detectOverflow
1736
- */
1737
- async function detectOverflow(state, options) {
1738
- var _await$platform$isEle;
1739
- if (options === void 0) {
1740
- options = {};
1741
- }
1742
- const {
1743
- x,
1744
- y,
1745
- platform,
1746
- rects,
1747
- elements,
1748
- strategy
1749
- } = state;
1750
- const {
1751
- boundary = 'clippingAncestors',
1752
- rootBoundary = 'viewport',
1753
- elementContext = 'floating',
1754
- altBoundary = false,
1755
- padding = 0
1756
- } = evaluate(options, state);
1757
- const paddingObject = getPaddingObject(padding);
1758
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
1759
- const element = elements[altBoundary ? altContext : elementContext];
1760
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
1761
- element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
1762
- boundary,
1763
- rootBoundary,
1764
- strategy
1765
- }));
1766
- const rect = elementContext === 'floating' ? {
1767
- x,
1768
- y,
1769
- width: rects.floating.width,
1770
- height: rects.floating.height
1771
- } : rects.reference;
1772
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
1773
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
1774
- x: 1,
1775
- y: 1
1776
- } : {
1777
- x: 1,
1778
- y: 1
1779
- };
1780
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
1781
- elements,
1782
- rect,
1783
- offsetParent,
1784
- strategy
1785
- }) : rect);
1786
- return {
1787
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
1788
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
1789
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
1790
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
1791
- };
1792
- }
1793
-
1794
- /**
1795
- * Provides data to position an inner element of the floating element so that it
1796
- * appears centered to the reference element.
1797
- * @see https://floating-ui.com/docs/arrow
1798
- */
1799
- const arrow$1 = options => ({
1800
- name: 'arrow',
1801
- options,
1802
- async fn(state) {
1803
- const {
1804
- x,
1805
- y,
1806
- placement,
1807
- rects,
1808
- platform,
1809
- elements,
1810
- middlewareData
1811
- } = state;
1812
- // Since `element` is required, we don't Partial<> the type.
1813
- const {
1814
- element,
1815
- padding = 0
1816
- } = evaluate(options, state) || {};
1817
- if (element == null) {
1818
- return {};
1819
- }
1820
- const paddingObject = getPaddingObject(padding);
1821
- const coords = {
1822
- x,
1823
- y
1824
- };
1825
- const axis = getAlignmentAxis(placement);
1826
- const length = getAxisLength(axis);
1827
- const arrowDimensions = await platform.getDimensions(element);
1828
- const isYAxis = axis === 'y';
1829
- const minProp = isYAxis ? 'top' : 'left';
1830
- const maxProp = isYAxis ? 'bottom' : 'right';
1831
- const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
1832
- const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
1833
- const startDiff = coords[axis] - rects.reference[axis];
1834
- const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
1835
- let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
1836
-
1837
- // DOM platform can return `window` as the `offsetParent`.
1838
- if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
1839
- clientSize = elements.floating[clientProp] || rects.floating[length];
1840
- }
1841
- const centerToReference = endDiff / 2 - startDiff / 2;
1842
-
1843
- // If the padding is large enough that it causes the arrow to no longer be
1844
- // centered, modify the padding so that it is centered.
1845
- const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
1846
- const minPadding = min(paddingObject[minProp], largestPossiblePadding);
1847
- const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
1848
-
1849
- // Make sure the arrow doesn't overflow the floating element if the center
1850
- // point is outside the floating element's bounds.
1851
- const min$1 = minPadding;
1852
- const max = clientSize - arrowDimensions[length] - maxPadding;
1853
- const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
1854
- const offset = clamp(min$1, center, max);
1855
-
1856
- // If the reference is small enough that the arrow's padding causes it to
1857
- // to point to nothing for an aligned placement, adjust the offset of the
1858
- // floating element itself. To ensure `shift()` continues to take action,
1859
- // a single reset is performed when this is true.
1860
- const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
1861
- const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
1862
- return {
1863
- [axis]: coords[axis] + alignmentOffset,
1864
- data: {
1865
- [axis]: offset,
1866
- centerOffset: center - offset - alignmentOffset,
1867
- ...(shouldAddOffset && {
1868
- alignmentOffset
1869
- })
1870
- },
1871
- reset: shouldAddOffset
1872
- };
1873
- }
1874
- });
1875
-
1876
- function getPlacementList(alignment, autoAlignment, allowedPlacements) {
1877
- const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
1878
- return allowedPlacementsSortedByAlignment.filter(placement => {
1879
- if (alignment) {
1880
- return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
1881
- }
1882
- return true;
1883
- });
1884
- }
1885
- /**
1886
- * Optimizes the visibility of the floating element by choosing the placement
1887
- * that has the most space available automatically, without needing to specify a
1888
- * preferred placement. Alternative to `flip`.
1889
- * @see https://floating-ui.com/docs/autoPlacement
1890
- */
1891
- const autoPlacement = function (options) {
1892
- if (options === void 0) {
1893
- options = {};
1894
- }
1895
- return {
1896
- name: 'autoPlacement',
1897
- options,
1898
- async fn(state) {
1899
- var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
1900
- const {
1901
- rects,
1902
- middlewareData,
1903
- placement,
1904
- platform,
1905
- elements
1906
- } = state;
1907
- const {
1908
- crossAxis = false,
1909
- alignment,
1910
- allowedPlacements = placements,
1911
- autoAlignment = true,
1912
- ...detectOverflowOptions
1913
- } = evaluate(options, state);
1914
- const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
1915
- const overflow = await detectOverflow(state, detectOverflowOptions);
1916
- const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
1917
- const currentPlacement = placements$1[currentIndex];
1918
- if (currentPlacement == null) {
1919
- return {};
1920
- }
1921
- const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
1922
-
1923
- // Make `computeCoords` start from the right place.
1924
- if (placement !== currentPlacement) {
1925
- return {
1926
- reset: {
1927
- placement: placements$1[0]
1928
- }
1929
- };
1930
- }
1931
- const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
1932
- const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
1933
- placement: currentPlacement,
1934
- overflows: currentOverflows
1935
- }];
1936
- const nextPlacement = placements$1[currentIndex + 1];
1937
-
1938
- // There are more placements to check.
1939
- if (nextPlacement) {
1940
- return {
1941
- data: {
1942
- index: currentIndex + 1,
1943
- overflows: allOverflows
1944
- },
1945
- reset: {
1946
- placement: nextPlacement
1947
- }
1948
- };
1949
- }
1950
- const placementsSortedByMostSpace = allOverflows.map(d => {
1951
- const alignment = getAlignment(d.placement);
1952
- return [d.placement, alignment && crossAxis ?
1953
- // Check along the mainAxis and main crossAxis side.
1954
- d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
1955
- // Check only the mainAxis.
1956
- d.overflows[0], d.overflows];
1957
- }).sort((a, b) => a[1] - b[1]);
1958
- const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
1959
- // Aligned placements should not check their opposite crossAxis
1960
- // side.
1961
- getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
1962
- const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
1963
- if (resetPlacement !== placement) {
1964
- return {
1965
- data: {
1966
- index: currentIndex + 1,
1967
- overflows: allOverflows
1968
- },
1969
- reset: {
1970
- placement: resetPlacement
1971
- }
1972
- };
1973
- }
1974
- return {};
1975
- }
1976
- };
1977
- };
1978
-
1979
- /**
1980
- * Optimizes the visibility of the floating element by flipping the `placement`
1981
- * in order to keep it in view when the preferred placement(s) will overflow the
1982
- * clipping boundary. Alternative to `autoPlacement`.
1983
- * @see https://floating-ui.com/docs/flip
1984
- */
1985
- const flip$1 = function (options) {
1986
- if (options === void 0) {
1987
- options = {};
1988
- }
1989
- return {
1990
- name: 'flip',
1991
- options,
1992
- async fn(state) {
1993
- var _middlewareData$arrow, _middlewareData$flip;
1994
- const {
1995
- placement,
1996
- middlewareData,
1997
- rects,
1998
- initialPlacement,
1999
- platform,
2000
- elements
2001
- } = state;
2002
- const {
2003
- mainAxis: checkMainAxis = true,
2004
- crossAxis: checkCrossAxis = true,
2005
- fallbackPlacements: specifiedFallbackPlacements,
2006
- fallbackStrategy = 'bestFit',
2007
- fallbackAxisSideDirection = 'none',
2008
- flipAlignment = true,
2009
- ...detectOverflowOptions
2010
- } = evaluate(options, state);
2011
-
2012
- // If a reset by the arrow was caused due to an alignment offset being
2013
- // added, we should skip any logic now since `flip()` has already done its
2014
- // work.
2015
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
2016
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
2017
- return {};
2018
- }
2019
- const side = getSide(placement);
2020
- const initialSideAxis = getSideAxis(initialPlacement);
2021
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
2022
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
2023
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
2024
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
2025
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
2026
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
2027
- }
2028
- const placements = [initialPlacement, ...fallbackPlacements];
2029
- const overflow = await detectOverflow(state, detectOverflowOptions);
2030
- const overflows = [];
2031
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
2032
- if (checkMainAxis) {
2033
- overflows.push(overflow[side]);
2034
- }
2035
- if (checkCrossAxis) {
2036
- const sides = getAlignmentSides(placement, rects, rtl);
2037
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
2038
- }
2039
- overflowsData = [...overflowsData, {
2040
- placement,
2041
- overflows
2042
- }];
2043
-
2044
- // One or more sides is overflowing.
2045
- if (!overflows.every(side => side <= 0)) {
2046
- var _middlewareData$flip2, _overflowsData$filter;
2047
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
2048
- const nextPlacement = placements[nextIndex];
2049
- if (nextPlacement) {
2050
- var _overflowsData$;
2051
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
2052
- const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
2053
- if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
2054
- // Try next placement and re-run the lifecycle.
2055
- return {
2056
- data: {
2057
- index: nextIndex,
2058
- overflows: overflowsData
2059
- },
2060
- reset: {
2061
- placement: nextPlacement
2062
- }
2063
- };
2064
- }
2065
- }
2066
-
2067
- // First, find the candidates that fit on the mainAxis side of overflow,
2068
- // then find the placement that fits the best on the main crossAxis side.
2069
- let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
2070
-
2071
- // Otherwise fallback.
2072
- if (!resetPlacement) {
2073
- switch (fallbackStrategy) {
2074
- case 'bestFit':
2075
- {
2076
- var _overflowsData$filter2;
2077
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
2078
- if (hasFallbackAxisSideDirection) {
2079
- const currentSideAxis = getSideAxis(d.placement);
2080
- return currentSideAxis === initialSideAxis ||
2081
- // Create a bias to the `y` side axis due to horizontal
2082
- // reading directions favoring greater width.
2083
- currentSideAxis === 'y';
2084
- }
2085
- return true;
2086
- }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
2087
- if (placement) {
2088
- resetPlacement = placement;
2089
- }
2090
- break;
2091
- }
2092
- case 'initialPlacement':
2093
- resetPlacement = initialPlacement;
2094
- break;
2095
- }
2096
- }
2097
- if (placement !== resetPlacement) {
2098
- return {
2099
- reset: {
2100
- placement: resetPlacement
2101
- }
2102
- };
2103
- }
2104
- }
2105
- return {};
2106
- }
2107
- };
2108
- };
2109
-
2110
- function getSideOffsets(overflow, rect) {
2111
- return {
2112
- top: overflow.top - rect.height,
2113
- right: overflow.right - rect.width,
2114
- bottom: overflow.bottom - rect.height,
2115
- left: overflow.left - rect.width
2116
- };
2117
- }
2118
- function isAnySideFullyClipped(overflow) {
2119
- return sides.some(side => overflow[side] >= 0);
2120
- }
2121
- /**
2122
- * Provides data to hide the floating element in applicable situations, such as
2123
- * when it is not in the same clipping context as the reference element.
2124
- * @see https://floating-ui.com/docs/hide
2125
- */
2126
- const hide = function (options) {
2127
- if (options === void 0) {
2128
- options = {};
2129
- }
2130
- return {
2131
- name: 'hide',
2132
- options,
2133
- async fn(state) {
2134
- const {
2135
- rects
2136
- } = state;
2137
- const {
2138
- strategy = 'referenceHidden',
2139
- ...detectOverflowOptions
2140
- } = evaluate(options, state);
2141
- switch (strategy) {
2142
- case 'referenceHidden':
2143
- {
2144
- const overflow = await detectOverflow(state, {
2145
- ...detectOverflowOptions,
2146
- elementContext: 'reference'
2147
- });
2148
- const offsets = getSideOffsets(overflow, rects.reference);
2149
- return {
2150
- data: {
2151
- referenceHiddenOffsets: offsets,
2152
- referenceHidden: isAnySideFullyClipped(offsets)
2153
- }
2154
- };
2155
- }
2156
- case 'escaped':
2157
- {
2158
- const overflow = await detectOverflow(state, {
2159
- ...detectOverflowOptions,
2160
- altBoundary: true
2161
- });
2162
- const offsets = getSideOffsets(overflow, rects.floating);
2163
- return {
2164
- data: {
2165
- escapedOffsets: offsets,
2166
- escaped: isAnySideFullyClipped(offsets)
2167
- }
2168
- };
2169
- }
2170
- default:
2171
- {
2172
- return {};
2173
- }
2174
- }
2175
- }
2176
- };
2177
- };
2178
-
2179
- function getBoundingRect(rects) {
2180
- const minX = min(...rects.map(rect => rect.left));
2181
- const minY = min(...rects.map(rect => rect.top));
2182
- const maxX = max(...rects.map(rect => rect.right));
2183
- const maxY = max(...rects.map(rect => rect.bottom));
2184
- return {
2185
- x: minX,
2186
- y: minY,
2187
- width: maxX - minX,
2188
- height: maxY - minY
2189
- };
2190
- }
2191
- function getRectsByLine(rects) {
2192
- const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
2193
- const groups = [];
2194
- let prevRect = null;
2195
- for (let i = 0; i < sortedRects.length; i++) {
2196
- const rect = sortedRects[i];
2197
- if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
2198
- groups.push([rect]);
2199
- } else {
2200
- groups[groups.length - 1].push(rect);
2201
- }
2202
- prevRect = rect;
2203
- }
2204
- return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
2205
- }
2206
- /**
2207
- * Provides improved positioning for inline reference elements that can span
2208
- * over multiple lines, such as hyperlinks or range selections.
2209
- * @see https://floating-ui.com/docs/inline
2210
- */
2211
- const inline$1 = function (options) {
2212
- if (options === void 0) {
2213
- options = {};
2214
- }
2215
- return {
2216
- name: 'inline',
2217
- options,
2218
- async fn(state) {
2219
- const {
2220
- placement,
2221
- elements,
2222
- rects,
2223
- platform,
2224
- strategy
2225
- } = state;
2226
- // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
2227
- // ClientRect's bounds, despite the event listener being triggered. A
2228
- // padding of 2 seems to handle this issue.
2229
- const {
2230
- padding = 2,
2231
- x,
2232
- y
2233
- } = evaluate(options, state);
2234
- const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
2235
- const clientRects = getRectsByLine(nativeClientRects);
2236
- const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
2237
- const paddingObject = getPaddingObject(padding);
2238
- function getBoundingClientRect() {
2239
- // There are two rects and they are disjoined.
2240
- if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
2241
- // Find the first rect in which the point is fully inside.
2242
- return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
2243
- }
2244
-
2245
- // There are 2 or more connected rects.
2246
- if (clientRects.length >= 2) {
2247
- if (getSideAxis(placement) === 'y') {
2248
- const firstRect = clientRects[0];
2249
- const lastRect = clientRects[clientRects.length - 1];
2250
- const isTop = getSide(placement) === 'top';
2251
- const top = firstRect.top;
2252
- const bottom = lastRect.bottom;
2253
- const left = isTop ? firstRect.left : lastRect.left;
2254
- const right = isTop ? firstRect.right : lastRect.right;
2255
- const width = right - left;
2256
- const height = bottom - top;
2257
- return {
2258
- top,
2259
- bottom,
2260
- left,
2261
- right,
2262
- width,
2263
- height,
2264
- x: left,
2265
- y: top
2266
- };
2267
- }
2268
- const isLeftSide = getSide(placement) === 'left';
2269
- const maxRight = max(...clientRects.map(rect => rect.right));
2270
- const minLeft = min(...clientRects.map(rect => rect.left));
2271
- const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
2272
- const top = measureRects[0].top;
2273
- const bottom = measureRects[measureRects.length - 1].bottom;
2274
- const left = minLeft;
2275
- const right = maxRight;
2276
- const width = right - left;
2277
- const height = bottom - top;
2278
- return {
2279
- top,
2280
- bottom,
2281
- left,
2282
- right,
2283
- width,
2284
- height,
2285
- x: left,
2286
- y: top
2287
- };
2288
- }
2289
- return fallback;
2290
- }
2291
- const resetRects = await platform.getElementRects({
2292
- reference: {
2293
- getBoundingClientRect
2294
- },
2295
- floating: elements.floating,
2296
- strategy
2297
- });
2298
- if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
2299
- return {
2300
- reset: {
2301
- rects: resetRects
2302
- }
2303
- };
2304
- }
2305
- return {};
2306
- }
2307
- };
2308
- };
2309
-
2310
- // For type backwards-compatibility, the `OffsetOptions` type was also
2311
- // Derivable.
2312
-
2313
- async function convertValueToCoords(state, options) {
2314
- const {
2315
- placement,
2316
- platform,
2317
- elements
2318
- } = state;
2319
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
2320
- const side = getSide(placement);
2321
- const alignment = getAlignment(placement);
2322
- const isVertical = getSideAxis(placement) === 'y';
2323
- const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
2324
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
2325
- const rawValue = evaluate(options, state);
2326
-
2327
- // eslint-disable-next-line prefer-const
2328
- let {
2329
- mainAxis,
2330
- crossAxis,
2331
- alignmentAxis
2332
- } = typeof rawValue === 'number' ? {
2333
- mainAxis: rawValue,
2334
- crossAxis: 0,
2335
- alignmentAxis: null
2336
- } : {
2337
- mainAxis: rawValue.mainAxis || 0,
2338
- crossAxis: rawValue.crossAxis || 0,
2339
- alignmentAxis: rawValue.alignmentAxis
2340
- };
2341
- if (alignment && typeof alignmentAxis === 'number') {
2342
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
2343
- }
2344
- return isVertical ? {
2345
- x: crossAxis * crossAxisMulti,
2346
- y: mainAxis * mainAxisMulti
2347
- } : {
2348
- x: mainAxis * mainAxisMulti,
2349
- y: crossAxis * crossAxisMulti
2350
- };
2351
- }
2352
-
2353
- /**
2354
- * Modifies the placement by translating the floating element along the
2355
- * specified axes.
2356
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
2357
- * object may be passed.
2358
- * @see https://floating-ui.com/docs/offset
2359
- */
2360
- const offset$1 = function (options) {
2361
- if (options === void 0) {
2362
- options = 0;
2363
- }
2364
- return {
2365
- name: 'offset',
2366
- options,
2367
- async fn(state) {
2368
- var _middlewareData$offse, _middlewareData$arrow;
2369
- const {
2370
- x,
2371
- y,
2372
- placement,
2373
- middlewareData
2374
- } = state;
2375
- const diffCoords = await convertValueToCoords(state, options);
2376
-
2377
- // If the placement is the same and the arrow caused an alignment offset
2378
- // then we don't need to change the positioning coordinates.
2379
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
2380
- return {};
2381
- }
2382
- return {
2383
- x: x + diffCoords.x,
2384
- y: y + diffCoords.y,
2385
- data: {
2386
- ...diffCoords,
2387
- placement
2388
- }
2389
- };
2390
- }
2391
- };
2392
- };
2393
-
2394
- /**
2395
- * Optimizes the visibility of the floating element by shifting it in order to
2396
- * keep it in view when it will overflow the clipping boundary.
2397
- * @see https://floating-ui.com/docs/shift
2398
- */
2399
- const shift$1 = function (options) {
2400
- if (options === void 0) {
2401
- options = {};
2402
- }
2403
- return {
2404
- name: 'shift',
2405
- options,
2406
- async fn(state) {
2407
- const {
2408
- x,
2409
- y,
2410
- placement
2411
- } = state;
2412
- const {
2413
- mainAxis: checkMainAxis = true,
2414
- crossAxis: checkCrossAxis = false,
2415
- limiter = {
2416
- fn: _ref => {
2417
- let {
2418
- x,
2419
- y
2420
- } = _ref;
2421
- return {
2422
- x,
2423
- y
2424
- };
2425
- }
2426
- },
2427
- ...detectOverflowOptions
2428
- } = evaluate(options, state);
2429
- const coords = {
2430
- x,
2431
- y
2432
- };
2433
- const overflow = await detectOverflow(state, detectOverflowOptions);
2434
- const crossAxis = getSideAxis(getSide(placement));
2435
- const mainAxis = getOppositeAxis(crossAxis);
2436
- let mainAxisCoord = coords[mainAxis];
2437
- let crossAxisCoord = coords[crossAxis];
2438
- if (checkMainAxis) {
2439
- const minSide = mainAxis === 'y' ? 'top' : 'left';
2440
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
2441
- const min = mainAxisCoord + overflow[minSide];
2442
- const max = mainAxisCoord - overflow[maxSide];
2443
- mainAxisCoord = clamp(min, mainAxisCoord, max);
2444
- }
2445
- if (checkCrossAxis) {
2446
- const minSide = crossAxis === 'y' ? 'top' : 'left';
2447
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
2448
- const min = crossAxisCoord + overflow[minSide];
2449
- const max = crossAxisCoord - overflow[maxSide];
2450
- crossAxisCoord = clamp(min, crossAxisCoord, max);
2451
- }
2452
- const limitedCoords = limiter.fn({
2453
- ...state,
2454
- [mainAxis]: mainAxisCoord,
2455
- [crossAxis]: crossAxisCoord
2456
- });
2457
- return {
2458
- ...limitedCoords,
2459
- data: {
2460
- x: limitedCoords.x - x,
2461
- y: limitedCoords.y - y,
2462
- enabled: {
2463
- [mainAxis]: checkMainAxis,
2464
- [crossAxis]: checkCrossAxis
2465
- }
2466
- }
2467
- };
2468
- }
2469
- };
2470
- };
2471
- /**
2472
- * Built-in `limiter` that will stop `shift()` at a certain point.
2473
- */
2474
- const limitShift$1 = function (options) {
2475
- if (options === void 0) {
2476
- options = {};
2477
- }
2478
- return {
2479
- options,
2480
- fn(state) {
2481
- const {
2482
- x,
2483
- y,
2484
- placement,
2485
- rects,
2486
- middlewareData
2487
- } = state;
2488
- const {
2489
- offset = 0,
2490
- mainAxis: checkMainAxis = true,
2491
- crossAxis: checkCrossAxis = true
2492
- } = evaluate(options, state);
2493
- const coords = {
2494
- x,
2495
- y
2496
- };
2497
- const crossAxis = getSideAxis(placement);
2498
- const mainAxis = getOppositeAxis(crossAxis);
2499
- let mainAxisCoord = coords[mainAxis];
2500
- let crossAxisCoord = coords[crossAxis];
2501
- const rawOffset = evaluate(offset, state);
2502
- const computedOffset = typeof rawOffset === 'number' ? {
2503
- mainAxis: rawOffset,
2504
- crossAxis: 0
2505
- } : {
2506
- mainAxis: 0,
2507
- crossAxis: 0,
2508
- ...rawOffset
2509
- };
2510
- if (checkMainAxis) {
2511
- const len = mainAxis === 'y' ? 'height' : 'width';
2512
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
2513
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
2514
- if (mainAxisCoord < limitMin) {
2515
- mainAxisCoord = limitMin;
2516
- } else if (mainAxisCoord > limitMax) {
2517
- mainAxisCoord = limitMax;
2518
- }
2519
- }
2520
- if (checkCrossAxis) {
2521
- var _middlewareData$offse, _middlewareData$offse2;
2522
- const len = mainAxis === 'y' ? 'width' : 'height';
2523
- const isOriginSide = ['top', 'left'].includes(getSide(placement));
2524
- const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
2525
- const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
2526
- if (crossAxisCoord < limitMin) {
2527
- crossAxisCoord = limitMin;
2528
- } else if (crossAxisCoord > limitMax) {
2529
- crossAxisCoord = limitMax;
2530
- }
2531
- }
2532
- return {
2533
- [mainAxis]: mainAxisCoord,
2534
- [crossAxis]: crossAxisCoord
2535
- };
2536
- }
2537
- };
2538
- };
2539
-
2540
- /**
2541
- * Provides data that allows you to change the size of the floating element —
2542
- * for instance, prevent it from overflowing the clipping boundary or match the
2543
- * width of the reference element.
2544
- * @see https://floating-ui.com/docs/size
2545
- */
2546
- const size$1 = function (options) {
2547
- if (options === void 0) {
2548
- options = {};
2549
- }
2550
- return {
2551
- name: 'size',
2552
- options,
2553
- async fn(state) {
2554
- var _state$middlewareData, _state$middlewareData2;
2555
- const {
2556
- placement,
2557
- rects,
2558
- platform,
2559
- elements
2560
- } = state;
2561
- const {
2562
- apply = () => {},
2563
- ...detectOverflowOptions
2564
- } = evaluate(options, state);
2565
- const overflow = await detectOverflow(state, detectOverflowOptions);
2566
- const side = getSide(placement);
2567
- const alignment = getAlignment(placement);
2568
- const isYAxis = getSideAxis(placement) === 'y';
2569
- const {
2570
- width,
2571
- height
2572
- } = rects.floating;
2573
- let heightSide;
2574
- let widthSide;
2575
- if (side === 'top' || side === 'bottom') {
2576
- heightSide = side;
2577
- widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
2578
- } else {
2579
- widthSide = side;
2580
- heightSide = alignment === 'end' ? 'top' : 'bottom';
2581
- }
2582
- const maximumClippingHeight = height - overflow.top - overflow.bottom;
2583
- const maximumClippingWidth = width - overflow.left - overflow.right;
2584
- const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
2585
- const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
2586
- const noShift = !state.middlewareData.shift;
2587
- let availableHeight = overflowAvailableHeight;
2588
- let availableWidth = overflowAvailableWidth;
2589
- if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
2590
- availableWidth = maximumClippingWidth;
2591
- }
2592
- if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
2593
- availableHeight = maximumClippingHeight;
2594
- }
2595
- if (noShift && !alignment) {
2596
- const xMin = max(overflow.left, 0);
2597
- const xMax = max(overflow.right, 0);
2598
- const yMin = max(overflow.top, 0);
2599
- const yMax = max(overflow.bottom, 0);
2600
- if (isYAxis) {
2601
- availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
2602
- } else {
2603
- availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
2604
- }
2605
- }
2606
- await apply({
2607
- ...state,
2608
- availableWidth,
2609
- availableHeight
2610
- });
2611
- const nextDimensions = await platform.getDimensions(elements.floating);
2612
- if (width !== nextDimensions.width || height !== nextDimensions.height) {
2613
- return {
2614
- reset: {
2615
- rects: true
2616
- }
2617
- };
2618
- }
2619
- return {};
2620
- }
2621
- };
2622
- };
2623
-
2624
- function hasWindow() {
2625
- return typeof window !== 'undefined';
2626
- }
2627
- function getNodeName(node) {
2628
- if (isNode(node)) {
2629
- return (node.nodeName || '').toLowerCase();
2630
- }
2631
- // Mocked nodes in testing environments may not be instances of Node. By
2632
- // returning `#document` an infinite loop won't occur.
2633
- // https://github.com/floating-ui/floating-ui/issues/2317
2634
- return '#document';
2635
- }
2636
- function getWindow(node) {
2637
- var _node$ownerDocument;
2638
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
2639
- }
2640
- function getDocumentElement(node) {
2641
- var _ref;
2642
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
2643
- }
2644
- function isNode(value) {
2645
- if (!hasWindow()) {
2646
- return false;
2647
- }
2648
- return value instanceof Node || value instanceof getWindow(value).Node;
2649
- }
2650
- function isElement(value) {
2651
- if (!hasWindow()) {
2652
- return false;
2653
- }
2654
- return value instanceof Element || value instanceof getWindow(value).Element;
2655
- }
2656
- function isHTMLElement(value) {
2657
- if (!hasWindow()) {
2658
- return false;
2659
- }
2660
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
2661
- }
2662
- function isShadowRoot(value) {
2663
- if (!hasWindow() || typeof ShadowRoot === 'undefined') {
2664
- return false;
2665
- }
2666
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
2667
- }
2668
- function isOverflowElement(element) {
2669
- const {
2670
- overflow,
2671
- overflowX,
2672
- overflowY,
2673
- display
2674
- } = getComputedStyle$1(element);
2675
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
2676
- }
2677
- function isTableElement(element) {
2678
- return ['table', 'td', 'th'].includes(getNodeName(element));
2679
- }
2680
- function isTopLayer(element) {
2681
- return [':popover-open', ':modal'].some(selector => {
2682
- try {
2683
- return element.matches(selector);
2684
- } catch (e) {
2685
- return false;
2686
- }
2687
- });
2688
- }
2689
- function isContainingBlock(elementOrCss) {
2690
- const webkit = isWebKit();
2691
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
2692
-
2693
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
2694
- // https://drafts.csswg.org/css-transforms-2/#individual-transforms
2695
- return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
2696
- }
2697
- function getContainingBlock(element) {
2698
- let currentNode = getParentNode(element);
2699
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
2700
- if (isContainingBlock(currentNode)) {
2701
- return currentNode;
2702
- } else if (isTopLayer(currentNode)) {
2703
- return null;
2704
- }
2705
- currentNode = getParentNode(currentNode);
2706
- }
2707
- return null;
2708
- }
2709
- function isWebKit() {
2710
- if (typeof CSS === 'undefined' || !CSS.supports) return false;
2711
- return CSS.supports('-webkit-backdrop-filter', 'none');
2712
- }
2713
- function isLastTraversableNode(node) {
2714
- return ['html', 'body', '#document'].includes(getNodeName(node));
2715
- }
2716
- function getComputedStyle$1(element) {
2717
- return getWindow(element).getComputedStyle(element);
2718
- }
2719
- function getNodeScroll(element) {
2720
- if (isElement(element)) {
2721
- return {
2722
- scrollLeft: element.scrollLeft,
2723
- scrollTop: element.scrollTop
2724
- };
2725
- }
2726
- return {
2727
- scrollLeft: element.scrollX,
2728
- scrollTop: element.scrollY
2729
- };
2730
- }
2731
- function getParentNode(node) {
2732
- if (getNodeName(node) === 'html') {
2733
- return node;
2734
- }
2735
- const result =
2736
- // Step into the shadow DOM of the parent of a slotted node.
2737
- node.assignedSlot ||
2738
- // DOM Element detected.
2739
- node.parentNode ||
2740
- // ShadowRoot detected.
2741
- isShadowRoot(node) && node.host ||
2742
- // Fallback.
2743
- getDocumentElement(node);
2744
- return isShadowRoot(result) ? result.host : result;
2745
- }
2746
- function getNearestOverflowAncestor(node) {
2747
- const parentNode = getParentNode(node);
2748
- if (isLastTraversableNode(parentNode)) {
2749
- return node.ownerDocument ? node.ownerDocument.body : node.body;
2750
- }
2751
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
2752
- return parentNode;
2753
- }
2754
- return getNearestOverflowAncestor(parentNode);
2755
- }
2756
- function getOverflowAncestors(node, list, traverseIframes) {
2757
- var _node$ownerDocument2;
2758
- if (list === void 0) {
2759
- list = [];
2760
- }
2761
- if (traverseIframes === void 0) {
2762
- traverseIframes = true;
2763
- }
2764
- const scrollableAncestor = getNearestOverflowAncestor(node);
2765
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
2766
- const win = getWindow(scrollableAncestor);
2767
- if (isBody) {
2768
- const frameElement = getFrameElement(win);
2769
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
2770
- }
2771
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
2772
- }
2773
- function getFrameElement(win) {
2774
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
2775
- }
2776
-
2777
- function getCssDimensions(element) {
2778
- const css = getComputedStyle$1(element);
2779
- // In testing environments, the `width` and `height` properties are empty
2780
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
2781
- let width = parseFloat(css.width) || 0;
2782
- let height = parseFloat(css.height) || 0;
2783
- const hasOffset = isHTMLElement(element);
2784
- const offsetWidth = hasOffset ? element.offsetWidth : width;
2785
- const offsetHeight = hasOffset ? element.offsetHeight : height;
2786
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
2787
- if (shouldFallback) {
2788
- width = offsetWidth;
2789
- height = offsetHeight;
2790
- }
2791
- return {
2792
- width,
2793
- height,
2794
- $: shouldFallback
2795
- };
2796
- }
2797
-
2798
- function unwrapElement(element) {
2799
- return !isElement(element) ? element.contextElement : element;
2800
- }
2801
-
2802
- function getScale(element) {
2803
- const domElement = unwrapElement(element);
2804
- if (!isHTMLElement(domElement)) {
2805
- return createCoords(1);
2806
- }
2807
- const rect = domElement.getBoundingClientRect();
2808
- const {
2809
- width,
2810
- height,
2811
- $
2812
- } = getCssDimensions(domElement);
2813
- let x = ($ ? round(rect.width) : rect.width) / width;
2814
- let y = ($ ? round(rect.height) : rect.height) / height;
2815
-
2816
- // 0, NaN, or Infinity should always fallback to 1.
2817
-
2818
- if (!x || !Number.isFinite(x)) {
2819
- x = 1;
2820
- }
2821
- if (!y || !Number.isFinite(y)) {
2822
- y = 1;
2823
- }
2824
- return {
2825
- x,
2826
- y
2827
- };
2828
- }
2829
-
2830
- const noOffsets = /*#__PURE__*/createCoords(0);
2831
- function getVisualOffsets(element) {
2832
- const win = getWindow(element);
2833
- if (!isWebKit() || !win.visualViewport) {
2834
- return noOffsets;
2835
- }
2836
- return {
2837
- x: win.visualViewport.offsetLeft,
2838
- y: win.visualViewport.offsetTop
2839
- };
2840
- }
2841
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
2842
- if (isFixed === void 0) {
2843
- isFixed = false;
2844
- }
2845
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
2846
- return false;
2847
- }
2848
- return isFixed;
2849
- }
2850
-
2851
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
2852
- if (includeScale === void 0) {
2853
- includeScale = false;
2854
- }
2855
- if (isFixedStrategy === void 0) {
2856
- isFixedStrategy = false;
2857
- }
2858
- const clientRect = element.getBoundingClientRect();
2859
- const domElement = unwrapElement(element);
2860
- let scale = createCoords(1);
2861
- if (includeScale) {
2862
- if (offsetParent) {
2863
- if (isElement(offsetParent)) {
2864
- scale = getScale(offsetParent);
2865
- }
2866
- } else {
2867
- scale = getScale(element);
2868
- }
2869
- }
2870
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
2871
- let x = (clientRect.left + visualOffsets.x) / scale.x;
2872
- let y = (clientRect.top + visualOffsets.y) / scale.y;
2873
- let width = clientRect.width / scale.x;
2874
- let height = clientRect.height / scale.y;
2875
- if (domElement) {
2876
- const win = getWindow(domElement);
2877
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
2878
- let currentWin = win;
2879
- let currentIFrame = getFrameElement(currentWin);
2880
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
2881
- const iframeScale = getScale(currentIFrame);
2882
- const iframeRect = currentIFrame.getBoundingClientRect();
2883
- const css = getComputedStyle$1(currentIFrame);
2884
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
2885
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
2886
- x *= iframeScale.x;
2887
- y *= iframeScale.y;
2888
- width *= iframeScale.x;
2889
- height *= iframeScale.y;
2890
- x += left;
2891
- y += top;
2892
- currentWin = getWindow(currentIFrame);
2893
- currentIFrame = getFrameElement(currentWin);
2894
- }
2895
- }
2896
- return rectToClientRect({
2897
- width,
2898
- height,
2899
- x,
2900
- y
2901
- });
2902
- }
2903
-
2904
- // If <html> has a CSS width greater than the viewport, then this will be
2905
- // incorrect for RTL.
2906
- function getWindowScrollBarX(element, rect) {
2907
- const leftScroll = getNodeScroll(element).scrollLeft;
2908
- if (!rect) {
2909
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
2910
- }
2911
- return rect.left + leftScroll;
2912
- }
2913
-
2914
- function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
2915
- if (ignoreScrollbarX === void 0) {
2916
- ignoreScrollbarX = false;
2917
- }
2918
- const htmlRect = documentElement.getBoundingClientRect();
2919
- const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
2920
- // RTL <body> scrollbar.
2921
- getWindowScrollBarX(documentElement, htmlRect));
2922
- const y = htmlRect.top + scroll.scrollTop;
2923
- return {
2924
- x,
2925
- y
2926
- };
2927
- }
2928
-
2929
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
2930
- let {
2931
- elements,
2932
- rect,
2933
- offsetParent,
2934
- strategy
2935
- } = _ref;
2936
- const isFixed = strategy === 'fixed';
2937
- const documentElement = getDocumentElement(offsetParent);
2938
- const topLayer = elements ? isTopLayer(elements.floating) : false;
2939
- if (offsetParent === documentElement || topLayer && isFixed) {
2940
- return rect;
2941
- }
2942
- let scroll = {
2943
- scrollLeft: 0,
2944
- scrollTop: 0
2945
- };
2946
- let scale = createCoords(1);
2947
- const offsets = createCoords(0);
2948
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
2949
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
2950
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
2951
- scroll = getNodeScroll(offsetParent);
2952
- }
2953
- if (isHTMLElement(offsetParent)) {
2954
- const offsetRect = getBoundingClientRect(offsetParent);
2955
- scale = getScale(offsetParent);
2956
- offsets.x = offsetRect.x + offsetParent.clientLeft;
2957
- offsets.y = offsetRect.y + offsetParent.clientTop;
2958
- }
2959
- }
2960
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
2961
- return {
2962
- width: rect.width * scale.x,
2963
- height: rect.height * scale.y,
2964
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
2965
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
2966
- };
2967
- }
2968
-
2969
- function getClientRects(element) {
2970
- return Array.from(element.getClientRects());
2971
- }
2972
-
2973
- // Gets the entire size of the scrollable document area, even extending outside
2974
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
2975
- function getDocumentRect(element) {
2976
- const html = getDocumentElement(element);
2977
- const scroll = getNodeScroll(element);
2978
- const body = element.ownerDocument.body;
2979
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
2980
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
2981
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
2982
- const y = -scroll.scrollTop;
2983
- if (getComputedStyle$1(body).direction === 'rtl') {
2984
- x += max(html.clientWidth, body.clientWidth) - width;
2985
- }
2986
- return {
2987
- width,
2988
- height,
2989
- x,
2990
- y
2991
- };
2992
- }
2993
-
2994
- function getViewportRect(element, strategy) {
2995
- const win = getWindow(element);
2996
- const html = getDocumentElement(element);
2997
- const visualViewport = win.visualViewport;
2998
- let width = html.clientWidth;
2999
- let height = html.clientHeight;
3000
- let x = 0;
3001
- let y = 0;
3002
- if (visualViewport) {
3003
- width = visualViewport.width;
3004
- height = visualViewport.height;
3005
- const visualViewportBased = isWebKit();
3006
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
3007
- x = visualViewport.offsetLeft;
3008
- y = visualViewport.offsetTop;
3009
- }
3010
- }
3011
- return {
3012
- width,
3013
- height,
3014
- x,
3015
- y
3016
- };
3017
- }
3018
-
3019
- // Returns the inner client rect, subtracting scrollbars if present.
3020
- function getInnerBoundingClientRect(element, strategy) {
3021
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
3022
- const top = clientRect.top + element.clientTop;
3023
- const left = clientRect.left + element.clientLeft;
3024
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
3025
- const width = element.clientWidth * scale.x;
3026
- const height = element.clientHeight * scale.y;
3027
- const x = left * scale.x;
3028
- const y = top * scale.y;
3029
- return {
3030
- width,
3031
- height,
3032
- x,
3033
- y
3034
- };
3035
- }
3036
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
3037
- let rect;
3038
- if (clippingAncestor === 'viewport') {
3039
- rect = getViewportRect(element, strategy);
3040
- } else if (clippingAncestor === 'document') {
3041
- rect = getDocumentRect(getDocumentElement(element));
3042
- } else if (isElement(clippingAncestor)) {
3043
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
3044
- } else {
3045
- const visualOffsets = getVisualOffsets(element);
3046
- rect = {
3047
- x: clippingAncestor.x - visualOffsets.x,
3048
- y: clippingAncestor.y - visualOffsets.y,
3049
- width: clippingAncestor.width,
3050
- height: clippingAncestor.height
3051
- };
3052
- }
3053
- return rectToClientRect(rect);
3054
- }
3055
- function hasFixedPositionAncestor(element, stopNode) {
3056
- const parentNode = getParentNode(element);
3057
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
3058
- return false;
3059
- }
3060
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
3061
- }
3062
-
3063
- // A "clipping ancestor" is an `overflow` element with the characteristic of
3064
- // clipping (or hiding) child elements. This returns all clipping ancestors
3065
- // of the given element up the tree.
3066
- function getClippingElementAncestors(element, cache) {
3067
- const cachedResult = cache.get(element);
3068
- if (cachedResult) {
3069
- return cachedResult;
3070
- }
3071
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
3072
- let currentContainingBlockComputedStyle = null;
3073
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
3074
- let currentNode = elementIsFixed ? getParentNode(element) : element;
3075
-
3076
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
3077
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
3078
- const computedStyle = getComputedStyle$1(currentNode);
3079
- const currentNodeIsContaining = isContainingBlock(currentNode);
3080
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
3081
- currentContainingBlockComputedStyle = null;
3082
- }
3083
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
3084
- if (shouldDropCurrentNode) {
3085
- // Drop non-containing blocks.
3086
- result = result.filter(ancestor => ancestor !== currentNode);
3087
- } else {
3088
- // Record last containing block for next iteration.
3089
- currentContainingBlockComputedStyle = computedStyle;
3090
- }
3091
- currentNode = getParentNode(currentNode);
3092
- }
3093
- cache.set(element, result);
3094
- return result;
3095
- }
3096
-
3097
- // Gets the maximum area that the element is visible in due to any number of
3098
- // clipping ancestors.
3099
- function getClippingRect(_ref) {
3100
- let {
3101
- element,
3102
- boundary,
3103
- rootBoundary,
3104
- strategy
3105
- } = _ref;
3106
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
3107
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
3108
- const firstClippingAncestor = clippingAncestors[0];
3109
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
3110
- const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
3111
- accRect.top = max(rect.top, accRect.top);
3112
- accRect.right = min(rect.right, accRect.right);
3113
- accRect.bottom = min(rect.bottom, accRect.bottom);
3114
- accRect.left = max(rect.left, accRect.left);
3115
- return accRect;
3116
- }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
3117
- return {
3118
- width: clippingRect.right - clippingRect.left,
3119
- height: clippingRect.bottom - clippingRect.top,
3120
- x: clippingRect.left,
3121
- y: clippingRect.top
3122
- };
3123
- }
3124
-
3125
- function getDimensions(element) {
3126
- const {
3127
- width,
3128
- height
3129
- } = getCssDimensions(element);
3130
- return {
3131
- width,
3132
- height
3133
- };
3134
- }
3135
-
3136
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
3137
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
3138
- const documentElement = getDocumentElement(offsetParent);
3139
- const isFixed = strategy === 'fixed';
3140
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
3141
- let scroll = {
3142
- scrollLeft: 0,
3143
- scrollTop: 0
3144
- };
3145
- const offsets = createCoords(0);
3146
-
3147
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
3148
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
3149
- function setLeftRTLScrollbarOffset() {
3150
- offsets.x = getWindowScrollBarX(documentElement);
3151
- }
3152
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
3153
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
3154
- scroll = getNodeScroll(offsetParent);
3155
- }
3156
- if (isOffsetParentAnElement) {
3157
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
3158
- offsets.x = offsetRect.x + offsetParent.clientLeft;
3159
- offsets.y = offsetRect.y + offsetParent.clientTop;
3160
- } else if (documentElement) {
3161
- setLeftRTLScrollbarOffset();
3162
- }
3163
- }
3164
- if (isFixed && !isOffsetParentAnElement && documentElement) {
3165
- setLeftRTLScrollbarOffset();
3166
- }
3167
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
3168
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
3169
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
3170
- return {
3171
- x,
3172
- y,
3173
- width: rect.width,
3174
- height: rect.height
3175
- };
3176
- }
3177
-
3178
- function isStaticPositioned(element) {
3179
- return getComputedStyle$1(element).position === 'static';
3180
- }
3181
-
3182
- function getTrueOffsetParent(element, polyfill) {
3183
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
3184
- return null;
3185
- }
3186
- if (polyfill) {
3187
- return polyfill(element);
3188
- }
3189
- let rawOffsetParent = element.offsetParent;
3190
-
3191
- // Firefox returns the <html> element as the offsetParent if it's non-static,
3192
- // while Chrome and Safari return the <body> element. The <body> element must
3193
- // be used to perform the correct calculations even if the <html> element is
3194
- // non-static.
3195
- if (getDocumentElement(element) === rawOffsetParent) {
3196
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
3197
- }
3198
- return rawOffsetParent;
3199
- }
3200
-
3201
- // Gets the closest ancestor positioned element. Handles some edge cases,
3202
- // such as table ancestors and cross browser bugs.
3203
- function getOffsetParent(element, polyfill) {
3204
- const win = getWindow(element);
3205
- if (isTopLayer(element)) {
3206
- return win;
3207
- }
3208
- if (!isHTMLElement(element)) {
3209
- let svgOffsetParent = getParentNode(element);
3210
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
3211
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
3212
- return svgOffsetParent;
3213
- }
3214
- svgOffsetParent = getParentNode(svgOffsetParent);
3215
- }
3216
- return win;
3217
- }
3218
- let offsetParent = getTrueOffsetParent(element, polyfill);
3219
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
3220
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
3221
- }
3222
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
3223
- return win;
3224
- }
3225
- return offsetParent || getContainingBlock(element) || win;
3226
- }
3227
-
3228
- const getElementRects = async function (data) {
3229
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
3230
- const getDimensionsFn = this.getDimensions;
3231
- const floatingDimensions = await getDimensionsFn(data.floating);
3232
- return {
3233
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
3234
- floating: {
3235
- x: 0,
3236
- y: 0,
3237
- width: floatingDimensions.width,
3238
- height: floatingDimensions.height
3239
- }
3240
- };
3241
- };
3242
-
3243
- function isRTL(element) {
3244
- return getComputedStyle$1(element).direction === 'rtl';
3245
- }
3246
-
3247
- const platform = {
3248
- convertOffsetParentRelativeRectToViewportRelativeRect,
3249
- getDocumentElement,
3250
- getClippingRect,
3251
- getOffsetParent,
3252
- getElementRects,
3253
- getClientRects,
3254
- getDimensions,
3255
- getScale,
3256
- isElement,
3257
- isRTL
3258
- };
3259
-
3260
- function rectsAreEqual(a, b) {
3261
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
3262
- }
3263
-
3264
- // https://samthor.au/2021/observing-dom/
3265
- function observeMove(element, onMove) {
3266
- let io = null;
3267
- let timeoutId;
3268
- const root = getDocumentElement(element);
3269
- function cleanup() {
3270
- var _io;
3271
- clearTimeout(timeoutId);
3272
- (_io = io) == null || _io.disconnect();
3273
- io = null;
3274
- }
3275
- function refresh(skip, threshold) {
3276
- if (skip === void 0) {
3277
- skip = false;
3278
- }
3279
- if (threshold === void 0) {
3280
- threshold = 1;
3281
- }
3282
- cleanup();
3283
- const elementRectForRootMargin = element.getBoundingClientRect();
3284
- const {
3285
- left,
3286
- top,
3287
- width,
3288
- height
3289
- } = elementRectForRootMargin;
3290
- if (!skip) {
3291
- onMove();
3292
- }
3293
- if (!width || !height) {
3294
- return;
3295
- }
3296
- const insetTop = floor(top);
3297
- const insetRight = floor(root.clientWidth - (left + width));
3298
- const insetBottom = floor(root.clientHeight - (top + height));
3299
- const insetLeft = floor(left);
3300
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
3301
- const options = {
3302
- rootMargin,
3303
- threshold: max(0, min(1, threshold)) || 1
3304
- };
3305
- let isFirstUpdate = true;
3306
- function handleObserve(entries) {
3307
- const ratio = entries[0].intersectionRatio;
3308
- if (ratio !== threshold) {
3309
- if (!isFirstUpdate) {
3310
- return refresh();
3311
- }
3312
- if (!ratio) {
3313
- // If the reference is clipped, the ratio is 0. Throttle the refresh
3314
- // to prevent an infinite loop of updates.
3315
- timeoutId = setTimeout(() => {
3316
- refresh(false, 1e-7);
3317
- }, 1000);
3318
- } else {
3319
- refresh(false, ratio);
3320
- }
3321
- }
3322
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
3323
- // It's possible that even though the ratio is reported as 1, the
3324
- // element is not actually fully within the IntersectionObserver's root
3325
- // area anymore. This can happen under performance constraints. This may
3326
- // be a bug in the browser's IntersectionObserver implementation. To
3327
- // work around this, we compare the element's bounding rect now with
3328
- // what it was at the time we created the IntersectionObserver. If they
3329
- // are not equal then the element moved, so we refresh.
3330
- refresh();
3331
- }
3332
- isFirstUpdate = false;
3333
- }
3334
-
3335
- // Older browsers don't support a `document` as the root and will throw an
3336
- // error.
3337
- try {
3338
- io = new IntersectionObserver(handleObserve, {
3339
- ...options,
3340
- // Handle <iframe>s
3341
- root: root.ownerDocument
3342
- });
3343
- } catch (_e) {
3344
- io = new IntersectionObserver(handleObserve, options);
3345
- }
3346
- io.observe(element);
3347
- }
3348
- refresh(true);
3349
- return cleanup;
3350
- }
3351
-
3352
- /**
3353
- * Automatically updates the position of the floating element when necessary.
3354
- * Should only be called when the floating element is mounted on the DOM or
3355
- * visible on the screen.
3356
- * @returns cleanup function that should be invoked when the floating element is
3357
- * removed from the DOM or hidden from the screen.
3358
- * @see https://floating-ui.com/docs/autoUpdate
3359
- */
3360
- function autoUpdate(reference, floating, update, options) {
3361
- if (options === void 0) {
3362
- options = {};
3363
- }
3364
- const {
3365
- ancestorScroll = true,
3366
- ancestorResize = true,
3367
- elementResize = typeof ResizeObserver === 'function',
3368
- layoutShift = typeof IntersectionObserver === 'function',
3369
- animationFrame = false
3370
- } = options;
3371
- const referenceEl = unwrapElement(reference);
3372
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
3373
- ancestors.forEach(ancestor => {
3374
- ancestorScroll && ancestor.addEventListener('scroll', update, {
3375
- passive: true
3376
- });
3377
- ancestorResize && ancestor.addEventListener('resize', update);
3378
- });
3379
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
3380
- let reobserveFrame = -1;
3381
- let resizeObserver = null;
3382
- if (elementResize) {
3383
- resizeObserver = new ResizeObserver(_ref => {
3384
- let [firstEntry] = _ref;
3385
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
3386
- // Prevent update loops when using the `size` middleware.
3387
- // https://github.com/floating-ui/floating-ui/issues/1740
3388
- resizeObserver.unobserve(floating);
3389
- cancelAnimationFrame(reobserveFrame);
3390
- reobserveFrame = requestAnimationFrame(() => {
3391
- var _resizeObserver;
3392
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
3393
- });
3394
- }
3395
- update();
3396
- });
3397
- if (referenceEl && !animationFrame) {
3398
- resizeObserver.observe(referenceEl);
3399
- }
3400
- resizeObserver.observe(floating);
3401
- }
3402
- let frameId;
3403
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
3404
- if (animationFrame) {
3405
- frameLoop();
3406
- }
3407
- function frameLoop() {
3408
- const nextRefRect = getBoundingClientRect(reference);
3409
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
3410
- update();
3411
- }
3412
- prevRefRect = nextRefRect;
3413
- frameId = requestAnimationFrame(frameLoop);
3414
- }
3415
- update();
3416
- return () => {
3417
- var _resizeObserver2;
3418
- ancestors.forEach(ancestor => {
3419
- ancestorScroll && ancestor.removeEventListener('scroll', update);
3420
- ancestorResize && ancestor.removeEventListener('resize', update);
3421
- });
3422
- cleanupIo == null || cleanupIo();
3423
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
3424
- resizeObserver = null;
3425
- if (animationFrame) {
3426
- cancelAnimationFrame(frameId);
3427
- }
3428
- };
3429
- }
3430
-
3431
- /**
3432
- * Modifies the placement by translating the floating element along the
3433
- * specified axes.
3434
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
3435
- * object may be passed.
3436
- * @see https://floating-ui.com/docs/offset
3437
- */
3438
- const offset = offset$1;
3439
-
3440
- /**
3441
- * Optimizes the visibility of the floating element by choosing the placement
3442
- * that has the most space available automatically, without needing to specify a
3443
- * preferred placement. Alternative to `flip`.
3444
- * @see https://floating-ui.com/docs/autoPlacement
3445
- */
3446
- autoPlacement;
3447
-
3448
- /**
3449
- * Optimizes the visibility of the floating element by shifting it in order to
3450
- * keep it in view when it will overflow the clipping boundary.
3451
- * @see https://floating-ui.com/docs/shift
3452
- */
3453
- const shift = shift$1;
3454
-
3455
- /**
3456
- * Optimizes the visibility of the floating element by flipping the `placement`
3457
- * in order to keep it in view when the preferred placement(s) will overflow the
3458
- * clipping boundary. Alternative to `autoPlacement`.
3459
- * @see https://floating-ui.com/docs/flip
3460
- */
3461
- const flip = flip$1;
3462
-
3463
- /**
3464
- * Provides data that allows you to change the size of the floating element —
3465
- * for instance, prevent it from overflowing the clipping boundary or match the
3466
- * width of the reference element.
3467
- * @see https://floating-ui.com/docs/size
3468
- */
3469
- const size = size$1;
3470
-
3471
- /**
3472
- * Provides data to hide the floating element in applicable situations, such as
3473
- * when it is not in the same clipping context as the reference element.
3474
- * @see https://floating-ui.com/docs/hide
3475
- */
3476
- hide;
3477
-
3478
- /**
3479
- * Provides data to position an inner element of the floating element so that it
3480
- * appears centered to the reference element.
3481
- * @see https://floating-ui.com/docs/arrow
3482
- */
3483
- const arrow = arrow$1;
3484
-
3485
- /**
3486
- * Provides improved positioning for inline reference elements that can span
3487
- * over multiple lines, such as hyperlinks or range selections.
3488
- * @see https://floating-ui.com/docs/inline
3489
- */
3490
- const inline = inline$1;
3491
-
3492
- /**
3493
- * Built-in `limiter` that will stop `shift()` at a certain point.
3494
- */
3495
- const limitShift = limitShift$1;
3496
-
3497
- /**
3498
- * Computes the `x` and `y` coordinates that will place the floating element
3499
- * next to a given reference element.
3500
- */
3501
- const computePosition = (reference, floating, options) => {
3502
- // This caches the expensive `getClippingElementAncestors` function so that
3503
- // multiple lifecycle resets re-use the same result. It only lives for a
3504
- // single call. If other functions become expensive, we can add them as well.
3505
- const cache = new Map();
3506
- const mergedOptions = {
3507
- platform,
3508
- ...options
3509
- };
3510
- const platformWithCache = {
3511
- ...mergedOptions.platform,
3512
- _c: cache
3513
- };
3514
- return computePosition$1(reference, floating, {
3515
- ...mergedOptions,
3516
- platform: platformWithCache
3517
- });
3518
- };
3519
-
3520
- // src/events.ts
3521
- var ToggleEvent = class extends Event {
3522
- oldState;
3523
- newState;
3524
- constructor(type, { oldState = "", newState = "", ...init } = {}) {
3525
- super(type, init);
3526
- this.oldState = String(oldState || "");
3527
- this.newState = String(newState || "");
3528
- }
3529
- };
3530
- var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
3531
- function queuePopoverToggleEventTask(element, oldState, newState) {
3532
- popoverToggleTaskQueue.set(
3533
- element,
3534
- setTimeout(() => {
3535
- if (!popoverToggleTaskQueue.has(element)) return;
3536
- element.dispatchEvent(
3537
- new ToggleEvent("toggle", {
3538
- cancelable: false,
3539
- oldState,
3540
- newState
3541
- })
3542
- );
3543
- }, 0)
3544
- );
3545
- }
3546
-
3547
- // src/popover-helpers.ts
3548
- var ShadowRoot$1 = globalThis.ShadowRoot || function() {
3549
- };
3550
- var HTMLDialogElement = globalThis.HTMLDialogElement || function() {
3551
- };
3552
- var topLayerElements = /* @__PURE__ */ new WeakMap();
3553
- var autoPopoverList = /* @__PURE__ */ new WeakMap();
3554
- var visibilityState = /* @__PURE__ */ new WeakMap();
3555
- function getPopoverVisibilityState(popover) {
3556
- return visibilityState.get(popover) || "hidden";
3557
- }
3558
- var popoverInvoker = /* @__PURE__ */ new WeakMap();
3559
- function popoverTargetAttributeActivationBehavior(element) {
3560
- const popover = element.popoverTargetElement;
3561
- if (!(popover instanceof HTMLElement)) {
3562
- return;
3563
- }
3564
- const visibility = getPopoverVisibilityState(popover);
3565
- if (element.popoverTargetAction === "show" && visibility === "showing") {
3566
- return;
3567
- }
3568
- if (element.popoverTargetAction === "hide" && visibility === "hidden") return;
3569
- if (visibility === "showing") {
3570
- hidePopover(popover, true, true);
3571
- } else if (checkPopoverValidity(popover, false)) {
3572
- popoverInvoker.set(popover, element);
3573
- showPopover(popover);
3574
- }
3575
- }
3576
- function checkPopoverValidity(element, expectedToBeShowing) {
3577
- if (element.popover !== "auto" && element.popover !== "manual") {
3578
- return false;
3579
- }
3580
- if (!element.isConnected) return false;
3581
- if (expectedToBeShowing && getPopoverVisibilityState(element) !== "showing") {
3582
- return false;
3583
- }
3584
- if (!expectedToBeShowing && getPopoverVisibilityState(element) !== "hidden") {
3585
- return false;
3586
- }
3587
- if (element instanceof HTMLDialogElement && element.hasAttribute("open")) {
3588
- return false;
3589
- }
3590
- if (document.fullscreenElement === element) return false;
3591
- return true;
3592
- }
3593
- function getStackPosition(popover) {
3594
- if (!popover) return 0;
3595
- return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(
3596
- popover
3597
- ) + 1;
3598
- }
3599
- function topMostClickedPopover(target) {
3600
- const clickedPopover = nearestInclusiveOpenPopover(target);
3601
- const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
3602
- if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
3603
- return clickedPopover;
3604
- }
3605
- return invokerPopover;
3606
- }
3607
- function topMostAutoPopover(document2) {
3608
- const documentPopovers = autoPopoverList.get(document2);
3609
- for (const popover of documentPopovers || []) {
3610
- if (!popover.isConnected) {
3611
- documentPopovers.delete(popover);
3612
- } else {
3613
- return popover;
3614
- }
3615
- }
3616
- return null;
3617
- }
3618
- function getRootNode(node) {
3619
- if (typeof node.getRootNode === "function") {
3620
- return node.getRootNode();
3621
- }
3622
- if (node.parentNode) return getRootNode(node.parentNode);
3623
- return node;
3624
- }
3625
- function nearestInclusiveOpenPopover(node) {
3626
- while (node) {
3627
- if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
3628
- return node;
3629
- }
3630
- node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode(node);
3631
- if (node instanceof ShadowRoot$1) node = node.host;
3632
- if (node instanceof Document) return;
3633
- }
3634
- }
3635
- function nearestInclusiveTargetPopoverForInvoker(node) {
3636
- while (node) {
3637
- const nodePopover = node.popoverTargetElement;
3638
- if (nodePopover instanceof HTMLElement) return nodePopover;
3639
- node = node.parentElement || getRootNode(node);
3640
- if (node instanceof ShadowRoot$1) node = node.host;
3641
- if (node instanceof Document) return;
3642
- }
3643
- }
3644
- function topMostPopoverAncestor(newPopover) {
3645
- const popoverPositions = /* @__PURE__ */ new Map();
3646
- let i = 0;
3647
- for (const popover of autoPopoverList.get(newPopover.ownerDocument) || []) {
3648
- popoverPositions.set(popover, i);
3649
- i += 1;
3650
- }
3651
- popoverPositions.set(newPopover, i);
3652
- i += 1;
3653
- let topMostPopoverAncestor2 = null;
3654
- function checkAncestor(candidate) {
3655
- const candidateAncestor = nearestInclusiveOpenPopover(candidate);
3656
- if (candidateAncestor === null) return null;
3657
- const candidatePosition = popoverPositions.get(candidateAncestor);
3658
- if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) {
3659
- topMostPopoverAncestor2 = candidateAncestor;
3660
- }
3661
- }
3662
- checkAncestor(newPopover.parentElement || getRootNode(newPopover));
3663
- return topMostPopoverAncestor2;
3664
- }
3665
- function isFocusable(focusTarget) {
3666
- if (focusTarget.hidden || focusTarget instanceof ShadowRoot$1) return false;
3667
- if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
3668
- if (focusTarget.disabled) return false;
3669
- }
3670
- if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") {
3671
- return false;
3672
- }
3673
- if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") {
3674
- return false;
3675
- }
3676
- return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
3677
- }
3678
- function focusDelegate(focusTarget) {
3679
- if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) {
3680
- return null;
3681
- }
3682
- let whereToLook = focusTarget;
3683
- if (whereToLook.shadowRoot) {
3684
- whereToLook = whereToLook.shadowRoot;
3685
- }
3686
- let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
3687
- if (autoFocusDelegate) {
3688
- return autoFocusDelegate;
3689
- } else {
3690
- const slots = whereToLook.querySelectorAll("slot");
3691
- for (const slot of slots) {
3692
- const assignedElements = slot.assignedElements({ flatten: true });
3693
- for (const el of assignedElements) {
3694
- if (el.hasAttribute("autofocus")) {
3695
- return el;
3696
- } else {
3697
- autoFocusDelegate = el.querySelector("[autofocus]");
3698
- if (autoFocusDelegate) {
3699
- return autoFocusDelegate;
3700
- }
3701
- }
3702
- }
3703
- }
3704
- }
3705
- const walker = focusTarget.ownerDocument.createTreeWalker(
3706
- whereToLook,
3707
- NodeFilter.SHOW_ELEMENT
3708
- );
3709
- let descendant = walker.currentNode;
3710
- while (descendant) {
3711
- if (isFocusable(descendant)) {
3712
- return descendant;
3713
- }
3714
- descendant = walker.nextNode();
3715
- }
3716
- }
3717
- function popoverFocusingSteps(subject) {
3718
- focusDelegate(subject)?.focus();
3719
- }
3720
- var previouslyFocusedElements = /* @__PURE__ */ new WeakMap();
3721
- function showPopover(element) {
3722
- if (!checkPopoverValidity(element, false)) {
3723
- return;
3724
- }
3725
- const document2 = element.ownerDocument;
3726
- if (!element.dispatchEvent(
3727
- new ToggleEvent("beforetoggle", {
3728
- cancelable: true,
3729
- oldState: "closed",
3730
- newState: "open"
3731
- })
3732
- )) {
3733
- return;
3734
- }
3735
- if (!checkPopoverValidity(element, false)) {
3736
- return;
3737
- }
3738
- let shouldRestoreFocus = false;
3739
- if (element.popover === "auto") {
3740
- const originalType = element.getAttribute("popover");
3741
- const ancestor = topMostPopoverAncestor(element) || document2;
3742
- hideAllPopoversUntil(ancestor, false, true);
3743
- if (originalType !== element.getAttribute("popover") || !checkPopoverValidity(element, false)) {
3744
- return;
3745
- }
3746
- }
3747
- if (!topMostAutoPopover(document2)) {
3748
- shouldRestoreFocus = true;
3749
- }
3750
- previouslyFocusedElements.delete(element);
3751
- const originallyFocusedElement = document2.activeElement;
3752
- element.classList.add(":popover-open");
3753
- visibilityState.set(element, "showing");
3754
- if (!topLayerElements.has(document2)) {
3755
- topLayerElements.set(document2, /* @__PURE__ */ new Set());
3756
- }
3757
- topLayerElements.get(document2).add(element);
3758
- popoverFocusingSteps(element);
3759
- if (element.popover === "auto") {
3760
- if (!autoPopoverList.has(document2)) {
3761
- autoPopoverList.set(document2, /* @__PURE__ */ new Set());
3762
- }
3763
- autoPopoverList.get(document2).add(element);
3764
- setInvokerAriaExpanded(popoverInvoker.get(element), true);
3765
- }
3766
- if (shouldRestoreFocus && originallyFocusedElement && element.popover === "auto") {
3767
- previouslyFocusedElements.set(element, originallyFocusedElement);
3768
- }
3769
- queuePopoverToggleEventTask(element, "closed", "open");
3770
- }
3771
- function hidePopover(element, focusPreviousElement = false, fireEvents = false) {
3772
- if (!checkPopoverValidity(element, true)) {
3773
- return;
3774
- }
3775
- const document2 = element.ownerDocument;
3776
- if (element.popover === "auto") {
3777
- hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
3778
- if (!checkPopoverValidity(element, true)) {
3779
- return;
3780
- }
3781
- }
3782
- setInvokerAriaExpanded(popoverInvoker.get(element), false);
3783
- popoverInvoker.delete(element);
3784
- if (fireEvents) {
3785
- element.dispatchEvent(
3786
- new ToggleEvent("beforetoggle", {
3787
- oldState: "open",
3788
- newState: "closed"
3789
- })
3790
- );
3791
- if (!checkPopoverValidity(element, true)) {
3792
- return;
3793
- }
3794
- }
3795
- topLayerElements.get(document2)?.delete(element);
3796
- autoPopoverList.get(document2)?.delete(element);
3797
- element.classList.remove(":popover-open");
3798
- visibilityState.set(element, "hidden");
3799
- if (fireEvents) {
3800
- queuePopoverToggleEventTask(element, "open", "closed");
3801
- }
3802
- const previouslyFocusedElement = previouslyFocusedElements.get(element);
3803
- if (previouslyFocusedElement) {
3804
- previouslyFocusedElements.delete(element);
3805
- if (focusPreviousElement) {
3806
- previouslyFocusedElement.focus();
3807
- }
3808
- }
3809
- }
3810
- function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
3811
- let popover = topMostAutoPopover(document2);
3812
- while (popover) {
3813
- hidePopover(popover, focusPreviousElement, fireEvents);
3814
- popover = topMostAutoPopover(document2);
3815
- }
3816
- }
3817
- function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
3818
- const document2 = endpoint.ownerDocument || endpoint;
3819
- if (endpoint instanceof Document) {
3820
- return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
3821
- }
3822
- let lastToHide = null;
3823
- let foundEndpoint = false;
3824
- for (const popover of autoPopoverList.get(document2) || []) {
3825
- if (popover === endpoint) {
3826
- foundEndpoint = true;
3827
- } else if (foundEndpoint) {
3828
- lastToHide = popover;
3829
- break;
3830
- }
3831
- }
3832
- if (!foundEndpoint) {
3833
- return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
3834
- }
3835
- while (lastToHide && getPopoverVisibilityState(lastToHide) === "showing" && autoPopoverList.get(document2)?.size) {
3836
- hidePopover(lastToHide, focusPreviousElement, fireEvents);
3837
- }
3838
- }
3839
- var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
3840
- function lightDismissOpenPopovers(event) {
3841
- if (!event.isTrusted) return;
3842
- const target = event.composedPath()[0];
3843
- if (!target) return;
3844
- const document2 = target.ownerDocument;
3845
- const topMostPopover = topMostAutoPopover(document2);
3846
- if (!topMostPopover) return;
3847
- const ancestor = topMostClickedPopover(target);
3848
- if (ancestor && event.type === "pointerdown") {
3849
- popoverPointerDownTargets.set(document2, ancestor);
3850
- } else if (event.type === "pointerup") {
3851
- const sameTarget = popoverPointerDownTargets.get(document2) === ancestor;
3852
- popoverPointerDownTargets.delete(document2);
3853
- if (sameTarget) {
3854
- hideAllPopoversUntil(ancestor || document2, false, true);
3855
- }
3856
- }
3857
- }
3858
- var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
3859
- function setInvokerAriaExpanded(el, force = false) {
3860
- if (!el) return;
3861
- if (!initialAriaExpandedValue.has(el)) {
3862
- initialAriaExpandedValue.set(el, el.getAttribute("aria-expanded"));
3863
- }
3864
- const popover = el.popoverTargetElement;
3865
- if (popover instanceof HTMLElement && popover.popover === "auto") {
3866
- el.setAttribute("aria-expanded", String(force));
3867
- } else {
3868
- const initialValue = initialAriaExpandedValue.get(el);
3869
- if (!initialValue) {
3870
- el.removeAttribute("aria-expanded");
3871
- } else {
3872
- el.setAttribute("aria-expanded", initialValue);
3873
- }
3874
- }
3875
- }
3876
-
3877
- // src/popover.ts
3878
- var ShadowRoot2 = globalThis.ShadowRoot || function() {
3879
- };
3880
- function isSupported() {
3881
- return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
3882
- }
3883
- function patchSelectorFn(object, name, mapper) {
3884
- const original = object[name];
3885
- Object.defineProperty(object, name, {
3886
- value(selector) {
3887
- return original.call(this, mapper(selector));
3888
- }
3889
- });
3890
- }
3891
- var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
3892
- function hasLayerSupport() {
3893
- return typeof globalThis.CSSLayerBlockRule === "function";
3894
- }
3895
- function getStyles() {
3896
- const useLayer = hasLayerSupport();
3897
- return `
3898
- ${useLayer ? "@layer popover-polyfill {" : ""}
3899
- :where([popover]) {
3900
- position: fixed;
3901
- z-index: 2147483647;
3902
- inset: 0;
3903
- padding: 0.25em;
3904
- width: fit-content;
3905
- height: fit-content;
3906
- border-width: initial;
3907
- border-color: initial;
3908
- border-image: initial;
3909
- border-style: solid;
3910
- background-color: canvas;
3911
- color: canvastext;
3912
- overflow: auto;
3913
- margin: auto;
3914
- }
3915
-
3916
- :where([popover]:not(.\\:popover-open)) {
3917
- display: none;
3918
- }
3919
-
3920
- :where(dialog[popover].\\:popover-open) {
3921
- display: block;
3922
- }
3923
-
3924
- :where(dialog[popover][open]) {
3925
- display: revert;
3926
- }
3927
-
3928
- :where([anchor].\\:popover-open) {
3929
- inset: auto;
3930
- }
3931
-
3932
- :where([anchor]:popover-open) {
3933
- inset: auto;
3934
- }
3935
-
3936
- @supports not (background-color: canvas) {
3937
- :where([popover]) {
3938
- background-color: white;
3939
- color: black;
3940
- }
3941
- }
3942
-
3943
- @supports (width: -moz-fit-content) {
3944
- :where([popover]) {
3945
- width: -moz-fit-content;
3946
- height: -moz-fit-content;
3947
- }
3948
- }
3949
-
3950
- @supports not (inset: 0) {
3951
- :where([popover]) {
3952
- top: 0;
3953
- left: 0;
3954
- right: 0;
3955
- bottom: 0;
3956
- }
3957
- }
3958
- ${useLayer ? "}" : ""}
3959
- `;
3960
- }
3961
- var popoverStyleSheet = null;
3962
- function injectStyles(root) {
3963
- const styles = getStyles();
3964
- if (popoverStyleSheet === null) {
3965
- try {
3966
- popoverStyleSheet = new CSSStyleSheet();
3967
- popoverStyleSheet.replaceSync(styles);
3968
- } catch {
3969
- popoverStyleSheet = false;
3970
- }
3971
- }
3972
- if (popoverStyleSheet === false) {
3973
- const sheet = document.createElement("style");
3974
- sheet.textContent = styles;
3975
- if (root instanceof Document) {
3976
- root.head.prepend(sheet);
3977
- } else {
3978
- root.prepend(sheet);
3979
- }
3980
- } else {
3981
- root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
3982
- }
3983
- }
3984
- function apply() {
3985
- if (typeof window === "undefined") return;
3986
- window.ToggleEvent = window.ToggleEvent || ToggleEvent;
3987
- function rewriteSelector(selector) {
3988
- if (selector?.includes(":popover-open")) {
3989
- selector = selector.replace(
3990
- nonEscapedPopoverSelector,
3991
- "$1.\\:popover-open"
3992
- );
3993
- }
3994
- return selector;
3995
- }
3996
- patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
3997
- patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
3998
- patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
3999
- patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
4000
- patchSelectorFn(Element.prototype, "matches", rewriteSelector);
4001
- patchSelectorFn(Element.prototype, "closest", rewriteSelector);
4002
- patchSelectorFn(
4003
- DocumentFragment.prototype,
4004
- "querySelectorAll",
4005
- rewriteSelector
4006
- );
4007
- Object.defineProperties(HTMLElement.prototype, {
4008
- popover: {
4009
- enumerable: true,
4010
- configurable: true,
4011
- get() {
4012
- if (!this.hasAttribute("popover")) return null;
4013
- const value = (this.getAttribute("popover") || "").toLowerCase();
4014
- if (value === "" || value == "auto") return "auto";
4015
- return "manual";
4016
- },
4017
- set(value) {
4018
- if (value === null) {
4019
- this.removeAttribute("popover");
4020
- } else {
4021
- this.setAttribute("popover", value);
4022
- }
4023
- }
4024
- },
4025
- showPopover: {
4026
- enumerable: true,
4027
- configurable: true,
4028
- value() {
4029
- showPopover(this);
4030
- }
4031
- },
4032
- hidePopover: {
4033
- enumerable: true,
4034
- configurable: true,
4035
- value() {
4036
- hidePopover(this, true, true);
4037
- }
4038
- },
4039
- togglePopover: {
4040
- enumerable: true,
4041
- configurable: true,
4042
- value(force) {
4043
- if (visibilityState.get(this) === "showing" && force === void 0 || force === false) {
4044
- hidePopover(this, true, true);
4045
- } else if (force === void 0 || force === true) {
4046
- showPopover(this);
4047
- }
4048
- }
4049
- }
4050
- });
4051
- const originalAttachShadow = Element.prototype.attachShadow;
4052
- if (originalAttachShadow) {
4053
- Object.defineProperties(Element.prototype, {
4054
- attachShadow: {
4055
- enumerable: true,
4056
- configurable: true,
4057
- writable: true,
4058
- value(options) {
4059
- const shadowRoot = originalAttachShadow.call(this, options);
4060
- injectStyles(shadowRoot);
4061
- return shadowRoot;
4062
- }
4063
- }
4064
- });
4065
- }
4066
- const originalAttachInternals = HTMLElement.prototype.attachInternals;
4067
- if (originalAttachInternals) {
4068
- Object.defineProperties(HTMLElement.prototype, {
4069
- attachInternals: {
4070
- enumerable: true,
4071
- configurable: true,
4072
- writable: true,
4073
- value() {
4074
- const internals = originalAttachInternals.call(this);
4075
- if (internals.shadowRoot) {
4076
- injectStyles(internals.shadowRoot);
4077
- }
4078
- return internals;
4079
- }
4080
- }
4081
- });
4082
- }
4083
- const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
4084
- function applyPopoverInvokerElementMixin(ElementClass) {
4085
- Object.defineProperties(ElementClass.prototype, {
4086
- popoverTargetElement: {
4087
- enumerable: true,
4088
- configurable: true,
4089
- set(targetElement) {
4090
- if (targetElement === null) {
4091
- this.removeAttribute("popovertarget");
4092
- popoverTargetAssociatedElements.delete(this);
4093
- } else if (!(targetElement instanceof Element)) {
4094
- throw new TypeError(
4095
- `popoverTargetElement must be an element or null`
4096
- );
4097
- } else {
4098
- this.setAttribute("popovertarget", "");
4099
- popoverTargetAssociatedElements.set(this, targetElement);
4100
- }
4101
- },
4102
- get() {
4103
- if (this.localName !== "button" && this.localName !== "input") {
4104
- return null;
4105
- }
4106
- if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") {
4107
- return null;
4108
- }
4109
- if (this.disabled) {
4110
- return null;
4111
- }
4112
- if (this.form && this.type === "submit") {
4113
- return null;
4114
- }
4115
- const targetElement = popoverTargetAssociatedElements.get(this);
4116
- if (targetElement && targetElement.isConnected) {
4117
- return targetElement;
4118
- } else if (targetElement && !targetElement.isConnected) {
4119
- popoverTargetAssociatedElements.delete(this);
4120
- return null;
4121
- }
4122
- const root = getRootNode(this);
4123
- const idref = this.getAttribute("popovertarget");
4124
- if ((root instanceof Document || root instanceof ShadowRoot2) && idref) {
4125
- return root.getElementById(idref) || null;
4126
- }
4127
- return null;
4128
- }
4129
- },
4130
- popoverTargetAction: {
4131
- enumerable: true,
4132
- configurable: true,
4133
- get() {
4134
- const value = (this.getAttribute("popovertargetaction") || "").toLowerCase();
4135
- if (value === "show" || value === "hide") return value;
4136
- return "toggle";
4137
- },
4138
- set(value) {
4139
- this.setAttribute("popovertargetaction", value);
4140
- }
4141
- }
4142
- });
4143
- }
4144
- applyPopoverInvokerElementMixin(HTMLButtonElement);
4145
- applyPopoverInvokerElementMixin(HTMLInputElement);
4146
- const handleInvokerActivation = (event) => {
4147
- const composedPath = event.composedPath();
4148
- const target = composedPath[0];
4149
- if (!(target instanceof Element) || target?.shadowRoot) {
4150
- return;
4151
- }
4152
- const root = getRootNode(target);
4153
- if (!(root instanceof ShadowRoot2 || root instanceof Document)) {
4154
- return;
4155
- }
4156
- const invoker = composedPath.find(
4157
- (el) => el.matches?.("[popovertargetaction],[popovertarget]")
4158
- );
4159
- if (invoker) {
4160
- popoverTargetAttributeActivationBehavior(invoker);
4161
- event.preventDefault();
4162
- return;
4163
- }
4164
- };
4165
- const onKeydown = (event) => {
4166
- const key = event.key;
4167
- const target = event.target;
4168
- if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) {
4169
- hideAllPopoversUntil(target.ownerDocument, true, true);
4170
- }
4171
- };
4172
- const addEventListeners = (root) => {
4173
- root.addEventListener("click", handleInvokerActivation);
4174
- root.addEventListener("keydown", onKeydown);
4175
- root.addEventListener("pointerdown", lightDismissOpenPopovers);
4176
- root.addEventListener("pointerup", lightDismissOpenPopovers);
4177
- };
4178
- addEventListeners(document);
4179
- injectStyles(document);
4180
- }
4181
-
4182
- const postPopovercontainerCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-palette-fg);background-color:var(--post-current-palette-bg);border:2px solid rgba(0,0,0,0);border-radius:4px}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
4183
- const PostPopovercontainerStyle0 = postPopovercontainerCss;
4184
-
4185
- const PostPopovercontainer = class {
4186
- constructor(hostRef) {
4187
- index.registerInstance(this, hostRef);
4188
- this.postToggle = index.createEvent(this, "postToggle", 7);
4189
- this.placement = 'top';
4190
- this.edgeGap = 8;
4191
- this.animation = null;
4192
- this.arrow = false;
4193
- this.manualClose = false;
4194
- this.safeSpace = undefined;
4195
- }
4196
- validatePlacement() {
4197
- index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
4198
- }
4199
- validateEdgeGap() {
4200
- index$1.checkEmptyOrType(this, 'edgeGap', 'number');
4201
- }
4202
- validateSafeSpace() {
4203
- index$1.checkEmptyOrOneOf(this, 'safeSpace', ['triangle', 'trapezoid']);
4204
- }
4205
- /**
4206
- * Updates cursor position for safe space feature when popover is open.
4207
- * Sets CSS custom properties for dynamic styling of safe area.
4208
- * @param event MouseEvent with cursor position
4209
- */
4210
- mouseTrackingHandler(event) {
4211
- this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
4212
- this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
4213
- }
4214
- connectedCallback() {
4215
- if (breakpoints.IS_BROWSER && !isSupported()) {
4216
- apply();
4217
- }
4218
- }
4219
- componentDidLoad() {
4220
- this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
4221
- }
4222
- disconnectedCallback() {
4223
- if (typeof this.clearAutoUpdate === 'function') {
4224
- this.clearAutoUpdate();
4225
- }
4226
- }
4227
- /**
4228
- * Programmatically display the popovercontainer
4229
- * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
4230
- */
4231
- async show(target) {
4232
- if (!this.toggleTimeoutId) {
4233
- this.eventTarget = target;
4234
- this.calculatePosition();
4235
- this.host.showPopover();
4236
- }
4237
- }
4238
- /**
4239
- * Programmatically hide the popovercontainer
4240
- */
4241
- async hide() {
4242
- if (!this.toggleTimeoutId) {
4243
- this.eventTarget = null;
4244
- this.host.hidePopover();
4245
- }
4246
- }
4247
- /**
4248
- * Toggle popovercontainer display
4249
- * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
4250
- * @param force Pass true to always show or false to always hide
4251
- */
4252
- async toggle(target, force) {
4253
- // Prevent instant double toggle
4254
- if (!this.toggleTimeoutId) {
4255
- this.eventTarget = target;
4256
- this.calculatePosition();
4257
- this.host.togglePopover(force);
4258
- this.toggleTimeoutId = null;
4259
- }
4260
- return this.host.matches(':where(:popover-open, .popover-open)');
4261
- }
4262
- /**
4263
- * Start or stop auto updates based on popovercontainer events.
4264
- * Popovercontainers can be closed or opened with other methods than class members,
4265
- * therefore listening to the toggle event is safer for cleaning up.
4266
- * @param e ToggleEvent
4267
- */
4268
- handleToggle(e) {
4269
- this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
4270
- const isOpen = e.newState === 'open';
4271
- if (isOpen) {
4272
- this.startAutoupdates();
4273
- if (this.safeSpace)
4274
- window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
4275
- }
4276
- else {
4277
- if (typeof this.clearAutoUpdate === 'function')
4278
- this.clearAutoUpdate();
4279
- if (this.safeSpace)
4280
- window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
4281
- }
4282
- this.postToggle.emit(isOpen);
4283
- }
4284
- /**
4285
- * Start listening for DOM updates, scroll events etc. that have
4286
- * an influence on popovercontainer positioning
4287
- */
4288
- startAutoupdates() {
4289
- this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
4290
- }
4291
- /**
4292
- * Retrieves the dynamic height of the header
4293
- */
4294
- getHeaderHeight() {
4295
- const header = document.querySelector('post-header');
4296
- return header ? parseFloat(getComputedStyle(header).height) : 0;
4297
- }
4298
- async calculatePosition() {
4299
- const { x, y, middlewareData, placement } = await this.computeMainPosition();
4300
- const currentPlacement = placement.split('-')[0];
4301
- // Position popover
4302
- this.host.style.left = `${x}px`;
4303
- this.host.style.top = `${y}px`;
4304
- // Position arrow if enabled
4305
- if (this.arrow && middlewareData.arrow) {
4306
- const { x: arrowX, y: arrowY } = middlewareData.arrow;
4307
- const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
4308
- if (staticSide) {
4309
- Object.assign(this.arrowRef.style, {
4310
- left: arrowX ? `${arrowX}px` : '',
4311
- top: arrowY ? `${arrowY}px` : '',
4312
- [staticSide]: '-7px',
4313
- });
4314
- }
4315
- }
4316
- // Handle safe space if enabled
4317
- if (this.safeSpace && this.eventTarget) {
4318
- await this.updateSafeSpaceBoundaries(currentPlacement);
4319
- }
4320
- }
4321
- async computeMainPosition() {
4322
- const gap = this.edgeGap;
4323
- const middleware = [
4324
- flip({
4325
- padding: this.getHeaderHeight(),
4326
- }),
4327
- inline(),
4328
- shift({
4329
- padding: gap,
4330
- limiter: limitShift({
4331
- offset: 32,
4332
- }),
4333
- }),
4334
- size({
4335
- apply({ availableWidth, elements }) {
4336
- Object.assign(elements.floating.style, {
4337
- maxWidth: `${availableWidth - gap * 2}px`,
4338
- });
4339
- },
4340
- }),
4341
- offset(this.arrow ? gap + 4 : gap),
4342
- ];
4343
- if (this.arrow) {
4344
- middleware.push(arrow({ element: this.arrowRef, padding: gap }));
4345
- }
4346
- return computePosition(this.eventTarget, this.host, {
4347
- placement: this.placement || 'top',
4348
- strategy: 'fixed',
4349
- middleware,
4350
- });
4351
- }
4352
- async updateSafeSpaceBoundaries(currentPlacement) {
4353
- const targetRect = this.eventTarget.getBoundingClientRect();
4354
- const popoverRect = this.host.getBoundingClientRect();
4355
- const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
4356
- // Helper function to get positioning data based on placement
4357
- const getPositioningData = (placement, popoverRect, targetRect) => {
4358
- if (placement === 'top' || placement === 'bottom') {
4359
- return {
4360
- popover: {
4361
- y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
4362
- xStart: popoverRect.left,
4363
- xEnd: popoverRect.right,
4364
- },
4365
- trigger: {
4366
- y: placement === 'top' ? targetRect.top : targetRect.bottom,
4367
- xStart: targetRect.left,
4368
- xEnd: targetRect.right,
4369
- },
4370
- };
4371
- }
4372
- else {
4373
- // left or right
4374
- return {
4375
- popover: {
4376
- x: placement === 'left' ? popoverRect.right : popoverRect.left,
4377
- yStart: popoverRect.top,
4378
- yEnd: popoverRect.bottom,
4379
- },
4380
- trigger: {
4381
- x: placement === 'left' ? targetRect.left : targetRect.right,
4382
- yStart: targetRect.top,
4383
- yEnd: targetRect.bottom,
4384
- },
4385
- };
4386
- }
4387
- };
4388
- const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
4389
- // Clear previous values
4390
- PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
4391
- this.host.style.removeProperty(prop);
4392
- });
4393
- if (isVertical) {
4394
- // For top/bottom placement
4395
- this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
4396
- this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
4397
- this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
4398
- this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
4399
- this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
4400
- this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
4401
- }
4402
- else {
4403
- // For left/right placement
4404
- this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
4405
- this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
4406
- this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
4407
- this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
4408
- this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
4409
- this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
4410
- }
4411
- }
4412
- render() {
4413
- const animationClass = this.animation ? `animate-${this.animation}` : '';
4414
- return (index.h(index.Host, { key: '7b5c3ad89739db0387473db9228014ca9596b8a3', "data-version": _package.version, popover: this.manualClose ? 'manual' : 'auto' }, index.h("div", { key: '0db14a34b3bb8e248bb0adead08afc9b7007edf6', class: animationClass }, this.arrow && (index.h("span", { key: 'e7061112aebb882194b79e82535074f34ddbbfd1', class: "arrow", ref: el => {
4415
- this.arrowRef = el;
4416
- } })), index.h("slot", { key: 'efc25097a97f87a9eb742379d8a70b0fc2c78682' }))));
4417
- }
4418
- get host() { return index.getElement(this); }
4419
- static get watchers() { return {
4420
- "placement": ["validatePlacement"],
4421
- "edgeGap": ["validateEdgeGap"],
4422
- "safeSpace": ["validateSafeSpace"]
4423
- }; }
4424
- };
4425
- PostPopovercontainer.STATIC_SIDES = {
4426
- top: 'bottom',
4427
- right: 'left',
4428
- bottom: 'top',
4429
- left: 'right',
4430
- };
4431
- PostPopovercontainer.PROPERTIES_TO_CLEAR = [
4432
- '--post-safe-space-popover-x',
4433
- '--post-safe-space-popover-y',
4434
- '--post-safe-space-popover-x-start',
4435
- '--post-safe-space-popover-x-end',
4436
- '--post-safe-space-popover-y-start',
4437
- '--post-safe-space-popover-y-end',
4438
- '--post-safe-space-trigger-x',
4439
- '--post-safe-space-trigger-y',
4440
- '--post-safe-space-trigger-x-start',
4441
- '--post-safe-space-trigger-x-end',
4442
- '--post-safe-space-trigger-y-start',
4443
- '--post-safe-space-trigger-y-end',
4444
- ];
4445
- PostPopovercontainer.style = PostPopovercontainerStyle0;
4446
-
4447
- const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
4448
- const PostTogglebuttonStyle0 = postTogglebuttonCss;
4449
-
4450
- const PostTogglebutton = class {
4451
- constructor(hostRef) {
4452
- index.registerInstance(this, hostRef);
4453
- this.handleClick = () => {
4454
- this.toggled = !this.toggled;
4455
- };
4456
- this.handleKeydown = (event) => {
4457
- // perform a click when enter or spaced are pressed to mimic the button behavior
4458
- if (event.key === 'Enter' || event.key === ' ') {
4459
- event.preventDefault(); // prevents the page from scrolling when space is pressed
4460
- this.host.click();
4461
- }
4462
- };
4463
- this.toggled = false;
4464
- }
4465
- componentWillLoad() {
4466
- // add event listener to not override listener that might be set on the host
4467
- this.host.addEventListener('click', () => this.handleClick());
4468
- this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
4469
- }
4470
- render() {
4471
- return (index.h(index.Host, { key: 'd79b9952861afa27d8d1c5afb492e585bdc8a722', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: 'aad4cc86756d0688d10f1b28dc14d6b464ab8830' })));
4472
- }
4473
- get host() { return index.getElement(this); }
4474
- };
4475
- PostTogglebutton.style = PostTogglebuttonStyle0;
4476
-
4477
- exports.PostClosebutton = PostClosebutton;
4478
- exports.PostHeader = PostHeader;
4479
- exports.PostIcon = PostIcon;
4480
- exports.PostLanguageOption = PostLanguageOption;
4481
- exports.PostLanguageSwitch = PostLanguageSwitch;
4482
- exports.PostList = PostList;
4483
- exports.PostListItem = PostListItem;
4484
- exports.PostLogo = PostLogo;
4485
- exports.PostMainnavigation = PostMainnavigation;
4486
- exports.PostMegadropdown = PostMegadropdown;
4487
- exports.PostMegadropdownTrigger = PostMegadropdownTrigger;
4488
- exports.PostMenu = PostMenu;
4489
- exports.PostMenuTrigger = PostMenuTrigger;
4490
- exports.PostPopovercontainer = PostPopovercontainer;
4491
- exports.PostTogglebutton = PostTogglebutton;