@pitchfork-ui/elements 0.1.0 → 0.2.1

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 (264) hide show
  1. package/dist/cjs/control-label-C0eK8bPh.js +36 -0
  2. package/dist/cjs/control-label-C0eK8bPh.js.map +1 -0
  3. package/dist/cjs/index-CIskGKk1.js +4 -4
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/pf-checkbox.cjs.entry.js +3 -1
  6. package/dist/cjs/pf-checkbox.cjs.entry.js.map +1 -1
  7. package/dist/cjs/pf-combobox.cjs.entry.js +4 -3
  8. package/dist/cjs/pf-combobox.cjs.entry.js.map +1 -1
  9. package/dist/cjs/pf-date-picker.cjs.entry.js +3 -2
  10. package/dist/cjs/pf-date-picker.cjs.entry.js.map +1 -1
  11. package/dist/cjs/pf-date-range-picker.cjs.entry.js +6 -5
  12. package/dist/cjs/pf-date-range-picker.cjs.entry.js.map +1 -1
  13. package/dist/cjs/pf-header-navigation.cjs.entry.js +15 -3
  14. package/dist/cjs/pf-header-navigation.cjs.entry.js.map +1 -1
  15. package/dist/cjs/pf-input.cjs.entry.js +3 -1
  16. package/dist/cjs/pf-input.cjs.entry.js.map +1 -1
  17. package/dist/cjs/pf-modal.cjs.entry.js +89 -1
  18. package/dist/cjs/pf-modal.cjs.entry.js.map +1 -1
  19. package/dist/cjs/pf-multi-select.cjs.entry.js +4 -3
  20. package/dist/cjs/pf-multi-select.cjs.entry.js.map +1 -1
  21. package/dist/cjs/pf-nav-item.cjs.entry.js +29 -4
  22. package/dist/cjs/pf-nav-item.cjs.entry.js.map +1 -1
  23. package/dist/cjs/pf-number-input.cjs.entry.js +2 -1
  24. package/dist/cjs/pf-number-input.cjs.entry.js.map +1 -1
  25. package/dist/cjs/pf-select.cjs.entry.js +4 -3
  26. package/dist/cjs/pf-select.cjs.entry.js.map +1 -1
  27. package/dist/cjs/pf-sidebar-navigation.cjs.entry.js +11 -8
  28. package/dist/cjs/pf-sidebar-navigation.cjs.entry.js.map +1 -1
  29. package/dist/cjs/pf-slider.cjs.entry.js +4 -2
  30. package/dist/cjs/pf-slider.cjs.entry.js.map +1 -1
  31. package/dist/cjs/pf-switch.cjs.entry.js +3 -1
  32. package/dist/cjs/pf-switch.cjs.entry.js.map +1 -1
  33. package/dist/cjs/pf-tag-input.cjs.entry.js +3 -2
  34. package/dist/cjs/pf-tag-input.cjs.entry.js.map +1 -1
  35. package/dist/cjs/pf-textarea.cjs.entry.js +2 -1
  36. package/dist/cjs/pf-textarea.cjs.entry.js.map +1 -1
  37. package/dist/cjs/pf-time-picker.cjs.entry.js +3 -2
  38. package/dist/cjs/pf-time-picker.cjs.entry.js.map +1 -1
  39. package/dist/cjs/pitchfork.cjs.js +1 -1
  40. package/dist/collection/components/pf-accordion/pf-accordion.js +2 -2
  41. package/dist/collection/components/pf-alert/pf-alert.js +1 -1
  42. package/dist/collection/components/pf-avatar/pf-avatar.js +2 -2
  43. package/dist/collection/components/pf-badge/pf-badge.js +1 -1
  44. package/dist/collection/components/pf-badge-group/pf-badge-group.js +3 -3
  45. package/dist/collection/components/pf-button/pf-button.js +3 -3
  46. package/dist/collection/components/pf-checkbox/pf-checkbox.js +4 -1
  47. package/dist/collection/components/pf-checkbox/pf-checkbox.js.map +1 -1
  48. package/dist/collection/components/pf-combobox/pf-combobox.js +4 -3
  49. package/dist/collection/components/pf-combobox/pf-combobox.js.map +1 -1
  50. package/dist/collection/components/pf-content-divider/pf-content-divider.js +1 -1
  51. package/dist/collection/components/pf-credit-card/pf-credit-card.js +1 -1
  52. package/dist/collection/components/pf-date-picker/pf-date-picker.js +3 -2
  53. package/dist/collection/components/pf-date-picker/pf-date-picker.js.map +1 -1
  54. package/dist/collection/components/pf-date-range-picker/pf-date-range-picker.js +6 -5
  55. package/dist/collection/components/pf-date-range-picker/pf-date-range-picker.js.map +1 -1
  56. package/dist/collection/components/pf-empty-state/pf-empty-state.js +1 -1
  57. package/dist/collection/components/pf-header-navigation/pf-header-navigation.js +25 -4
  58. package/dist/collection/components/pf-header-navigation/pf-header-navigation.js.map +1 -1
  59. package/dist/collection/components/pf-inline-cta/pf-inline-cta.js +1 -1
  60. package/dist/collection/components/pf-input/pf-input.js +5 -2
  61. package/dist/collection/components/pf-input/pf-input.js.map +1 -1
  62. package/dist/collection/components/pf-kbd/pf-kbd.js +1 -1
  63. package/dist/collection/components/pf-line-chart/pf-line-chart.js +1 -1
  64. package/dist/collection/components/pf-loading-dots/pf-loading-dots.js +1 -1
  65. package/dist/collection/components/pf-metric-card/pf-metric-card.js +1 -1
  66. package/dist/collection/components/pf-modal/pf-modal.js +77 -6
  67. package/dist/collection/components/pf-modal/pf-modal.js.map +1 -1
  68. package/dist/collection/components/pf-multi-select/pf-multi-select.js +4 -3
  69. package/dist/collection/components/pf-multi-select/pf-multi-select.js.map +1 -1
  70. package/dist/collection/components/pf-nav-item/pf-nav-item.js +50 -5
  71. package/dist/collection/components/pf-nav-item/pf-nav-item.js.map +1 -1
  72. package/dist/collection/components/pf-notification/pf-notification.js +1 -1
  73. package/dist/collection/components/pf-number-input/pf-number-input.js +2 -1
  74. package/dist/collection/components/pf-number-input/pf-number-input.js.map +1 -1
  75. package/dist/collection/components/pf-progress-steps/pf-progress-steps.js +1 -1
  76. package/dist/collection/components/pf-radio-group/pf-radio-group.js +1 -1
  77. package/dist/collection/components/pf-rating-badge/pf-rating-badge.js +1 -1
  78. package/dist/collection/components/pf-scroll-area/pf-scroll-area.js +1 -1
  79. package/dist/collection/components/pf-section-header/pf-section-header.js +1 -1
  80. package/dist/collection/components/pf-select/pf-select.js +4 -3
  81. package/dist/collection/components/pf-select/pf-select.js.map +1 -1
  82. package/dist/collection/components/pf-sidebar-navigation/pf-sidebar-navigation.js +12 -9
  83. package/dist/collection/components/pf-sidebar-navigation/pf-sidebar-navigation.js.map +1 -1
  84. package/dist/collection/components/pf-slideout-menu/pf-slideout-menu.js +2 -2
  85. package/dist/collection/components/pf-slider/pf-slider.js +5 -2
  86. package/dist/collection/components/pf-slider/pf-slider.js.map +1 -1
  87. package/dist/collection/components/pf-switch/pf-switch.js +4 -1
  88. package/dist/collection/components/pf-switch/pf-switch.js.map +1 -1
  89. package/dist/collection/components/pf-tab/pf-tab.js +2 -2
  90. package/dist/collection/components/pf-table-cell/pf-table-cell.js +1 -1
  91. package/dist/collection/components/pf-tabs/pf-tabs.js +2 -2
  92. package/dist/collection/components/pf-tag/pf-tag.js +1 -1
  93. package/dist/collection/components/pf-tag-input/pf-tag-input.js +3 -2
  94. package/dist/collection/components/pf-tag-input/pf-tag-input.js.map +1 -1
  95. package/dist/collection/components/pf-textarea/pf-textarea.js +2 -1
  96. package/dist/collection/components/pf-textarea/pf-textarea.js.map +1 -1
  97. package/dist/collection/components/pf-time-picker/pf-time-picker.js +3 -2
  98. package/dist/collection/components/pf-time-picker/pf-time-picker.js.map +1 -1
  99. package/dist/collection/components/pf-timeline-item/pf-timeline-item.js +1 -1
  100. package/dist/collection/components/pf-toaster/pf-toaster.js +2 -2
  101. package/dist/collection/components/pf-toolbar/pf-toolbar.js +1 -1
  102. package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.js +1 -1
  103. package/dist/collection/components/pf-utility-button/pf-utility-button.js +2 -2
  104. package/dist/collection/components/pf-video-player/pf-video-player.js +2 -2
  105. package/dist/collection/control-label.js +30 -0
  106. package/dist/collection/control-label.js.map +1 -0
  107. package/dist/components/p-Cy_kHPeC.js +2 -0
  108. package/dist/components/p-Cy_kHPeC.js.map +1 -0
  109. package/dist/components/pf-checkbox.js +1 -1
  110. package/dist/components/pf-checkbox.js.map +1 -1
  111. package/dist/components/pf-combobox.js +1 -1
  112. package/dist/components/pf-combobox.js.map +1 -1
  113. package/dist/components/pf-date-picker.js +1 -1
  114. package/dist/components/pf-date-picker.js.map +1 -1
  115. package/dist/components/pf-date-range-picker.js +1 -1
  116. package/dist/components/pf-date-range-picker.js.map +1 -1
  117. package/dist/components/pf-header-navigation.js +1 -1
  118. package/dist/components/pf-header-navigation.js.map +1 -1
  119. package/dist/components/pf-input.js +1 -1
  120. package/dist/components/pf-input.js.map +1 -1
  121. package/dist/components/pf-modal.js +1 -1
  122. package/dist/components/pf-modal.js.map +1 -1
  123. package/dist/components/pf-multi-select.js +1 -1
  124. package/dist/components/pf-multi-select.js.map +1 -1
  125. package/dist/components/pf-nav-item.js +1 -1
  126. package/dist/components/pf-nav-item.js.map +1 -1
  127. package/dist/components/pf-number-input.js +1 -1
  128. package/dist/components/pf-number-input.js.map +1 -1
  129. package/dist/components/pf-select.js +1 -1
  130. package/dist/components/pf-select.js.map +1 -1
  131. package/dist/components/pf-sidebar-navigation.js +1 -1
  132. package/dist/components/pf-sidebar-navigation.js.map +1 -1
  133. package/dist/components/pf-slider.js +1 -1
  134. package/dist/components/pf-slider.js.map +1 -1
  135. package/dist/components/pf-switch.js +1 -1
  136. package/dist/components/pf-switch.js.map +1 -1
  137. package/dist/components/pf-tag-input.js +1 -1
  138. package/dist/components/pf-tag-input.js.map +1 -1
  139. package/dist/components/pf-textarea.js +1 -1
  140. package/dist/components/pf-textarea.js.map +1 -1
  141. package/dist/components/pf-time-picker.js +1 -1
  142. package/dist/components/pf-time-picker.js.map +1 -1
  143. package/dist/docs.json +73 -52
  144. package/dist/elements.json +100 -10
  145. package/dist/esm/control-label-Cy_kHPeC.js +34 -0
  146. package/dist/esm/control-label-Cy_kHPeC.js.map +1 -0
  147. package/dist/esm/index-Bm6UxEit.js +4 -4
  148. package/dist/esm/loader.js +1 -1
  149. package/dist/esm/pf-checkbox.entry.js +4 -2
  150. package/dist/esm/pf-checkbox.entry.js.map +1 -1
  151. package/dist/esm/pf-combobox.entry.js +4 -3
  152. package/dist/esm/pf-combobox.entry.js.map +1 -1
  153. package/dist/esm/pf-date-picker.entry.js +3 -2
  154. package/dist/esm/pf-date-picker.entry.js.map +1 -1
  155. package/dist/esm/pf-date-range-picker.entry.js +6 -5
  156. package/dist/esm/pf-date-range-picker.entry.js.map +1 -1
  157. package/dist/esm/pf-header-navigation.entry.js +15 -3
  158. package/dist/esm/pf-header-navigation.entry.js.map +1 -1
  159. package/dist/esm/pf-input.entry.js +4 -2
  160. package/dist/esm/pf-input.entry.js.map +1 -1
  161. package/dist/esm/pf-modal.entry.js +89 -1
  162. package/dist/esm/pf-modal.entry.js.map +1 -1
  163. package/dist/esm/pf-multi-select.entry.js +4 -3
  164. package/dist/esm/pf-multi-select.entry.js.map +1 -1
  165. package/dist/esm/pf-nav-item.entry.js +30 -5
  166. package/dist/esm/pf-nav-item.entry.js.map +1 -1
  167. package/dist/esm/pf-number-input.entry.js +2 -1
  168. package/dist/esm/pf-number-input.entry.js.map +1 -1
  169. package/dist/esm/pf-select.entry.js +4 -3
  170. package/dist/esm/pf-select.entry.js.map +1 -1
  171. package/dist/esm/pf-sidebar-navigation.entry.js +11 -8
  172. package/dist/esm/pf-sidebar-navigation.entry.js.map +1 -1
  173. package/dist/esm/pf-slider.entry.js +5 -3
  174. package/dist/esm/pf-slider.entry.js.map +1 -1
  175. package/dist/esm/pf-switch.entry.js +4 -2
  176. package/dist/esm/pf-switch.entry.js.map +1 -1
  177. package/dist/esm/pf-tag-input.entry.js +3 -2
  178. package/dist/esm/pf-tag-input.entry.js.map +1 -1
  179. package/dist/esm/pf-textarea.entry.js +2 -1
  180. package/dist/esm/pf-textarea.entry.js.map +1 -1
  181. package/dist/esm/pf-time-picker.entry.js +3 -2
  182. package/dist/esm/pf-time-picker.entry.js.map +1 -1
  183. package/dist/esm/pitchfork.js +1 -1
  184. package/dist/pitchfork/p-01ed0d56.entry.js +2 -0
  185. package/dist/pitchfork/p-01ed0d56.entry.js.map +1 -0
  186. package/dist/pitchfork/p-02e28338.entry.js +2 -0
  187. package/dist/pitchfork/p-02e28338.entry.js.map +1 -0
  188. package/dist/pitchfork/p-19c0145c.entry.js +2 -0
  189. package/dist/pitchfork/p-19c0145c.entry.js.map +1 -0
  190. package/dist/pitchfork/p-22d8c69d.entry.js +2 -0
  191. package/dist/pitchfork/p-22d8c69d.entry.js.map +1 -0
  192. package/dist/pitchfork/p-2add2e98.entry.js +2 -0
  193. package/dist/pitchfork/p-2add2e98.entry.js.map +1 -0
  194. package/dist/pitchfork/p-45039de3.entry.js +2 -0
  195. package/dist/pitchfork/p-45039de3.entry.js.map +1 -0
  196. package/dist/pitchfork/p-4dfe7e8a.entry.js +2 -0
  197. package/dist/pitchfork/p-4dfe7e8a.entry.js.map +1 -0
  198. package/dist/pitchfork/p-51353d53.entry.js +2 -0
  199. package/dist/pitchfork/p-51353d53.entry.js.map +1 -0
  200. package/dist/pitchfork/p-5b98848c.entry.js +2 -0
  201. package/dist/pitchfork/{p-fd5a5ea1.entry.js.map → p-5b98848c.entry.js.map} +1 -1
  202. package/dist/pitchfork/p-7197ef71.entry.js +2 -0
  203. package/dist/pitchfork/p-7197ef71.entry.js.map +1 -0
  204. package/dist/pitchfork/p-Cy_kHPeC.js +2 -0
  205. package/dist/pitchfork/p-Cy_kHPeC.js.map +1 -0
  206. package/dist/pitchfork/p-ab6c09e7.entry.js +2 -0
  207. package/dist/pitchfork/p-ab6c09e7.entry.js.map +1 -0
  208. package/dist/pitchfork/p-d7ca4026.entry.js +2 -0
  209. package/dist/pitchfork/p-d7ca4026.entry.js.map +1 -0
  210. package/dist/pitchfork/p-dd48d94d.entry.js +2 -0
  211. package/dist/pitchfork/p-dd48d94d.entry.js.map +1 -0
  212. package/dist/pitchfork/p-ec8df806.entry.js +2 -0
  213. package/dist/pitchfork/p-ec8df806.entry.js.map +1 -0
  214. package/dist/pitchfork/p-f5df568f.entry.js +2 -0
  215. package/dist/pitchfork/p-f5df568f.entry.js.map +1 -0
  216. package/dist/pitchfork/p-f713c62d.entry.js +2 -0
  217. package/dist/pitchfork/p-f713c62d.entry.js.map +1 -0
  218. package/dist/pitchfork/p-fd802631.entry.js +2 -0
  219. package/dist/pitchfork/p-fd802631.entry.js.map +1 -0
  220. package/dist/pitchfork/pitchfork.esm.js +1 -1
  221. package/dist/types/components/pf-checkbox/pf-checkbox.d.ts +1 -0
  222. package/dist/types/components/pf-header-navigation/pf-header-navigation.d.ts +11 -2
  223. package/dist/types/components/pf-input/pf-input.d.ts +1 -0
  224. package/dist/types/components/pf-modal/pf-modal.d.ts +56 -3
  225. package/dist/types/components/pf-nav-item/pf-nav-item.d.ts +21 -1
  226. package/dist/types/components/pf-sidebar-navigation/pf-sidebar-navigation.d.ts +10 -7
  227. package/dist/types/components/pf-slider/pf-slider.d.ts +1 -0
  228. package/dist/types/components/pf-switch/pf-switch.d.ts +1 -0
  229. package/dist/types/components.d.ts +57 -18
  230. package/dist/types/control-label.d.ts +24 -0
  231. package/package.json +4 -4
  232. package/dist/pitchfork/p-1dbea97f.entry.js +0 -2
  233. package/dist/pitchfork/p-1dbea97f.entry.js.map +0 -1
  234. package/dist/pitchfork/p-23b1be9b.entry.js +0 -2
  235. package/dist/pitchfork/p-23b1be9b.entry.js.map +0 -1
  236. package/dist/pitchfork/p-33857f80.entry.js +0 -2
  237. package/dist/pitchfork/p-33857f80.entry.js.map +0 -1
  238. package/dist/pitchfork/p-47cabc33.entry.js +0 -2
  239. package/dist/pitchfork/p-47cabc33.entry.js.map +0 -1
  240. package/dist/pitchfork/p-48b2d3f7.entry.js +0 -2
  241. package/dist/pitchfork/p-48b2d3f7.entry.js.map +0 -1
  242. package/dist/pitchfork/p-5064d2dd.entry.js +0 -2
  243. package/dist/pitchfork/p-5064d2dd.entry.js.map +0 -1
  244. package/dist/pitchfork/p-52eef7eb.entry.js +0 -2
  245. package/dist/pitchfork/p-52eef7eb.entry.js.map +0 -1
  246. package/dist/pitchfork/p-845c5252.entry.js +0 -2
  247. package/dist/pitchfork/p-845c5252.entry.js.map +0 -1
  248. package/dist/pitchfork/p-a24bf2bd.entry.js +0 -2
  249. package/dist/pitchfork/p-a24bf2bd.entry.js.map +0 -1
  250. package/dist/pitchfork/p-a9b77dbb.entry.js +0 -2
  251. package/dist/pitchfork/p-a9b77dbb.entry.js.map +0 -1
  252. package/dist/pitchfork/p-c6bdd9cd.entry.js +0 -2
  253. package/dist/pitchfork/p-c6bdd9cd.entry.js.map +0 -1
  254. package/dist/pitchfork/p-d0d2070b.entry.js +0 -2
  255. package/dist/pitchfork/p-d0d2070b.entry.js.map +0 -1
  256. package/dist/pitchfork/p-d248b027.entry.js +0 -2
  257. package/dist/pitchfork/p-d248b027.entry.js.map +0 -1
  258. package/dist/pitchfork/p-d6425298.entry.js +0 -2
  259. package/dist/pitchfork/p-d6425298.entry.js.map +0 -1
  260. package/dist/pitchfork/p-d7eb6335.entry.js +0 -2
  261. package/dist/pitchfork/p-d7eb6335.entry.js.map +0 -1
  262. package/dist/pitchfork/p-e944f504.entry.js +0 -2
  263. package/dist/pitchfork/p-e944f504.entry.js.map +0 -1
  264. package/dist/pitchfork/p-fd5a5ea1.entry.js +0 -2
