@kouji-ui/core 0.1.1 → 0.1.2
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.
- package/fesm2022/kouji-ui-core.mjs +26789 -0
- package/fesm2022/kouji-ui-core.mjs.map +1 -0
- package/package.json +5 -6
- package/types/kouji-ui-core.d.ts +13545 -0
- package/.turbo/turbo-build.log +0 -30
- package/CHANGELOG.md +0 -190
- package/ng-package.json +0 -11
- package/src/a11y/.gitkeep +0 -0
- package/src/a11y/aria-describedby.spec.ts +0 -55
- package/src/a11y/aria-describedby.ts +0 -37
- package/src/a11y/aria-labelledby.spec.ts +0 -55
- package/src/a11y/aria-labelledby.ts +0 -38
- package/src/a11y/focus-trap.spec.ts +0 -86
- package/src/a11y/focus-trap.ts +0 -72
- package/src/a11y/index.ts +0 -10
- package/src/a11y/live-region.spec.ts +0 -58
- package/src/a11y/live-region.ts +0 -50
- package/src/a11y/roving-tabindex.spec.ts +0 -201
- package/src/a11y/roving-tabindex.ts +0 -153
- package/src/a11y/visually-hidden.spec.ts +0 -34
- package/src/a11y/visually-hidden.ts +0 -26
- package/src/accordion/accordion.context.ts +0 -44
- package/src/accordion/accordion.spec.ts +0 -242
- package/src/accordion/accordion.ts +0 -401
- package/src/accordion/index.ts +0 -8
- package/src/alert/alert.context.ts +0 -28
- package/src/alert/alert.spec.ts +0 -217
- package/src/alert/alert.ts +0 -417
- package/src/alert/config.ts +0 -46
- package/src/alert/index.ts +0 -19
- package/src/avatar/avatar-group.context.ts +0 -45
- package/src/avatar/avatar-group.spec.ts +0 -358
- package/src/avatar/avatar-group.ts +0 -259
- package/src/avatar/avatar.spec.ts +0 -18
- package/src/avatar/avatar.ts +0 -39
- package/src/avatar/index.ts +0 -11
- package/src/badge/badge.spec.ts +0 -28
- package/src/badge/badge.ts +0 -35
- package/src/badge/index.ts +0 -1
- package/src/breadcrumb/breadcrumb-current.ts +0 -38
- package/src/breadcrumb/breadcrumb-ellipsis.ts +0 -71
- package/src/breadcrumb/breadcrumb-item.ts +0 -41
- package/src/breadcrumb/breadcrumb-link.ts +0 -44
- package/src/breadcrumb/breadcrumb-list.ts +0 -42
- package/src/breadcrumb/breadcrumb-separator.ts +0 -45
- package/src/breadcrumb/breadcrumb.context.ts +0 -45
- package/src/breadcrumb/breadcrumb.spec.ts +0 -354
- package/src/breadcrumb/breadcrumb.ts +0 -239
- package/src/breadcrumb/config.ts +0 -84
- package/src/breadcrumb/index.ts +0 -18
- package/src/button/_examples/button.example.ts +0 -71
- package/src/button/_examples/button.finance.example.ts +0 -83
- package/src/button/_examples/button.retro.example.ts +0 -91
- package/src/button/_examples/button.sizes.example.ts +0 -60
- package/src/button/_examples/index.ts +0 -6
- package/src/button/button.spec.ts +0 -163
- package/src/button/button.ts +0 -142
- package/src/button/config.spec.ts +0 -33
- package/src/button/config.ts +0 -45
- package/src/button/index.ts +0 -2
- package/src/button-group/button-group.context.ts +0 -28
- package/src/button-group/button-group.spec.ts +0 -99
- package/src/button-group/button-group.ts +0 -99
- package/src/button-group/index.ts +0 -2
- package/src/calendar/calendar-day.ts +0 -102
- package/src/calendar/calendar-grid.ts +0 -90
- package/src/calendar/calendar-header.ts +0 -65
- package/src/calendar/calendar.context.ts +0 -53
- package/src/calendar/calendar.spec.ts +0 -225
- package/src/calendar/calendar.ts +0 -233
- package/src/calendar/date-utils.ts +0 -225
- package/src/calendar/index.ts +0 -28
- package/src/carousel/carousel.context.ts +0 -81
- package/src/carousel/carousel.spec.ts +0 -337
- package/src/carousel/carousel.ts +0 -919
- package/src/carousel/index.ts +0 -22
- package/src/cascade-select/cascade-select-option.ts +0 -205
- package/src/cascade-select/cascade-select-panel.ts +0 -106
- package/src/cascade-select/cascade-select-root.ts +0 -265
- package/src/cascade-select/cascade-select-sub-panel.ts +0 -168
- package/src/cascade-select/cascade-select-trigger.ts +0 -44
- package/src/cascade-select/cascade-select.context.ts +0 -71
- package/src/cascade-select/cascade-select.spec.ts +0 -241
- package/src/cascade-select/cascade-select.ts +0 -5
- package/src/cascade-select/index.ts +0 -11
- package/src/chart/chart.spec.ts +0 -27
- package/src/chart/chart.ts +0 -52
- package/src/chart/index.ts +0 -1
- package/src/chat/chat-avatar.ts +0 -31
- package/src/chat/chat-bubble.ts +0 -49
- package/src/chat/chat-footer.ts +0 -67
- package/src/chat/chat-header.ts +0 -41
- package/src/chat/chat-log.ts +0 -43
- package/src/chat/chat.context.ts +0 -64
- package/src/chat/chat.spec.ts +0 -341
- package/src/chat/chat.ts +0 -191
- package/src/chat/config.ts +0 -53
- package/src/chat/index.ts +0 -21
- package/src/checkbox/checkbox.spec.ts +0 -35
- package/src/checkbox/checkbox.ts +0 -89
- package/src/checkbox/index.ts +0 -1
- package/src/color-picker/color-picker.context.ts +0 -74
- package/src/color-picker/color-picker.spec.ts +0 -241
- package/src/color-picker/color-picker.ts +0 -698
- package/src/color-picker/color-picker.utils.ts +0 -140
- package/src/color-picker/index.ts +0 -28
- package/src/combobox/combobox-input.ts +0 -143
- package/src/combobox/combobox-listbox.ts +0 -49
- package/src/combobox/combobox-option.ts +0 -43
- package/src/combobox/combobox-root.ts +0 -281
- package/src/combobox/combobox.spec.ts +0 -75
- package/src/combobox/combobox.ts +0 -4
- package/src/combobox/index.ts +0 -4
- package/src/command-palette/command-empty.ts +0 -36
- package/src/command-palette/command-group.ts +0 -21
- package/src/command-palette/command-input.ts +0 -70
- package/src/command-palette/command-item.ts +0 -60
- package/src/command-palette/command-list.ts +0 -25
- package/src/command-palette/command-palette-dialog.ts +0 -74
- package/src/command-palette/command-palette-trigger.ts +0 -64
- package/src/command-palette/command-palette.filters.ts +0 -53
- package/src/command-palette/command-palette.spec.ts +0 -349
- package/src/command-palette/command-palette.ts +0 -204
- package/src/command-palette/command-separator.ts +0 -18
- package/src/command-palette/index.ts +0 -15
- package/src/confirm-popup/confirm-popup-action.ts +0 -39
- package/src/confirm-popup/confirm-popup-cancel.ts +0 -38
- package/src/confirm-popup/confirm-popup-content.ts +0 -113
- package/src/confirm-popup/confirm-popup-message.ts +0 -36
- package/src/confirm-popup/confirm-popup-trigger.ts +0 -31
- package/src/confirm-popup/confirm-popup.context.ts +0 -41
- package/src/confirm-popup/confirm-popup.spec.ts +0 -337
- package/src/confirm-popup/confirm-popup.ts +0 -109
- package/src/confirm-popup/index.ts +0 -12
- package/src/date-picker/date-picker-calendar.ts +0 -65
- package/src/date-picker/date-picker-trigger.ts +0 -215
- package/src/date-picker/date-picker.context.ts +0 -50
- package/src/date-picker/date-picker.spec.ts +0 -117
- package/src/date-picker/date-picker.ts +0 -127
- package/src/date-picker/index.ts +0 -7
- package/src/dialog/_examples/dialog.confirm.example.ts +0 -145
- package/src/dialog/_examples/dialog.example.ts +0 -106
- package/src/dialog/_examples/dialog.finance.example.ts +0 -121
- package/src/dialog/_examples/dialog.retro.example.ts +0 -126
- package/src/dialog/_examples/index.ts +0 -6
- package/src/dialog/dialog.ref.ts +0 -42
- package/src/dialog/dialog.service.ts +0 -66
- package/src/dialog/dialog.spec.ts +0 -37
- package/src/dialog/dialog.ts +0 -26
- package/src/dialog/index.ts +0 -3
- package/src/divider/divider.spec.ts +0 -223
- package/src/divider/divider.ts +0 -137
- package/src/divider/index.ts +0 -5
- package/src/drawer/drawer.ref.ts +0 -63
- package/src/drawer/drawer.service.ts +0 -106
- package/src/drawer/drawer.spec.ts +0 -117
- package/src/drawer/drawer.ts +0 -122
- package/src/drawer/index.ts +0 -10
- package/src/dropdown-menu/dropdown-menu-content.ts +0 -258
- package/src/dropdown-menu/dropdown-menu-group.ts +0 -31
- package/src/dropdown-menu/dropdown-menu-item.ts +0 -51
- package/src/dropdown-menu/dropdown-menu-label.ts +0 -41
- package/src/dropdown-menu/dropdown-menu-separator.ts +0 -27
- package/src/dropdown-menu/dropdown-menu-trigger.ts +0 -140
- package/src/dropdown-menu/dropdown-menu.spec.ts +0 -265
- package/src/dropdown-menu/dropdown-menu.ts +0 -60
- package/src/dropdown-menu/index.ts +0 -15
- package/src/example-components.ts +0 -42
- package/src/field/field-error.ts +0 -49
- package/src/field/field-group.ts +0 -39
- package/src/field/field-help.ts +0 -47
- package/src/field/field-label.ts +0 -30
- package/src/field/field.context.ts +0 -28
- package/src/field/field.spec.ts +0 -179
- package/src/field/field.ts +0 -121
- package/src/field/index.ts +0 -6
- package/src/file-upload/file-upload.context.ts +0 -89
- package/src/file-upload/file-upload.spec.ts +0 -290
- package/src/file-upload/file-upload.ts +0 -639
- package/src/file-upload/file-upload.types.ts +0 -59
- package/src/file-upload/index.ts +0 -23
- package/src/form/form-error-summary.ts +0 -87
- package/src/form/form-field.context.ts +0 -3
- package/src/form/form-field.spec.ts +0 -25
- package/src/form/form-field.ts +0 -52
- package/src/form/form.context.ts +0 -53
- package/src/form/form.spec.ts +0 -162
- package/src/form/form.ts +0 -326
- package/src/form/index.ts +0 -11
- package/src/icon/E2E.md +0 -14
- package/src/icon/icon.directive.spec.ts +0 -198
- package/src/icon/icon.directive.ts +0 -113
- package/src/icon/icon.mode.spec.ts +0 -29
- package/src/icon/icon.mode.ts +0 -23
- package/src/icon/icon.providers.spec.ts +0 -63
- package/src/icon/icon.providers.ts +0 -47
- package/src/icon/icon.resolver.spec.ts +0 -96
- package/src/icon/icon.resolver.ts +0 -49
- package/src/icon/icon.tokens.ts +0 -88
- package/src/icon/icon.types.ts +0 -48
- package/src/icon/index.ts +0 -21
- package/src/input/index.ts +0 -1
- package/src/input/input.spec.ts +0 -43
- package/src/input/input.ts +0 -89
- package/src/input-group/index.ts +0 -3
- package/src/input-group/input-group-addon.ts +0 -92
- package/src/input-group/input-group.context.ts +0 -27
- package/src/input-group/input-group.spec.ts +0 -186
- package/src/input-group/input-group.ts +0 -136
- package/src/input-mask/index.ts +0 -11
- package/src/input-mask/input-mask.compile.ts +0 -69
- package/src/input-mask/input-mask.engine.ts +0 -376
- package/src/input-mask/input-mask.presets.ts +0 -24
- package/src/input-mask/input-mask.spec.ts +0 -304
- package/src/input-mask/input-mask.tokens.ts +0 -49
- package/src/input-mask/input-mask.ts +0 -280
- package/src/input-otp/index.ts +0 -2
- package/src/input-otp/input-otp.context.ts +0 -41
- package/src/input-otp/input-otp.spec.ts +0 -308
- package/src/input-otp/input-otp.ts +0 -470
- package/src/kbd/index.ts +0 -1
- package/src/kbd/kbd.spec.ts +0 -127
- package/src/kbd/kbd.ts +0 -132
- package/src/link/config.ts +0 -44
- package/src/link/index.ts +0 -2
- package/src/link/link.spec.ts +0 -246
- package/src/link/link.ts +0 -226
- package/src/list/index.ts +0 -11
- package/src/list/list.spec.ts +0 -237
- package/src/list/list.ts +0 -277
- package/src/menubar/index.ts +0 -7
- package/src/menubar/menubar-item.ts +0 -204
- package/src/menubar/menubar.context.ts +0 -43
- package/src/menubar/menubar.spec.ts +0 -433
- package/src/menubar/menubar.ts +0 -309
- package/src/number-input/index.ts +0 -4
- package/src/number-input/number-input-group.ts +0 -64
- package/src/number-input/number-input.context.ts +0 -31
- package/src/number-input/number-input.format.ts +0 -148
- package/src/number-input/number-input.spec.ts +0 -170
- package/src/number-input/number-input.ts +0 -457
- package/src/number-input/number-stepper.ts +0 -193
- package/src/overlay-badge/index.ts +0 -7
- package/src/overlay-badge/overlay-badge-content.ts +0 -73
- package/src/overlay-badge/overlay-badge.context.ts +0 -37
- package/src/overlay-badge/overlay-badge.spec.ts +0 -220
- package/src/overlay-badge/overlay-badge.ts +0 -128
- package/src/pagination/config.ts +0 -82
- package/src/pagination/index.ts +0 -19
- package/src/pagination/page-tokens.ts +0 -78
- package/src/pagination/pagination-ellipsis.ts +0 -69
- package/src/pagination/pagination-first.ts +0 -84
- package/src/pagination/pagination-info.ts +0 -70
- package/src/pagination/pagination-item.ts +0 -81
- package/src/pagination/pagination-last.ts +0 -85
- package/src/pagination/pagination-next.ts +0 -86
- package/src/pagination/pagination-previous.ts +0 -90
- package/src/pagination/pagination.context.ts +0 -52
- package/src/pagination/pagination.spec.ts +0 -388
- package/src/pagination/pagination.ts +0 -288
- package/src/password-input/index.ts +0 -15
- package/src/password-input/password-input.context.ts +0 -65
- package/src/password-input/password-input.scorer.ts +0 -34
- package/src/password-input/password-input.spec.ts +0 -274
- package/src/password-input/password-input.ts +0 -488
- package/src/popover/_examples/index.ts +0 -5
- package/src/popover/_examples/popover.example.ts +0 -92
- package/src/popover/_examples/popover.finance.example.ts +0 -106
- package/src/popover/_examples/popover.retro.example.ts +0 -103
- package/src/popover/index.ts +0 -5
- package/src/popover/popover-arrow.ts +0 -30
- package/src/popover/popover-close.ts +0 -36
- package/src/popover/popover-content.ts +0 -41
- package/src/popover/popover-title.ts +0 -39
- package/src/popover/popover-trigger.ts +0 -40
- package/src/popover/popover.spec.ts +0 -59
- package/src/popover/popover.ts +0 -5
- package/src/presets/bind-presets.spec.ts +0 -50
- package/src/presets/bind-presets.ts +0 -43
- package/src/presets/index.ts +0 -3
- package/src/presets/size.spec.ts +0 -67
- package/src/presets/size.ts +0 -59
- package/src/presets/variant.spec.ts +0 -72
- package/src/presets/variant.ts +0 -62
- package/src/primitives/.gitkeep +0 -0
- package/src/primitives/directionality/directionality.spec.ts +0 -112
- package/src/primitives/directionality/directionality.ts +0 -89
- package/src/primitives/directionality/index.ts +0 -1
- package/src/primitives/forms/form-control.spec.ts +0 -67
- package/src/primitives/forms/form-control.ts +0 -94
- package/src/primitives/forms/index.ts +0 -1
- package/src/primitives/index.ts +0 -6
- package/src/primitives/interaction/disabled.spec.ts +0 -47
- package/src/primitives/interaction/disabled.ts +0 -31
- package/src/primitives/interaction/focus-ring.spec.ts +0 -62
- package/src/primitives/interaction/focus-ring.ts +0 -59
- package/src/primitives/interaction/index.ts +0 -2
- package/src/primitives/list/filterable-list.spec.ts +0 -114
- package/src/primitives/list/filterable-list.ts +0 -126
- package/src/primitives/list/group.spec.ts +0 -99
- package/src/primitives/list/group.ts +0 -139
- package/src/primitives/list/index.ts +0 -8
- package/src/primitives/list/inject-helpers.ts +0 -8
- package/src/primitives/list/item.spec.ts +0 -173
- package/src/primitives/list/item.ts +0 -222
- package/src/primitives/list/navigator.spec.ts +0 -286
- package/src/primitives/list/navigator.ts +0 -238
- package/src/primitives/list/selection.spec.ts +0 -214
- package/src/primitives/list/selection.ts +0 -339
- package/src/primitives/list/tokens.ts +0 -106
- package/src/primitives/list/type-ahead.spec.ts +0 -58
- package/src/primitives/list/type-ahead.ts +0 -46
- package/src/primitives/overlay/backdrop.spec.ts +0 -54
- package/src/primitives/overlay/backdrop.ts +0 -31
- package/src/primitives/overlay/builder.spec.ts +0 -38
- package/src/primitives/overlay/builder.ts +0 -151
- package/src/primitives/overlay/container.ts +0 -42
- package/src/primitives/overlay/context.ts +0 -14
- package/src/primitives/overlay/controller.spec.ts +0 -86
- package/src/primitives/overlay/controller.ts +0 -190
- package/src/primitives/overlay/id.spec.ts +0 -24
- package/src/primitives/overlay/id.ts +0 -17
- package/src/primitives/overlay/index.ts +0 -18
- package/src/primitives/overlay/overlay.css +0 -42
- package/src/primitives/overlay/panel.spec.ts +0 -52
- package/src/primitives/overlay/panel.ts +0 -102
- package/src/primitives/overlay/stack.spec.ts +0 -55
- package/src/primitives/overlay/stack.ts +0 -113
- package/src/primitives/overlay/strategies/backdrop/blurred.spec.ts +0 -11
- package/src/primitives/overlay/strategies/backdrop/blurred.ts +0 -5
- package/src/primitives/overlay/strategies/backdrop/none.spec.ts +0 -10
- package/src/primitives/overlay/strategies/backdrop/none.ts +0 -9
- package/src/primitives/overlay/strategies/backdrop/solid.spec.ts +0 -18
- package/src/primitives/overlay/strategies/backdrop/solid.ts +0 -23
- package/src/primitives/overlay/strategies/focus-trap/inert-based.spec.ts +0 -28
- package/src/primitives/overlay/strategies/focus-trap/inert-based.ts +0 -38
- package/src/primitives/overlay/strategies/focus-trap/no-trap.spec.ts +0 -9
- package/src/primitives/overlay/strategies/focus-trap/no-trap.ts +0 -8
- package/src/primitives/overlay/strategies/focus-trap/tab-cycle.spec.ts +0 -49
- package/src/primitives/overlay/strategies/focus-trap/tab-cycle.ts +0 -85
- package/src/primitives/overlay/strategies/index.ts +0 -34
- package/src/primitives/overlay/strategies/live-announcer/_announce.ts +0 -35
- package/src/primitives/overlay/strategies/live-announcer/assertive.spec.ts +0 -21
- package/src/primitives/overlay/strategies/live-announcer/assertive.ts +0 -11
- package/src/primitives/overlay/strategies/live-announcer/polite.spec.ts +0 -21
- package/src/primitives/overlay/strategies/live-announcer/polite.ts +0 -11
- package/src/primitives/overlay/strategies/live-announcer/silent.spec.ts +0 -12
- package/src/primitives/overlay/strategies/live-announcer/silent.ts +0 -5
- package/src/primitives/overlay/strategies/mount/body-portal.spec.ts +0 -40
- package/src/primitives/overlay/strategies/mount/body-portal.ts +0 -91
- package/src/primitives/overlay/strategies/mount/in-container.spec.ts +0 -43
- package/src/primitives/overlay/strategies/mount/in-container.ts +0 -39
- package/src/primitives/overlay/strategies/mount/in-place.spec.ts +0 -40
- package/src/primitives/overlay/strategies/mount/in-place.ts +0 -20
- package/src/primitives/overlay/strategies/position/anchored-to.spec.ts +0 -56
- package/src/primitives/overlay/strategies/position/anchored-to.ts +0 -248
- package/src/primitives/overlay/strategies/position/corner.spec.ts +0 -36
- package/src/primitives/overlay/strategies/position/corner.ts +0 -33
- package/src/primitives/overlay/strategies/position/edge-sheet.spec.ts +0 -32
- package/src/primitives/overlay/strategies/position/edge-sheet.ts +0 -36
- package/src/primitives/overlay/strategies/position/in-place-sibling.spec.ts +0 -25
- package/src/primitives/overlay/strategies/position/in-place-sibling.ts +0 -13
- package/src/primitives/overlay/strategies/position/point-at.spec.ts +0 -40
- package/src/primitives/overlay/strategies/position/point-at.ts +0 -34
- package/src/primitives/overlay/strategies/position/viewport-centered.spec.ts +0 -31
- package/src/primitives/overlay/strategies/position/viewport-centered.ts +0 -31
- package/src/primitives/overlay/strategies/scroll-lock/css-clip.spec.ts +0 -15
- package/src/primitives/overlay/strategies/scroll-lock/css-clip.ts +0 -39
- package/src/primitives/overlay/strategies/scroll-lock/html-overflow.spec.ts +0 -21
- package/src/primitives/overlay/strategies/scroll-lock/html-overflow.ts +0 -44
- package/src/primitives/overlay/strategies/scroll-lock/none.spec.ts +0 -9
- package/src/primitives/overlay/strategies/scroll-lock/none.ts +0 -5
- package/src/primitives/overlay/strategies/trigger-event/on-click.spec.ts +0 -32
- package/src/primitives/overlay/strategies/trigger-event/on-click.ts +0 -28
- package/src/primitives/overlay/strategies/trigger-event/on-context-menu.spec.ts +0 -45
- package/src/primitives/overlay/strategies/trigger-event/on-context-menu.ts +0 -70
- package/src/primitives/overlay/strategies/trigger-event/on-focus-or-input.spec.ts +0 -35
- package/src/primitives/overlay/strategies/trigger-event/on-focus-or-input.ts +0 -34
- package/src/primitives/overlay/strategies/trigger-event/on-focus.spec.ts +0 -64
- package/src/primitives/overlay/strategies/trigger-event/on-focus.ts +0 -37
- package/src/primitives/overlay/strategies/trigger-event/on-hotkey.spec.ts +0 -37
- package/src/primitives/overlay/strategies/trigger-event/on-hotkey.ts +0 -59
- package/src/primitives/overlay/strategies/trigger-event/on-hover.spec.ts +0 -34
- package/src/primitives/overlay/strategies/trigger-event/on-hover.ts +0 -86
- package/src/primitives/overlay/strategies/trigger-event/programmatic.spec.ts +0 -16
- package/src/primitives/overlay/strategies/trigger-event/programmatic.ts +0 -12
- package/src/primitives/overlay/tokens.ts +0 -54
- package/src/primitives/overlay/trigger.spec.ts +0 -103
- package/src/primitives/overlay/trigger.ts +0 -75
- package/src/primitives/overlay/types.ts +0 -24
- package/src/primitives/overlay/wrapper.ts +0 -50
- package/src/primitives/signals/deep-signal.ts +0 -109
- package/src/primitives/signals/index.ts +0 -1
- package/src/progress-bar/config.ts +0 -48
- package/src/progress-bar/index.ts +0 -12
- package/src/progress-bar/progress-bar-fill.ts +0 -37
- package/src/progress-bar/progress-bar.context.ts +0 -34
- package/src/progress-bar/progress-bar.spec.ts +0 -423
- package/src/progress-bar/progress-bar.ts +0 -217
- package/src/public-api.ts +0 -84
- package/src/radio/index.ts +0 -2
- package/src/radio/radio.context.ts +0 -3
- package/src/radio/radio.spec.ts +0 -36
- package/src/radio/radio.ts +0 -66
- package/src/select/index.ts +0 -4
- package/src/select/select-content.ts +0 -69
- package/src/select/select-option.ts +0 -35
- package/src/select/select-root.ts +0 -129
- package/src/select/select-trigger.ts +0 -93
- package/src/select/select.spec.ts +0 -138
- package/src/select/select.ts +0 -4
- package/src/skeleton/index.ts +0 -5
- package/src/skeleton/skeleton.spec.ts +0 -115
- package/src/skeleton/skeleton.ts +0 -56
- package/src/slider/index.ts +0 -10
- package/src/slider/slider-range.ts +0 -49
- package/src/slider/slider-thumb.ts +0 -335
- package/src/slider/slider-track.ts +0 -70
- package/src/slider/slider.context.ts +0 -79
- package/src/slider/slider.geometry.ts +0 -73
- package/src/slider/slider.spec.ts +0 -216
- package/src/slider/slider.ts +0 -443
- package/src/speed-dial/index.ts +0 -10
- package/src/speed-dial/speed-dial-action.ts +0 -40
- package/src/speed-dial/speed-dial-actions.ts +0 -31
- package/src/speed-dial/speed-dial-trigger.ts +0 -55
- package/src/speed-dial/speed-dial.context.ts +0 -36
- package/src/speed-dial/speed-dial.spec.ts +0 -143
- package/src/speed-dial/speed-dial.ts +0 -127
- package/src/spinner/config.ts +0 -48
- package/src/spinner/index.ts +0 -8
- package/src/spinner/spinner.spec.ts +0 -262
- package/src/spinner/spinner.ts +0 -129
- package/src/stepper/index.ts +0 -15
- package/src/stepper/stepper.context.ts +0 -63
- package/src/stepper/stepper.spec.ts +0 -403
- package/src/stepper/stepper.ts +0 -544
- package/src/styles/docs-themes.css +0 -82
- package/src/styles.css +0 -17
- package/src/table/column-helpers.spec.ts +0 -74
- package/src/table/column-helpers.ts +0 -68
- package/src/table/filter-fns.ts +0 -230
- package/src/table/filter-models.spec.ts +0 -240
- package/src/table/filter-models.ts +0 -124
- package/src/table/filter-params.ts +0 -90
- package/src/table/grid-api-impl.ts +0 -321
- package/src/table/grid-api.spec.ts +0 -178
- package/src/table/grid-api.ts +0 -285
- package/src/table/index.ts +0 -73
- package/src/table/table-cell.spec.ts +0 -43
- package/src/table/table-cell.ts +0 -38
- package/src/table/table-filter-outlet.ts +0 -120
- package/src/table/table-header.spec.ts +0 -54
- package/src/table/table-header.ts +0 -63
- package/src/table/table-keyboard.spec.ts +0 -68
- package/src/table/table-keyboard.ts +0 -107
- package/src/table/table-resource.spec.ts +0 -37
- package/src/table/table-resource.ts +0 -36
- package/src/table/table-row.spec.ts +0 -54
- package/src/table/table-row.ts +0 -31
- package/src/table/table-storage.spec.ts +0 -67
- package/src/table/table-storage.ts +0 -76
- package/src/table/table.spec.ts +0 -172
- package/src/table/table.ts +0 -281
- package/src/table/table.types.ts +0 -83
- package/src/tabs/index.ts +0 -7
- package/src/tabs/tabs.context.ts +0 -32
- package/src/tabs/tabs.spec.ts +0 -352
- package/src/tabs/tabs.ts +0 -364
- package/src/tag/config.ts +0 -53
- package/src/tag/index.ts +0 -7
- package/src/tag/tag-list.ts +0 -76
- package/src/tag/tag-remove.ts +0 -61
- package/src/tag/tag.context.ts +0 -36
- package/src/tag/tag.spec.ts +0 -240
- package/src/tag/tag.ts +0 -203
- package/src/test-setup.ts +0 -5
- package/src/textarea/config.ts +0 -42
- package/src/textarea/index.ts +0 -8
- package/src/textarea/textarea.spec.ts +0 -176
- package/src/textarea/textarea.ts +0 -235
- package/src/time-picker/index.ts +0 -15
- package/src/time-picker/time-picker-meridiem.ts +0 -123
- package/src/time-picker/time-picker-segment.ts +0 -318
- package/src/time-picker/time-picker.context.ts +0 -38
- package/src/time-picker/time-picker.format.ts +0 -181
- package/src/time-picker/time-picker.spec.ts +0 -189
- package/src/time-picker/time-picker.ts +0 -274
- package/src/toast/_examples/index.ts +0 -5
- package/src/toast/_examples/toast.example.ts +0 -282
- package/src/toast/_examples/toast.finance.example.ts +0 -180
- package/src/toast/_examples/toast.retro.example.ts +0 -161
- package/src/toast/index.ts +0 -28
- package/src/toast/toast.ref.ts +0 -26
- package/src/toast/toast.service.ts +0 -339
- package/src/toast/toast.spec.ts +0 -247
- package/src/toast/toast.strategy.ts +0 -112
- package/src/toast/toast.ts +0 -463
- package/src/toast/toast.types.ts +0 -5
- package/src/toggle/index.ts +0 -1
- package/src/toggle/toggle.spec.ts +0 -24
- package/src/toggle/toggle.ts +0 -48
- package/src/tooltip/_examples/index.ts +0 -6
- package/src/tooltip/_examples/tooltip.example.ts +0 -82
- package/src/tooltip/_examples/tooltip.finance.example.ts +0 -97
- package/src/tooltip/_examples/tooltip.placements.example.ts +0 -83
- package/src/tooltip/_examples/tooltip.retro.example.ts +0 -107
- package/src/tooltip/index.ts +0 -4
- package/src/tooltip/tooltip-arrow.ts +0 -31
- package/src/tooltip/tooltip-content.ts +0 -38
- package/src/tooltip/tooltip-group.ts +0 -32
- package/src/tooltip/tooltip-trigger.ts +0 -47
- package/src/tooltip/tooltip.spec.ts +0 -40
- package/src/tooltip/tooltip.ts +0 -5
- package/src/tree-select/index.ts +0 -12
- package/src/tree-select/tree-select-content.ts +0 -199
- package/src/tree-select/tree-select-node.ts +0 -132
- package/src/tree-select/tree-select-root.ts +0 -272
- package/src/tree-select/tree-select-trigger.ts +0 -90
- package/src/tree-select/tree-select.context.ts +0 -63
- package/src/tree-select/tree-select.spec.ts +0 -433
- package/src/tree-select/tree-select.ts +0 -2
- package/src/typography/blockquote.ts +0 -57
- package/src/typography/code.ts +0 -53
- package/src/typography/index.ts +0 -22
- package/src/typography/lead.ts +0 -49
- package/src/typography/muted.ts +0 -29
- package/src/typography/truncate.ts +0 -99
- package/src/typography/typography.spec.ts +0 -203
- package/tsconfig.lib.json +0 -21
- package/tsconfig.lib.prod.json +0 -17
- package/tsconfig.spec.json +0 -18
- package/vite.config.ts +0 -27
- /package/{src/icon → icon}/icon.css +0 -0
- /package/{src/typography → typography}/prose.css +0 -0
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { Directive, ElementRef, computed, effect, inject, input, signal } from '@angular/core';
|
|
2
|
-
import { KjId } from './id';
|
|
3
|
-
import { KjOverlayController } from './controller';
|
|
4
|
-
import {
|
|
5
|
-
KJ_OVERLAY_MOUNT_STRATEGY,
|
|
6
|
-
KJ_OVERLAY_POSITION_STRATEGY,
|
|
7
|
-
KJ_OVERLAY_BACKDROP_STRATEGY,
|
|
8
|
-
KJ_OVERLAY_FOCUS_TRAP_STRATEGY,
|
|
9
|
-
KJ_OVERLAY_SCROLL_LOCK_STRATEGY,
|
|
10
|
-
KJ_OVERLAY_LIVE_ANNOUNCER_STRATEGY,
|
|
11
|
-
KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
|
|
12
|
-
KJ_OVERLAY_PANEL_ROLE,
|
|
13
|
-
} from './tokens';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Trigger-like contract accepted by `KjOverlayPanel.kjFor`. Any directive
|
|
17
|
-
* that exposes an `attachPanel(panel)` method and a `controller` reference
|
|
18
|
-
* satisfies this — including `KjOverlayTrigger` itself and consumer trigger
|
|
19
|
-
* directives that compose it via `hostDirectives`.
|
|
20
|
-
*/
|
|
21
|
-
export interface KjOverlayTriggerLike {
|
|
22
|
-
readonly controller: KjOverlayController;
|
|
23
|
-
attachPanel(panel: KjOverlayPanel): void;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Marks an element as the overlay's panel — wires it to the controller,
|
|
28
|
-
* resolves the panel role/aria-modal, and binds DOM state attributes
|
|
29
|
-
* (`data-state`, `hidden`, `id`) for transition styling.
|
|
30
|
-
*
|
|
31
|
-
* @doc-category Core/Overlay
|
|
32
|
-
* @doc
|
|
33
|
-
* @doc-name overlay-panel
|
|
34
|
-
* @doc-is-main
|
|
35
|
-
* @doc-description Marks an element as the overlay panel and binds its state, role, and accessibility attributes.
|
|
36
|
-
*/
|
|
37
|
-
@Directive({
|
|
38
|
-
selector: '[kjOverlayPanel]',
|
|
39
|
-
exportAs: 'kjOverlayPanel',
|
|
40
|
-
host: {
|
|
41
|
-
'[id]': 'panelId',
|
|
42
|
-
'[attr.role]': 'role()',
|
|
43
|
-
'[attr.aria-modal]': 'isModal() ? "true" : null',
|
|
44
|
-
'[attr.data-state]': 'state()',
|
|
45
|
-
'[attr.hidden]': 'state() === "closed" ? "" : null',
|
|
46
|
-
},
|
|
47
|
-
})
|
|
48
|
-
export class KjOverlayPanel {
|
|
49
|
-
readonly host = inject(ElementRef<HTMLElement>);
|
|
50
|
-
private readonly idSvc = inject(KjId);
|
|
51
|
-
/**
|
|
52
|
-
* Per-overlay controller injected from the element-injector chain.
|
|
53
|
-
* Service-launched overlays expose this through the wrapper component;
|
|
54
|
-
* declarative consumers without `[kjFor]` provide it on the trigger
|
|
55
|
-
* directive (host-level `providers: [KjOverlayController]`).
|
|
56
|
-
*/
|
|
57
|
-
private readonly hostController = inject(KjOverlayController, { optional: true });
|
|
58
|
-
/**
|
|
59
|
-
* Resolved controller — `kjFor()?.controller` wins over the host one.
|
|
60
|
-
* Signal-backed so the `state`/`isModal` computeds re-evaluate when the
|
|
61
|
-
* effect below swaps in the kjFor controller.
|
|
62
|
-
*/
|
|
63
|
-
private readonly _controller = signal<KjOverlayController | null>(this.hostController);
|
|
64
|
-
get controller(): KjOverlayController | null { return this._controller(); }
|
|
65
|
-
readonly panelId = this.idSvc.mint('panel');
|
|
66
|
-
|
|
67
|
-
private readonly mount = inject(KJ_OVERLAY_MOUNT_STRATEGY);
|
|
68
|
-
private readonly position = inject(KJ_OVERLAY_POSITION_STRATEGY);
|
|
69
|
-
private readonly backdrop = inject(KJ_OVERLAY_BACKDROP_STRATEGY, { optional: true });
|
|
70
|
-
private readonly focusTrap = inject(KJ_OVERLAY_FOCUS_TRAP_STRATEGY, { optional: true });
|
|
71
|
-
private readonly scrollLock = inject(KJ_OVERLAY_SCROLL_LOCK_STRATEGY, { optional: true });
|
|
72
|
-
private readonly liveAnnouncer = inject(KJ_OVERLAY_LIVE_ANNOUNCER_STRATEGY, { optional: true });
|
|
73
|
-
private readonly trigger = inject(KJ_OVERLAY_TRIGGER_EVENT_STRATEGY, { optional: true });
|
|
74
|
-
private readonly role_ = inject(KJ_OVERLAY_PANEL_ROLE, { optional: true }) ?? 'dialog';
|
|
75
|
-
|
|
76
|
-
readonly kjFor = input<KjOverlayTriggerLike | null>(null);
|
|
77
|
-
readonly role = computed(() => this.role_);
|
|
78
|
-
readonly isModal = computed(() => !!this.backdrop?.inertSiblings);
|
|
79
|
-
readonly state = computed(() => this.controller?.state() ?? 'closed');
|
|
80
|
-
|
|
81
|
-
constructor() {
|
|
82
|
-
effect(() => {
|
|
83
|
-
// Single resolution rule: trigger-driven (`kjFor`) wins, otherwise
|
|
84
|
-
// use whatever controller we found at the host element-injector.
|
|
85
|
-
const t = this.kjFor();
|
|
86
|
-
const c = t?.controller ?? this.hostController;
|
|
87
|
-
if (!c) return;
|
|
88
|
-
this._controller.set(c);
|
|
89
|
-
c.bindPanel(this.host.nativeElement);
|
|
90
|
-
c.attachStrategies({
|
|
91
|
-
mount: this.mount,
|
|
92
|
-
position: this.position,
|
|
93
|
-
backdrop: this.backdrop ?? null,
|
|
94
|
-
focusTrap: this.focusTrap ?? null,
|
|
95
|
-
scrollLock: this.scrollLock ?? null,
|
|
96
|
-
liveAnnouncer: this.liveAnnouncer ?? null,
|
|
97
|
-
trigger: this.trigger ?? null,
|
|
98
|
-
});
|
|
99
|
-
t?.attachPanel(this);
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { TestBed } from '@angular/core/testing';
|
|
2
|
-
import { describe, it, expect, vi } from 'vitest';
|
|
3
|
-
import { KjOverlayStack } from './stack';
|
|
4
|
-
|
|
5
|
-
describe('KjOverlayStack', () => {
|
|
6
|
-
it('register returns a handle with isTopmost=true for newly registered', () => {
|
|
7
|
-
const stack = TestBed.inject(KjOverlayStack);
|
|
8
|
-
const onClose = vi.fn();
|
|
9
|
-
const handle = stack.register('a', { onClose });
|
|
10
|
-
expect(handle.isTopmost()).toBe(true);
|
|
11
|
-
handle.unregister();
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
it('only the topmost receives Escape', () => {
|
|
15
|
-
const stack = TestBed.inject(KjOverlayStack);
|
|
16
|
-
const closeA = vi.fn();
|
|
17
|
-
const closeB = vi.fn();
|
|
18
|
-
const ha = stack.register('a', { onClose: closeA });
|
|
19
|
-
const hb = stack.register('b', { onClose: closeB });
|
|
20
|
-
|
|
21
|
-
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
|
|
22
|
-
|
|
23
|
-
expect(closeB).toHaveBeenCalledTimes(1);
|
|
24
|
-
expect(closeA).not.toHaveBeenCalled();
|
|
25
|
-
ha.unregister(); hb.unregister();
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
it('outside pointerdown calls onClose only when not inside contentEl', () => {
|
|
29
|
-
const stack = TestBed.inject(KjOverlayStack);
|
|
30
|
-
const onClose = vi.fn();
|
|
31
|
-
const inside = document.createElement('div');
|
|
32
|
-
document.body.appendChild(inside);
|
|
33
|
-
const handle = stack.register('a', { onClose });
|
|
34
|
-
stack.markContentEl('a', inside);
|
|
35
|
-
|
|
36
|
-
inside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
|
|
37
|
-
expect(onClose).not.toHaveBeenCalled();
|
|
38
|
-
|
|
39
|
-
document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
|
|
40
|
-
expect(onClose).toHaveBeenCalledTimes(1);
|
|
41
|
-
|
|
42
|
-
handle.unregister();
|
|
43
|
-
inside.remove();
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
it('respects closeOnEsc=false and closeOnOutside=false', () => {
|
|
47
|
-
const stack = TestBed.inject(KjOverlayStack);
|
|
48
|
-
const onClose = vi.fn();
|
|
49
|
-
const handle = stack.register('a', { onClose, closeOnEsc: false, closeOnOutside: false });
|
|
50
|
-
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
|
|
51
|
-
document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
|
|
52
|
-
expect(onClose).not.toHaveBeenCalled();
|
|
53
|
-
handle.unregister();
|
|
54
|
-
});
|
|
55
|
-
});
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { Injectable, PLATFORM_ID, computed, inject, signal, type Signal } from '@angular/core';
|
|
2
|
-
import { isPlatformBrowser } from '@angular/common';
|
|
3
|
-
|
|
4
|
-
export interface KjOverlayRegistration {
|
|
5
|
-
onClose: () => void;
|
|
6
|
-
closeOnOutside?: boolean;
|
|
7
|
-
closeOnEsc?: boolean;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export interface KjOverlayStackHandle {
|
|
11
|
-
unregister: () => void;
|
|
12
|
-
isTopmost: Signal<boolean>;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
interface StackEntry {
|
|
16
|
-
id: string;
|
|
17
|
-
opts: Required<KjOverlayRegistration>;
|
|
18
|
-
contentEl: HTMLElement | null;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Global coordinator for nested-overlay behaviour: stack ordering, Escape
|
|
23
|
-
* routing, and outside-click detection. Only the topmost overlay receives
|
|
24
|
-
* Esc / outside-click — prevents the double-close problem.
|
|
25
|
-
*
|
|
26
|
-
* SSR-safe: every DOM access guarded by isPlatformBrowser.
|
|
27
|
-
*
|
|
28
|
-
* @doc-category Core/Overlay
|
|
29
|
-
* @doc
|
|
30
|
-
* @doc-name overlay-stack
|
|
31
|
-
* @doc-is-main
|
|
32
|
-
* @doc-description Routes Escape and outside-click to only the topmost overlay when overlays are nested.
|
|
33
|
-
*/
|
|
34
|
-
@Injectable({ providedIn: 'root' })
|
|
35
|
-
export class KjOverlayStack {
|
|
36
|
-
private readonly platformId = inject(PLATFORM_ID);
|
|
37
|
-
private readonly isBrowser = isPlatformBrowser(this.platformId);
|
|
38
|
-
private readonly _stack = signal<StackEntry[]>([]);
|
|
39
|
-
|
|
40
|
-
private _listenersInstalled = false;
|
|
41
|
-
private readonly _onKeydown = (e: KeyboardEvent) => this.handleKeydown(e);
|
|
42
|
-
private readonly _onPointerDown = (e: PointerEvent) => this.handlePointerDown(e);
|
|
43
|
-
|
|
44
|
-
register(id: string, opts: KjOverlayRegistration): KjOverlayStackHandle {
|
|
45
|
-
if (!this.isBrowser) {
|
|
46
|
-
return { unregister: () => {}, isTopmost: computed(() => false) };
|
|
47
|
-
}
|
|
48
|
-
const entry: StackEntry = {
|
|
49
|
-
id,
|
|
50
|
-
opts: {
|
|
51
|
-
onClose: opts.onClose,
|
|
52
|
-
closeOnEsc: opts.closeOnEsc ?? true,
|
|
53
|
-
closeOnOutside: opts.closeOnOutside ?? true,
|
|
54
|
-
},
|
|
55
|
-
contentEl: null,
|
|
56
|
-
};
|
|
57
|
-
this._stack.update(s => [...s, entry]);
|
|
58
|
-
this.ensureListeners();
|
|
59
|
-
const isTopmost = computed(() => {
|
|
60
|
-
const s = this._stack();
|
|
61
|
-
return s.length > 0 && s[s.length - 1].id === id;
|
|
62
|
-
});
|
|
63
|
-
return {
|
|
64
|
-
unregister: () => {
|
|
65
|
-
this._stack.update(s => s.filter(e => e !== entry));
|
|
66
|
-
this.maybeRemoveListeners();
|
|
67
|
-
},
|
|
68
|
-
isTopmost,
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
markContentEl(id: string, el: HTMLElement | null): void {
|
|
73
|
-
if (!this.isBrowser) return;
|
|
74
|
-
const entry = this._stack().find(e => e.id === id);
|
|
75
|
-
if (entry) entry.contentEl = el;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
get stackSize(): number { return this._stack().length; }
|
|
79
|
-
|
|
80
|
-
private ensureListeners(): void {
|
|
81
|
-
if (this._listenersInstalled) return;
|
|
82
|
-
document.addEventListener('keydown', this._onKeydown, true);
|
|
83
|
-
document.addEventListener('pointerdown', this._onPointerDown, true);
|
|
84
|
-
this._listenersInstalled = true;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
private maybeRemoveListeners(): void {
|
|
88
|
-
if (this._stack().length > 0 || !this._listenersInstalled) return;
|
|
89
|
-
document.removeEventListener('keydown', this._onKeydown, true);
|
|
90
|
-
document.removeEventListener('pointerdown', this._onPointerDown, true);
|
|
91
|
-
this._listenersInstalled = false;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
private topmost(): StackEntry | null {
|
|
95
|
-
const s = this._stack();
|
|
96
|
-
return s.length ? s[s.length - 1] : null;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
private handleKeydown(e: KeyboardEvent): void {
|
|
100
|
-
if (e.key !== 'Escape') return;
|
|
101
|
-
const top = this.topmost();
|
|
102
|
-
if (!top || !top.opts.closeOnEsc) return;
|
|
103
|
-
top.opts.onClose();
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
private handlePointerDown(e: PointerEvent): void {
|
|
107
|
-
const top = this.topmost();
|
|
108
|
-
if (!top || !top.opts.closeOnOutside) return;
|
|
109
|
-
const target = e.target as Node | null;
|
|
110
|
-
if (top.contentEl && target && top.contentEl.contains(target)) return;
|
|
111
|
-
top.opts.onClose();
|
|
112
|
-
}
|
|
113
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from 'vitest';
|
|
2
|
-
import { blurredBackdrop } from './blurred';
|
|
3
|
-
|
|
4
|
-
describe('blurredBackdrop', () => {
|
|
5
|
-
it('default className includes --blur', () => {
|
|
6
|
-
expect(blurredBackdrop().className).toBe('kj-backdrop kj-backdrop--blur');
|
|
7
|
-
});
|
|
8
|
-
it('honours className override', () => {
|
|
9
|
-
expect(blurredBackdrop({ className: 'x' }).className).toBe('x');
|
|
10
|
-
});
|
|
11
|
-
});
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { solidBackdrop, type KjSolidBackdropOpts, type KjSolidBackdropStrategy } from './solid';
|
|
2
|
-
|
|
3
|
-
export function blurredBackdrop(opts: KjSolidBackdropOpts = {}): KjSolidBackdropStrategy {
|
|
4
|
-
return solidBackdrop({ ...opts, className: opts.className ?? 'kj-backdrop kj-backdrop--blur' });
|
|
5
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from 'vitest';
|
|
2
|
-
import { noBackdrop } from './none';
|
|
3
|
-
|
|
4
|
-
describe('noBackdrop', () => {
|
|
5
|
-
it('inert/closeOnClick both false', () => {
|
|
6
|
-
const s = noBackdrop();
|
|
7
|
-
expect(s.inertSiblings).toBe(false);
|
|
8
|
-
expect(s.closeOnClick).toBe(false);
|
|
9
|
-
});
|
|
10
|
-
});
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from 'vitest';
|
|
2
|
-
import { solidBackdrop } from './solid';
|
|
3
|
-
|
|
4
|
-
describe('solidBackdrop', () => {
|
|
5
|
-
it('default options', () => {
|
|
6
|
-
const s = solidBackdrop();
|
|
7
|
-
expect(s.inertSiblings).toBe(true);
|
|
8
|
-
expect(s.closeOnClick).toBe(true);
|
|
9
|
-
expect(s.className).toBe('kj-backdrop');
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
it('honours overrides', () => {
|
|
13
|
-
const s = solidBackdrop({ inert: false, closeOnClick: false, className: 'x' });
|
|
14
|
-
expect(s.inertSiblings).toBe(false);
|
|
15
|
-
expect(s.closeOnClick).toBe(false);
|
|
16
|
-
expect(s.className).toBe('x');
|
|
17
|
-
});
|
|
18
|
-
});
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { KjBackdropStrategy } from '../../tokens';
|
|
2
|
-
|
|
3
|
-
export interface KjSolidBackdropOpts {
|
|
4
|
-
inert?: boolean;
|
|
5
|
-
closeOnClick?: boolean;
|
|
6
|
-
className?: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export interface KjSolidBackdropStrategy extends KjBackdropStrategy {
|
|
10
|
-
readonly className: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function solidBackdrop(opts: KjSolidBackdropOpts = {}): KjSolidBackdropStrategy {
|
|
14
|
-
return {
|
|
15
|
-
inertSiblings: opts.inert ?? true,
|
|
16
|
-
closeOnClick: opts.closeOnClick ?? true,
|
|
17
|
-
className: opts.className ?? 'kj-backdrop',
|
|
18
|
-
attach() {},
|
|
19
|
-
onOpen() {},
|
|
20
|
-
onClose() {},
|
|
21
|
-
detach() {},
|
|
22
|
-
};
|
|
23
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { signal } from '@angular/core';
|
|
2
|
-
import { describe, it, expect } from 'vitest';
|
|
3
|
-
import { inertBased } from './inert-based';
|
|
4
|
-
import type { KjOverlayContext } from '../../context';
|
|
5
|
-
|
|
6
|
-
describe('inertBased', () => {
|
|
7
|
-
it('onOpen sets inert on siblings; onClose removes it', () => {
|
|
8
|
-
const parent = document.createElement('div');
|
|
9
|
-
const sib = document.createElement('div');
|
|
10
|
-
const panel = document.createElement('div');
|
|
11
|
-
parent.append(sib, panel);
|
|
12
|
-
document.body.appendChild(parent);
|
|
13
|
-
|
|
14
|
-
const ctx: KjOverlayContext = {
|
|
15
|
-
state: signal('closed'), isOpen: signal(false),
|
|
16
|
-
triggerEl: signal(null), panelEl: signal(panel),
|
|
17
|
-
stack: {} as never, platform: { isBrowser: true },
|
|
18
|
-
requestClose: () => {},
|
|
19
|
-
};
|
|
20
|
-
const s = inertBased();
|
|
21
|
-
s.attach(ctx);
|
|
22
|
-
s.onOpen!();
|
|
23
|
-
expect(sib.hasAttribute('inert')).toBe(true);
|
|
24
|
-
s.onClose!();
|
|
25
|
-
expect(sib.hasAttribute('inert')).toBe(false);
|
|
26
|
-
parent.remove();
|
|
27
|
-
});
|
|
28
|
-
});
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import type { KjOverlayContext } from '../../context';
|
|
2
|
-
import type { KjFocusTrapStrategy } from '../../tokens';
|
|
3
|
-
|
|
4
|
-
export function inertBased(): KjFocusTrapStrategy {
|
|
5
|
-
let ctx: KjOverlayContext | null = null;
|
|
6
|
-
let inerted: HTMLElement[] = [];
|
|
7
|
-
let returnTarget: HTMLElement | null = null;
|
|
8
|
-
|
|
9
|
-
return {
|
|
10
|
-
attach(c) { ctx = c; },
|
|
11
|
-
onOpen() {
|
|
12
|
-
if (!ctx?.platform.isBrowser) return;
|
|
13
|
-
const panel = ctx.panelEl();
|
|
14
|
-
if (!panel?.parentElement) return;
|
|
15
|
-
returnTarget = (document.activeElement as HTMLElement) ?? null;
|
|
16
|
-
inerted = [];
|
|
17
|
-
for (const sibling of Array.from(panel.parentElement.children)) {
|
|
18
|
-
if (sibling === panel) continue;
|
|
19
|
-
const el = sibling as HTMLElement;
|
|
20
|
-
if (!el.hasAttribute('inert')) {
|
|
21
|
-
el.setAttribute('inert', '');
|
|
22
|
-
inerted.push(el);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
onClose() {
|
|
27
|
-
for (const el of inerted) el.removeAttribute('inert');
|
|
28
|
-
inerted = [];
|
|
29
|
-
},
|
|
30
|
-
detach() { ctx = null; returnTarget = null; },
|
|
31
|
-
focusFirst() {
|
|
32
|
-
const panel = ctx?.panelEl();
|
|
33
|
-
const focusable = panel?.querySelector<HTMLElement>('button,a,input,select,textarea,[tabindex]:not([tabindex="-1"])');
|
|
34
|
-
focusable?.focus();
|
|
35
|
-
},
|
|
36
|
-
restoreFocus() { returnTarget?.focus(); },
|
|
37
|
-
};
|
|
38
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from 'vitest';
|
|
2
|
-
import { noTrap } from './no-trap';
|
|
3
|
-
|
|
4
|
-
describe('noTrap', () => {
|
|
5
|
-
it('all methods are no-ops', () => {
|
|
6
|
-
const s = noTrap();
|
|
7
|
-
expect(() => { s.attach({} as never); s.focusFirst(); s.restoreFocus(); s.detach(); }).not.toThrow();
|
|
8
|
-
});
|
|
9
|
-
});
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { signal } from '@angular/core';
|
|
2
|
-
import { describe, it, expect } from 'vitest';
|
|
3
|
-
import { tabCycle } from './tab-cycle';
|
|
4
|
-
import type { KjOverlayContext } from '../../context';
|
|
5
|
-
|
|
6
|
-
function makeCtx(panel: HTMLElement): KjOverlayContext {
|
|
7
|
-
return {
|
|
8
|
-
state: signal('closed'), isOpen: signal(false),
|
|
9
|
-
triggerEl: signal(null), panelEl: signal(panel),
|
|
10
|
-
stack: {} as never, platform: { isBrowser: true },
|
|
11
|
-
requestClose: () => {},
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
describe('tabCycle', () => {
|
|
16
|
-
it('focusFirst focuses first focusable', () => {
|
|
17
|
-
const panel = document.createElement('div');
|
|
18
|
-
const a = document.createElement('button'); a.textContent = 'a';
|
|
19
|
-
const b = document.createElement('button'); b.textContent = 'b';
|
|
20
|
-
panel.append(a, b);
|
|
21
|
-
document.body.appendChild(panel);
|
|
22
|
-
const s = tabCycle();
|
|
23
|
-
s.attach(makeCtx(panel));
|
|
24
|
-
s.onOpen!();
|
|
25
|
-
s.focusFirst();
|
|
26
|
-
expect(document.activeElement).toBe(a);
|
|
27
|
-
s.onClose!();
|
|
28
|
-
panel.remove();
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
it('Tab on last wraps to first; Shift+Tab on first wraps to last', () => {
|
|
32
|
-
const panel = document.createElement('div');
|
|
33
|
-
const a = document.createElement('button'); a.textContent = 'a';
|
|
34
|
-
const b = document.createElement('button'); b.textContent = 'b';
|
|
35
|
-
panel.append(a, b);
|
|
36
|
-
document.body.appendChild(panel);
|
|
37
|
-
const s = tabCycle();
|
|
38
|
-
s.attach(makeCtx(panel));
|
|
39
|
-
s.onOpen!();
|
|
40
|
-
|
|
41
|
-
b.focus();
|
|
42
|
-
panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
|
|
43
|
-
// jsdom doesn't move focus on the synthetic event. We assert via panel listener semantics:
|
|
44
|
-
// call focusables order check directly.
|
|
45
|
-
expect(document.activeElement === a || document.activeElement === b).toBe(true);
|
|
46
|
-
s.onClose!();
|
|
47
|
-
panel.remove();
|
|
48
|
-
});
|
|
49
|
-
});
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import type { KjOverlayContext } from '../../context';
|
|
2
|
-
import type { KjFocusTrapStrategy } from '../../tokens';
|
|
3
|
-
|
|
4
|
-
const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
5
|
-
|
|
6
|
-
export interface KjTabCycleOpts {
|
|
7
|
-
initialFocus?: 'auto' | 'first' | HTMLElement | (() => HTMLElement | null);
|
|
8
|
-
returnFocus?: boolean;
|
|
9
|
-
enabled?: boolean | (() => boolean);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export type KjTabCycleStrategy = KjFocusTrapStrategy & {
|
|
13
|
-
configure(opts: Partial<KjTabCycleOpts>): void;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export function tabCycle(initialOpts: KjTabCycleOpts = {}): KjTabCycleStrategy {
|
|
17
|
-
let opts: KjTabCycleOpts = { ...initialOpts };
|
|
18
|
-
let ctx: KjOverlayContext | null = null;
|
|
19
|
-
let returnTarget: HTMLElement | null = null;
|
|
20
|
-
let keyListener: ((e: KeyboardEvent) => void) | null = null;
|
|
21
|
-
const isEnabled = (): boolean => {
|
|
22
|
-
const e = opts.enabled;
|
|
23
|
-
if (e === undefined) return true;
|
|
24
|
-
return typeof e === 'function' ? e() : e;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const focusables = (): HTMLElement[] => {
|
|
28
|
-
const panel = ctx?.panelEl();
|
|
29
|
-
if (!panel) return [];
|
|
30
|
-
return Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE));
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
return {
|
|
34
|
-
attach(c) { ctx = c; },
|
|
35
|
-
onOpen() {
|
|
36
|
-
if (!isEnabled()) return;
|
|
37
|
-
if (!ctx?.platform.isBrowser) return;
|
|
38
|
-
const panel = ctx.panelEl();
|
|
39
|
-
if (!panel) return;
|
|
40
|
-
returnTarget = (document.activeElement as HTMLElement) ?? null;
|
|
41
|
-
keyListener = (e: KeyboardEvent) => {
|
|
42
|
-
if (e.key !== 'Tab') return;
|
|
43
|
-
const els = focusables();
|
|
44
|
-
if (els.length === 0) return;
|
|
45
|
-
const first = els[0], last = els[els.length - 1];
|
|
46
|
-
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
|
|
47
|
-
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
|
|
48
|
-
};
|
|
49
|
-
panel.addEventListener('keydown', keyListener);
|
|
50
|
-
},
|
|
51
|
-
onClose() {
|
|
52
|
-
const panel = ctx?.panelEl();
|
|
53
|
-
if (panel && keyListener) panel.removeEventListener('keydown', keyListener);
|
|
54
|
-
keyListener = null;
|
|
55
|
-
},
|
|
56
|
-
detach() { ctx = null; returnTarget = null; },
|
|
57
|
-
focusFirst() {
|
|
58
|
-
if (!isEnabled()) return;
|
|
59
|
-
const cfg = opts.initialFocus ?? 'first';
|
|
60
|
-
let target: HTMLElement | null;
|
|
61
|
-
if (cfg instanceof HTMLElement) target = cfg;
|
|
62
|
-
else if (typeof cfg === 'function') target = cfg();
|
|
63
|
-
else target = focusables()[0] ?? null;
|
|
64
|
-
if (!target) {
|
|
65
|
-
// No focusable children — focus the panel itself so the trigger
|
|
66
|
-
// doesn't retain focus (WCAG 2.4.3) and so a held Space doesn't
|
|
67
|
-
// re-fire the trigger's click handler. tabindex=-1 makes the panel
|
|
68
|
-
// programmatically focusable without entering the tab order.
|
|
69
|
-
const panel = ctx?.panelEl();
|
|
70
|
-
if (panel) {
|
|
71
|
-
if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '-1');
|
|
72
|
-
target = panel;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
target?.focus();
|
|
76
|
-
},
|
|
77
|
-
restoreFocus() {
|
|
78
|
-
if (!isEnabled()) return;
|
|
79
|
-
if (opts.returnFocus !== false) returnTarget?.focus();
|
|
80
|
-
},
|
|
81
|
-
configure(newOpts: Partial<KjTabCycleOpts>) {
|
|
82
|
-
opts = { ...opts, ...newOpts };
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
export * from './mount/body-portal';
|
|
2
|
-
export * from './mount/in-place';
|
|
3
|
-
export * from './mount/in-container';
|
|
4
|
-
|
|
5
|
-
export * from './position/anchored-to';
|
|
6
|
-
export * from './position/viewport-centered';
|
|
7
|
-
export * from './position/edge-sheet';
|
|
8
|
-
export * from './position/point-at';
|
|
9
|
-
export * from './position/corner';
|
|
10
|
-
export * from './position/in-place-sibling';
|
|
11
|
-
|
|
12
|
-
export * from './backdrop/solid';
|
|
13
|
-
export * from './backdrop/blurred';
|
|
14
|
-
export * from './backdrop/none';
|
|
15
|
-
|
|
16
|
-
export * from './focus-trap/tab-cycle';
|
|
17
|
-
export * from './focus-trap/inert-based';
|
|
18
|
-
export * from './focus-trap/no-trap';
|
|
19
|
-
|
|
20
|
-
export * from './scroll-lock/html-overflow';
|
|
21
|
-
export * from './scroll-lock/css-clip';
|
|
22
|
-
export * from './scroll-lock/none';
|
|
23
|
-
|
|
24
|
-
export * from './live-announcer/polite';
|
|
25
|
-
export * from './live-announcer/assertive';
|
|
26
|
-
export * from './live-announcer/silent';
|
|
27
|
-
|
|
28
|
-
export * from './trigger-event/on-click';
|
|
29
|
-
export * from './trigger-event/on-hover';
|
|
30
|
-
export * from './trigger-event/on-focus';
|
|
31
|
-
export * from './trigger-event/on-context-menu';
|
|
32
|
-
export * from './trigger-event/on-hotkey';
|
|
33
|
-
export * from './trigger-event/on-focus-or-input';
|
|
34
|
-
export * from './trigger-event/programmatic';
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
export type KjLivePoliteness = 'polite' | 'assertive';
|
|
2
|
-
|
|
3
|
-
const SR_ONLY_STYLE = `
|
|
4
|
-
position: absolute;
|
|
5
|
-
width: 1px;
|
|
6
|
-
height: 1px;
|
|
7
|
-
padding: 0;
|
|
8
|
-
margin: -1px;
|
|
9
|
-
overflow: hidden;
|
|
10
|
-
clip: rect(0, 0, 0, 0);
|
|
11
|
-
white-space: nowrap;
|
|
12
|
-
border: 0;
|
|
13
|
-
`;
|
|
14
|
-
|
|
15
|
-
const regions: Partial<Record<KjLivePoliteness, HTMLElement>> = {};
|
|
16
|
-
|
|
17
|
-
const ensureRegion = (politeness: KjLivePoliteness): HTMLElement => {
|
|
18
|
-
let region = regions[politeness];
|
|
19
|
-
if (region) return region;
|
|
20
|
-
region = document.createElement('div');
|
|
21
|
-
region.setAttribute('data-kj-live-region', politeness);
|
|
22
|
-
region.setAttribute('aria-live', politeness);
|
|
23
|
-
region.setAttribute('aria-atomic', 'true');
|
|
24
|
-
region.style.cssText = SR_ONLY_STYLE;
|
|
25
|
-
document.body.appendChild(region);
|
|
26
|
-
regions[politeness] = region;
|
|
27
|
-
return region;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export const announce = (message: string, politeness: KjLivePoliteness = 'polite'): void => {
|
|
31
|
-
if (typeof document === 'undefined') return;
|
|
32
|
-
const region = ensureRegion(politeness);
|
|
33
|
-
region.textContent = '';
|
|
34
|
-
requestAnimationFrame(() => { region.textContent = message; });
|
|
35
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { TestBed } from '@angular/core/testing';
|
|
2
|
-
import { describe, it, expect, afterEach } from 'vitest';
|
|
3
|
-
import { assertive } from './assertive';
|
|
4
|
-
|
|
5
|
-
describe('assertive', () => {
|
|
6
|
-
afterEach(() => {
|
|
7
|
-
document.querySelectorAll('[data-kj-live-region]').forEach(el => el.remove());
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
it('announce writes to assertive live region', async () => {
|
|
11
|
-
TestBed.runInInjectionContext(() => {
|
|
12
|
-
const s = assertive();
|
|
13
|
-
s.attach({} as never);
|
|
14
|
-
s.announce('boom');
|
|
15
|
-
});
|
|
16
|
-
await new Promise(r => requestAnimationFrame(() => r(undefined)));
|
|
17
|
-
const region = document.querySelector('[data-kj-live-region="assertive"]') as HTMLElement;
|
|
18
|
-
expect(region).toBeTruthy();
|
|
19
|
-
expect(region.textContent).toBe('boom');
|
|
20
|
-
});
|
|
21
|
-
});
|