@kouji-ui/core 0.1.1 → 0.1.3

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 (535) hide show
  1. package/fesm2022/kouji-ui-core.mjs +26789 -0
  2. package/fesm2022/kouji-ui-core.mjs.map +1 -0
  3. package/package.json +15 -7
  4. package/types/kouji-ui-core.d.ts +13545 -0
  5. package/.turbo/turbo-build.log +0 -30
  6. package/CHANGELOG.md +0 -190
  7. package/ng-package.json +0 -11
  8. package/src/a11y/.gitkeep +0 -0
  9. package/src/a11y/aria-describedby.spec.ts +0 -55
  10. package/src/a11y/aria-describedby.ts +0 -37
  11. package/src/a11y/aria-labelledby.spec.ts +0 -55
  12. package/src/a11y/aria-labelledby.ts +0 -38
  13. package/src/a11y/focus-trap.spec.ts +0 -86
  14. package/src/a11y/focus-trap.ts +0 -72
  15. package/src/a11y/index.ts +0 -10
  16. package/src/a11y/live-region.spec.ts +0 -58
  17. package/src/a11y/live-region.ts +0 -50
  18. package/src/a11y/roving-tabindex.spec.ts +0 -201
  19. package/src/a11y/roving-tabindex.ts +0 -153
  20. package/src/a11y/visually-hidden.spec.ts +0 -34
  21. package/src/a11y/visually-hidden.ts +0 -26
  22. package/src/accordion/accordion.context.ts +0 -44
  23. package/src/accordion/accordion.spec.ts +0 -242
  24. package/src/accordion/accordion.ts +0 -401
  25. package/src/accordion/index.ts +0 -8
  26. package/src/alert/alert.context.ts +0 -28
  27. package/src/alert/alert.spec.ts +0 -217
  28. package/src/alert/alert.ts +0 -417
  29. package/src/alert/config.ts +0 -46
  30. package/src/alert/index.ts +0 -19
  31. package/src/avatar/avatar-group.context.ts +0 -45
  32. package/src/avatar/avatar-group.spec.ts +0 -358
  33. package/src/avatar/avatar-group.ts +0 -259
  34. package/src/avatar/avatar.spec.ts +0 -18
  35. package/src/avatar/avatar.ts +0 -39
  36. package/src/avatar/index.ts +0 -11
  37. package/src/badge/badge.spec.ts +0 -28
  38. package/src/badge/badge.ts +0 -35
  39. package/src/badge/index.ts +0 -1
  40. package/src/breadcrumb/breadcrumb-current.ts +0 -38
  41. package/src/breadcrumb/breadcrumb-ellipsis.ts +0 -71
  42. package/src/breadcrumb/breadcrumb-item.ts +0 -41
  43. package/src/breadcrumb/breadcrumb-link.ts +0 -44
  44. package/src/breadcrumb/breadcrumb-list.ts +0 -42
  45. package/src/breadcrumb/breadcrumb-separator.ts +0 -45
  46. package/src/breadcrumb/breadcrumb.context.ts +0 -45
  47. package/src/breadcrumb/breadcrumb.spec.ts +0 -354
  48. package/src/breadcrumb/breadcrumb.ts +0 -239
  49. package/src/breadcrumb/config.ts +0 -84
  50. package/src/breadcrumb/index.ts +0 -18
  51. package/src/button/_examples/button.example.ts +0 -71
  52. package/src/button/_examples/button.finance.example.ts +0 -83
  53. package/src/button/_examples/button.retro.example.ts +0 -91
  54. package/src/button/_examples/button.sizes.example.ts +0 -60
  55. package/src/button/_examples/index.ts +0 -6
  56. package/src/button/button.spec.ts +0 -163
  57. package/src/button/button.ts +0 -142
  58. package/src/button/config.spec.ts +0 -33
  59. package/src/button/config.ts +0 -45
  60. package/src/button/index.ts +0 -2
  61. package/src/button-group/button-group.context.ts +0 -28
  62. package/src/button-group/button-group.spec.ts +0 -99
  63. package/src/button-group/button-group.ts +0 -99
  64. package/src/button-group/index.ts +0 -2
  65. package/src/calendar/calendar-day.ts +0 -102
  66. package/src/calendar/calendar-grid.ts +0 -90
  67. package/src/calendar/calendar-header.ts +0 -65
  68. package/src/calendar/calendar.context.ts +0 -53
  69. package/src/calendar/calendar.spec.ts +0 -225
  70. package/src/calendar/calendar.ts +0 -233
  71. package/src/calendar/date-utils.ts +0 -225
  72. package/src/calendar/index.ts +0 -28
  73. package/src/carousel/carousel.context.ts +0 -81
  74. package/src/carousel/carousel.spec.ts +0 -337
  75. package/src/carousel/carousel.ts +0 -919
  76. package/src/carousel/index.ts +0 -22
  77. package/src/cascade-select/cascade-select-option.ts +0 -205
  78. package/src/cascade-select/cascade-select-panel.ts +0 -106
  79. package/src/cascade-select/cascade-select-root.ts +0 -265
  80. package/src/cascade-select/cascade-select-sub-panel.ts +0 -168
  81. package/src/cascade-select/cascade-select-trigger.ts +0 -44
  82. package/src/cascade-select/cascade-select.context.ts +0 -71
  83. package/src/cascade-select/cascade-select.spec.ts +0 -241
  84. package/src/cascade-select/cascade-select.ts +0 -5
  85. package/src/cascade-select/index.ts +0 -11
  86. package/src/chart/chart.spec.ts +0 -27
  87. package/src/chart/chart.ts +0 -52
  88. package/src/chart/index.ts +0 -1
  89. package/src/chat/chat-avatar.ts +0 -31
  90. package/src/chat/chat-bubble.ts +0 -49
  91. package/src/chat/chat-footer.ts +0 -67
  92. package/src/chat/chat-header.ts +0 -41
  93. package/src/chat/chat-log.ts +0 -43
  94. package/src/chat/chat.context.ts +0 -64
  95. package/src/chat/chat.spec.ts +0 -341
  96. package/src/chat/chat.ts +0 -191
  97. package/src/chat/config.ts +0 -53
  98. package/src/chat/index.ts +0 -21
  99. package/src/checkbox/checkbox.spec.ts +0 -35
  100. package/src/checkbox/checkbox.ts +0 -89
  101. package/src/checkbox/index.ts +0 -1
  102. package/src/color-picker/color-picker.context.ts +0 -74
  103. package/src/color-picker/color-picker.spec.ts +0 -241
  104. package/src/color-picker/color-picker.ts +0 -698
  105. package/src/color-picker/color-picker.utils.ts +0 -140
  106. package/src/color-picker/index.ts +0 -28
  107. package/src/combobox/combobox-input.ts +0 -143
  108. package/src/combobox/combobox-listbox.ts +0 -49
  109. package/src/combobox/combobox-option.ts +0 -43
  110. package/src/combobox/combobox-root.ts +0 -281
  111. package/src/combobox/combobox.spec.ts +0 -75
  112. package/src/combobox/combobox.ts +0 -4
  113. package/src/combobox/index.ts +0 -4
  114. package/src/command-palette/command-empty.ts +0 -36
  115. package/src/command-palette/command-group.ts +0 -21
  116. package/src/command-palette/command-input.ts +0 -70
  117. package/src/command-palette/command-item.ts +0 -60
  118. package/src/command-palette/command-list.ts +0 -25
  119. package/src/command-palette/command-palette-dialog.ts +0 -74
  120. package/src/command-palette/command-palette-trigger.ts +0 -64
  121. package/src/command-palette/command-palette.filters.ts +0 -53
  122. package/src/command-palette/command-palette.spec.ts +0 -349
  123. package/src/command-palette/command-palette.ts +0 -204
  124. package/src/command-palette/command-separator.ts +0 -18
  125. package/src/command-palette/index.ts +0 -15
  126. package/src/confirm-popup/confirm-popup-action.ts +0 -39
  127. package/src/confirm-popup/confirm-popup-cancel.ts +0 -38
  128. package/src/confirm-popup/confirm-popup-content.ts +0 -113
  129. package/src/confirm-popup/confirm-popup-message.ts +0 -36
  130. package/src/confirm-popup/confirm-popup-trigger.ts +0 -31
  131. package/src/confirm-popup/confirm-popup.context.ts +0 -41
  132. package/src/confirm-popup/confirm-popup.spec.ts +0 -337
  133. package/src/confirm-popup/confirm-popup.ts +0 -109
  134. package/src/confirm-popup/index.ts +0 -12
  135. package/src/date-picker/date-picker-calendar.ts +0 -65
  136. package/src/date-picker/date-picker-trigger.ts +0 -215
  137. package/src/date-picker/date-picker.context.ts +0 -50
  138. package/src/date-picker/date-picker.spec.ts +0 -117
  139. package/src/date-picker/date-picker.ts +0 -127
  140. package/src/date-picker/index.ts +0 -7
  141. package/src/dialog/_examples/dialog.confirm.example.ts +0 -145
  142. package/src/dialog/_examples/dialog.example.ts +0 -106
  143. package/src/dialog/_examples/dialog.finance.example.ts +0 -121
  144. package/src/dialog/_examples/dialog.retro.example.ts +0 -126
  145. package/src/dialog/_examples/index.ts +0 -6
  146. package/src/dialog/dialog.ref.ts +0 -42
  147. package/src/dialog/dialog.service.ts +0 -66
  148. package/src/dialog/dialog.spec.ts +0 -37
  149. package/src/dialog/dialog.ts +0 -26
  150. package/src/dialog/index.ts +0 -3
  151. package/src/divider/divider.spec.ts +0 -223
  152. package/src/divider/divider.ts +0 -137
  153. package/src/divider/index.ts +0 -5
  154. package/src/drawer/drawer.ref.ts +0 -63
  155. package/src/drawer/drawer.service.ts +0 -106
  156. package/src/drawer/drawer.spec.ts +0 -117
  157. package/src/drawer/drawer.ts +0 -122
  158. package/src/drawer/index.ts +0 -10
  159. package/src/dropdown-menu/dropdown-menu-content.ts +0 -258
  160. package/src/dropdown-menu/dropdown-menu-group.ts +0 -31
  161. package/src/dropdown-menu/dropdown-menu-item.ts +0 -51
  162. package/src/dropdown-menu/dropdown-menu-label.ts +0 -41
  163. package/src/dropdown-menu/dropdown-menu-separator.ts +0 -27
  164. package/src/dropdown-menu/dropdown-menu-trigger.ts +0 -140
  165. package/src/dropdown-menu/dropdown-menu.spec.ts +0 -265
  166. package/src/dropdown-menu/dropdown-menu.ts +0 -60
  167. package/src/dropdown-menu/index.ts +0 -15
  168. package/src/example-components.ts +0 -42
  169. package/src/field/field-error.ts +0 -49
  170. package/src/field/field-group.ts +0 -39
  171. package/src/field/field-help.ts +0 -47
  172. package/src/field/field-label.ts +0 -30
  173. package/src/field/field.context.ts +0 -28
  174. package/src/field/field.spec.ts +0 -179
  175. package/src/field/field.ts +0 -121
  176. package/src/field/index.ts +0 -6
  177. package/src/file-upload/file-upload.context.ts +0 -89
  178. package/src/file-upload/file-upload.spec.ts +0 -290
  179. package/src/file-upload/file-upload.ts +0 -639
  180. package/src/file-upload/file-upload.types.ts +0 -59
  181. package/src/file-upload/index.ts +0 -23
  182. package/src/form/form-error-summary.ts +0 -87
  183. package/src/form/form-field.context.ts +0 -3
  184. package/src/form/form-field.spec.ts +0 -25
  185. package/src/form/form-field.ts +0 -52
  186. package/src/form/form.context.ts +0 -53
  187. package/src/form/form.spec.ts +0 -162
  188. package/src/form/form.ts +0 -326
  189. package/src/form/index.ts +0 -11
  190. package/src/icon/E2E.md +0 -14
  191. package/src/icon/icon.directive.spec.ts +0 -198
  192. package/src/icon/icon.directive.ts +0 -113
  193. package/src/icon/icon.mode.spec.ts +0 -29
  194. package/src/icon/icon.mode.ts +0 -23
  195. package/src/icon/icon.providers.spec.ts +0 -63
  196. package/src/icon/icon.providers.ts +0 -47
  197. package/src/icon/icon.resolver.spec.ts +0 -96
  198. package/src/icon/icon.resolver.ts +0 -49
  199. package/src/icon/icon.tokens.ts +0 -88
  200. package/src/icon/icon.types.ts +0 -48
  201. package/src/icon/index.ts +0 -21
  202. package/src/input/index.ts +0 -1
  203. package/src/input/input.spec.ts +0 -43
  204. package/src/input/input.ts +0 -89
  205. package/src/input-group/index.ts +0 -3
  206. package/src/input-group/input-group-addon.ts +0 -92
  207. package/src/input-group/input-group.context.ts +0 -27
  208. package/src/input-group/input-group.spec.ts +0 -186
  209. package/src/input-group/input-group.ts +0 -136
  210. package/src/input-mask/index.ts +0 -11
  211. package/src/input-mask/input-mask.compile.ts +0 -69
  212. package/src/input-mask/input-mask.engine.ts +0 -376
  213. package/src/input-mask/input-mask.presets.ts +0 -24
  214. package/src/input-mask/input-mask.spec.ts +0 -304
  215. package/src/input-mask/input-mask.tokens.ts +0 -49
  216. package/src/input-mask/input-mask.ts +0 -280
  217. package/src/input-otp/index.ts +0 -2
  218. package/src/input-otp/input-otp.context.ts +0 -41
  219. package/src/input-otp/input-otp.spec.ts +0 -308
  220. package/src/input-otp/input-otp.ts +0 -470
  221. package/src/kbd/index.ts +0 -1
  222. package/src/kbd/kbd.spec.ts +0 -127
  223. package/src/kbd/kbd.ts +0 -132
  224. package/src/link/config.ts +0 -44
  225. package/src/link/index.ts +0 -2
  226. package/src/link/link.spec.ts +0 -246
  227. package/src/link/link.ts +0 -226
  228. package/src/list/index.ts +0 -11
  229. package/src/list/list.spec.ts +0 -237
  230. package/src/list/list.ts +0 -277
  231. package/src/menubar/index.ts +0 -7
  232. package/src/menubar/menubar-item.ts +0 -204
  233. package/src/menubar/menubar.context.ts +0 -43
  234. package/src/menubar/menubar.spec.ts +0 -433
  235. package/src/menubar/menubar.ts +0 -309
  236. package/src/number-input/index.ts +0 -4
  237. package/src/number-input/number-input-group.ts +0 -64
  238. package/src/number-input/number-input.context.ts +0 -31
  239. package/src/number-input/number-input.format.ts +0 -148
  240. package/src/number-input/number-input.spec.ts +0 -170
  241. package/src/number-input/number-input.ts +0 -457
  242. package/src/number-input/number-stepper.ts +0 -193
  243. package/src/overlay-badge/index.ts +0 -7
  244. package/src/overlay-badge/overlay-badge-content.ts +0 -73
  245. package/src/overlay-badge/overlay-badge.context.ts +0 -37
  246. package/src/overlay-badge/overlay-badge.spec.ts +0 -220
  247. package/src/overlay-badge/overlay-badge.ts +0 -128
  248. package/src/pagination/config.ts +0 -82
  249. package/src/pagination/index.ts +0 -19
  250. package/src/pagination/page-tokens.ts +0 -78
  251. package/src/pagination/pagination-ellipsis.ts +0 -69
  252. package/src/pagination/pagination-first.ts +0 -84
  253. package/src/pagination/pagination-info.ts +0 -70
  254. package/src/pagination/pagination-item.ts +0 -81
  255. package/src/pagination/pagination-last.ts +0 -85
  256. package/src/pagination/pagination-next.ts +0 -86
  257. package/src/pagination/pagination-previous.ts +0 -90
  258. package/src/pagination/pagination.context.ts +0 -52
  259. package/src/pagination/pagination.spec.ts +0 -388
  260. package/src/pagination/pagination.ts +0 -288
  261. package/src/password-input/index.ts +0 -15
  262. package/src/password-input/password-input.context.ts +0 -65
  263. package/src/password-input/password-input.scorer.ts +0 -34
  264. package/src/password-input/password-input.spec.ts +0 -274
  265. package/src/password-input/password-input.ts +0 -488
  266. package/src/popover/_examples/index.ts +0 -5
  267. package/src/popover/_examples/popover.example.ts +0 -92
  268. package/src/popover/_examples/popover.finance.example.ts +0 -106
  269. package/src/popover/_examples/popover.retro.example.ts +0 -103
  270. package/src/popover/index.ts +0 -5
  271. package/src/popover/popover-arrow.ts +0 -30
  272. package/src/popover/popover-close.ts +0 -36
  273. package/src/popover/popover-content.ts +0 -41
  274. package/src/popover/popover-title.ts +0 -39
  275. package/src/popover/popover-trigger.ts +0 -40
  276. package/src/popover/popover.spec.ts +0 -59
  277. package/src/popover/popover.ts +0 -5
  278. package/src/presets/bind-presets.spec.ts +0 -50
  279. package/src/presets/bind-presets.ts +0 -43
  280. package/src/presets/index.ts +0 -3
  281. package/src/presets/size.spec.ts +0 -67
  282. package/src/presets/size.ts +0 -59
  283. package/src/presets/variant.spec.ts +0 -72
  284. package/src/presets/variant.ts +0 -62
  285. package/src/primitives/.gitkeep +0 -0
  286. package/src/primitives/directionality/directionality.spec.ts +0 -112
  287. package/src/primitives/directionality/directionality.ts +0 -89
  288. package/src/primitives/directionality/index.ts +0 -1
  289. package/src/primitives/forms/form-control.spec.ts +0 -67
  290. package/src/primitives/forms/form-control.ts +0 -94
  291. package/src/primitives/forms/index.ts +0 -1
  292. package/src/primitives/index.ts +0 -6
  293. package/src/primitives/interaction/disabled.spec.ts +0 -47
  294. package/src/primitives/interaction/disabled.ts +0 -31
  295. package/src/primitives/interaction/focus-ring.spec.ts +0 -62
  296. package/src/primitives/interaction/focus-ring.ts +0 -59
  297. package/src/primitives/interaction/index.ts +0 -2
  298. package/src/primitives/list/filterable-list.spec.ts +0 -114
  299. package/src/primitives/list/filterable-list.ts +0 -126
  300. package/src/primitives/list/group.spec.ts +0 -99
  301. package/src/primitives/list/group.ts +0 -139
  302. package/src/primitives/list/index.ts +0 -8
  303. package/src/primitives/list/inject-helpers.ts +0 -8
  304. package/src/primitives/list/item.spec.ts +0 -173
  305. package/src/primitives/list/item.ts +0 -222
  306. package/src/primitives/list/navigator.spec.ts +0 -286
  307. package/src/primitives/list/navigator.ts +0 -238
  308. package/src/primitives/list/selection.spec.ts +0 -214
  309. package/src/primitives/list/selection.ts +0 -339
  310. package/src/primitives/list/tokens.ts +0 -106
  311. package/src/primitives/list/type-ahead.spec.ts +0 -58
  312. package/src/primitives/list/type-ahead.ts +0 -46
  313. package/src/primitives/overlay/backdrop.spec.ts +0 -54
  314. package/src/primitives/overlay/backdrop.ts +0 -31
  315. package/src/primitives/overlay/builder.spec.ts +0 -38
  316. package/src/primitives/overlay/builder.ts +0 -151
  317. package/src/primitives/overlay/container.ts +0 -42
  318. package/src/primitives/overlay/context.ts +0 -14
  319. package/src/primitives/overlay/controller.spec.ts +0 -86
  320. package/src/primitives/overlay/controller.ts +0 -190
  321. package/src/primitives/overlay/id.spec.ts +0 -24
  322. package/src/primitives/overlay/id.ts +0 -17
  323. package/src/primitives/overlay/index.ts +0 -18
  324. package/src/primitives/overlay/overlay.css +0 -42
  325. package/src/primitives/overlay/panel.spec.ts +0 -52
  326. package/src/primitives/overlay/panel.ts +0 -102
  327. package/src/primitives/overlay/stack.spec.ts +0 -55
  328. package/src/primitives/overlay/stack.ts +0 -113
  329. package/src/primitives/overlay/strategies/backdrop/blurred.spec.ts +0 -11
  330. package/src/primitives/overlay/strategies/backdrop/blurred.ts +0 -5
  331. package/src/primitives/overlay/strategies/backdrop/none.spec.ts +0 -10
  332. package/src/primitives/overlay/strategies/backdrop/none.ts +0 -9
  333. package/src/primitives/overlay/strategies/backdrop/solid.spec.ts +0 -18
  334. package/src/primitives/overlay/strategies/backdrop/solid.ts +0 -23
  335. package/src/primitives/overlay/strategies/focus-trap/inert-based.spec.ts +0 -28
  336. package/src/primitives/overlay/strategies/focus-trap/inert-based.ts +0 -38
  337. package/src/primitives/overlay/strategies/focus-trap/no-trap.spec.ts +0 -9
  338. package/src/primitives/overlay/strategies/focus-trap/no-trap.ts +0 -8
  339. package/src/primitives/overlay/strategies/focus-trap/tab-cycle.spec.ts +0 -49
  340. package/src/primitives/overlay/strategies/focus-trap/tab-cycle.ts +0 -85
  341. package/src/primitives/overlay/strategies/index.ts +0 -34
  342. package/src/primitives/overlay/strategies/live-announcer/_announce.ts +0 -35
  343. package/src/primitives/overlay/strategies/live-announcer/assertive.spec.ts +0 -21
  344. package/src/primitives/overlay/strategies/live-announcer/assertive.ts +0 -11
  345. package/src/primitives/overlay/strategies/live-announcer/polite.spec.ts +0 -21
  346. package/src/primitives/overlay/strategies/live-announcer/polite.ts +0 -11
  347. package/src/primitives/overlay/strategies/live-announcer/silent.spec.ts +0 -12
  348. package/src/primitives/overlay/strategies/live-announcer/silent.ts +0 -5
  349. package/src/primitives/overlay/strategies/mount/body-portal.spec.ts +0 -40
  350. package/src/primitives/overlay/strategies/mount/body-portal.ts +0 -91
  351. package/src/primitives/overlay/strategies/mount/in-container.spec.ts +0 -43
  352. package/src/primitives/overlay/strategies/mount/in-container.ts +0 -39
  353. package/src/primitives/overlay/strategies/mount/in-place.spec.ts +0 -40
  354. package/src/primitives/overlay/strategies/mount/in-place.ts +0 -20
  355. package/src/primitives/overlay/strategies/position/anchored-to.spec.ts +0 -56
  356. package/src/primitives/overlay/strategies/position/anchored-to.ts +0 -248
  357. package/src/primitives/overlay/strategies/position/corner.spec.ts +0 -36
  358. package/src/primitives/overlay/strategies/position/corner.ts +0 -33
  359. package/src/primitives/overlay/strategies/position/edge-sheet.spec.ts +0 -32
  360. package/src/primitives/overlay/strategies/position/edge-sheet.ts +0 -36
  361. package/src/primitives/overlay/strategies/position/in-place-sibling.spec.ts +0 -25
  362. package/src/primitives/overlay/strategies/position/in-place-sibling.ts +0 -13
  363. package/src/primitives/overlay/strategies/position/point-at.spec.ts +0 -40
  364. package/src/primitives/overlay/strategies/position/point-at.ts +0 -34
  365. package/src/primitives/overlay/strategies/position/viewport-centered.spec.ts +0 -31
  366. package/src/primitives/overlay/strategies/position/viewport-centered.ts +0 -31
  367. package/src/primitives/overlay/strategies/scroll-lock/css-clip.spec.ts +0 -15
  368. package/src/primitives/overlay/strategies/scroll-lock/css-clip.ts +0 -39
  369. package/src/primitives/overlay/strategies/scroll-lock/html-overflow.spec.ts +0 -21
  370. package/src/primitives/overlay/strategies/scroll-lock/html-overflow.ts +0 -44
  371. package/src/primitives/overlay/strategies/scroll-lock/none.spec.ts +0 -9
  372. package/src/primitives/overlay/strategies/scroll-lock/none.ts +0 -5
  373. package/src/primitives/overlay/strategies/trigger-event/on-click.spec.ts +0 -32
  374. package/src/primitives/overlay/strategies/trigger-event/on-click.ts +0 -28
  375. package/src/primitives/overlay/strategies/trigger-event/on-context-menu.spec.ts +0 -45
  376. package/src/primitives/overlay/strategies/trigger-event/on-context-menu.ts +0 -70
  377. package/src/primitives/overlay/strategies/trigger-event/on-focus-or-input.spec.ts +0 -35
  378. package/src/primitives/overlay/strategies/trigger-event/on-focus-or-input.ts +0 -34
  379. package/src/primitives/overlay/strategies/trigger-event/on-focus.spec.ts +0 -64
  380. package/src/primitives/overlay/strategies/trigger-event/on-focus.ts +0 -37
  381. package/src/primitives/overlay/strategies/trigger-event/on-hotkey.spec.ts +0 -37
  382. package/src/primitives/overlay/strategies/trigger-event/on-hotkey.ts +0 -59
  383. package/src/primitives/overlay/strategies/trigger-event/on-hover.spec.ts +0 -34
  384. package/src/primitives/overlay/strategies/trigger-event/on-hover.ts +0 -86
  385. package/src/primitives/overlay/strategies/trigger-event/programmatic.spec.ts +0 -16
  386. package/src/primitives/overlay/strategies/trigger-event/programmatic.ts +0 -12
  387. package/src/primitives/overlay/tokens.ts +0 -54
  388. package/src/primitives/overlay/trigger.spec.ts +0 -103
  389. package/src/primitives/overlay/trigger.ts +0 -75
  390. package/src/primitives/overlay/types.ts +0 -24
  391. package/src/primitives/overlay/wrapper.ts +0 -50
  392. package/src/primitives/signals/deep-signal.ts +0 -109
  393. package/src/primitives/signals/index.ts +0 -1
  394. package/src/progress-bar/config.ts +0 -48
  395. package/src/progress-bar/index.ts +0 -12
  396. package/src/progress-bar/progress-bar-fill.ts +0 -37
  397. package/src/progress-bar/progress-bar.context.ts +0 -34
  398. package/src/progress-bar/progress-bar.spec.ts +0 -423
  399. package/src/progress-bar/progress-bar.ts +0 -217
  400. package/src/public-api.ts +0 -84
  401. package/src/radio/index.ts +0 -2
  402. package/src/radio/radio.context.ts +0 -3
  403. package/src/radio/radio.spec.ts +0 -36
  404. package/src/radio/radio.ts +0 -66
  405. package/src/select/index.ts +0 -4
  406. package/src/select/select-content.ts +0 -69
  407. package/src/select/select-option.ts +0 -35
  408. package/src/select/select-root.ts +0 -129
  409. package/src/select/select-trigger.ts +0 -93
  410. package/src/select/select.spec.ts +0 -138
  411. package/src/select/select.ts +0 -4
  412. package/src/skeleton/index.ts +0 -5
  413. package/src/skeleton/skeleton.spec.ts +0 -115
  414. package/src/skeleton/skeleton.ts +0 -56
  415. package/src/slider/index.ts +0 -10
  416. package/src/slider/slider-range.ts +0 -49
  417. package/src/slider/slider-thumb.ts +0 -335
  418. package/src/slider/slider-track.ts +0 -70
  419. package/src/slider/slider.context.ts +0 -79
  420. package/src/slider/slider.geometry.ts +0 -73
  421. package/src/slider/slider.spec.ts +0 -216
  422. package/src/slider/slider.ts +0 -443
  423. package/src/speed-dial/index.ts +0 -10
  424. package/src/speed-dial/speed-dial-action.ts +0 -40
  425. package/src/speed-dial/speed-dial-actions.ts +0 -31
  426. package/src/speed-dial/speed-dial-trigger.ts +0 -55
  427. package/src/speed-dial/speed-dial.context.ts +0 -36
  428. package/src/speed-dial/speed-dial.spec.ts +0 -143
  429. package/src/speed-dial/speed-dial.ts +0 -127
  430. package/src/spinner/config.ts +0 -48
  431. package/src/spinner/index.ts +0 -8
  432. package/src/spinner/spinner.spec.ts +0 -262
  433. package/src/spinner/spinner.ts +0 -129
  434. package/src/stepper/index.ts +0 -15
  435. package/src/stepper/stepper.context.ts +0 -63
  436. package/src/stepper/stepper.spec.ts +0 -403
  437. package/src/stepper/stepper.ts +0 -544
  438. package/src/styles/docs-themes.css +0 -82
  439. package/src/styles.css +0 -17
  440. package/src/table/column-helpers.spec.ts +0 -74
  441. package/src/table/column-helpers.ts +0 -68
  442. package/src/table/filter-fns.ts +0 -230
  443. package/src/table/filter-models.spec.ts +0 -240
  444. package/src/table/filter-models.ts +0 -124
  445. package/src/table/filter-params.ts +0 -90
  446. package/src/table/grid-api-impl.ts +0 -321
  447. package/src/table/grid-api.spec.ts +0 -178
  448. package/src/table/grid-api.ts +0 -285
  449. package/src/table/index.ts +0 -73
  450. package/src/table/table-cell.spec.ts +0 -43
  451. package/src/table/table-cell.ts +0 -38
  452. package/src/table/table-filter-outlet.ts +0 -120
  453. package/src/table/table-header.spec.ts +0 -54
  454. package/src/table/table-header.ts +0 -63
  455. package/src/table/table-keyboard.spec.ts +0 -68
  456. package/src/table/table-keyboard.ts +0 -107
  457. package/src/table/table-resource.spec.ts +0 -37
  458. package/src/table/table-resource.ts +0 -36
  459. package/src/table/table-row.spec.ts +0 -54
  460. package/src/table/table-row.ts +0 -31
  461. package/src/table/table-storage.spec.ts +0 -67
  462. package/src/table/table-storage.ts +0 -76
  463. package/src/table/table.spec.ts +0 -172
  464. package/src/table/table.ts +0 -281
  465. package/src/table/table.types.ts +0 -83
  466. package/src/tabs/index.ts +0 -7
  467. package/src/tabs/tabs.context.ts +0 -32
  468. package/src/tabs/tabs.spec.ts +0 -352
  469. package/src/tabs/tabs.ts +0 -364
  470. package/src/tag/config.ts +0 -53
  471. package/src/tag/index.ts +0 -7
  472. package/src/tag/tag-list.ts +0 -76
  473. package/src/tag/tag-remove.ts +0 -61
  474. package/src/tag/tag.context.ts +0 -36
  475. package/src/tag/tag.spec.ts +0 -240
  476. package/src/tag/tag.ts +0 -203
  477. package/src/test-setup.ts +0 -5
  478. package/src/textarea/config.ts +0 -42
  479. package/src/textarea/index.ts +0 -8
  480. package/src/textarea/textarea.spec.ts +0 -176
  481. package/src/textarea/textarea.ts +0 -235
  482. package/src/time-picker/index.ts +0 -15
  483. package/src/time-picker/time-picker-meridiem.ts +0 -123
  484. package/src/time-picker/time-picker-segment.ts +0 -318
  485. package/src/time-picker/time-picker.context.ts +0 -38
  486. package/src/time-picker/time-picker.format.ts +0 -181
  487. package/src/time-picker/time-picker.spec.ts +0 -189
  488. package/src/time-picker/time-picker.ts +0 -274
  489. package/src/toast/_examples/index.ts +0 -5
  490. package/src/toast/_examples/toast.example.ts +0 -282
  491. package/src/toast/_examples/toast.finance.example.ts +0 -180
  492. package/src/toast/_examples/toast.retro.example.ts +0 -161
  493. package/src/toast/index.ts +0 -28
  494. package/src/toast/toast.ref.ts +0 -26
  495. package/src/toast/toast.service.ts +0 -339
  496. package/src/toast/toast.spec.ts +0 -247
  497. package/src/toast/toast.strategy.ts +0 -112
  498. package/src/toast/toast.ts +0 -463
  499. package/src/toast/toast.types.ts +0 -5
  500. package/src/toggle/index.ts +0 -1
  501. package/src/toggle/toggle.spec.ts +0 -24
  502. package/src/toggle/toggle.ts +0 -48
  503. package/src/tooltip/_examples/index.ts +0 -6
  504. package/src/tooltip/_examples/tooltip.example.ts +0 -82
  505. package/src/tooltip/_examples/tooltip.finance.example.ts +0 -97
  506. package/src/tooltip/_examples/tooltip.placements.example.ts +0 -83
  507. package/src/tooltip/_examples/tooltip.retro.example.ts +0 -107
  508. package/src/tooltip/index.ts +0 -4
  509. package/src/tooltip/tooltip-arrow.ts +0 -31
  510. package/src/tooltip/tooltip-content.ts +0 -38
  511. package/src/tooltip/tooltip-group.ts +0 -32
  512. package/src/tooltip/tooltip-trigger.ts +0 -47
  513. package/src/tooltip/tooltip.spec.ts +0 -40
  514. package/src/tooltip/tooltip.ts +0 -5
  515. package/src/tree-select/index.ts +0 -12
  516. package/src/tree-select/tree-select-content.ts +0 -199
  517. package/src/tree-select/tree-select-node.ts +0 -132
  518. package/src/tree-select/tree-select-root.ts +0 -272
  519. package/src/tree-select/tree-select-trigger.ts +0 -90
  520. package/src/tree-select/tree-select.context.ts +0 -63
  521. package/src/tree-select/tree-select.spec.ts +0 -433
  522. package/src/tree-select/tree-select.ts +0 -2
  523. package/src/typography/blockquote.ts +0 -57
  524. package/src/typography/code.ts +0 -53
  525. package/src/typography/index.ts +0 -22
  526. package/src/typography/lead.ts +0 -49
  527. package/src/typography/muted.ts +0 -29
  528. package/src/typography/truncate.ts +0 -99
  529. package/src/typography/typography.spec.ts +0 -203
  530. package/tsconfig.lib.json +0 -21
  531. package/tsconfig.lib.prod.json +0 -17
  532. package/tsconfig.spec.json +0 -18
  533. package/vite.config.ts +0 -27
  534. /package/{src/icon → icon}/icon.css +0 -0
  535. /package/{src/typography → typography}/prose.css +0 -0