@@ -1 +0,0 @@
1
- {"version":3,"names":["padTimePart","value","String","padStart","parseTimeValue","match","exec","trim","hour","minute","Number","formatTimeValue","parts","formatTimeDisplay","hourCycle","toHour12","meridiemOf","hour24","face","toHour24","hour12","meridiem","base","timeRange","length","step","safeStep","Math","max","floor","count","ceil","Array","from","_","index","hourOptions","map","pfTimePickerCss","PfTimePicker","internals","name","open","minuteStep","label","description","error","placeholder","required","disabled","pfChange","pfOpenChange","initialValue","stopObserving","componentWillLoad","this","syncFormState","componentDidRender","scrollSelectedIntoView","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","cycle","panel","el","shadowRoot","querySelector","trigger","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","focus","undefined","hidePopover","option","querySelectorAll","scrollIntoView","block","onToggle","event","nowOpen","newState","commit","selectHour","selectedMeridiem","selectMinute","selectMeridiem","onColumnKeyDown","key","Keys","ArrowDown","ArrowUp","column","currentTarget","options","indexOf","activeElement","preventDefault","min","renderColumn","h","class","part","role","tabindex","onKeyDown","type","selected","onClick","onSelect","render","describedBy","composeDescribedBy","display","shownHour","Host","htmlFor","id","popover"],"sources":["../core/dist/time.js","src/components/pf-time-picker/pf-time-picker.css?tag=pf-time-picker&encapsulation=shadow","src/components/pf-time-picker/pf-time-picker.tsx"],"sourcesContent":["//#region src/time.ts\n/**\n* Two digits, which both layers need for the column labels as well as for the\n* canonical value — so it is exported rather than private.\n*/\nvar padTimePart = (value) => String(value).padStart(2, \"0\");\n/**\n* Parses `HH:mm` (or `H:mm`) into hour and minute, or nulls.\n*\n* Out-of-range parts are rejected rather than wrapped: `25:00` is not 1am, it\n* is a mistake, and silently turning it into one hides the mistake.\n*/\nfunction parseTimeValue(value) {\n\tconst match = /^(\\d{1,2}):(\\d{2})$/.exec((value ?? \"\").trim());\n\tif (!match) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\tconst hour = Number(match[1]);\n\tconst minute = Number(match[2]);\n\tif (hour > 23 || minute > 59) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\treturn {\n\t\thour,\n\t\tminute\n\t};\n}\n/** The canonical 24-hour `HH:mm`, or `''` when either part is missing. */\nfunction formatTimeValue(parts) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\treturn `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n}\n/** What the trigger shows: `14:30`, or `2:30 PM` on a 12-hour cycle. */\nfunction formatTimeDisplay(parts, hourCycle) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\tif (hourCycle === 24) return `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n\treturn `${toHour12(parts.hour)}:${padTimePart(parts.minute)} ${meridiemOf(parts.hour)}`;\n}\n/** Which half of the day an hour falls in. */\nfunction meridiemOf(hour24) {\n\treturn hour24 < 12 ? \"AM\" : \"PM\";\n}\n/**\n* The 12-hour face of a 24-hour hour: midnight and midday both read as 12,\n* not 0, which is the one case `hour % 12` gets wrong.\n*/\nfunction toHour12(hour24) {\n\tconst face = hour24 % 12;\n\treturn face === 0 ? 12 : face;\n}\n/** The 24-hour hour for a clock face plus a meridiem. 12 AM is 0, 12 PM is 12. */\nfunction toHour24(hour12, meridiem) {\n\tconst base = hour12 % 12;\n\treturn meridiem === \"PM\" ? base + 12 : base;\n}\n/**\n* The options a column offers: `0, step, 2*step, …` below `length`.\n*\n* A step that does not divide the range leaves a short last stride rather\n* than overshooting — `timeRange(60, 25)` is `[0, 25, 50]`, and 50 is a real\n* minute where 75 is not.\n*/\nfunction timeRange(length, step = 1) {\n\tconst safeStep = Math.max(1, Math.floor(step));\n\tconst count = Math.ceil(length / safeStep);\n\treturn Array.from({ length: count }, (_, index) => index * safeStep);\n}\n/** The hours a column offers: 0–23, or the 1–12 clock face. */\nfunction hourOptions(hourCycle) {\n\treturn hourCycle === 24 ? timeRange(24) : timeRange(12).map((hour) => hour + 1);\n}\n//#endregion\nexport { formatTimeDisplay, formatTimeValue, hourOptions, meridiemOf, padTimePart, parseTimeValue, timeRange, toHour12, toHour24 };\n",":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n display: grid;\n gap: var(--space-1);\n}\n\n.label {\n color: var(--pf-timepicker-text);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n}\n\n.required {\n color: var(--pf-timepicker-invalid-border);\n margin-inline-start: var(--space-1);\n}\n\n.trigger {\n align-items: center;\n background: var(--pf-timepicker-bg);\n border: 1px solid var(--pf-timepicker-border);\n border-radius: var(--radius-md);\n color: var(--pf-timepicker-text);\n cursor: pointer;\n display: flex;\n font-family: inherit;\n font-size: var(--font-size-sm);\n gap: var(--space-2);\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n text-align: start;\n width: 100%;\n}\n\n.trigger:focus-visible {\n border-color: var(--pf-timepicker-focus-border);\n box-shadow: var(--pf-focus-ring);\n outline: none;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.trigger--invalid {\n border-color: var(--pf-timepicker-invalid-border);\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.value--placeholder {\n color: var(--pf-timepicker-placeholder);\n}\n\n.description {\n color: var(--pf-timepicker-text-muted);\n font-size: var(--font-size-xs);\n margin: 0;\n}\n\n.error {\n color: var(--pf-timepicker-invalid-border);\n font-size: var(--font-size-xs);\n margin: 0;\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.panel {\n inset: auto;\n margin: 0;\n background: var(--pf-timepicker-menu-bg);\n border: 1px solid var(--pf-timepicker-menu-border);\n border-radius: var(--radius-md);\n box-shadow: var(--pf-elevation-popover-shadow);\n display: flex;\n gap: var(--space-1);\n padding: var(--space-1);\n}\n\n.panel:popover-open {\n animation: pf-time-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-time-picker-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .panel:popover-open {\n animation: none;\n }\n}\n\n.column {\n display: flex;\n flex-direction: column;\n gap: 2px;\n max-height: 220px;\n overflow-y: auto;\n scrollbar-width: thin;\n}\n\n.column:focus-visible {\n outline: none;\n}\n\n.option {\n background: none;\n border: 0;\n border-radius: var(--radius-sm);\n color: var(--pf-timepicker-text);\n cursor: pointer;\n font-family: inherit;\n font-size: var(--font-size-sm);\n font-variant-numeric: tabular-nums;\n padding: var(--space-1) var(--space-3);\n text-align: center;\n}\n\n.option:hover {\n background: var(--pf-timepicker-option-hover-bg);\n}\n\n.option:focus-visible {\n box-shadow: var(--pf-focus-ring);\n outline: none;\n}\n\n.option--selected {\n background: var(--pf-timepicker-option-active-bg);\n color: var(--pf-timepicker-option-active-text);\n}\n","import {\n composeDescribedBy,\n formatTimeDisplay,\n formatTimeValue,\n hourOptions,\n Keys,\n meridiemOf,\n observeAnchoredPosition,\n padTimePart,\n parseTimeValue,\n timeRange,\n toHour12,\n toHour24,\n type HourCycle,\n type Meridiem,\n type TimeParts,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n *\n * The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n tag: 'pf-time-picker',\n styleUrl: 'pf-time-picker.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfTimePicker {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Submitted under this name. Reflected; the submission reads the attribute. */\n @Prop({ reflect: true }) name?: string;\n\n /** Canonical 24-hour `HH:mm`, or empty. */\n @Prop({ mutable: true }) value = '';\n\n /** Whether the panel is showing. Reflected for the stylesheet. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * 12- or 24-hour display. The value stays 24-hour either way.\n *\n * Read through `cycle` below, never directly: Stencil coerces an attribute\n * using the prop's type as *written*, and it cannot resolve a name it had\n * to import. Measured: with `HourCycle` imported from core,\n * `hour-cycle=\"12\"` arrives as the **string** `\"12\"`, so `=== 12` is\n * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`\n * shows; the alias is kept here because it is the shared type, and the\n * getter costs nothing.\n */\n @Prop() hourCycle: HourCycle = 24;\n\n /** Granularity of the minutes column. */\n @Prop() minuteStep = 1;\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Select time';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /** Fires when the time changes, with the canonical `HH:mm`. */\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /** Fires whenever the panel opens or closes, whoever caused it. */\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n private initialValue = '';\n private stopObserving?: () => void;\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n componentDidRender() {\n if (this.open) this.scrollSelectedIntoView();\n }\n\n disconnectedCallback() {\n this.stopObserving?.();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value || null);\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showPanel();\n else this.hidePanel();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n @Method()\n async show(): Promise<void> {\n if (!this.disabled) this.open = true;\n }\n\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /** A reset restores the value the field started with, not an empty one. */\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n /** `hourCycle` with the attribute case coerced; see the prop's comment. */\n private get cycle(): HourCycle {\n return Number(this.hourCycle) === 12 ? 12 : 24;\n }\n\n private get panel() {\n return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n }\n\n private get trigger() {\n return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n }\n\n private get parts(): TimeParts {\n return parseTimeValue(this.value);\n }\n\n private showPanel() {\n const panel = this.panel;\n if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n panel.showPopover();\n this.stopObserving?.();\n this.stopObserving = observeAnchoredPosition({\n getAnchor: () => this.trigger,\n getFloating: () => panel,\n align: 'start',\n matchAnchorWidth: false,\n flip: true,\n onChange: ({ left, top }) => placePopover(panel, left, top),\n });\n\n this.scrollSelectedIntoView();\n // Focus the first column's selected option, so the arrows work at once.\n panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.focus();\n }\n\n private hidePanel() {\n this.stopObserving?.();\n this.stopObserving = undefined;\n const panel = this.panel;\n if (panel?.matches(':popover-open')) panel.hidePopover();\n }\n\n /**\n * Centres each column on its chosen option.\n *\n * `block: 'nearest'` would leave a column that is already scrolled roughly\n * right alone, which reads as the wrong hour being selected.\n */\n private scrollSelectedIntoView() {\n for (const option of Array.from(\n this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n )) {\n if (typeof option.scrollIntoView === 'function') {\n option.scrollIntoView({ block: 'center' });\n }\n }\n }\n\n private onToggle = (event: ToggleEvent) => {\n const nowOpen = event.newState === 'open';\n if (this.open !== nowOpen) this.open = nowOpen;\n if (!nowOpen) this.trigger?.focus();\n };\n\n private commit(next: TimeParts) {\n const value = formatTimeValue(next);\n if (!value || value === this.value) return;\n this.value = value;\n this.pfChange.emit({ value });\n }\n\n private selectHour(hour: number) {\n const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n }\n\n private selectMinute(minute: number) {\n this.commit({ hour: this.parts.hour ?? 0, minute });\n }\n\n private selectMeridiem(meridiem: Meridiem) {\n const { hour, minute } = this.parts;\n this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n }\n\n private selectedMeridiem(): Meridiem | null {\n const { hour } = this.parts;\n return hour === null ? null : meridiemOf(hour);\n }\n\n /**\n * Up and down move within a column, and stop at its ends rather than\n * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n * having jumped rather than moved.\n *\n * The focused option is read from `shadowRoot.activeElement`, because\n * `document.activeElement` is this host: focus inside a shadow root is\n * reported as the host from the outside.\n */\n private onColumnKeyDown = (event: KeyboardEvent) => {\n if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n const column = event.currentTarget as HTMLElement;\n const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n if (index === -1) return;\n\n event.preventDefault();\n const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n };\n\n private renderColumn(\n name: string,\n options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n ) {\n return (\n <div\n class=\"column\"\n part=\"column\"\n role=\"listbox\"\n aria-label={name}\n tabindex={-1}\n onKeyDown={this.onColumnKeyDown}\n >\n {options.map((option) => (\n <button\n key={option.key}\n type=\"button\"\n part=\"option\"\n class={{ option: true, 'option--selected': option.selected }}\n role=\"option\"\n aria-selected={option.selected ? 'true' : 'false'}\n data-selected={option.selected ? 'true' : 'false'}\n onClick={option.onSelect}\n >\n {option.label}\n </button>\n ))}\n </div>\n );\n }\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const { hour, minute } = this.parts;\n const display = formatTimeDisplay(this.parts, this.cycle);\n const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n const meridiem = this.selectedMeridiem();\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n\n <button\n id=\"trigger\"\n part=\"trigger\"\n class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n type=\"button\"\n disabled={this.disabled}\n aria-haspopup=\"dialog\"\n aria-expanded={this.open ? 'true' : 'false'}\n /* Same shadow root as the panel, so this IDREF resolves. */\n aria-controls=\"panel\"\n aria-invalid={this.error ? 'true' : null}\n aria-required={this.required ? 'true' : null}\n aria-describedby={describedBy}\n onClick={() => {\n if (!this.disabled) this.open = !this.open;\n }}\n >\n <span class={{ value: true, 'value--placeholder': !display }}>\n {display || this.placeholder}\n </span>\n <pf-icon name=\"clock\"></pf-icon>\n </button>\n\n {this.description && (\n <p class=\"description\" part=\"description\" id=\"description\">\n {this.description}\n </p>\n )}\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </div>\n\n <div\n id=\"panel\"\n part=\"panel\"\n class=\"panel\"\n popover=\"auto\"\n role=\"dialog\"\n aria-label=\"Choose a time\"\n onToggle={this.onToggle}\n >\n {this.renderColumn(\n 'Hour',\n hourOptions(this.cycle).map((option) => ({\n key: `h-${option}`,\n label: padTimePart(option),\n selected: shownHour === option,\n onSelect: () => this.selectHour(option),\n })),\n )}\n\n {this.renderColumn(\n 'Minute',\n timeRange(60, this.minuteStep).map((option) => ({\n key: `m-${option}`,\n label: padTimePart(option),\n selected: minute === option,\n onSelect: () => this.selectMinute(option),\n })),\n )}\n\n {this.cycle === 12 &&\n this.renderColumn(\n 'AM or PM',\n (['AM', 'PM'] as Meridiem[]).map((option) => ({\n key: option,\n label: option,\n selected: meridiem === option,\n onSelect: () => this.selectMeridiem(option),\n })),\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,a,h as r,H as s}from"./p-Bm6UxEit.js";import{o as n,p as i}from"./p-CC7AyfOt.js";import{c as o}from"./p-DfpCerXM.js";import{t as d,d as l,s as c,f,c as h,i as p,p as u,m as b,a as g,e as y,b as v,W as m,C as w}from"./p-C9jNMqLs.js";import{K as k}from"./p-g4FlTDZx.js";import{a as x}from"./p-Cr6IXrUk.js";function C(e,t){const a=d(t);if(!e.awaitingEnd||!e.range.start)return{range:{start:a,end:null},awaitingEnd:true};const r=e.range.start;if(l(r,a))return{range:{start:a,end:null},awaitingEnd:true};return{range:a.getTime()<r.getTime()?{start:a,end:r}:{start:r,end:a},awaitingEnd:false}}function D(e,t,a=null){const{start:r}=t;const s=t.end??(r&&a?a:null);const n=Boolean(r&&l(e,r));const i=Boolean(s&&l(e,s));if(!r||!s)return{isStart:n,isEnd:i,isInside:false};const[o,d]=r.getTime()<=s.getTime()?[r,s]:[s,r];const c=e.getTime();return{isStart:n,isEnd:i,isInside:c>o.getTime()&&c<d.getTime()}}function z(e,t){if(!e.start||!e.end)return"";return`${t(e.start)}/${t(e.end)}`}function j(e,t){const[a,r]=(e??"").split("/");const s=t(a??"");const n=t(r??"");if(!s||!n)return{start:null,end:null};return s.getTime()<=n.getTime()?{start:s,end:n}:{start:n,end:s}}const S=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-daterange-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-daterange-invalid-border);margin-inline-start:var(--space-1)}.row-controls{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-daterange-bg);border:1px solid var(--pf-daterange-border);border-radius:var(--radius-md);color:var(--pf-daterange-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-daterange-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-daterange-text-muted)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-daterange-text)}.clear:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.description{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-daterange-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-daterange-menu-bg);border:1px solid var(--pf-daterange-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);color:var(--pf-daterange-text);padding:var(--space-3)}.panel:popover-open{animation:pf-date-range-in var(--pf-transition-enter)}@keyframes pf-date-range-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.nav{display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.step{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1)}.step:hover{background:var(--pf-daterange-bg-subtle);color:var(--pf-daterange-text)}.step:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.months{display:grid;gap:var(--space-4)}@media (min-width: 768px){.months{grid-template-columns:1fr 1fr}}.month-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-2);text-align:center}.grid{display:grid;gap:2px;grid-template-columns:repeat(7, 1fr)}.row{display:contents}.weekday{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) 0;text-align:center}.day,.empty{aspect-ratio:1;display:flex;min-width:var(--space-7)}.day{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-daterange-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);justify-content:center}.day:hover:not([aria-disabled='true']){background:var(--pf-daterange-bg-subtle)}.day:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.day--today{border-color:var(--pf-calendar-today-border)}.day--inside{background:var(--pf-daterange-range-bg);border-radius:0;color:var(--pf-daterange-range-text)}.day--endpoint{background:var(--pf-calendar-selected-bg);border-color:var(--pf-calendar-selected-bg);color:var(--pf-calendar-selected-text)}.day--start:not(.day--end){border-end-end-radius:0;border-start-end-radius:0}.day--end:not(.day--start){border-end-start-radius:0;border-start-start-radius:0}.day[aria-disabled='true']{cursor:not-allowed;opacity:0.4}`;const F={[k.ArrowRight]:"day-next",[k.ArrowLeft]:"day-previous",[k.ArrowDown]:"week-next",[k.ArrowUp]:"week-previous",[k.Home]:"week-start",[k.End]:"week-end",PageDown:"month-next",PageUp:"month-previous"};const M=class{constructor(a){e(this,a);this.pfChange=t(this,"pfChange");this.pfOpenChange=t(this,"pfOpenChange");if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}}get el(){return a(this)}internals;name;value="";open=false;label;description;error;placeholder="Select dates";required=false;disabled=false;allowClear=false;min;max;startYear;endYear;isDateDisabled;pfChange;pfOpenChange;leftMonth=c(new Date);focusedDate=d(new Date);hovered=null;awaitingEnd=false;initialValue="";pendingStart=null;stopObserving;shouldRestoreFocus=false;componentWillLoad(){this.initialValue=this.value??"";const{start:e}=this.range();const t=e??d(new Date);this.focusedDate=t;this.leftMonth=this.clamp(c(t));this.syncFormState()}componentDidRender(){if(!this.shouldRestoreFocus)return;this.shouldRestoreFocus=false;this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus()}disconnectedCallback(){this.stopObserving?.()}syncDisplayedMonths(){const{start:e,end:t}=this.range();if(!e||!t)return;this.pendingStart=null;this.awaitingEnd=false;this.focusedDate=e;this.leftMonth=this.clamp(c(e))}syncFormState(){const{start:e,end:t}=this.range();if(!e||!t||!this.name){this.internals.setFormValue(null)}else{const a=new FormData;a.append(`${this.name}-start`,f(e));a.append(`${this.name}-end`,f(t));this.internals.setFormValue(a)}x(this.internals,Boolean(e&&t),this.required,this.error)}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.awaitingEnd=false;this.hovered=null}range(){return j(this.value,u)}get years(){const e=(new Date).getFullYear();const t=this.startYear??e-50;const a=this.endYear??e+50;return{start:Math.min(t,a),end:Math.max(t,a)}}clamp(e){const{start:t,end:a}=this.years;return h(e,t,a)}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}isDisabled(e){if(p(e,u(this.min),u(this.max)))return true;return this.isDateDisabled?.(e)??false}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=n({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:t,top:a})=>i(e,t,a)});this.shouldRestoreFocus=true}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;this.hovered=null;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};pick(e){if(this.isDisabled(e))return;const t=C({range:this.displayRange(),awaitingEnd:this.awaitingEnd},e);this.awaitingEnd=t.awaitingEnd;this.focusedDate=d(e);if(t.awaitingEnd){this.value="";this.pendingStart=t.range.start;return}this.pendingStart=null;this.hovered=null;this.value=z(t.range,f);this.pfChange.emit({value:this.value,start:t.range.start?f(t.range.start):"",end:t.range.end?f(t.range.end):""});this.open=false}displayRange(){const e=this.range();if(e.start&&e.end)return e;return{start:this.pendingStart,end:null}}moveFocus(e){const t=b(this.focusedDate,e);const{start:a,end:r}=this.years;if(t.getFullYear()<a||t.getFullYear()>r)return;this.focusedDate=t;this.shouldRestoreFocus=true;const s=g(this.leftMonth,1);if(!y(t,this.leftMonth)&&!y(t,s)){this.leftMonth=this.clamp(c(t))}}onKeyDown=e=>{const t=F[e.key];if(t){e.preventDefault();this.moveFocus(t);return}if(e.key===k.Enter||e.key===k.Space){e.preventDefault();this.pick(this.focusedDate);this.shouldRestoreFocus=true}};clear=e=>{e.stopPropagation();if(!this.value&&!this.pendingStart)return;this.value="";this.pendingStart=null;this.awaitingEnd=false;this.hovered=null;this.pfChange.emit({value:"",start:"",end:""})};formatted(){const{start:e,end:t}=this.range();if(!e||!t)return"";const a=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"});return`${a.format(e)} – ${a.format(t)}`}renderGrid(e){const t=v(e);const a=this.displayRange();const s=d(new Date);const n=new Intl.DateTimeFormat("en-US",{month:"long",year:"numeric"}).format(e);return r("div",{class:"month"},r("p",{class:"month-label"},n),r("div",{class:"grid",part:"grid",role:"grid","aria-label":n},r("div",{class:"row",role:"row"},m.map((e=>r("span",{key:e,class:"weekday",role:"columnheader","aria-label":e},e)))),Array.from({length:w/7},((e,n)=>r("div",{key:n,class:"row",role:"row"},t.slice(n*7,n*7+7).map((({date:e,inCurrentMonth:t})=>{if(!t){return r("span",{key:f(e),class:"empty",role:"gridcell"})}const n=D(e,a,this.hovered);const i=n.isStart||n.isEnd;const o=this.isDisabled(e);return r("button",{key:f(e),type:"button",role:"gridcell","data-day":f(e),part:"day",class:{day:true,"day--today":l(s,e),"day--endpoint":i,"day--start":n.isStart,"day--end":n.isEnd,"day--inside":n.isInside},tabindex:l(this.focusedDate,e)?0:-1,"aria-selected":i||n.isInside?"true":"false","aria-current":l(s,e)?"date":null,"aria-disabled":o?"true":null,"aria-label":new Intl.DateTimeFormat("en-US",{weekday:"long",month:"long",day:"numeric",year:"numeric"}).format(e),onClick:()=>{this.pick(e);this.shouldRestoreFocus=true},onMouseEnter:()=>{if(this.awaitingEnd&&!o)this.hovered=e}},e.getDate())})))))))}render(){const e=o(this.description&&"description",this.error&&"error");const t=this.formatted();const a=g(this.leftMonth,1);return r(s,{key:"c769f8e46ecb2b1cc36fb6569f5c52c602d5bace"},r("div",{key:"9800b4ea3fbd90e9ce1aa0e14b1c18c960da6c80",class:"field",part:"field"},this.label&&r("label",{key:"da11753ffc0352c61aa63c57fa03f84dbff7b8be",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&r("span",{key:"156cce16b0dcd46f94cf13f87bf2bdeebb1f8bd3",class:"required","aria-hidden":"true"},"*")),r("div",{key:"9ff549ec5c220e04049055b813eb979fdf87a835",class:"row-controls"},r("button",{key:"b4245ab2a3fe86abfc33b451eb4cc4994ef78480",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",disabled:this.disabled,"aria-haspopup":"dialog","aria-expanded":this.open?"true":"false","aria-controls":"panel","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open}},r("span",{key:"02e3efca7af827add1fa80519cdf995c7cb54dc3",class:{value:true,"value--placeholder":!t}},t||this.placeholder),r("pf-icon",{key:"e2139c1b236edfd82e109caeb778de8c1c43468d",name:"calendar"})),this.allowClear&&(this.value||this.pendingStart)&&r("button",{key:"f2572d3f798e9ba895b1165d024522014cfbb5ab",class:"clear",part:"clear",type:"button","aria-label":"Clear selected dates",disabled:this.disabled,onClick:this.clear},r("pf-icon",{key:"d22ecfecc4114815c557b60d4908a9bbea6e8b1d",name:"circle-xmark"}))),this.description&&r("p",{key:"f5399489f7666e2b7b7d4bbc1885e74a52e32cd4",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"1a46f2d10e6edcc47979ecbb0724958a9790b2db",class:"error",part:"error",id:"error"},this.error)),r("div",{key:"2aaa30dcd06ab95ebe7973d2783224cf236b57ef",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a date range",onToggle:this.onToggle,onKeyDown:this.onKeyDown,onMouseLeave:()=>{this.hovered=null}},r("div",{key:"d5c052b2ce87bb5a19492a3d2afe65a8be50aac6",class:"nav"},r("button",{key:"3f04ddb2cfea5ef4c05380a81c1f4cd2b43be396",type:"button",class:"step","aria-label":"Previous month",onClick:()=>{this.leftMonth=this.clamp(g(this.leftMonth,-1))}},r("pf-icon",{key:"cb18b7c7e71a687d6220126f503a36170f1afc2f",name:"square-caret-left"})),r("button",{key:"837bf1095910392e6a0249f785e558ecf729e870",type:"button",class:"step","aria-label":"Next month",onClick:()=>{this.leftMonth=this.clamp(g(this.leftMonth,1))}},r("pf-icon",{key:"bd56b0173777c7dc13bc9c052e2ccb7fc81cefb1",name:"square-caret-right"}))),r("div",{key:"102f50860c882a493ec9b8f9098d0703f4ecaf40",class:"months"},this.renderGrid(this.leftMonth),this.renderGrid(a))))}static get formAssociated(){return true}static get watchers(){return{value:[{syncDisplayedMonths:0},{syncFormState:0}],name:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};M.style=S();export{M as pf_date_range_picker};
2
- //# sourceMappingURL=p-52eef7eb.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["nextDateRangeSelection","current","date","clicked","toMidday","awaitingEnd","range","start","end","isSameDay","getTime","rangeDayState","hovered","isStart","Boolean","isEnd","isInside","low","high","day","formatDateRange","format","parseDateRange","value","parse","from","to","split","pfDateRangePickerCss","MOVES","Keys","ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","PageDown","PageUp","PfDateRangePicker","internals","name","open","label","description","error","placeholder","required","disabled","allowClear","min","max","startYear","endYear","isDateDisabled","pfChange","pfOpenChange","leftMonth","startOfMonth","Date","focusedDate","initialValue","pendingStart","stopObserving","shouldRestoreFocus","componentWillLoad","this","base","clamp","syncFormState","componentDidRender","el","shadowRoot","querySelector","focus","disconnectedCallback","syncDisplayedMonths","setFormValue","data","FormData","append","formatISODate","applyControlValidity","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","parseISODate","years","now","getFullYear","Math","clampMonthToYearRange","panel","trigger","isDisabled","isOutsideDateRange","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","undefined","hidePopover","onToggle","event","nowOpen","newState","pick","displayRange","committed","moveFocus","move","moveCalendarDate","right","addMonths","isSameMonth","onKeyDown","key","preventDefault","Enter","Space","clear","stopPropagation","formatted","Intl","DateTimeFormat","month","year","renderGrid","days","buildCalendarDays","today","h","class","part","role","WEEKDAY_LABELS","map","Array","length","CALENDAR_CELL_COUNT","_","week","slice","inCurrentMonth","state","isEndpoint","type","tabindex","weekday","onClick","onMouseEnter","getDate","render","describedBy","composeDescribedBy","text","Host","htmlFor","id","popover","onMouseLeave"],"sources":["../core/dist/date-range.js","src/components/pf-date-range-picker/pf-date-range-picker.css?tag=pf-date-range-picker&encapsulation=shadow","src/components/pf-date-range-picker/pf-date-range-picker.tsx"],"sourcesContent":["import { isSameDay, toMidday } from \"./date.js\";\n//#region src/date-range.ts\n/**\n* Where a click on `date` leaves the selection.\n*\n* Three cases, and the second two are the ones worth naming:\n* - not awaiting an end: start the range here and wait for the other end;\n* - awaiting an end, clicked before the start: the two swap, because a range\n* has no opinion about which end the user picked first;\n* - awaiting an end, clicked the start again: start over rather than make a\n* one-day range, which is what the React component does and is the kinder\n* reading of a double click.\n*/\nfunction nextDateRangeSelection(current, date) {\n\tconst clicked = toMidday(date);\n\tif (!current.awaitingEnd || !current.range.start) return {\n\t\trange: {\n\t\t\tstart: clicked,\n\t\t\tend: null\n\t\t},\n\t\tawaitingEnd: true\n\t};\n\tconst start = current.range.start;\n\tif (isSameDay(start, clicked)) return {\n\t\trange: {\n\t\t\tstart: clicked,\n\t\t\tend: null\n\t\t},\n\t\tawaitingEnd: true\n\t};\n\treturn {\n\t\trange: clicked.getTime() < start.getTime() ? {\n\t\t\tstart: clicked,\n\t\t\tend: start\n\t\t} : {\n\t\t\tstart,\n\t\t\tend: clicked\n\t\t},\n\t\tawaitingEnd: false\n\t};\n}\n/**\n* How a day should read, given the range and whatever is hovered.\n*\n* A hovered day stands in for the missing end while the range is half-made,\n* which is what makes the preview follow the pointer. It stands in only when\n* there is a start and no end — hovering before the first click previews\n* nothing.\n*/\nfunction rangeDayState(date, range, hovered = null) {\n\tconst { start } = range;\n\tconst end = range.end ?? (start && hovered ? hovered : null);\n\tconst isStart = Boolean(start && isSameDay(date, start));\n\tconst isEnd = Boolean(end && isSameDay(date, end));\n\tif (!start || !end) return {\n\t\tisStart,\n\t\tisEnd,\n\t\tisInside: false\n\t};\n\tconst [low, high] = start.getTime() <= end.getTime() ? [start, end] : [end, start];\n\tconst day = date.getTime();\n\treturn {\n\t\tisStart,\n\t\tisEnd,\n\t\tisInside: day > low.getTime() && day < high.getTime()\n\t};\n}\n/** `YYYY-MM-DD/YYYY-MM-DD`, or `''` when the range is not yet complete. */\nfunction formatDateRange(range, format) {\n\tif (!range.start || !range.end) return \"\";\n\treturn `${format(range.start)}/${format(range.end)}`;\n}\n/** Parses `YYYY-MM-DD/YYYY-MM-DD`; anything else is an empty range. */\nfunction parseDateRange(value, parse) {\n\tconst [from, to] = (value ?? \"\").split(\"/\");\n\tconst start = parse(from ?? \"\");\n\tconst end = parse(to ?? \"\");\n\tif (!start || !end) return {\n\t\tstart: null,\n\t\tend: null\n\t};\n\treturn start.getTime() <= end.getTime() ? {\n\t\tstart,\n\t\tend\n\t} : {\n\t\tstart: end,\n\t\tend: start\n\t};\n}\n//#endregion\nexport { formatDateRange, nextDateRangeSelection, parseDateRange, rangeDayState };\n",":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n display: grid;\n gap: var(--space-1);\n}\n\n.label {\n color: var(--pf-daterange-text);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n}\n\n.required {\n color: var(--pf-daterange-invalid-border);\n margin-inline-start: var(--space-1);\n}\n\n.row-controls {\n align-items: center;\n display: flex;\n gap: var(--space-2);\n}\n\n.trigger {\n align-items: center;\n background: var(--pf-daterange-bg);\n border: 1px solid var(--pf-daterange-border);\n border-radius: var(--radius-md);\n color: var(--pf-daterange-text);\n cursor: pointer;\n display: flex;\n flex: 1;\n font-family: inherit;\n font-size: var(--font-size-sm);\n gap: var(--space-2);\n justify-content: space-between;\n min-width: 0;\n padding: var(--space-2) var(--space-3);\n text-align: start;\n}\n\n.trigger:focus-visible {\n box-shadow: var(--pf-daterange-focus-ring);\n outline: none;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.trigger--invalid {\n border-color: var(--pf-daterange-invalid-border);\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.value--placeholder {\n color: var(--pf-daterange-text-muted);\n}\n\n.clear {\n align-items: center;\n background: none;\n border: 0;\n border-radius: var(--radius-sm);\n color: var(--pf-daterange-text-muted);\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n justify-content: center;\n padding: var(--space-1);\n}\n\n.clear:hover:not(:disabled) {\n color: var(--pf-daterange-text);\n}\n\n.clear:focus-visible {\n box-shadow: var(--pf-daterange-focus-ring);\n outline: none;\n}\n\n.description {\n color: var(--pf-daterange-text-muted);\n font-size: var(--font-size-xs);\n margin: 0;\n}\n\n.error {\n color: var(--pf-daterange-invalid-border);\n font-size: var(--font-size-xs);\n margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.panel {\n inset: auto;\n margin: 0;\n background: var(--pf-daterange-menu-bg);\n border: 1px solid var(--pf-daterange-menu-border);\n border-radius: var(--radius-md);\n box-shadow: var(--pf-elevation-popover-shadow);\n color: var(--pf-daterange-text);\n padding: var(--space-3);\n}\n\n.panel:popover-open {\n animation: pf-date-range-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-range-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .panel:popover-open {\n animation: none;\n }\n}\n\n.nav {\n display: flex;\n justify-content: space-between;\n margin-bottom: var(--space-2);\n}\n\n.step {\n align-items: center;\n background: none;\n border: 0;\n border-radius: var(--radius-sm);\n color: var(--pf-daterange-text-muted);\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding: var(--space-1);\n}\n\n.step:hover {\n background: var(--pf-daterange-bg-subtle);\n color: var(--pf-daterange-text);\n}\n\n.step:focus-visible {\n box-shadow: var(--pf-daterange-focus-ring);\n outline: none;\n}\n\n/* One month on a phone, two side by side from --md up. */\n.months {\n display: grid;\n gap: var(--space-4);\n}\n\n@media (--md) {\n .months {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n.month-label {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n margin: 0 0 var(--space-2);\n text-align: center;\n}\n\n.grid {\n display: grid;\n gap: 2px;\n grid-template-columns: repeat(7, 1fr);\n}\n\n/*\n * `display: contents`, so each row's seven cells join the grid's own columns.\n * The rows exist for the `role=\"row\"` the grid pattern needs, not for layout.\n */\n.row {\n display: contents;\n}\n\n.weekday {\n color: var(--pf-daterange-text-muted);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n padding: var(--space-1) 0;\n text-align: center;\n}\n\n.day,\n.empty {\n aspect-ratio: 1;\n display: flex;\n min-width: var(--space-7);\n}\n\n.day {\n align-items: center;\n background: none;\n border: 1px solid transparent;\n border-radius: var(--radius-sm);\n color: var(--pf-daterange-text);\n cursor: pointer;\n font-family: inherit;\n font-size: var(--font-size-sm);\n justify-content: center;\n}\n\n.day:hover:not([aria-disabled='true']) {\n background: var(--pf-daterange-bg-subtle);\n}\n\n.day:focus-visible {\n box-shadow: var(--pf-daterange-focus-ring);\n outline: none;\n}\n\n.day--today {\n border-color: var(--pf-calendar-today-border);\n}\n\n/*\n * The inside of the range is square and the ends are rounded on their outer\n * side only, so the run reads as one band rather than a row of pills.\n */\n.day--inside {\n background: var(--pf-daterange-range-bg);\n border-radius: 0;\n color: var(--pf-daterange-range-text);\n}\n\n.day--endpoint {\n background: var(--pf-calendar-selected-bg);\n border-color: var(--pf-calendar-selected-bg);\n color: var(--pf-calendar-selected-text);\n}\n\n.day--start:not(.day--end) {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n}\n\n.day--end:not(.day--start) {\n border-end-start-radius: 0;\n border-start-start-radius: 0;\n}\n\n.day[aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.4;\n}\n","import {\n addMonths,\n buildCalendarDays,\n CALENDAR_CELL_COUNT,\n clampMonthToYearRange,\n composeDescribedBy,\n formatDateRange,\n formatISODate,\n isOutsideDateRange,\n isSameDay,\n isSameMonth,\n Keys,\n moveCalendarDate,\n nextDateRangeSelection,\n observeAnchoredPosition,\n parseDateRange,\n parseISODate,\n rangeDayState,\n startOfMonth,\n toMidday,\n WEEKDAY_LABELS,\n type CalendarMove,\n type DateRangeValue,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, CalendarMove> = {\n [Keys.ArrowRight]: 'day-next',\n [Keys.ArrowLeft]: 'day-previous',\n [Keys.ArrowDown]: 'week-next',\n [Keys.ArrowUp]: 'week-previous',\n [Keys.Home]: 'week-start',\n [Keys.End]: 'week-end',\n PageDown: 'month-next',\n PageUp: 'month-previous',\n};\n\n/**\n * A form-associated date-range field: two month grids in a popover, with a\n * preview that follows the pointer while the range is half-made.\n *\n * **It submits two entries from one control.** `setFormValue` accepts a\n * `FormData`, and every entry in it is submitted — measured, along with the\n * fact that the element's own `name` attribute is then ignored entirely. So a\n * range goes in as `${name}-start` and `${name}-end`, which is what a server\n * handling a form actually wants, rather than one field a handler has to split.\n * The `value` property stays a single round-trippable `start/end` string.\n *\n * The grids are rendered here rather than composed from two `pf-calendar`s:\n * the range preview spans both months, so one element has to own the hover and\n * the selection for both. The day-state and selection rules are core's, shared\n * with the React component.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the grids.\n * @part clear - the clear button.\n * @part panel - the floating panel.\n * @part grid - each month grid.\n * @part day - every day cell.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n tag: 'pf-date-range-picker',\n styleUrl: 'pf-date-range-picker.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfDateRangePicker {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The base name for the two submitted entries, `${name}-start` and\n * `${name}-end`. Reflected for selectors; the submission reads the property,\n * because a `FormData` value carries its own keys.\n */\n @Prop({ reflect: true }) name?: string;\n\n /** The range as `YYYY-MM-DD/YYYY-MM-DD`, or empty. */\n @Prop({ mutable: true }) value = '';\n\n /** Whether the panel is showing. Reflected for the stylesheet. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Select dates';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /** Offer a button that empties the range. */\n @Prop() allowClear = false;\n\n @Prop() min?: string;\n\n @Prop() max?: string;\n\n @Prop() startYear?: number;\n\n @Prop() endYear?: number;\n\n /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n @Prop() isDateDisabled?: (date: Date) => boolean;\n\n /** Fires when the range changes or is cleared, with the `start/end` string. */\n @Event() pfChange!: EventEmitter<{ value: string; start: string; end: string }>;\n\n /** Fires whenever the panel opens or closes, whoever caused it. */\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /** The left-hand month; the right-hand one is always the month after. */\n @State() leftMonth: Date = startOfMonth(new Date());\n\n /** The day the grids' single tab stop sits on. */\n @State() focusedDate: Date = toMidday(new Date());\n\n /** The day under the pointer, which previews the missing end. */\n @State() hovered: Date | null = null;\n\n /** True once a start is chosen and the next click sets the end. */\n @State() awaitingEnd = false;\n\n private initialValue = '';\n\n /**\n * The start held while the range is half-made.\n *\n * Not in `value`, because `value` is the *submitted* range and a half-made\n * one is not a range — a form read mid-selection would see a start with no\n * end. Held here instead, and folded back in for rendering.\n */\n private pendingStart: Date | null = null;\n private stopObserving?: () => void;\n private shouldRestoreFocus = false;\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n const { start } = this.range();\n const base = start ?? toMidday(new Date());\n this.focusedDate = base;\n this.leftMonth = this.clamp(startOfMonth(base));\n this.syncFormState();\n }\n\n componentDidRender() {\n if (!this.shouldRestoreFocus) return;\n this.shouldRestoreFocus = false;\n this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n }\n\n disconnectedCallback() {\n this.stopObserving?.();\n }\n\n /**\n * Follows a range set from outside, so the grids show what they are told.\n *\n * Without this the element kept whatever month it loaded with, and a\n * consumer assigning `value` got a correct value over the wrong months —\n * the days it names were not even rendered.\n */\n @Watch('value')\n syncDisplayedMonths() {\n const { start, end } = this.range();\n if (!start || !end) return;\n this.pendingStart = null;\n this.awaitingEnd = false;\n this.focusedDate = start;\n this.leftMonth = this.clamp(startOfMonth(start));\n }\n\n /*\n * `name` is watched here and not on the controls that pass a plain string to\n * `setFormValue`: those take their submission name from the reflected\n * attribute, so the platform picks a change up by itself. This one builds\n * the name *into* a FormData, so without the watch a name assigned after\n * load would never reach the submission.\n */\n @Watch('name')\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n const { start, end } = this.range();\n\n if (!start || !end || !this.name) {\n this.internals.setFormValue(null);\n } else {\n /*\n * A FormData, so one control submits both ends. Measured: every entry in\n * it reaches the submission, and the element's own `name` attribute is\n * ignored in this mode — which is why the keys are built here.\n */\n const data = new FormData();\n data.append(`${this.name}-start`, formatISODate(start));\n data.append(`${this.name}-end`, formatISODate(end));\n this.internals.setFormValue(data);\n }\n\n applyControlValidity(this.internals, Boolean(start && end), this.required, this.error);\n }\n\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showPanel();\n else this.hidePanel();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n @Method()\n async show(): Promise<void> {\n if (!this.disabled) this.open = true;\n }\n\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.awaitingEnd = false;\n this.hovered = null;\n }\n\n private range(): DateRangeValue {\n return parseDateRange(this.value, parseISODate);\n }\n\n private get years() {\n const now = new Date().getFullYear();\n const start = this.startYear ?? now - 50;\n const end = this.endYear ?? now + 50;\n return { start: Math.min(start, end), end: Math.max(start, end) };\n }\n\n private clamp(date: Date): Date {\n const { start, end } = this.years;\n return clampMonthToYearRange(date, start, end);\n }\n\n private get panel() {\n return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n }\n\n private get trigger() {\n return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n }\n\n private isDisabled(date: Date): boolean {\n if (isOutsideDateRange(date, parseISODate(this.min), parseISODate(this.max))) return true;\n return this.isDateDisabled?.(date) ?? false;\n }\n\n private showPanel() {\n const panel = this.panel;\n if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n panel.showPopover();\n this.stopObserving?.();\n this.stopObserving = observeAnchoredPosition({\n getAnchor: () => this.trigger,\n getFloating: () => panel,\n align: 'start',\n matchAnchorWidth: false,\n flip: true,\n onChange: ({ left, top }) => placePopover(panel, left, top),\n });\n\n this.shouldRestoreFocus = true;\n }\n\n private hidePanel() {\n this.stopObserving?.();\n this.stopObserving = undefined;\n this.hovered = null;\n const panel = this.panel;\n if (panel?.matches(':popover-open')) panel.hidePopover();\n }\n\n private onToggle = (event: ToggleEvent) => {\n const nowOpen = event.newState === 'open';\n if (this.open !== nowOpen) this.open = nowOpen;\n if (!nowOpen) this.trigger?.focus();\n };\n\n /** One click through core's state machine, plus this element's side-effects. */\n private pick(date: Date) {\n if (this.isDisabled(date)) return;\n\n /*\n * `displayRange()`, not `range()`. A half-made range is deliberately kept\n * out of `value`, so reading the state machine's input from `value` hands\n * it a range with no start — and core, correctly, treats that as \"begin a\n * new range\". Every second click restarted instead of closing. Caught by\n * the swap and Enter tests.\n */\n const next = nextDateRangeSelection(\n { range: this.displayRange(), awaitingEnd: this.awaitingEnd },\n date,\n );\n\n this.awaitingEnd = next.awaitingEnd;\n this.focusedDate = toMidday(date);\n\n if (next.awaitingEnd) {\n // Half-made: hold the start without reporting an incomplete range.\n this.value = '';\n this.pendingStart = next.range.start;\n return;\n }\n\n this.pendingStart = null;\n this.hovered = null;\n this.value = formatDateRange(next.range, formatISODate);\n this.pfChange.emit({\n value: this.value,\n start: next.range.start ? formatISODate(next.range.start) : '',\n end: next.range.end ? formatISODate(next.range.end) : '',\n });\n this.open = false;\n }\n\n /** What the grids draw: the committed range, or the half-made one. */\n private displayRange(): DateRangeValue {\n const committed = this.range();\n if (committed.start && committed.end) return committed;\n return { start: this.pendingStart, end: null };\n }\n\n private moveFocus(move: CalendarMove) {\n const next = moveCalendarDate(this.focusedDate, move);\n const { start, end } = this.years;\n if (next.getFullYear() < start || next.getFullYear() > end) return;\n\n this.focusedDate = next;\n this.shouldRestoreFocus = true;\n\n // Keep the focused day on screen: it belongs to one of the two months.\n const right = addMonths(this.leftMonth, 1);\n if (!isSameMonth(next, this.leftMonth) && !isSameMonth(next, right)) {\n this.leftMonth = this.clamp(startOfMonth(next));\n }\n }\n\n private onKeyDown = (event: KeyboardEvent) => {\n const move = MOVES[event.key];\n if (move) {\n event.preventDefault();\n this.moveFocus(move);\n return;\n }\n\n if (event.key === Keys.Enter || event.key === Keys.Space) {\n event.preventDefault();\n this.pick(this.focusedDate);\n this.shouldRestoreFocus = true;\n }\n };\n\n private clear = (event: MouseEvent) => {\n event.stopPropagation();\n if (!this.value && !this.pendingStart) return;\n this.value = '';\n this.pendingStart = null;\n this.awaitingEnd = false;\n this.hovered = null;\n this.pfChange.emit({ value: '', start: '', end: '' });\n };\n\n private formatted(): string {\n const { start, end } = this.range();\n if (!start || !end) return '';\n const format = new Intl.DateTimeFormat('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n });\n return `${format.format(start)} – ${format.format(end)}`;\n }\n\n private renderGrid(month: Date) {\n const days = buildCalendarDays(month);\n const range = this.displayRange();\n const today = toMidday(new Date());\n const label = new Intl.DateTimeFormat('en-US', {\n month: 'long',\n year: 'numeric',\n }).format(month);\n\n return (\n <div class=\"month\">\n <p class=\"month-label\">{label}</p>\n <div class=\"grid\" part=\"grid\" role=\"grid\" aria-label={label}>\n <div class=\"row\" role=\"row\">\n {WEEKDAY_LABELS.map((day) => (\n <span key={day} class=\"weekday\" role=\"columnheader\" aria-label={day}>\n {day}\n </span>\n ))}\n </div>\n\n {Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (\n <div key={week} class=\"row\" role=\"row\">\n {days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {\n if (!inCurrentMonth) {\n return <span key={formatISODate(date)} class=\"empty\" role=\"gridcell\"></span>;\n }\n\n const state = rangeDayState(date, range, this.hovered);\n const isEndpoint = state.isStart || state.isEnd;\n const disabled = this.isDisabled(date);\n\n return (\n <button\n key={formatISODate(date)}\n type=\"button\"\n role=\"gridcell\"\n data-day={formatISODate(date)}\n part=\"day\"\n class={{\n day: true,\n 'day--today': isSameDay(today, date),\n 'day--endpoint': isEndpoint,\n 'day--start': state.isStart,\n 'day--end': state.isEnd,\n 'day--inside': state.isInside,\n }}\n tabindex={isSameDay(this.focusedDate, date) ? 0 : -1}\n aria-selected={isEndpoint || state.isInside ? 'true' : 'false'}\n aria-current={isSameDay(today, date) ? 'date' : null}\n aria-disabled={disabled ? 'true' : null}\n aria-label={new Intl.DateTimeFormat('en-US', {\n weekday: 'long',\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n }).format(date)}\n onClick={() => {\n this.pick(date);\n this.shouldRestoreFocus = true;\n }}\n onMouseEnter={() => {\n if (this.awaitingEnd && !disabled) this.hovered = date;\n }}\n >\n {date.getDate()}\n </button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const text = this.formatted();\n const right = addMonths(this.leftMonth, 1);\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n\n <div class=\"row-controls\">\n <button\n id=\"trigger\"\n part=\"trigger\"\n class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n type=\"button\"\n disabled={this.disabled}\n aria-haspopup=\"dialog\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"panel\"\n aria-invalid={this.error ? 'true' : null}\n aria-required={this.required ? 'true' : null}\n aria-describedby={describedBy}\n onClick={() => {\n if (!this.disabled) this.open = !this.open;\n }}\n >\n <span class={{ value: true, 'value--placeholder': !text }}>\n {text || this.placeholder}\n </span>\n <pf-icon name=\"calendar\"></pf-icon>\n </button>\n\n {this.allowClear && (this.value || this.pendingStart) && (\n <button\n class=\"clear\"\n part=\"clear\"\n type=\"button\"\n aria-label=\"Clear selected dates\"\n disabled={this.disabled}\n onClick={this.clear}\n >\n <pf-icon name=\"circle-xmark\"></pf-icon>\n </button>\n )}\n </div>\n\n {this.description && (\n <p class=\"description\" part=\"description\" id=\"description\">\n {this.description}\n </p>\n )}\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </div>\n\n <div\n id=\"panel\"\n part=\"panel\"\n class=\"panel\"\n popover=\"auto\"\n role=\"dialog\"\n aria-label=\"Choose a date range\"\n onToggle={this.onToggle}\n onKeyDown={this.onKeyDown}\n onMouseLeave={() => {\n this.hovered = null;\n }}\n >\n <div class=\"nav\">\n <button\n type=\"button\"\n class=\"step\"\n aria-label=\"Previous month\"\n onClick={() => {\n this.leftMonth = this.clamp(addMonths(this.leftMonth, -1));\n }}\n >\n <pf-icon name=\"square-caret-left\"></pf-icon>\n </button>\n <button\n type=\"button\"\n class=\"step\"\n aria-label=\"Next month\"\n onClick={() => {\n this.leftMonth = this.clamp(addMonths(this.leftMonth, 1));\n }}\n >\n <pf-icon name=\"square-caret-right\"></pf-icon>\n </button>\n </div>\n\n <div class=\"months\">\n {this.renderGrid(this.leftMonth)}\n {this.renderGrid(right)}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,a,h as r,H as i}from"./p-Bm6UxEit.js";import{c as s}from"./p-DfpCerXM.js";import{a as o}from"./p-Cr6IXrUk.js";const d=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-textarea-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-textarea-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-textarea-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.textarea{background:var(--pf-textarea-bg);border:1px solid var(--pf-textarea-border);border-radius:var(--radius-md);color:var(--pf-textarea-text);font:inherit;line-height:1.45;min-height:96px;padding:var(--space-2) var(--space-3);resize:vertical;width:100%}.textarea:focus{outline:none}.textarea:focus-visible{border-color:var(--pf-textarea-focus-border);box-shadow:var(--pf-textarea-focus-ring, var(--pf-focus-ring))}.textarea::placeholder{color:var(--pf-textarea-text-muted)}.textarea--invalid{border-color:var(--pf-textarea-invalid-border)}.textarea:disabled{cursor:not-allowed;opacity:0.6}`;const n=class{constructor(a){e(this,a);this.pfInput=t(this,"pfInput");this.pfChange=t(this,"pfChange");if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}}get el(){return a(this)}internals;name;value="";rows=4;label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");o(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};componentDidRender(){const e=this.el.shadowRoot?.querySelector("textarea");if(e&&e.value!==(this.value??"")){e.value=this.value??""}}render(){const e=s(this.description&&"description",this.error&&"error");return r(i,{key:"2ec86efeeb1ce4aa2ec112e93157a8f205731bf3"},r("div",{key:"8d68eda3ec27c38703391e14f724e7dc06e76503",class:"field",part:"field"},this.label&&r("label",{key:"d73433e1f64c2e47b8a8ca88aa1805610e9058bb",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&r("span",{key:"1a52649b0e92dd7700aa21d3658126764bbac0d0",class:"required","aria-hidden":"true"},"*")),r("textarea",{key:"879a93a961d1f20d5835873bb8351e2ab04c2a79",id:"input",part:"textarea",class:{textarea:true,"textarea--invalid":Boolean(this.error)},name:this.name,rows:this.rows,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&r("p",{key:"91b2ffdb3da3e93e868d2b9a9398d99c2df49a27",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"58508d7aa6efbf4b55b304b029fb8c2ec6c817e3",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}};n.style=d();export{n as pf_textarea};
2
- //# sourceMappingURL=p-845c5252.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pfTextareaCss","PfTextarea","internals","name","value","rows","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","componentDidRender","control","el","shadowRoot","querySelector","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","textarea","readOnly"],"sources":["src/components/pf-textarea/pf-textarea.css?tag=pf-textarea&encapsulation=shadow","src/components/pf-textarea/pf-textarea.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n display: grid;\n gap: var(--space-2);\n}\n\n.label {\n color: var(--pf-textarea-field-label, var(--pf-field-label));\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n}\n\n.required {\n color: var(--pf-field-required);\n margin-inline-start: var(--space-1);\n}\n\n.description {\n color: var(--pf-textarea-field-description, var(--pf-field-description));\n font-size: var(--font-size-sm);\n margin: 0;\n}\n\n.error {\n color: var(--pf-textarea-field-error, var(--pf-field-error));\n font-size: var(--font-size-sm);\n margin: 0;\n}\n\n.textarea {\n background: var(--pf-textarea-bg);\n border: 1px solid var(--pf-textarea-border);\n border-radius: var(--radius-md);\n color: var(--pf-textarea-text);\n font: inherit;\n line-height: 1.45;\n min-height: 96px;\n padding: var(--space-2) var(--space-3);\n resize: vertical;\n width: 100%;\n}\n\n.textarea:focus {\n outline: none;\n}\n\n.textarea:focus-visible {\n border-color: var(--pf-textarea-focus-border);\n box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));\n}\n\n.textarea::placeholder {\n color: var(--pf-textarea-text-muted);\n}\n\n.textarea--invalid {\n border-color: var(--pf-textarea-invalid-border);\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated multi-line text control.\n *\n * Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n tag: 'pf-textarea',\n styleUrl: 'pf-textarea.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n @Element() el!: HTMLElement;\n\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Submitted under this name.\n *\n * Reflected, because a form-associated custom element takes its submission\n * name from the `name` *content attribute* -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n */\n @Prop({ reflect: true }) name?: string;\n\n /** The control's value. */\n @Prop({ mutable: true }) value = '';\n\n /** Visible rows. Mirrors the native attribute. */\n @Prop() rows = 4;\n\n /** Visible label. Rendered in the same root as the input, so `for` works. */\n @Prop() label?: string;\n\n /** Hint text below the control. */\n @Prop() description?: string;\n\n /** Error message. Its presence is what marks the control invalid. */\n @Prop() error?: string;\n\n @Prop() placeholder?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n @Prop({ reflect: true }) readonly = false;\n\n /** Fires on every keystroke, like the native `input` event. */\n @Event() pfInput!: EventEmitter<{ value: string }>;\n\n /** Fires when the value is committed, like the native `change` event. */\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /**\n * The value the control had when it was created, which is what a form reset\n * restores. Captured here because `value` has been overwritten by then.\n */\n private initialValue = '';\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value ?? '');\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n /**\n * Whether the control currently satisfies its constraints.\n *\n * A form-associated custom element does not inherit `checkValidity` from\n * anywhere -- the spec puts it on ElementInternals, so the element has to\n * forward it or consumers cannot ask.\n */\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n /** As `checkValidity`, but also shows the browser's validation message. */\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n /** The message explaining why the control is invalid, or an empty string. */\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /**\n * A reset restores the value the control started with, not an empty string —\n * verified against a native `<input value=\"initial\">`, which comes back to\n * \"initial\" rather than to \"\". Clearing it was a real defect: a\n * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n */\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n private onInput = (event: Event) => {\n this.value = (event.target as HTMLTextAreaElement).value;\n this.pfInput.emit({ value: this.value });\n };\n\n private onChange = () => {\n this.pfChange.emit({ value: this.value });\n };\n\n /**\n * A textarea's value is its text content, not an attribute, so it cannot be\n * rendered as a JSX child without Stencil replacing that text node on every\n * keystroke. It is written through the DOM property instead, which is what\n * the browser itself does.\n *\n * Guarded on inequality: assigning the same string still moves the caret to\n * the end in some engines, which would make typing into the middle of a\n * paragraph jump the cursor away on every character.\n */\n componentDidRender() {\n const control = this.el.shadowRoot?.querySelector('textarea');\n if (control && control.value !== (this.value ?? '')) {\n control.value = this.value ?? '';\n }\n }\n\n render() {\n // IDs are scoped to this shadow root, so they can be literal -- the useId()\n // the React component needs has no counterpart here.\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n <textarea\n id=\"input\"\n part=\"textarea\"\n class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n name={this.name}\n rows={this.rows}\n placeholder={this.placeholder}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n onInput={this.onInput}\n onChange={this.onChange}\n />\n {this.description && (\n <p class=\"description\" part=\"description\" id=\"description\">\n {this.description}\n </p>\n )}\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"mIAAA,MAAMA,EAAgB,IAAM,smC,MCiCfC,EAAU,M,kRAGFC,UAWMC,KAGAC,MAAQ,GAGzBC,KAAO,EAGPC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA+BzB,MACnDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAa3C,kBAAA4B,GACE,MAAMC,EAAUhB,KAAKiB,GAAGC,YAAYC,cAAc,YAClD,GAAIH,GAAWA,EAAQ7B,SAAWa,KAAKb,OAAS,IAAK,CACnD6B,EAAQ7B,MAAQa,KAAKb,OAAS,E,EAIlC,MAAAiC,GAGE,MAAMC,EAAcC,EAClBtB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACEgC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrB3B,KAAKX,OACJkC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvC5B,KAAKX,MACLW,KAAKP,UACJ8B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,YAAAE,IAAA,2CACEI,GAAG,QACHF,KAAK,WACLD,MAAO,CAAEI,SAAU,KAAM,oBAAqB1B,QAAQJ,KAAKT,QAC3DL,KAAMc,KAAKd,KACXE,KAAMY,KAAKZ,KACXI,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfqC,SAAU/B,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtB8B,EAClBX,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJiC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1C7B,KAAKV,aAGTU,KAAKT,OACJgC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9B7B,KAAKT,Q","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,a as i,h as s,H as r}from"./p-Bm6UxEit.js";import{o as a,p as o}from"./p-CC7AyfOt.js";import{c as n}from"./p-DfpCerXM.js";import{i as l,K as c}from"./p-g4FlTDZx.js";import{g as h,r as p}from"./p-CAz7-p8y.js";import{b as d,p as f,a as u,f as b}from"./p-BmcsJLdy.js";import{a as m}from"./p-Cr6IXrUk.js";const v=()=>`:host{display:block;--pf-option-text:var(--pf-multiselect-text);--pf-option-text-disabled:var(--pf-multiselect-text-muted);--pf-option-active-bg:var(--pf-multiselect-active-bg);--pf-option-active-text:var(--pf-multiselect-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-multiselect-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-multiselect-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);color:var(--pf-multiselect-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:focus-visible{border-color:var(--pf-multiselect-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-multiselect-invalid-border)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);min-width:0}.chip{background:var(--pf-multiselect-bg-subtle);border-radius:var(--radius-sm);font-size:var(--font-size-xs);padding:2px var(--space-2)}.placeholder{color:var(--pf-multiselect-text-muted)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-multiselect-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-multiselect-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-multi-select-in var(--pf-transition-enter)}@keyframes pf-multi-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const g={[c.ArrowDown]:"next",[c.ArrowUp]:"previous",[c.Home]:"first",[c.End]:"last"};const y=class{constructor(i){t(this,i);this.pfChange=e(this,"pfChange");this.pfOpenChange=e(this,"pfOpenChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";open=false;label;description;error;placeholder="Select options";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;chips=[];initialValue="";stopObserving;activeOption=null;warnedAboutSeparator=false;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){const t=this.values();if(t.length===0||!this.name){this.internals.setFormValue(null)}else{const e=new FormData;for(const i of t)e.append(this.name,i);this.internals.setFormValue(e)}m(this.internals,t.length>0,this.required,this.error)}syncOptions(){const t=this.values();const e=[];for(const e of this.options()){const i=t.includes(this.optionValue(e));e.selected=i}for(const i of t){const t=this.options().find((t=>this.optionValue(t)===i));if(t)e.push(t.textContent?.trim()??i)}this.chips=e;this.warnAboutSeparators()}warnAboutSeparators(){if(this.warnedAboutSeparator)return;const t=d(this.options().map((t=>this.optionValue(t))));if(t.length===0)return;this.warnedAboutSeparator=true;console.warn(`[pf-multi-select] option values cannot contain a comma, because \`value\` is a `+`comma-separated list: ${t.join(" ")}`)}syncOpen(t,e){if(t)this.showListbox();else this.hideListbox();if(t!==e)this.pfOpenChange.emit({open:t})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}async refresh(){this.syncOptions()}onSlotChange=()=>{this.syncOptions()};values(){return f(this.value)}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((t=>!t.hasAttribute("disabled")))}optionValue(t){return t.value??t.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.trigger,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:s,minWidth:r})=>{o(t,e,i);if(s!==undefined)t.style.width=`${s}px`;if(r!==undefined)t.style.minWidth=`${r}px`}});const e=this.values();const i=this.options().find((t=>e.includes(this.optionValue(t))&&!t.hasAttribute("disabled")))??this.enabled()[0];this.setActive(i??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const t=this.listbox;if(t?.matches(":popover-open"))t.hidePopover()}onToggle=t=>{const e=t.newState==="open";if(this.open!==e)this.open=e;if(!e)this.trigger?.focus()};setActive(t){for(const e of this.options()){if(e!==t)e.active=false}if(t)t.active=true;this.activeOption=t;this.syncActiveDescendant();if(t&&typeof t.scrollIntoView==="function"){t.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const t=this.trigger;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}toggle(t){if(t.hasAttribute("disabled")||this.disabled)return;const e=u(this.values(),this.optionValue(t));this.value=b(e);this.pfChange.emit({value:this.value,values:e})}handleOptionSelect(t){t.stopPropagation();const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.toggle(e)}move(t){const e=this.options();const i=h(e,(t=>t.hasAttribute("disabled")));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=p(t,i,s);if(r!==-1)this.setActive(e[r]??null)}handleKeyDown(t){if(this.disabled||t.defaultPrevented)return;const e=g[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(l(t.key)){t.preventDefault();if(!this.open)this.open=true;else if(this.activeOption)this.toggle(this.activeOption)}}render(){const t=n(this.description&&"description",this.error&&"error");return s(r,{key:"68ee3f2e23741c14f955523bf3cbcb10e4fc3e71"},s("div",{key:"ffbfe398e848a5134740908327bca92afe74f39c",class:"field",part:"field"},this.label&&s("label",{key:"7fe73bdad7836709b5e30536412283edf72abd37",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&s("span",{key:"1cecfe1256d01e6770417b030a8aba22ca65f802",class:"required","aria-hidden":"true"},"*")),s("button",{key:"03c611dff79a67cda5478d586eaa301fd4178843",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":t,onClick:()=>{if(!this.disabled)this.open=!this.open}},this.chips.length>0?s("span",{class:"chips"},this.chips.map((t=>s("span",{key:t,class:"chip",part:"chip"},t)))):s("span",{class:"placeholder"},this.placeholder),s("span",{key:"a31710bfb23f890b33a010962b93792424b71e36",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"517857c8ab460c5a60a50d42c3ff68d986e0c744",name:"chevron-down"}))),this.description&&s("p",{key:"549f06c9be1d291d4654ac63c6f03f749453113d",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"0da14622c434e02f6098a61382b22ee2b74a3f84",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"f62c24c5870b4a05bcba73969af4721ed52bf4e3",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-multiselectable":"true","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},s("slot",{key:"6d8c84b2173904d99f7b3583cbb2203636cd6214",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{name:[{syncFormState:0}],value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};y.style=v();export{y as pf_multi_select};
2
- //# sourceMappingURL=p-a24bf2bd.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pfMultiSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfMultiSelect","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","chips","initialValue","stopObserving","activeOption","warnedAboutSeparator","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","values","length","setFormValue","data","FormData","append","applyControlValidity","chosen","labels","option","options","selected","includes","optionValue","find","candidate","push","textContent","trim","warnAboutSeparators","offenders","assertSeparableValues","map","o","console","warn","join","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","refresh","onSlotChange","parseValueList","Array","from","el","querySelectorAll","enabled","filter","hasAttribute","getAttribute","listbox","shadowRoot","querySelector","trigger","panel","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","first","setActive","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","toggle","toggleValueInList","formatValueList","handleOptionSelect","stopPropagation","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleKeyDown","defaultPrevented","key","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","Boolean","type","role","onClick","chip","popover","maxHeight","overflowY","onSlotchange"],"sources":["src/components/pf-multi-select/pf-multi-select.css?tag=pf-multi-select&encapsulation=shadow","src/components/pf-multi-select/pf-multi-select.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css.\n */\n:host {\n display: block;\n --pf-option-text: var(--pf-multiselect-text);\n --pf-option-text-disabled: var(--pf-multiselect-text-muted);\n --pf-option-active-bg: var(--pf-multiselect-active-bg);\n --pf-option-active-text: var(--pf-multiselect-active-text);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n display: grid;\n gap: var(--space-1);\n}\n\n.label {\n color: var(--pf-multiselect-text);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n}\n\n.required {\n color: var(--pf-multiselect-invalid-border);\n margin-inline-start: var(--space-1);\n}\n\n.trigger {\n align-items: center;\n background: var(--pf-multiselect-bg);\n border: 1px solid var(--pf-multiselect-border);\n border-radius: var(--radius-md);\n color: var(--pf-multiselect-text);\n cursor: pointer;\n display: flex;\n font-family: inherit;\n font-size: var(--font-size-sm);\n gap: var(--space-2);\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n text-align: start;\n width: 100%;\n}\n\n.trigger:focus-visible {\n border-color: var(--pf-multiselect-focus-border);\n box-shadow: var(--pf-focus-ring);\n outline: none;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.trigger--invalid {\n border-color: var(--pf-multiselect-invalid-border);\n}\n\n.chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n min-width: 0;\n}\n\n.chip {\n background: var(--pf-multiselect-bg-subtle);\n border-radius: var(--radius-sm);\n font-size: var(--font-size-xs);\n padding: 2px var(--space-2);\n}\n\n.placeholder {\n color: var(--pf-multiselect-text-muted);\n}\n\n.chevron {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chevron {\n transition: none;\n }\n}\n\n.description {\n color: var(--pf-multiselect-text-muted);\n font-size: var(--font-size-xs);\n margin: 0;\n}\n\n.error {\n color: var(--pf-multiselect-invalid-border);\n font-size: var(--font-size-xs);\n margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.listbox {\n inset: auto;\n margin: 0;\n background: var(--pf-multiselect-bg);\n border: 1px solid var(--pf-multiselect-border);\n border-radius: var(--radius-md);\n box-shadow: var(--pf-elevation-popover-shadow);\n padding: var(--space-1);\n}\n\n.listbox:popover-open {\n animation: pf-multi-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-multi-select-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .listbox:popover-open {\n animation: none;\n }\n}\n","import {\n composeDescribedBy,\n formatValueList,\n getEnabledIndexes,\n isActivationKey,\n Keys,\n observeAnchoredPosition,\n parseValueList,\n resolveListMove,\n toggleValueInList,\n assertSeparableValues,\n type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n [Keys.ArrowDown]: 'next',\n [Keys.ArrowUp]: 'previous',\n [Keys.Home]: 'first',\n [Keys.End]: 'last',\n};\n\n/**\n * A form-associated multi-choice select over `pf-option` children.\n *\n * **It submits one entry per chosen value from a single control.**\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n *\n * `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n *\n * Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-*` set.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part chip - each chosen value's chip in the trigger.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n tag: 'pf-multi-select',\n styleUrl: 'pf-multi-select.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfMultiSelect {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Submitted under this name, once per chosen value. Reflected. */\n @Prop({ reflect: true }) name?: string;\n\n /** The chosen values, comma-separated. Reflected, so HTML can set it. */\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /** Whether the listbox is showing. Reflected for the stylesheet. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Select options';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /** Options to show before the listbox scrolls. */\n @Prop() maxVisibleOptions?: number;\n\n /** Fires when the chosen set changes, with both representations. */\n @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n /** Fires whenever the listbox opens or closes, whoever caused it. */\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /** The labels of the chosen options, for the trigger's chips. */\n @State() chips: string[] = [];\n\n private initialValue = '';\n private stopObserving?: () => void;\n private activeOption: HTMLElement | null = null;\n private warnedAboutSeparator = false;\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n this.syncOptions();\n }\n\n componentDidRender() {\n this.syncActiveDescendant();\n }\n\n disconnectedCallback() {\n this.stopObserving?.();\n }\n\n /*\n * `name` is watched here and not on the controls that pass a plain string to\n * `setFormValue`: those take their submission name from the reflected\n * attribute, so the platform picks a change up by itself. This one builds\n * the name *into* a FormData, so without the watch a name assigned after\n * load would never reach the submission.\n */\n @Watch('name')\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n const values = this.values();\n\n if (values.length === 0 || !this.name) {\n this.internals.setFormValue(null);\n } else {\n // One entry per value under the one name, which `data.getAll(name)`\n // reads back as an array.\n const data = new FormData();\n for (const value of values) data.append(this.name, value);\n this.internals.setFormValue(data);\n }\n\n applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n }\n\n /** The value changed, so the children's `selected` and the chips follow. */\n @Watch('value')\n syncOptions() {\n const chosen = this.values();\n const labels: string[] = [];\n\n for (const option of this.options()) {\n const selected = chosen.includes(this.optionValue(option));\n (option as HTMLElement & { selected: boolean }).selected = selected;\n }\n\n // Chips in the order they were chosen, not the options' order.\n for (const value of chosen) {\n const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n if (option) labels.push(option.textContent?.trim() ?? value);\n }\n\n this.chips = labels;\n this.warnAboutSeparators();\n }\n\n /**\n * One warning naming every offending value.\n *\n * A value holding a comma cannot round-trip through `value`, and failing\n * silently would show the right chips over a wrong submission.\n */\n private warnAboutSeparators() {\n if (this.warnedAboutSeparator) return;\n const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n if (offenders.length === 0) return;\n\n this.warnedAboutSeparator = true;\n console.warn(\n `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n `comma-separated list: ${offenders.join(' ')}`,\n );\n }\n\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showListbox();\n else this.hideListbox();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n @Method()\n async show(): Promise<void> {\n if (!this.disabled) this.open = true;\n }\n\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n /** Re-reads the options, for a label edited in place. */\n @Method()\n async refresh(): Promise<void> {\n this.syncOptions();\n }\n\n private onSlotChange = () => {\n this.syncOptions();\n };\n\n private values(): string[] {\n return parseValueList(this.value);\n }\n\n private options(): HTMLElement[] {\n return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n }\n\n private enabled(): HTMLElement[] {\n return this.options().filter((option) => !option.hasAttribute('disabled'));\n }\n\n /** The property, never the attribute: a binding may only have set the former. */\n private optionValue(option: HTMLElement): string {\n return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n }\n\n private get listbox() {\n return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n }\n\n private get trigger() {\n return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n }\n\n private showListbox() {\n const panel = this.listbox;\n if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n panel.showPopover();\n this.stopObserving?.();\n this.stopObserving = observeAnchoredPosition({\n getAnchor: () => this.trigger,\n getFloating: () => panel,\n matchAnchorWidth: true,\n flip: true,\n onChange: ({ left, top, width, minWidth }) => {\n placePopover(panel, left, top);\n if (width !== undefined) panel.style.width = `${width}px`;\n if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n },\n });\n\n // Opens on the first chosen option, or the first selectable one.\n const chosen = this.values();\n const first =\n this.options().find(\n (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n ) ?? this.enabled()[0];\n this.setActive(first ?? null);\n }\n\n private hideListbox() {\n this.stopObserving?.();\n this.stopObserving = undefined;\n const panel = this.listbox;\n if (panel?.matches(':popover-open')) panel.hidePopover();\n }\n\n private onToggle = (event: ToggleEvent) => {\n const nowOpen = event.newState === 'open';\n if (this.open !== nowOpen) this.open = nowOpen;\n if (!nowOpen) this.trigger?.focus();\n };\n\n private setActive(option: HTMLElement | null) {\n for (const other of this.options()) {\n if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n }\n if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n this.activeOption = option;\n this.syncActiveDescendant();\n if (option && typeof option.scrollIntoView === 'function') {\n option.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */\n private syncActiveDescendant() {\n const trigger = this.trigger;\n if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n (\n trigger as unknown as { ariaActiveDescendantElement: Element | null }\n ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n }\n\n /**\n * Toggles one value and keeps the listbox open — the difference from\n * `pf-select`, and the whole point of a multi-choice control: closing after\n * each pick would make choosing three things three round trips.\n */\n private toggle(option: HTMLElement) {\n if (option.hasAttribute('disabled') || this.disabled) return;\n\n const next = toggleValueInList(this.values(), this.optionValue(option));\n this.value = formatValueList(next);\n this.pfChange.emit({ value: this.value, values: next });\n }\n\n @Listen('pfOptionSelect')\n handleOptionSelect(event: CustomEvent<{ value: string }>) {\n event.stopPropagation();\n const option = this.options().find(\n (candidate) => this.optionValue(candidate) === event.detail.value,\n );\n if (option) this.toggle(option);\n }\n\n private move(action: ListNavigationAction) {\n const options = this.options();\n const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n const next = resolveListMove(action, enabledIndexes, current);\n if (next !== -1) this.setActive(options[next] ?? null);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled || event.defaultPrevented) return;\n\n const move = MOVES[event.key];\n if (move) {\n event.preventDefault();\n if (!this.open) this.open = true;\n else this.move(move);\n return;\n }\n\n if (isActivationKey(event.key)) {\n event.preventDefault();\n if (!this.open) this.open = true;\n else if (this.activeOption) this.toggle(this.activeOption);\n }\n }\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n\n <button\n id=\"trigger\"\n part=\"trigger\"\n class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n type=\"button\"\n role=\"combobox\"\n disabled={this.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n /* Same shadow root as the listbox, so this IDREF resolves. */\n aria-controls=\"listbox\"\n aria-invalid={this.error ? 'true' : null}\n aria-required={this.required ? 'true' : null}\n aria-describedby={describedBy}\n onClick={() => {\n if (!this.disabled) this.open = !this.open;\n }}\n >\n {this.chips.length > 0 ? (\n <span class=\"chips\">\n {this.chips.map((chip) => (\n <span key={chip} class=\"chip\" part=\"chip\">\n {chip}\n </span>\n ))}\n </span>\n ) : (\n <span class=\"placeholder\">{this.placeholder}</span>\n )}\n <span class=\"chevron\" aria-hidden=\"true\">\n <pf-icon name=\"chevron-down\"></pf-icon>\n </span>\n </button>\n\n {this.description && (\n <p class=\"description\" part=\"description\" id=\"description\">\n {this.description}\n </p>\n )}\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </div>\n\n <div\n id=\"listbox\"\n part=\"listbox\"\n class=\"listbox\"\n popover=\"auto\"\n role=\"listbox\"\n /* The one ARIA difference from pf-select, and the important one. */\n aria-multiselectable=\"true\"\n aria-label={this.label ?? this.placeholder}\n style={\n this.maxVisibleOptions\n ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n : undefined\n }\n onToggle={this.onToggle}\n >\n <slot onSlotchange={this.onSlotChange} />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,a as i,h as s,H as r}from"./p-Bm6UxEit.js";import{o as a,p as o}from"./p-CC7AyfOt.js";import{c as n}from"./p-DfpCerXM.js";import{i as l,K as c}from"./p-g4FlTDZx.js";import{g as h,r as d}from"./p-CAz7-p8y.js";import{a as p}from"./p-Cr6IXrUk.js";var f=500;function u(t){return t.length===1&&t!==" "}function b(t,e){if(!u(e))return t;return t+e.toLowerCase()}function v(t){return t.length>0&&[...t].every((e=>e===t[0]))}function g(t,e,i=-1,s=()=>false){if(!e||t.length===0)return-1;const r=v(e);const a=r?e[0]:e;const o=i<0?0:r?i+1:i;for(let e=0;e<t.length;e+=1){const i=(o+e)%t.length;if(s(i))continue;if(t[i]?.trim().toLowerCase().startsWith(a))return i}return-1}const m=()=>`:host{display:block;--pf-option-text:var(--pf-select-input-text, var(--pf-input-text));--pf-option-text-disabled:var(--pf-select-input-placeholder, var(--pf-input-placeholder));--pf-option-active-bg:var(--pf-select-option-active-bg);--pf-option-active-text:var(--pf-select-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-input-label-text, var(--pf-input-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-select-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{border-color:var(--pf-select-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-select-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.listbox{inset:auto;margin:0;background:var(--pf-select-menu-bg);border:1px solid var(--pf-select-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-select-in var(--pf-transition-enter)}@keyframes pf-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const y={[c.ArrowDown]:"next",[c.ArrowUp]:"previous",[c.Home]:"first",[c.End]:"last"};const x=class{constructor(i){t(this,i);this.pfChange=e(this,"pfChange");this.pfOpenChange=e(this,"pfOpenChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";open=false;label;description;error;placeholder="Select an option";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;selectedLabel="";initialValue="";stopObserving;activeOption=null;typeahead="";typeaheadTimer;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}syncFormState(){this.internals.setFormValue(this.value||null);p(this.internals,Boolean(this.value),this.required,this.error)}syncOptions(){const t=this.options();let e="";for(const i of t){const t=this.optionValue(i)===this.value&&this.value!=="";i.selected=t;if(t)e=i.textContent?.trim()??""}this.selectedLabel=e}syncOpen(t,e){if(t)this.showListbox();else this.hideListbox();if(t!==e)this.pfOpenChange.emit({open:t})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onSlotChange=()=>{this.syncOptions()};async refresh(){this.syncOptions()}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((t=>!t.hasAttribute("disabled")))}optionValue(t){return t.value??t.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.trigger,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:s,minWidth:r})=>{o(t,e,i);if(s!==undefined)t.style.width=`${s}px`;if(r!==undefined)t.style.minWidth=`${r}px`}});const e=this.options();const i=e.find((t=>this.optionValue(t)===this.value));this.setActive(i&&!i.hasAttribute("disabled")?i:this.enabled()[0]??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;this.clearTypeahead();const t=this.listbox;if(t?.matches(":popover-open"))t.hidePopover()}onToggle=t=>{const e=t.newState==="open";if(this.open!==e)this.open=e;if(!e)this.trigger?.focus()};setActive(t){for(const e of this.options()){if(e!==t)e.active=false}if(t)t.active=true;this.activeOption=t;this.syncActiveDescendant();if(t&&typeof t.scrollIntoView==="function"){t.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const t=this.trigger;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}commit(t){if(t.hasAttribute("disabled"))return;const e=this.optionValue(t);this.open=false;this.trigger?.focus();if(e===this.value)return;this.value=e;this.pfChange.emit({value:e})}handleOptionSelect(t){t.stopPropagation();if(this.disabled)return;const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.commit(e)}move(t){const e=this.options();const i=h(e,(t=>t.hasAttribute("disabled")));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=d(t,i,s);if(r!==-1)this.setActive(e[r]??null)}clearTypeahead(){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.typeaheadTimer=undefined;this.typeahead=""}handleTypeahead(t){this.typeahead=b(this.typeahead,t);if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.typeaheadTimer=setTimeout((()=>this.clearTypeahead()),f);const e=this.options();const i=e.map((t=>t.textContent??""));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=g(i,this.typeahead,s,(t=>e[t].hasAttribute("disabled")));if(r===-1)return;if(this.open)this.setActive(e[r]);else this.commit(e[r])}handleKeyDown(t){if(this.disabled||t.defaultPrevented)return;const e=y[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(l(t.key)){t.preventDefault();if(!this.open){this.open=true}else if(this.activeOption){this.commit(this.activeOption)}return}if(u(t.key)){t.preventDefault();this.handleTypeahead(t.key)}}render(){const t=n(this.description&&"description",this.error&&"error");return s(r,{key:"24c97882ec87fd8dc346ab6b10efe9d6a23359e3"},s("div",{key:"d96e86483cad67270c6359f1594872f7638ec218",class:"field",part:"field"},this.label&&s("label",{key:"92736ce6664e9b107a85008cacccaf0e8b6175d4",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&s("span",{key:"72c82fe29714e9c3ecca4bcad72318fb0e0dc217",class:"required","aria-hidden":"true"},"*")),s("button",{key:"c07e0f5ef7f202dc1239a6868d4c5360194889a4",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":t,onClick:()=>{if(!this.disabled)this.open=!this.open}},s("span",{key:"a745f2fcce7fd7d3e2a8d0b245d4b6e38baf934d",class:{value:true,"value--placeholder":!this.selectedLabel}},this.selectedLabel||this.placeholder),s("span",{key:"f4fe94fb5877aa8b7a9442112d897368d208e108",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"0e9c5dbedc04f727fe9be09b56a5cebbec99607f",name:"chevron-down"}))),this.description&&s("p",{key:"80e491e4ce53b694803d0f8978af584cb418ea79",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"1e8e8c4d46f746981f831ca8e7574f94bd9673bb",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"9daf605fa081d9e2b3f4a07e9cb41e17cd142b42",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},s("slot",{key:"f23712d710ef4aa13b186ef5a8f075494dc7b5ca",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};x.style=m();export{x as pf_select};
2
- //# sourceMappingURL=p-a9b77dbb.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["TYPEAHEAD_TIMEOUT_MS","isTypeaheadKey","key","length","nextTypeaheadBuffer","buffer","toLowerCase","isCycling","every","char","findTypeaheadMatch","labels","fromIndex","isDisabled","cycling","needle","start","step","index","trim","startsWith","pfSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfSelect","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","selectedLabel","initialValue","stopObserving","activeOption","typeahead","typeaheadTimer","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","clearTimeout","setFormValue","applyControlValidity","Boolean","options","option","selected","optionValue","textContent","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onSlotChange","refresh","Array","from","el","querySelectorAll","enabled","filter","hasAttribute","getAttribute","listbox","shadowRoot","querySelector","trigger","panel","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","chosen","find","setActive","clearTypeahead","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","commit","handleOptionSelect","stopPropagation","candidate","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleTypeahead","setTimeout","map","match","handleKeyDown","defaultPrevented","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","type","role","onClick","popover","maxHeight","overflowY","onSlotchange"],"sources":["../core/dist/typeahead.js","src/components/pf-select/pf-select.css?tag=pf-select&encapsulation=shadow","src/components/pf-select/pf-select.tsx"],"sourcesContent":["//#region src/typeahead.ts\n/**\n* Printable-character typeahead for a listbox, menu or tree.\n*\n* The ARIA listbox pattern expects it: typing `b` jumps to the next option\n* beginning with `b`, and typing `br` narrows to `br`. The React `Select` has\n* none of this — `todo.md` has the fix — so the rules live here, where\n* `<pf-select>` and every later `pf-combobox` / `pf-multi-select` /\n* `pf-tree-view` read the same ones.\n*\n* Core owns the matching; the rendering layer owns the buffer and its timer,\n* because a timer is state and core is never a state container.\n*/\n/** How long a quiet gap ends one typeahead word, in milliseconds. */\nvar TYPEAHEAD_TIMEOUT_MS = 500;\n/**\n* Whether a key should go into the buffer at all.\n*\n* One character, so `Enter`, `ArrowDown` and `Escape` are excluded by length\n* rather than by a list that would need keeping up to date. A space is\n* deliberately *not* typeahead: in a listbox it selects.\n*/\nfunction isTypeaheadKey(key) {\n\treturn key.length === 1 && key !== \" \";\n}\n/**\n* The buffer after `key`: lower-cased and appended, nothing more.\n*\n* A repeat is *not* special-cased here. Pressing `b` four times means \"the\n* fourth option starting with b\" rather than \"an option starting with bbbb\",\n* but that is a matching question, so `findTypeaheadMatch` reads it off the\n* buffer's shape instead — which keeps this function a plain append and lets\n* the caller hold one string.\n*/\nfunction nextTypeaheadBuffer(buffer, key) {\n\tif (!isTypeaheadKey(key)) return buffer;\n\treturn buffer + key.toLowerCase();\n}\n/**\n* True when the buffer is one character repeated — including just once.\n*\n* The single-character case is the important one, and requiring two got it\n* wrong: pressing `b` while already on Banana has to move to Blackberry, the\n* way a native `<select>` does, not sit still because Banana also starts with\n* `b`. Found by a browser test on `pf-select`.\n*/\nfunction isCycling(buffer) {\n\treturn buffer.length > 0 && [...buffer].every((char) => char === buffer[0]);\n}\n/**\n* The index of the option the buffer points at, or -1.\n*\n* Searches from `fromIndex` and wraps, so a match behind the current option is\n* still found. Two modes:\n*\n* - **Narrowing** (`br`): the current option is included, because typing more\n* of the label you are already on should keep you there rather than skip to\n* the next `br`.\n* - **Cycling** (`b`, `bb`, `bbb`): one character repeated, searched from\n* *after* the current option — so pressing one letter walks through the\n* options beginning with it, which is what a native `<select>` does.\n*\n* A disabled option is never matched: the keyboard would land somewhere it\n* cannot act, which is worse than not moving.\n*/\nfunction findTypeaheadMatch(labels, buffer, fromIndex = -1, isDisabled = () => false) {\n\tif (!buffer || labels.length === 0) return -1;\n\tconst cycling = isCycling(buffer);\n\tconst needle = cycling ? buffer[0] : buffer;\n\tconst start = fromIndex < 0 ? 0 : cycling ? fromIndex + 1 : fromIndex;\n\tfor (let step = 0; step < labels.length; step += 1) {\n\t\tconst index = (start + step) % labels.length;\n\t\tif (isDisabled(index)) continue;\n\t\tif (labels[index]?.trim().toLowerCase().startsWith(needle)) return index;\n\t}\n\treturn -1;\n}\n//#endregion\nexport { TYPEAHEAD_TIMEOUT_MS, findTypeaheadMatch, isTypeaheadKey, nextTypeaheadBuffer };\n","/*\n * The generic set pf-option reads, mapped to this control's own family. They\n * inherit through the shadow boundary, so a slotted option is themed by the\n * listbox it sits in without knowing which that is.\n */\n:host {\n display: block;\n --pf-option-text: var(--pf-select-input-text, var(--pf-input-text));\n --pf-option-text-disabled: var(--pf-select-input-placeholder, var(--pf-input-placeholder));\n --pf-option-active-bg: var(--pf-select-option-active-bg);\n --pf-option-active-text: var(--pf-select-option-active-text);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n display: grid;\n gap: var(--space-1);\n}\n\n.label {\n color: var(--pf-input-label-text, var(--pf-input-text));\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n}\n\n.required {\n color: var(--pf-select-invalid-border);\n margin-inline-start: var(--space-1);\n}\n\n.trigger {\n align-items: center;\n background: var(--pf-input-bg);\n border: 1px solid var(--pf-input-border);\n border-radius: var(--radius-md);\n color: var(--pf-input-text);\n cursor: pointer;\n display: flex;\n font-family: inherit;\n font-size: var(--font-size-sm);\n gap: var(--space-2);\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n text-align: start;\n width: 100%;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n border-color: var(--pf-select-focus-border);\n box-shadow: var(--pf-focus-ring);\n outline: none;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.trigger--invalid {\n border-color: var(--pf-select-invalid-border);\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.value--placeholder {\n color: var(--pf-input-placeholder);\n}\n\n.chevron {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chevron {\n transition: none;\n }\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.listbox {\n inset: auto;\n margin: 0;\n background: var(--pf-select-menu-bg);\n border: 1px solid var(--pf-select-menu-border);\n border-radius: var(--radius-md);\n box-shadow: var(--pf-elevation-popover-shadow);\n padding: var(--space-1);\n}\n\n.listbox:popover-open {\n animation: pf-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-select-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .listbox:popover-open {\n animation: none;\n }\n}\n","import {\n composeDescribedBy,\n findTypeaheadMatch,\n getEnabledIndexes,\n isActivationKey,\n Keys,\n nextTypeaheadBuffer,\n observeAnchoredPosition,\n resolveListMove,\n TYPEAHEAD_TIMEOUT_MS,\n isTypeaheadKey,\n type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n [Keys.ArrowDown]: 'next',\n [Keys.ArrowUp]: 'previous',\n [Keys.Home]: 'first',\n [Keys.End]: 'last',\n};\n\n/**\n * A form-associated single-choice select over `pf-option` children.\n *\n * The first of Wave 5, and the worked example for §2.1: the options are child\n * elements, so a label is a slot and can hold anything, where the React\n * `Select`'s `options` array can only hold a string.\n *\n * **It has typeahead, which the React component does not.** Typing `b` jumps\n * to the next option beginning with `b`, `br` narrows, and `bbb` cycles — the\n * ARIA listbox pattern, and the matching is core's so a later `pf-combobox`\n * answers the same keystrokes. `todo.md` has the React fix.\n *\n * Form-associated, so the value submits by itself. The React component fakes\n * that with a hidden `<input>` beside the trigger.\n *\n * The active option is set as an *element*, not an IDREF: the trigger is in\n * this shadow root and the options are slotted light DOM, and a cross-root\n * IDREF is absent from the accessibility tree — measured. `aria-controls` does\n * work, because the listbox itself is in this same root.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n tag: 'pf-select',\n styleUrl: 'pf-select.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfSelect {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Submitted under this name. Reflected; the submission reads the attribute. */\n @Prop({ reflect: true }) name?: string;\n\n /** The chosen option's value, or empty. */\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /** Whether the listbox is showing. Reflected for the stylesheet. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Select an option';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /** Options to show before the listbox scrolls. Unset means it fits them all. */\n @Prop() maxVisibleOptions?: number;\n\n /** Fires when the chosen value changes. */\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /** Fires whenever the listbox opens or closes, whoever caused it. */\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /** The label of the chosen option, for the trigger to show. */\n @State() selectedLabel = '';\n\n private initialValue = '';\n private stopObserving?: () => void;\n private activeOption: HTMLElement | null = null;\n private typeahead = '';\n private typeaheadTimer?: ReturnType<typeof setTimeout>;\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n this.syncOptions();\n }\n\n componentDidRender() {\n this.syncActiveDescendant();\n }\n\n disconnectedCallback() {\n this.stopObserving?.();\n if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value || null);\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n /** The value changed, so the children's `selected` and the trigger follow. */\n @Watch('value')\n syncOptions() {\n const options = this.options();\n let label = '';\n\n for (const option of options) {\n const selected = this.optionValue(option) === this.value && this.value !== '';\n (option as HTMLElement & { selected: boolean }).selected = selected;\n if (selected) label = option.textContent?.trim() ?? '';\n }\n\n this.selectedLabel = label;\n }\n\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showListbox();\n else this.hideListbox();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n @Method()\n async show(): Promise<void> {\n if (!this.disabled) this.open = true;\n }\n\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /** A reset restores the value the control started with, not an empty one. */\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n /** An option added or removed while mounted; re-mark the children. */\n private onSlotChange = () => {\n this.syncOptions();\n };\n\n /** Re-reads the options, for a label edited in place (which fires no slotchange). */\n @Method()\n async refresh(): Promise<void> {\n this.syncOptions();\n }\n\n private options(): HTMLElement[] {\n return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n }\n\n private enabled(): HTMLElement[] {\n return this.options().filter((option) => !option.hasAttribute('disabled'));\n }\n\n /** The property, never the attribute: a binding may only have set the former. */\n private optionValue(option: HTMLElement): string {\n return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n }\n\n private get listbox() {\n return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n }\n\n private get trigger() {\n return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n }\n\n private showListbox() {\n const panel = this.listbox;\n if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n panel.showPopover();\n this.stopObserving?.();\n this.stopObserving = observeAnchoredPosition({\n getAnchor: () => this.trigger,\n getFloating: () => panel,\n // The listbox matches the trigger's width, as the React component does.\n matchAnchorWidth: true,\n flip: true,\n /*\n * `width` *and* `minWidth`: core reports whichever the mode calls for\n * and leaves the other undefined — `matchAnchorWidth: true` gives a\n * `width`, false gives a `minWidth`. Reading only `minWidth`, which is\n * what pf-dropdown needs, left the listbox at its intrinsic 156px beside\n * a 1216px trigger. The smoke test against a real build caught it.\n */\n onChange: ({ left, top, width, minWidth }) => {\n placePopover(panel, left, top);\n if (width !== undefined) panel.style.width = `${width}px`;\n if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n },\n });\n\n /*\n * Opens on the chosen option, or the first selectable one. Landing\n * anywhere else would make the arrows start from somewhere the user has\n * no reason to expect.\n */\n const options = this.options();\n const chosen = options.find((option) => this.optionValue(option) === this.value);\n this.setActive(\n chosen && !chosen.hasAttribute('disabled') ? chosen : (this.enabled()[0] ?? null),\n );\n }\n\n private hideListbox() {\n this.stopObserving?.();\n this.stopObserving = undefined;\n this.clearTypeahead();\n const panel = this.listbox;\n if (panel?.matches(':popover-open')) panel.hidePopover();\n }\n\n private onToggle = (event: ToggleEvent) => {\n const nowOpen = event.newState === 'open';\n if (this.open !== nowOpen) this.open = nowOpen;\n if (!nowOpen) this.trigger?.focus();\n };\n\n private setActive(option: HTMLElement | null) {\n for (const other of this.options()) {\n if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n }\n if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n this.activeOption = option;\n this.syncActiveDescendant();\n if (option && typeof option.scrollIntoView === 'function') {\n option.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Feature-detected. Where ARIA element reflection is missing there is no\n * cross-root equivalent, so the active option stops being *announced* while\n * the arrows and Enter still work — recorded in `todo.md`.\n */\n private syncActiveDescendant() {\n const trigger = this.trigger;\n if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n (\n trigger as unknown as { ariaActiveDescendantElement: Element | null }\n ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n }\n\n private commit(option: HTMLElement) {\n if (option.hasAttribute('disabled')) return;\n\n const next = this.optionValue(option);\n this.open = false;\n this.trigger?.focus();\n\n if (next === this.value) return;\n this.value = next;\n this.pfChange.emit({ value: next });\n }\n\n /** An option asked to be taken. The select decides, reports and closes. */\n @Listen('pfOptionSelect')\n handleOptionSelect(event: CustomEvent<{ value: string }>) {\n event.stopPropagation();\n if (this.disabled) return;\n\n const option = this.options().find(\n (candidate) => this.optionValue(candidate) === event.detail.value,\n );\n if (option) this.commit(option);\n }\n\n private move(action: ListNavigationAction) {\n const options = this.options();\n const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n const next = resolveListMove(action, enabledIndexes, current);\n if (next !== -1) this.setActive(options[next] ?? null);\n }\n\n private clearTypeahead() {\n if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n this.typeaheadTimer = undefined;\n this.typeahead = '';\n }\n\n /**\n * Typeahead. The buffer and its timer live here, because a timer is state\n * and core is never a state container; the matching is core's.\n */\n private handleTypeahead(key: string) {\n this.typeahead = nextTypeaheadBuffer(this.typeahead, key);\n\n if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n this.typeaheadTimer = setTimeout(() => this.clearTypeahead(), TYPEAHEAD_TIMEOUT_MS);\n\n const options = this.options();\n const labels = options.map((option) => option.textContent ?? '');\n const from = this.activeOption ? options.indexOf(this.activeOption) : -1;\n const match = findTypeaheadMatch(labels, this.typeahead, from, (index) =>\n options[index].hasAttribute('disabled'),\n );\n\n if (match === -1) return;\n\n /*\n * Closed, typeahead *chooses* rather than merely highlighting: that is\n * what a native `<select>` does, and with no listbox on screen a\n * highlight nobody can see would be no feedback at all.\n */\n if (this.open) this.setActive(options[match]);\n else this.commit(options[match]);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled || event.defaultPrevented) return;\n\n const move = MOVES[event.key];\n if (move) {\n event.preventDefault();\n // Down or Up on a closed select opens it, as a combobox should.\n if (!this.open) this.open = true;\n else this.move(move);\n return;\n }\n\n if (isActivationKey(event.key)) {\n event.preventDefault();\n if (!this.open) {\n this.open = true;\n } else if (this.activeOption) {\n this.commit(this.activeOption);\n }\n return;\n }\n\n // Escape is the browser's while the listbox is a `popover=\"auto\"`.\n if (isTypeaheadKey(event.key)) {\n event.preventDefault();\n this.handleTypeahead(event.key);\n }\n }\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n\n <button\n id=\"trigger\"\n part=\"trigger\"\n class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n type=\"button\"\n role=\"combobox\"\n disabled={this.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n /* Same shadow root as the listbox, so this IDREF resolves. */\n aria-controls=\"listbox\"\n aria-invalid={this.error ? 'true' : null}\n aria-required={this.required ? 'true' : null}\n aria-describedby={describedBy}\n onClick={() => {\n if (!this.disabled) this.open = !this.open;\n }}\n >\n <span class={{ value: true, 'value--placeholder': !this.selectedLabel }}>\n {this.selectedLabel || this.placeholder}\n </span>\n <span class=\"chevron\" aria-hidden=\"true\">\n <pf-icon name=\"chevron-down\"></pf-icon>\n </span>\n </button>\n\n {this.description && (\n <p class=\"description\" part=\"description\" id=\"description\">\n {this.description}\n </p>\n )}\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </div>\n\n <div\n id=\"listbox\"\n part=\"listbox\"\n class=\"listbox\"\n popover=\"auto\"\n role=\"listbox\"\n aria-label={this.label ?? this.placeholder}\n style={\n this.maxVisibleOptions\n ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n : undefined\n }\n onToggle={this.onToggle}\n >\n <slot onSlotchange={this.onSlotChange} />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r,c as i,h as e,H as t}from"./p-Bm6UxEit.js";import{c as a}from"./p-DfpCerXM.js";import{a as s}from"./p-Cr6IXrUk.js";const o=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-input-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-input-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-input-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.input{background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);font:inherit;min-height:40px;padding:0 var(--space-3);width:100%;transition:background 0.2s, border 0.2s, color 0.2s, opacity 0.2s}.input:disabled{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);cursor:not-allowed;opacity:0.6}.input:focus{outline:none}.input:focus-visible{border-color:var(--pf-input-focus-border);box-shadow:var(--pf-input-focus-ring, var(--pf-focus-ring))}.input::placeholder{color:var(--pf-input-placeholder)}.input--invalid{border-color:var(--pf-input-invalid-border)}@media (prefers-reduced-motion: reduce){.input{transition:none}}`;const n=class{constructor(e){r(this,e);this.pfInput=i(this,"pfInput");this.pfChange=i(this,"pfChange");if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}}internals;name;value="";type="text";label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");s(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=r=>{this.value=r.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};render(){const r=a(this.description&&"description",this.error&&"error");return e(t,{key:"a6d68ce6641fb92407356c94e2181b280bdc03b6"},e("div",{key:"312ee69f4a661494548b01f598b74ed56bd443fc",class:"field",part:"field"},this.label&&e("label",{key:"59188fde6b3639105f8ade8b497c764ddd5d658f",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&e("span",{key:"4f71679ec6bb99d3f7dc8f941d8c02bb94452c21",class:"required","aria-hidden":"true"},"*")),e("input",{key:"0680b0e5aa0f8ddf9850a212f735f0f8c5b273a3",id:"input",part:"input",class:{input:true,"input--invalid":Boolean(this.error)},type:this.type,name:this.name,value:this.value,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":r,onInput:this.onInput,onChange:this.onChange}),this.description&&e("p",{key:"f732742b8602ed6094600065d5036bdad538ad35",class:"description",part:"description",id:"description"},this.description),this.error&&e("p",{key:"9d524a204abfb733afaf2bf3cc5ec9a5e1c65b94",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}};n.style=o();export{n as pf_input};
2
- //# sourceMappingURL=p-c6bdd9cd.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pfInputCss","PfInput","internals","name","value","type","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","input","readOnly"],"sources":["src/components/pf-input/pf-input.css?tag=pf-input&encapsulation=shadow","src/components/pf-input/pf-input.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n display: grid;\n gap: var(--space-2);\n}\n\n.label {\n color: var(--pf-input-field-label, var(--pf-field-label));\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n}\n\n.required {\n color: var(--pf-field-required);\n margin-inline-start: var(--space-1);\n}\n\n.description {\n color: var(--pf-input-field-description, var(--pf-field-description));\n font-size: var(--font-size-sm);\n margin: 0;\n}\n\n.error {\n color: var(--pf-input-field-error, var(--pf-field-error));\n font-size: var(--font-size-sm);\n margin: 0;\n}\n\n.input {\n background: var(--pf-input-bg);\n border: 1px solid var(--pf-input-border);\n border-radius: var(--radius-md);\n color: var(--pf-input-text);\n font: inherit;\n min-height: 40px;\n padding: 0 var(--space-3);\n width: 100%;\n transition:\n background 0.2s,\n border 0.2s,\n color 0.2s,\n opacity 0.2s;\n}\n\n.input:disabled {\n background: var(--pf-control-bg-disabled);\n border-color: var(--pf-control-border-disabled);\n color: var(--pf-control-text-disabled);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.input:focus {\n outline: none;\n}\n\n.input:focus-visible {\n border-color: var(--pf-input-focus-border);\n box-shadow: var(--pf-input-focus-ring, var(--pf-focus-ring));\n}\n\n.input::placeholder {\n color: var(--pf-input-placeholder);\n}\n\n.input--invalid {\n border-color: var(--pf-input-invalid-border);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .input {\n transition: none;\n }\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport {\n AttachInternals,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nexport type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\n/**\n * A form-associated text input.\n *\n * `formAssociated` plus `ElementInternals` is what makes this participate in a\n * real `<form>`: the value reaches `FormData`, constraint validation works, and\n * Angular's generated value accessor has something to bind to. A plain\n * `<input>` inside a shadow root does none of that.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part input - the native input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n tag: 'pf-input',\n styleUrl: 'pf-input.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfInput {\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Submitted under this name.\n *\n * Reflected, because a form-associated custom element takes its submission\n * name from the `name` *content attribute* -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n */\n @Prop({ reflect: true }) name?: string;\n\n /** The control's value. */\n @Prop({ mutable: true }) value = '';\n\n @Prop({ reflect: true }) type: PfInputType = 'text';\n\n /** Visible label. Rendered in the same root as the input, so `for` works. */\n @Prop() label?: string;\n\n /** Hint text below the control. */\n @Prop() description?: string;\n\n /** Error message. Its presence is what marks the control invalid. */\n @Prop() error?: string;\n\n @Prop() placeholder?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n @Prop({ reflect: true }) readonly = false;\n\n /** Fires on every keystroke, like the native `input` event. */\n @Event() pfInput!: EventEmitter<{ value: string }>;\n\n /** Fires when the value is committed, like the native `change` event. */\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /**\n * The value the control had when it was created, which is what a form reset\n * restores. Captured here because `value` has been overwritten by then.\n */\n private initialValue = '';\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value ?? '');\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n /**\n * Whether the control currently satisfies its constraints.\n *\n * A form-associated custom element does not inherit `checkValidity` from\n * anywhere -- the spec puts it on ElementInternals, so the element has to\n * forward it or consumers cannot ask.\n */\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n /** As `checkValidity`, but also shows the browser's validation message. */\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n /** The message explaining why the control is invalid, or an empty string. */\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /**\n * A reset restores the value the control started with, not an empty string —\n * verified against a native `<input value=\"initial\">`, which comes back to\n * \"initial\" rather than to \"\". Clearing it was a real defect: a\n * `<pf-input value=\"…\">` in a form lost its value on any reset.\n */\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n private onInput = (event: Event) => {\n this.value = (event.target as HTMLInputElement).value;\n this.pfInput.emit({ value: this.value });\n };\n\n private onChange = () => {\n this.pfChange.emit({ value: this.value });\n };\n\n render() {\n // IDs are scoped to this shadow root, so they can be literal -- the useId()\n // the React component needs has no counterpart here.\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n <input\n id=\"input\"\n part=\"input\"\n class={{ input: true, 'input--invalid': Boolean(this.error) }}\n type={this.type}\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n onInput={this.onInput}\n onChange={this.onChange}\n />\n {this.description && (\n <p class=\"description\" part=\"description\" id=\"description\">\n {this.description}\n </p>\n )}\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4HAAA,MAAMA,EAAa,IAAM,qxC,MCoCZC,EAAO,M,0PACCC,UAWMC,KAGAC,MAAQ,GAERC,KAAoB,OAGrCC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA4BzB,MAChDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAG3C,MAAA4B,GAGE,MAAMC,EAAcC,EAClBjB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACE2B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrBtB,KAAKX,OACJ6B,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvCvB,KAAKX,MACLW,KAAKP,UACJyB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,SAAAE,IAAA,2CACEI,GAAG,QACHF,KAAK,QACLD,MAAO,CAAEI,MAAO,KAAM,iBAAkBrB,QAAQJ,KAAKT,QACrDH,KAAMY,KAAKZ,KACXF,KAAMc,KAAKd,KACXC,MAAOa,KAAKb,MACZK,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfgC,SAAU1B,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtByB,EAClBN,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJ4B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1CxB,KAAKV,aAGTU,KAAKT,OACJ2B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9BxB,KAAKT,Q","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as i,H as r}from"./p-Bm6UxEit.js";import{a}from"./p-Cr6IXrUk.js";const s=()=>`:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-switch-track-bg);border-radius:var(--radius-full);cursor:pointer;height:24px;margin:0;position:relative;transition:background-color 120ms ease;width:44px}.input::after{background:var(--pf-switch-thumb-bg);border-radius:50%;content:'';height:20px;left:2px;position:absolute;top:2px;transition:transform 120ms ease;width:20px}.input:checked{background:var(--pf-switch-track-checked-bg)}.input:checked::after{transform:translateX(20px)}.input:focus-visible{box-shadow:var(--pf-switch-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-switch-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-switch-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}@media (prefers-reduced-motion: reduce){.input,.input::after{transition:none}}`;const n=class{constructor(i){e(this,i);this.pfChange=t(this,"pfChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}internals;name;checked=false;value="on";label;error;required=false;disabled=false;pfChange;initialChecked=false;componentWillLoad(){this.initialChecked=this.checked;this.syncFormState()}syncFormState(){this.internals.setFormValue(this.checked?this.value:null);a(this.internals,this.checked,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.checked=this.initialChecked}onChange=e=>{this.checked=e.target.checked;this.pfChange.emit({checked:this.checked,value:this.value})};render(){return i(r,{key:"2b1d5bf745c871e8633aa562ef6aa619d77b27bd"},i("div",{key:"ce5a586351ff1ac9d64f446a991365085f185a2e",class:"field",part:"field"},i("input",{key:"5596a0b34fc5f91435da841b5196db5221090be4",id:"input",part:"input",class:"input",type:"checkbox",role:"switch",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":this.error?"error":null,onChange:this.onChange}),this.label&&i("label",{key:"59741e6dcbe31fbaf0df1ea730800ef1b5b79622",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&i("p",{key:"e1278052a8546bae276ed0eff2d74a1ccee06176",class:"error",part:"error",id:"error"},this.error))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}}};n.style=s();export{n as pf_switch};
2
- //# sourceMappingURL=p-d0d2070b.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pfSwitchCss","PfSwitch","internals","name","checked","value","label","error","required","disabled","pfChange","initialChecked","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onChange","event","target","emit","render","h","Host","key","class","part","id","type","role","htmlFor"],"sources":["src/components/pf-switch/pf-switch.css?tag=pf-switch&encapsulation=shadow","src/components/pf-switch/pf-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n align-items: center;\n display: inline-flex;\n gap: var(--space-2);\n}\n\n.input {\n appearance: none;\n background: var(--pf-switch-track-bg);\n border-radius: var(--radius-full);\n cursor: pointer;\n height: 24px;\n margin: 0;\n position: relative;\n transition: background-color 120ms ease;\n width: 44px;\n}\n\n/* The thumb. */\n.input::after {\n background: var(--pf-switch-thumb-bg);\n border-radius: 50%;\n content: '';\n height: 20px;\n left: 2px;\n position: absolute;\n top: 2px;\n transition: transform 120ms ease;\n width: 20px;\n}\n\n.input:checked {\n background: var(--pf-switch-track-checked-bg);\n}\n\n.input:checked::after {\n transform: translateX(20px);\n}\n\n.input:focus-visible {\n box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));\n outline: none;\n}\n\n.input:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.input:disabled + .label {\n cursor: not-allowed;\n opacity: 0.65;\n}\n\n.label {\n color: var(--pf-switch-label-text);\n font-size: var(--font-size-md);\n}\n\n.error {\n color: var(--pf-switch-field-error, var(--pf-field-error));\n font-size: var(--font-size-sm);\n margin: var(--space-1) 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .input,\n .input::after {\n transition: none;\n }\n}\n","import {\n AttachInternals,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated on/off switch.\n *\n * Built on a native checkbox with `role=\"switch\"`, exactly as the React\n * component is: a switch is a checkbox whose two states are \"on\" and \"off\"\n * rather than \"selected\" and \"not selected\", and the role is the only\n * difference assistive technology needs.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox carrying role=\"switch\".\n * @part label - the label element.\n */\n@Component({\n tag: 'pf-switch',\n styleUrl: 'pf-switch.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfSwitch {\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Submitted under this name.\n *\n * Reflected, because a form-associated custom element takes its submission\n * name from the `name` *content attribute* -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n */\n @Prop({ reflect: true }) name?: string;\n\n /** Whether the switch is on. Reflected so the stylesheet can select on it. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /**\n * What is submitted when on. Mirrors the native attribute, whose default is\n * also `on` — a checkbox with no value still submits something.\n */\n @Prop() value = 'on';\n\n /** Visible label, rendered in the same root so `for` actually associates. */\n @Prop() label?: string;\n\n /** Error message. Its presence is what marks the control invalid. */\n @Prop() error?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /** Fires when the user turns the switch on or off. */\n @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n /** The state a form reset restores, which is the initial attribute. */\n private initialChecked = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.syncFormState();\n }\n\n @Watch('checked')\n @Watch('error')\n @Watch('required')\n @Watch('value')\n syncFormState() {\n /*\n * `null`, not an empty string, when off: an unchecked checkbox is\n * absent from the submission entirely, rather than present and empty.\n * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n * on, and it is what a native checkbox does.\n */\n this.internals.setFormValue(this.checked ? this.value : null);\n applyControlValidity(this.internals, this.checked, this.required, this.error);\n }\n\n /** A form-associated custom element does not inherit this. */\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n /** As `checkValidity`, but also shows the browser's validation message. */\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n /** The message explaining why the control is invalid, or an empty string. */\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /**\n * A reset restores the initial state, not `false` — a native\n * `<input type=checkbox checked>` comes back on.\n */\n formResetCallback() {\n this.checked = this.initialChecked;\n }\n\n private onChange = (event: Event) => {\n this.checked = (event.target as HTMLInputElement).checked;\n this.pfChange.emit({ checked: this.checked, value: this.value });\n };\n\n render() {\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n <input\n id=\"input\"\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n role=\"switch\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={this.error ? 'error' : null}\n onChange={this.onChange}\n />\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n </label>\n )}\n </div>\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"wFAAA,MAAMA,EAAc,IAAM,4iC,MCgCbC,EAAQ,M,2NACAC,UAWMC,KAGeC,QAAU,MAM1CC,MAAQ,KAGRC,MAGAC,MAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGDC,eAAiB,MAEzB,iBAAAC,GACEC,KAAKF,eAAiBE,KAAKT,QAC3BS,KAAKC,e,CAOP,aAAAA,GAOED,KAAKX,UAAUa,aAAaF,KAAKT,QAAUS,KAAKR,MAAQ,MACxDW,EAAqBH,KAAKX,UAAWW,KAAKT,QAASS,KAAKL,SAAUK,KAAKN,M,CAKzE,mBAAMU,GACJ,OAAOJ,KAAKX,UAAUe,e,CAKxB,oBAAMC,GACJ,OAAOL,KAAKX,UAAUgB,gB,CAKxB,0BAAMC,GACJ,OAAON,KAAKX,UAAUkB,iB,CAOxB,iBAAAC,GACER,KAAKT,QAAUS,KAAKF,c,CAGdW,SAAYC,IAClBV,KAAKT,QAAWmB,EAAMC,OAA4BpB,QAClDS,KAAKH,SAASe,KAAK,CAAErB,QAASS,KAAKT,QAASC,MAAOQ,KAAKR,OAAQ,EAGlE,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,SAAAE,IAAA,2CACEG,GAAG,QACHD,KAAK,QACLD,MAAM,QACNG,KAAK,WACLC,KAAK,SACL/B,KAAMU,KAAKV,KACXE,MAAOQ,KAAKR,MACZD,QAASS,KAAKT,QACdI,SAAUK,KAAKL,SACfC,SAAUI,KAAKJ,SAAQ,eACTI,KAAKN,MAAQ,OAAS,KAAI,mBACtBM,KAAKN,MAAQ,QAAU,KACzCe,SAAUT,KAAKS,WAEhBT,KAAKP,OACJqB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQI,QAAQ,SACvCtB,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as r,h as t,H as i}from"./p-Bm6UxEit.js";import{a}from"./p-Cr6IXrUk.js";const s=()=>`:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-checkbox-bg);border:1px solid var(--pf-checkbox-border);border-radius:var(--pf-checkbox-radius, var(--radius-sm));box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:18px;margin:0;position:relative;width:18px}.input:checked{background:var(--pf-checkbox-checked-bg);border-color:var(--pf-checkbox-border)}.input::after{border:solid var(--pf-checkbox-check-color);border-width:0 2px 2px 0;content:'';height:9px;left:5px;opacity:0;position:absolute;top:2px;transform:rotate(45deg);width:5px}.input:checked::after{opacity:1}.input:focus-visible{box-shadow:var(--pf-checkbox-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-checkbox-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-checkbox-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}`;const o=class{constructor(t){e(this,t);this.pfChange=r(this,"pfChange");if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}}internals;name;checked=false;value="on";label;error;required=false;disabled=false;pfChange;initialChecked=false;componentWillLoad(){this.initialChecked=this.checked;this.syncFormState()}syncFormState(){this.internals.setFormValue(this.checked?this.value:null);a(this.internals,this.checked,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.checked=this.initialChecked}onChange=e=>{this.checked=e.target.checked;this.pfChange.emit({checked:this.checked,value:this.value})};render(){return t(i,{key:"87e808069908240f3507903e680a2ed25e963fde"},t("div",{key:"56e201259f99ecf8da235b962a42ed65080f2f68",class:"field",part:"field"},t("input",{key:"8efc240bd3931bcdf117e529ff4fb7e5f8e544d5",id:"input",part:"input",class:"input",type:"checkbox",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":this.error?"error":null,onChange:this.onChange}),this.label&&t("label",{key:"8b098a6fd3271d1353447f53b4b06099d7044169",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&t("p",{key:"76ba7559865ec18ba77ac50677df53a6459e6989",class:"error",part:"error",id:"error"},this.error))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}}};o.style=s();export{o as pf_checkbox};
2
- //# sourceMappingURL=p-d248b027.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pfCheckboxCss","PfCheckbox","internals","name","checked","value","label","error","required","disabled","pfChange","initialChecked","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onChange","event","target","emit","render","h","Host","key","class","part","id","type","htmlFor"],"sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n align-items: center;\n display: inline-flex;\n gap: var(--space-2);\n}\n\n.input {\n appearance: none;\n background: var(--pf-checkbox-bg);\n border: 1px solid var(--pf-checkbox-border);\n border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n box-sizing: border-box;\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: 18px;\n margin: 0;\n position: relative;\n width: 18px;\n}\n\n.input:checked {\n background: var(--pf-checkbox-checked-bg);\n border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. */\n.input::after {\n border: solid var(--pf-checkbox-check-color);\n border-width: 0 2px 2px 0;\n content: '';\n height: 9px;\n left: 5px;\n opacity: 0;\n position: absolute;\n top: 2px;\n transform: rotate(45deg);\n width: 5px;\n}\n\n.input:checked::after {\n opacity: 1;\n}\n\n.input:focus-visible {\n box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));\n outline: none;\n}\n\n.input:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.input:disabled + .label {\n cursor: not-allowed;\n opacity: 0.65;\n}\n\n.label {\n color: var(--pf-checkbox-label-text);\n font-size: var(--font-size-md);\n}\n\n.error {\n color: var(--pf-checkbox-field-error, var(--pf-field-error));\n font-size: var(--font-size-sm);\n margin: var(--space-1) 0 0;\n}\n","import {\n AttachInternals,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated checkbox.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n */\n@Component({\n tag: 'pf-checkbox',\n styleUrl: 'pf-checkbox.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Submitted under this name.\n *\n * Reflected, because a form-associated custom element takes its submission\n * name from the `name` *content attribute* -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n */\n @Prop({ reflect: true }) name?: string;\n\n /** Whether the box is ticked. Reflected so the stylesheet can select on it. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /**\n * What is submitted when ticked. Mirrors the native attribute, whose default\n * is also `on` — a checkbox with no value still submits something.\n */\n @Prop() value = 'on';\n\n /** Visible label, rendered in the same root so `for` actually associates. */\n @Prop() label?: string;\n\n /** Error message. Its presence is what marks the control invalid. */\n @Prop() error?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /** Fires when the user ticks or unticks the box. */\n @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n /** The state a form reset restores, which is the initial attribute. */\n private initialChecked = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.syncFormState();\n }\n\n @Watch('checked')\n @Watch('error')\n @Watch('required')\n @Watch('value')\n syncFormState() {\n /*\n * `null`, not an empty string, when unticked: an unchecked checkbox is\n * absent from the submission entirely, rather than present and empty.\n * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n * on, and it is what a native checkbox does.\n */\n this.internals.setFormValue(this.checked ? this.value : null);\n applyControlValidity(this.internals, this.checked, this.required, this.error);\n }\n\n /** A form-associated custom element does not inherit this. */\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n /** As `checkValidity`, but also shows the browser's validation message. */\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n /** The message explaining why the control is invalid, or an empty string. */\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /**\n * A reset restores the initial state, not `false` — a native\n * `<input type=checkbox checked>` comes back ticked.\n */\n formResetCallback() {\n this.checked = this.initialChecked;\n }\n\n private onChange = (event: Event) => {\n this.checked = (event.target as HTMLInputElement).checked;\n this.pfChange.emit({ checked: this.checked, value: this.value });\n };\n\n render() {\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n <input\n id=\"input\"\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={this.error ? 'error' : null}\n onChange={this.onChange}\n />\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n </label>\n )}\n </div>\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"wFAAA,MAAMA,EAAgB,IAAM,slC,MC2BfC,EAAU,M,2NACFC,UAWMC,KAGeC,QAAU,MAM1CC,MAAQ,KAGRC,MAGAC,MAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGDC,eAAiB,MAEzB,iBAAAC,GACEC,KAAKF,eAAiBE,KAAKT,QAC3BS,KAAKC,e,CAOP,aAAAA,GAOED,KAAKX,UAAUa,aAAaF,KAAKT,QAAUS,KAAKR,MAAQ,MACxDW,EAAqBH,KAAKX,UAAWW,KAAKT,QAASS,KAAKL,SAAUK,KAAKN,M,CAKzE,mBAAMU,GACJ,OAAOJ,KAAKX,UAAUe,e,CAKxB,oBAAMC,GACJ,OAAOL,KAAKX,UAAUgB,gB,CAKxB,0BAAMC,GACJ,OAAON,KAAKX,UAAUkB,iB,CAOxB,iBAAAC,GACER,KAAKT,QAAUS,KAAKF,c,CAGdW,SAAYC,IAClBV,KAAKT,QAAWmB,EAAMC,OAA4BpB,QAClDS,KAAKH,SAASe,KAAK,CAAErB,QAASS,KAAKT,QAASC,MAAOQ,KAAKR,OAAQ,EAGlE,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,SAAAE,IAAA,2CACEG,GAAG,QACHD,KAAK,QACLD,MAAM,QACNG,KAAK,WACL9B,KAAMU,KAAKV,KACXE,MAAOQ,KAAKR,MACZD,QAASS,KAAKT,QACdI,SAAUK,KAAKL,SACfC,SAAUI,KAAKJ,SAAQ,eACTI,KAAKN,MAAQ,OAAS,KAAI,mBACtBM,KAAKN,MAAQ,QAAU,KACzCe,SAAUT,KAAKS,WAEhBT,KAAKP,OACJqB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQG,QAAQ,SACvCrB,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as a,a as o,h as i,H as s}from"./p-Bm6UxEit.js";import{l as t}from"./p-C-VLyxRR.js";const l=()=>`:host{display:contents}.dialog{align-items:center;background:none;border:0;display:none;height:100%;justify-content:center;max-height:100%;max-width:100%;padding:var(--space-4);width:100%}.dialog[open]{display:flex}.dialog::backdrop{background:var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-modal-bg);border:1px solid var(--pf-modal-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--pf-modal-text);display:flex;flex-direction:column;max-height:100%;overflow:auto;position:relative;width:100%}:host([size='sm']) .panel{max-width:400px}:host([size='md']) .panel{max-width:560px}:host([size='lg']) .panel{max-width:800px}.close{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-modal-text-muted);cursor:pointer;display:inline-flex;inset-block-start:var(--space-3);inset-inline-end:var(--space-3);padding:var(--space-1);position:absolute}.close:hover{color:var(--pf-modal-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.dialog[open] .panel{animation:pf-modal-in var(--pf-transition-enter)}@keyframes pf-modal-in{from{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}`;const n=class{constructor(o){e(this,o);this.pfOpenChange=a(this,"pfOpenChange")}get el(){return o(this)}open=false;size="md";label;dismissable=true;showCloseButton=true;pfOpenChange;releaseScroll=null;componentDidLoad(){if(this.open)this.showDialog()}disconnectedCallback(){this.unlockScroll()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,a){if(e)this.showDialog();else this.closeDialog();if(e!==a)this.pfOpenChange.emit({open:e})}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=t()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll()}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable){e.preventDefault();return}};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};accessibleName(){if(this.label)return this.label;const e=this.el.textContent?.trim();return e?e.slice(0,120):undefined}render(){return i(s,{key:"4445c1692e0cdf8ea4243f031984d25c3fa35148"},i("dialog",{key:"6a87d0181761644d8f9bc2d02ead398c10030668",part:"dialog",class:"dialog","aria-label":this.accessibleName(),onCancel:this.onCancel,onClose:this.onClose,onClick:this.onDialogClick},i("div",{key:"0ce7125e86b87d9fd834aee12491d384c0a47f7c",class:"panel",part:"panel"},this.showCloseButton&&i("button",{key:"e395307252b805932cdbebe2bc8e31178b8c8fb6",class:"close",part:"close",type:"button","aria-label":"Close",onClick:()=>this.hide()},i("svg",{key:"f83625e2e03e6c0e5f29aa1dd76dabab6011d27f",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},i("path",{key:"fccb0dadc0442661f9300fdec4b36234124fcd93",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"}))),i("slot",{key:"8a01602089364eeeb8dfb4b8c1f9d6b48bc3f4a5"}))))}static get watchers(){return{open:[{syncOpen:0}]}}};n.style=l();export{n as pf_modal};
2
- //# sourceMappingURL=p-d6425298.entry.js.map