@@ -1,113 +0,0 @@
1
- import {
2
- DestroyRef,
3
- Directive,
4
- PLATFORM_ID,
5
- effect,
6
- inject,
7
- } from '@angular/core';
8
- import { isPlatformBrowser } from '@angular/common';
9
- import { KjOverlayController } from '../primitives/overlay/controller';
10
- import { KjOverlayPanel } from '../primitives/overlay/panel';
11
- import { KjPopoverContent } from '../popover/popover-content';
12
- import {
13
- KJ_CONFIRM_POPUP,
14
- type KjConfirmPopupContext,
15
- } from './confirm-popup.context';
16
-
17
- /**
18
- * The floating confirm popup panel. Composes `kj-popover-content` (a
19
- * component) so the entire transport — portal mount, anchor positioning
20
- * with flip / shift, outside-click and Escape close, focus restoration —
21
- * is reused.
22
- *
23
- * Layered on top: promotes the panel role from `dialog` to `alertdialog`
24
- * (per WAI-ARIA APG, `alertdialog` causes assistive tech to interrupt and
25
- * announce the panel — the right semantic for a destructive confirmation),
26
- * keeps `aria-modal="false"`, wires `aria-describedby` to the projected
27
- * `[kjConfirmPopupMessage]`, and moves initial focus to the configured
28
- * default-focus button (cancel by default, WCAG 3.3.4 *Error Prevention*).
29
- *
30
- * **Note (overlay primitives migration):** `KjPopoverContent` is now a
31
- * component (not a directive); use the `<kj-popover-content>` selector for
32
- * the actual panel and apply this directive on the same element to layer
33
- * the alertdialog promotion.
34
- *
35
- * ```html
36
- * <kj-popover-content kjConfirmPopupContent [kjFor]="t">
37
- * <p kjConfirmPopupMessage>Delete this row?</p>
38
- * <button kjConfirmPopupCancel>Cancel</button>
39
- * <button kjConfirmPopupAction>Delete</button>
40
- * </kj-popover-content>
41
- * ```
42
- *
43
- * @doc-category Core/Overlay
44
- */
45
- @Directive({
46
- selector: '[kjConfirmPopupContent]',
47
- standalone: true,
48
- exportAs: 'kjConfirmPopupContent',
49
- })
50
- export class KjConfirmPopupContent {
51
- private readonly platformId = inject(PLATFORM_ID);
52
- private readonly destroyRef = inject(DestroyRef);
53
- private readonly ctx = inject<KjConfirmPopupContext>(KJ_CONFIRM_POPUP);
54
- private readonly _panel = inject(KjOverlayPanel, { optional: true });
55
- private get controller(): KjOverlayController | null {
56
- return this._panel?.controller ?? null;
57
- }
58
- /** Optional reference — present when the host is `<kj-popover-content>`. */
59
- private readonly popoverContent = inject(KjPopoverContent, { self: true, optional: true });
60
-
61
- constructor() {
62
- if (!isPlatformBrowser(this.platformId)) return;
63
-
64
- let lastOpen = false;
65
- const eff = effect(() => {
66
- const open = this.ctx.open();
67
- if (open && !lastOpen) {
68
- lastOpen = true;
69
- queueMicrotask(() => this.promoteRole());
70
- if (typeof requestAnimationFrame !== 'undefined') {
71
- requestAnimationFrame(() => this.focusDefault());
72
- }
73
- } else if (!open && lastOpen) {
74
- lastOpen = false;
75
- }
76
- });
77
- this.destroyRef.onDestroy(() => eff.destroy());
78
- // Touch the optional popover-content reference so unused-variable lint
79
- // stays quiet in the no-op branch.
80
- void this.popoverContent;
81
- }
82
-
83
- private findPanel(): HTMLElement | null {
84
- return this.controller?.panelEl() ?? null;
85
- }
86
-
87
- private promoteRole(): void {
88
- const panel = this.findPanel();
89
- if (!panel) return;
90
- panel.setAttribute('role', 'alertdialog');
91
- panel.setAttribute('aria-modal', 'false');
92
- panel.setAttribute('aria-describedby', this.ctx.messageId);
93
- }
94
-
95
- private focusDefault(): void {
96
- const panel = this.findPanel();
97
- if (!panel) return;
98
- panel.setAttribute('role', 'alertdialog');
99
- panel.setAttribute('aria-modal', 'false');
100
- panel.setAttribute('aria-describedby', this.ctx.messageId);
101
-
102
- const which = this.ctx.defaultFocus();
103
- const sel =
104
- which === 'cancel' ? '[kjConfirmPopupCancel]' : '[kjConfirmPopupAction]';
105
- const target = panel.querySelector<HTMLElement>(sel);
106
- if (!target) return;
107
- try {
108
- target.focus();
109
- } catch {
110
- /* ignore */
111
- }
112
- }
113
- }
@@ -1,36 +0,0 @@
1
- import { Directive, inject } from '@angular/core';
2
- import {
3
- KJ_CONFIRM_POPUP,
4
- type KjConfirmPopupContext,
5
- } from './confirm-popup.context';
6
-
7
- /**
8
- * Marks the body / message element inside the confirm popup. Sets the host
9
- * `id` to the context's `messageId` so `[kjConfirmPopupContent]` can wire
10
- * `aria-describedby` on the panel.
11
- *
12
- * **Required for accessibility.** The WAI-ARIA `alertdialog` pattern requires
13
- * a description; the panel's `aria-describedby` is wired to this element's
14
- * id via the confirm popup context.
15
- *
16
- * @example
17
- * ```html
18
- * <ng-template kjConfirmPopupContent>
19
- * <p kjConfirmPopupMessage>Delete this row? This cannot be undone.</p>
20
- * …
21
- * </ng-template>
22
- * ```
23
- *
24
- * @doc-category Core/Overlay
25
- */
26
- @Directive({
27
- selector: '[kjConfirmPopupMessage]',
28
- standalone: true,
29
- host: {
30
- 'class': 'kj-confirm-popup-message',
31
- '[attr.id]': 'ctx.messageId',
32
- },
33
- })
34
- export class KjConfirmPopupMessage {
35
- protected readonly ctx = inject<KjConfirmPopupContext>(KJ_CONFIRM_POPUP);
36
- }
@@ -1,31 +0,0 @@
1
- import { Directive, inject } from '@angular/core';
2
- import { KjPopoverTrigger } from '../popover/popover-trigger';
3
- import { KjOverlayTrigger } from '../primitives/overlay/trigger';
4
- import type { KjOverlayPanel } from '../primitives/overlay/panel';
5
- import type { KjOverlayController } from '../primitives/overlay/controller';
6
-
7
- /**
8
- * The button that toggles the confirm popup. Composes `KjPopoverTrigger` via
9
- * `hostDirectives` for the trigger contract — `aria-haspopup`,
10
- * `aria-expanded`, `aria-controls`, click toggling.
11
- *
12
- * @doc-category Core/Overlay
13
- */
14
- @Directive({
15
- selector: '[kjConfirmPopupTrigger]',
16
- standalone: true,
17
- exportAs: 'kjConfirmPopupTrigger',
18
- hostDirectives: [KjPopoverTrigger],
19
- })
20
- export class KjConfirmPopupTrigger {
21
- private readonly _overlayTrigger = inject(KjOverlayTrigger, { self: true });
22
-
23
- /** Forwarded controller for sibling `[kjFor]` panels. */
24
- get controller(): KjOverlayController {
25
- return this._overlayTrigger.controller;
26
- }
27
-
28
- attachPanel(panel: KjOverlayPanel): void {
29
- this._overlayTrigger.attachPanel(panel);
30
- }
31
- }
@@ -1,41 +0,0 @@
1
- import { InjectionToken, type Signal } from '@angular/core';
2
-
3
- /**
4
- * Where initial focus lands when the confirm popup opens.
5
- *
6
- * - `'cancel'` — the safer default per WCAG 3.3.4 *Error Prevention*.
7
- * - `'confirm'` — opt-in for non-destructive flows where the muscle-memory
8
- * should snap to "Yes".
9
- */
10
- export type KjConfirmPopupDefaultFocus = 'confirm' | 'cancel';
11
-
12
- /**
13
- * Context shared between the confirm popup directives. Lives in parallel with
14
- * the underlying `KJ_POPOVER` context — `KjConfirmPopup` reads from popover
15
- * for open/close mechanics but exposes its own context to children for the
16
- * confirm/cancel resolution contract.
17
- */
18
- export interface KjConfirmPopupContext {
19
- /** Whether the popup is currently open. Mirrors the popover's `open` signal. */
20
- readonly open: Signal<boolean>;
21
- /** Whether the confirm action should render with destructive intent. */
22
- readonly destructive: Signal<boolean>;
23
- /** Where initial focus lands on open. */
24
- readonly defaultFocus: Signal<KjConfirmPopupDefaultFocus>;
25
- /** Stable id used for `aria-describedby` wiring on the panel. */
26
- readonly messageId: string;
27
-
28
- /** Resolve the confirmation: `true` confirms, `false` cancels. */
29
- close(result: boolean): void;
30
- }
31
-
32
- /** Injection token for the confirm popup context. */
33
- export const KJ_CONFIRM_POPUP = new InjectionToken<KjConfirmPopupContext>(
34
- 'KjConfirmPopup',
35
- );
36
-
37
- let _confirmPopupMessageIdCounter = 0;
38
- /** Allocate a stable id used for `aria-describedby` wiring. */
39
- export function nextConfirmPopupMessageId(): string {
40
- return `kj-confirm-popup-message-${++_confirmPopupMessageIdCounter}`;
41
- }
@@ -1,337 +0,0 @@
1
- import { Component, signal } from '@angular/core';
2
- import { TestBed } from '@angular/core/testing';
3
- import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
4
-
5
- import { KjConfirmPopup } from './confirm-popup';
6
- import { KjConfirmPopupTrigger } from './confirm-popup-trigger';
7
- import { KjConfirmPopupContent } from './confirm-popup-content';
8
- import { KjConfirmPopupMessage } from './confirm-popup-message';
9
- import { KjConfirmPopupAction } from './confirm-popup-action';
10
- import { KjConfirmPopupCancel } from './confirm-popup-cancel';
11
-
12
- function findOverlays(): HTMLElement[] {
13
- return Array.from(document.querySelectorAll<HTMLElement>('[data-kj-overlay]'));
14
- }
15
-
16
- function findPanel(): HTMLElement | null {
17
- for (const o of findOverlays()) {
18
- if (o.getAttribute('role') === 'alertdialog') return o;
19
- if (o.getAttribute('role') === 'dialog') return o;
20
- const dialog = o.querySelector<HTMLElement>('[role="alertdialog"], [role="dialog"]');
21
- if (dialog) return dialog;
22
- }
23
- return null;
24
- }
25
-
26
- function cleanupOverlays(): void {
27
- for (const o of findOverlays()) o.remove();
28
- }
29
-
30
- function advance(fixture: ReturnType<typeof TestBed.createComponent>, ms: number, step = 1): void {
31
- let remaining = ms;
32
- while (remaining > 0) {
33
- const dt = Math.min(step, remaining);
34
- vi.advanceTimersByTime(dt);
35
- fixture.detectChanges();
36
- remaining -= dt;
37
- }
38
- }
39
-
40
- function settle(fixture: ReturnType<typeof TestBed.createComponent>): void {
41
- fixture.detectChanges();
42
- advance(fixture, 32);
43
- fixture.detectChanges();
44
- }
45
-
46
- describe('KjConfirmPopup', () => {
47
- beforeEach(() => {
48
- TestBed.resetTestingModule();
49
- TestBed.configureTestingModule({});
50
- vi.useFakeTimers({
51
- toFake: ['setTimeout', 'clearTimeout', 'requestAnimationFrame', 'cancelAnimationFrame', 'queueMicrotask', 'Date'],
52
- });
53
- });
54
-
55
- afterEach(() => {
56
- cleanupOverlays();
57
- vi.useRealTimers();
58
- });
59
-
60
- it('opens on trigger click and promotes the panel role to alertdialog with aria-modal="false"', () => {
61
- @Component({
62
- standalone: true,
63
- imports: [
64
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
65
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
66
- ],
67
- template: `
68
- <div kjConfirmPopup>
69
- <button kjConfirmPopupTrigger>Delete</button>
70
- <ng-template kjConfirmPopupContent>
71
- <p kjConfirmPopupMessage>Are you sure?</p>
72
- <button kjConfirmPopupCancel>Cancel</button>
73
- <button kjConfirmPopupAction>OK</button>
74
- </ng-template>
75
- </div>
76
- `,
77
- })
78
- class Host {}
79
-
80
- const fixture = TestBed.createComponent(Host);
81
- fixture.detectChanges();
82
- expect(findPanel()).toBeNull();
83
-
84
- const btn = fixture.nativeElement.querySelector('button')!;
85
- btn.click();
86
- settle(fixture);
87
-
88
- const panel = findPanel();
89
- expect(panel).not.toBeNull();
90
- expect(panel!.getAttribute('role')).toBe('alertdialog');
91
- expect(panel!.getAttribute('aria-modal')).toBe('false');
92
- });
93
-
94
- it('wires aria-describedby to the projected [kjConfirmPopupMessage]', () => {
95
- @Component({
96
- standalone: true,
97
- imports: [
98
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
99
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
100
- ],
101
- template: `
102
- <div kjConfirmPopup>
103
- <button kjConfirmPopupTrigger>Delete</button>
104
- <ng-template kjConfirmPopupContent>
105
- <p kjConfirmPopupMessage>Confirm action</p>
106
- <button kjConfirmPopupCancel>Cancel</button>
107
- <button kjConfirmPopupAction>OK</button>
108
- </ng-template>
109
- </div>
110
- `,
111
- })
112
- class Host {}
113
-
114
- const fixture = TestBed.createComponent(Host);
115
- fixture.detectChanges();
116
- fixture.nativeElement.querySelector('button')!.click();
117
- settle(fixture);
118
-
119
- const panel = findPanel()!;
120
- const message = panel.querySelector<HTMLElement>('[kjConfirmPopupMessage]')!;
121
- expect(message.id).toMatch(/^kj-confirm-popup-message-\d+$/);
122
- expect(panel.getAttribute('aria-describedby')).toBe(message.id);
123
- });
124
-
125
- it('emits kjConfirmed and kjResult(true) when the action button is clicked', () => {
126
- @Component({
127
- standalone: true,
128
- imports: [
129
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
130
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
131
- ],
132
- template: `
133
- <div kjConfirmPopup
134
- (kjConfirmed)="confirmed.set(true)"
135
- (kjCancelled)="cancelled.set(true)"
136
- (kjResult)="result.set($event)">
137
- <button kjConfirmPopupTrigger>Delete</button>
138
- <ng-template kjConfirmPopupContent>
139
- <p kjConfirmPopupMessage>Sure?</p>
140
- <button kjConfirmPopupCancel>Cancel</button>
141
- <button kjConfirmPopupAction>OK</button>
142
- </ng-template>
143
- </div>
144
- `,
145
- })
146
- class Host {
147
- readonly confirmed = signal(false);
148
- readonly cancelled = signal(false);
149
- readonly result = signal<boolean | null>(null);
150
- }
151
-
152
- const fixture = TestBed.createComponent(Host);
153
- fixture.detectChanges();
154
- fixture.nativeElement.querySelector('button')!.click();
155
- settle(fixture);
156
-
157
- const panel = findPanel()!;
158
- panel.querySelector<HTMLElement>('[kjConfirmPopupAction]')!.click();
159
- settle(fixture);
160
-
161
- expect(fixture.componentInstance.confirmed()).toBe(true);
162
- expect(fixture.componentInstance.cancelled()).toBe(false);
163
- expect(fixture.componentInstance.result()).toBe(true);
164
- expect(findPanel()).toBeNull();
165
- });
166
-
167
- it('emits kjCancelled and kjResult(false) when the cancel button is clicked', () => {
168
- @Component({
169
- standalone: true,
170
- imports: [
171
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
172
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
173
- ],
174
- template: `
175
- <div kjConfirmPopup
176
- (kjConfirmed)="confirmed.set(true)"
177
- (kjCancelled)="cancelled.set(true)"
178
- (kjResult)="result.set($event)">
179
- <button kjConfirmPopupTrigger>Delete</button>
180
- <ng-template kjConfirmPopupContent>
181
- <p kjConfirmPopupMessage>Sure?</p>
182
- <button kjConfirmPopupCancel>Cancel</button>
183
- <button kjConfirmPopupAction>OK</button>
184
- </ng-template>
185
- </div>
186
- `,
187
- })
188
- class Host {
189
- readonly confirmed = signal(false);
190
- readonly cancelled = signal(false);
191
- readonly result = signal<boolean | null>(null);
192
- }
193
-
194
- const fixture = TestBed.createComponent(Host);
195
- fixture.detectChanges();
196
- fixture.nativeElement.querySelector('button')!.click();
197
- settle(fixture);
198
-
199
- const panel = findPanel()!;
200
- panel.querySelector<HTMLElement>('[kjConfirmPopupCancel]')!.click();
201
- settle(fixture);
202
-
203
- expect(fixture.componentInstance.confirmed()).toBe(false);
204
- expect(fixture.componentInstance.cancelled()).toBe(true);
205
- expect(fixture.componentInstance.result()).toBe(false);
206
- expect(findPanel()).toBeNull();
207
- });
208
-
209
- it('Escape closes the popup and emits kjResult(false)', () => {
210
- @Component({
211
- standalone: true,
212
- imports: [
213
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
214
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
215
- ],
216
- template: `
217
- <div kjConfirmPopup (kjResult)="result.set($event)">
218
- <button kjConfirmPopupTrigger>Delete</button>
219
- <ng-template kjConfirmPopupContent>
220
- <p kjConfirmPopupMessage>Sure?</p>
221
- <button kjConfirmPopupCancel>Cancel</button>
222
- <button kjConfirmPopupAction>OK</button>
223
- </ng-template>
224
- </div>
225
- `,
226
- })
227
- class Host {
228
- readonly result = signal<boolean | null>(null);
229
- }
230
-
231
- const fixture = TestBed.createComponent(Host);
232
- fixture.detectChanges();
233
- fixture.nativeElement.querySelector('button')!.click();
234
- settle(fixture);
235
- expect(findPanel()).not.toBeNull();
236
-
237
- document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
238
- settle(fixture);
239
-
240
- expect(findPanel()).toBeNull();
241
- expect(fixture.componentInstance.result()).toBe(false);
242
- });
243
-
244
- it('reflects [kjDestructive] on the action via data-destructive', () => {
245
- @Component({
246
- standalone: true,
247
- imports: [
248
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
249
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
250
- ],
251
- template: `
252
- <div kjConfirmPopup [kjDestructive]="true">
253
- <button kjConfirmPopupTrigger>Delete</button>
254
- <ng-template kjConfirmPopupContent>
255
- <p kjConfirmPopupMessage>Sure?</p>
256
- <button kjConfirmPopupCancel>Cancel</button>
257
- <button kjConfirmPopupAction>OK</button>
258
- </ng-template>
259
- </div>
260
- `,
261
- })
262
- class Host {}
263
-
264
- const fixture = TestBed.createComponent(Host);
265
- fixture.detectChanges();
266
- fixture.nativeElement.querySelector('button')!.click();
267
- settle(fixture);
268
-
269
- const panel = findPanel()!;
270
- const action = panel.querySelector<HTMLElement>('[kjConfirmPopupAction]')!;
271
- expect(action.getAttribute('data-destructive')).toBe('');
272
- });
273
-
274
- it('focuses the cancel button on open by default', () => {
275
- @Component({
276
- standalone: true,
277
- imports: [
278
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
279
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
280
- ],
281
- template: `
282
- <div kjConfirmPopup>
283
- <button kjConfirmPopupTrigger>Delete</button>
284
- <ng-template kjConfirmPopupContent>
285
- <p kjConfirmPopupMessage>Sure?</p>
286
- <button kjConfirmPopupCancel data-test="cancel">Cancel</button>
287
- <button kjConfirmPopupAction data-test="action">OK</button>
288
- </ng-template>
289
- </div>
290
- `,
291
- })
292
- class Host {}
293
-
294
- const fixture = TestBed.createComponent(Host);
295
- document.body.appendChild(fixture.nativeElement);
296
- fixture.detectChanges();
297
- fixture.nativeElement.querySelector('button')!.click();
298
- settle(fixture);
299
-
300
- const focused = document.activeElement as HTMLElement | null;
301
- expect(focused).not.toBeNull();
302
- expect(focused!.getAttribute('data-test')).toBe('cancel');
303
- fixture.nativeElement.remove();
304
- });
305
-
306
- it('focuses the action button on open when kjDefaultFocus="confirm"', () => {
307
- @Component({
308
- standalone: true,
309
- imports: [
310
- KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent,
311
- KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel,
312
- ],
313
- template: `
314
- <div kjConfirmPopup [kjDefaultFocus]="'confirm'">
315
- <button kjConfirmPopupTrigger>Delete</button>
316
- <ng-template kjConfirmPopupContent>
317
- <p kjConfirmPopupMessage>Sure?</p>
318
- <button kjConfirmPopupCancel data-test="cancel">Cancel</button>
319
- <button kjConfirmPopupAction data-test="action">OK</button>
320
- </ng-template>
321
- </div>
322
- `,
323
- })
324
- class Host {}
325
-
326
- const fixture = TestBed.createComponent(Host);
327
- document.body.appendChild(fixture.nativeElement);
328
- fixture.detectChanges();
329
- fixture.nativeElement.querySelector('button')!.click();
330
- settle(fixture);
331
-
332
- const focused = document.activeElement as HTMLElement | null;
333
- expect(focused).not.toBeNull();
334
- expect(focused!.getAttribute('data-test')).toBe('action');
335
- fixture.nativeElement.remove();
336
- });
337
- });
@@ -1,109 +0,0 @@
1
- import {
2
- Directive,
3
- booleanAttribute,
4
- effect,
5
- inject,
6
- input,
7
- output,
8
- } from '@angular/core';
9
- import { KjOverlayController } from '../primitives/overlay/controller';
10
- import {
11
- KJ_CONFIRM_POPUP,
12
- type KjConfirmPopupContext,
13
- type KjConfirmPopupDefaultFocus,
14
- nextConfirmPopupMessageId,
15
- } from './confirm-popup.context';
16
-
17
- /**
18
- * Root state container for the confirm popup family.
19
- *
20
- * Layers a confirm/cancel resolution contract on top of an overlay controller
21
- * so consumer button slots can resolve the popup with `true` or `false`
22
- * semantics. Pair with `[kjConfirmPopupTrigger]` (which composes
23
- * `[kjPopoverTrigger]`) on the same element so popover wiring lives in the
24
- * same injector.
25
- *
26
- * **Note (overlay primitives migration):** This wrapper now reads the
27
- * controller's open state directly. The previous `KJ_POPOVER` context was
28
- * removed; ARIA promotion to `alertdialog` happens in
29
- * `[kjConfirmPopupContent]`.
30
- *
31
- * @doc-category Core/Overlay
32
- */
33
- @Directive({
34
- selector: '[kjConfirmPopup]',
35
- standalone: true,
36
- exportAs: 'kjConfirmPopup',
37
- providers: [
38
- { provide: KJ_CONFIRM_POPUP, useExisting: KjConfirmPopup },
39
- ],
40
- })
41
- export class KjConfirmPopup implements KjConfirmPopupContext {
42
- /** The overlay controller provided by the trigger directive on the same element. */
43
- private readonly controller = inject(KjOverlayController, { optional: true });
44
-
45
- /** When `true`, the confirm action renders with destructive intent. */
46
- readonly kjDestructive = input<boolean, unknown>(false, {
47
- transform: booleanAttribute,
48
- });
49
-
50
- /** Where to place initial focus. Default `'cancel'`. */
51
- readonly kjDefaultFocus = input<KjConfirmPopupDefaultFocus>('cancel');
52
-
53
- /** Emits when the user confirms (clicks the confirm action). */
54
- readonly kjConfirmed = output<void>();
55
-
56
- /** Emits when the user cancels (cancel button, Escape, or outside-click). */
57
- readonly kjCancelled = output<void>();
58
-
59
- /** Emits the boolean result on every close. `true` confirm, `false` cancel. */
60
- readonly kjResult = output<boolean>();
61
-
62
- // ── KjConfirmPopupContext ──────────────────────────────────────────
63
-
64
- /** Open state forwarded from the underlying controller. */
65
- readonly open = (() => {
66
- const ctrl = this.controller;
67
- return ctrl ? ctrl.isOpen : (() => false) as never;
68
- })();
69
-
70
- /** Whether the confirm action should render destructively. */
71
- readonly destructive = this.kjDestructive;
72
-
73
- /** Resolved default focus target. */
74
- readonly defaultFocus = this.kjDefaultFocus;
75
-
76
- /** Stable id used for the panel's `aria-describedby`. */
77
- readonly messageId = nextConfirmPopupMessageId();
78
-
79
- private resolved = false;
80
- private wasOpen = false;
81
-
82
- constructor() {
83
- // Bridge the controller's open signal into the resolution contract.
84
- effect(() => {
85
- const isOpen = this.controller?.isOpen() ?? false;
86
- if (isOpen && !this.wasOpen) {
87
- this.resolved = false;
88
- }
89
- if (!isOpen && this.wasOpen && !this.resolved) {
90
- this.resolved = true;
91
- this.kjCancelled.emit();
92
- this.kjResult.emit(false);
93
- }
94
- this.wasOpen = isOpen;
95
- });
96
- }
97
-
98
- /**
99
- * Close the popup with the given result. `true` confirms, `false` cancels.
100
- */
101
- close(result: boolean): void {
102
- if (!this.controller || !this.controller.isOpen()) return;
103
- this.resolved = true;
104
- if (result) this.kjConfirmed.emit();
105
- else this.kjCancelled.emit();
106
- this.kjResult.emit(result);
107
- this.controller.close('programmatic');
108
- }
109
- }
@@ -1,12 +0,0 @@
1
- export { KjConfirmPopup } from './confirm-popup';
2
- export { KjConfirmPopupTrigger } from './confirm-popup-trigger';
3
- export { KjConfirmPopupContent } from './confirm-popup-content';
4
- export { KjConfirmPopupMessage } from './confirm-popup-message';
5
- export { KjConfirmPopupAction } from './confirm-popup-action';
6
- export { KjConfirmPopupCancel } from './confirm-popup-cancel';
7
-
8
- export {
9
- KJ_CONFIRM_POPUP,
10
- type KjConfirmPopupContext,
11
- type KjConfirmPopupDefaultFocus,
12
- } from './confirm-popup.context';