@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.
- package/fesm2022/kouji-ui-core.mjs +26789 -0
- package/fesm2022/kouji-ui-core.mjs.map +1 -0
- package/package.json +15 -7
- 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,288 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Directive,
|
|
3
|
-
ElementRef,
|
|
4
|
-
Signal,
|
|
5
|
-
WritableSignal,
|
|
6
|
-
afterNextRender,
|
|
7
|
-
computed,
|
|
8
|
-
effect,
|
|
9
|
-
inject,
|
|
10
|
-
input,
|
|
11
|
-
isDevMode,
|
|
12
|
-
linkedSignal,
|
|
13
|
-
output,
|
|
14
|
-
untracked,
|
|
15
|
-
} from '@angular/core';
|
|
16
|
-
import { bindPresets } from '../presets';
|
|
17
|
-
import { KJ_PAGINATION_CONFIG } from './config';
|
|
18
|
-
import {
|
|
19
|
-
KJ_PAGINATION,
|
|
20
|
-
KjPageToken,
|
|
21
|
-
KjPaginationContext,
|
|
22
|
-
} from './pagination.context';
|
|
23
|
-
import { computePageTokens } from './page-tokens';
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Root of the Pagination directive family. Owns the page-state model
|
|
27
|
-
* (`kjPage`, `kjTotalPages`), the sliding-window algorithm
|
|
28
|
-
* (`kjSiblingCount`, `kjBoundaryCount`), the `pages` computed, the
|
|
29
|
-
* boundary-state computeds (`isFirstPage`, `isLastPage`), and a polite
|
|
30
|
-
* live-region announcement on every page change. Provides
|
|
31
|
-
* {@link KJ_PAGINATION} to descendants for ARIA wiring and selection
|
|
32
|
-
* coordination.
|
|
33
|
-
*
|
|
34
|
-
* Applied to a `<nav>` element. Hosts `aria-label="Pagination"` (the
|
|
35
|
-
* navigation landmark's accessible name; configurable via
|
|
36
|
-
* `KJ_PAGINATION_CONFIG.navigationLabel`).
|
|
37
|
-
*
|
|
38
|
-
* Page numbers are **1-indexed** and `kjPage` is clamped to
|
|
39
|
-
* `[1, kjTotalPages()]` on every write. Out-of-range writes warn in dev
|
|
40
|
-
* mode and silently clamp.
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* ```html
|
|
44
|
-
* <nav kjPagination [(kjPage)]="page" [kjTotalPages]="10">
|
|
45
|
-
* <button kjButton kjPaginationPrevious>Previous</button>
|
|
46
|
-
* @for (token of pagination.pages(); track token) {
|
|
47
|
-
* @if (token === 'ellipsis-left' || token === 'ellipsis-right') {
|
|
48
|
-
* <span kjPaginationEllipsis>…</span>
|
|
49
|
-
* } @else {
|
|
50
|
-
* <button kjButton kjPaginationItem [kjPage]="token">{{ token }}</button>
|
|
51
|
-
* }
|
|
52
|
-
* }
|
|
53
|
-
* <button kjButton kjPaginationNext>Next</button>
|
|
54
|
-
* </nav>
|
|
55
|
-
* ```
|
|
56
|
-
*
|
|
57
|
-
* @doc-category Core/Navigation
|
|
58
|
-
* @doc
|
|
59
|
-
* @doc-name pagination
|
|
60
|
-
* @doc-description Unstyled pagination root that exposes the page model and announces page changes politely.
|
|
61
|
-
* @doc-is-main
|
|
62
|
-
*/
|
|
63
|
-
@Directive({
|
|
64
|
-
selector: '[kjPagination]',
|
|
65
|
-
standalone: true,
|
|
66
|
-
exportAs: 'kjPagination',
|
|
67
|
-
providers: [
|
|
68
|
-
{ provide: KJ_PAGINATION, useExisting: KjPagination },
|
|
69
|
-
...bindPresets(KJ_PAGINATION_CONFIG),
|
|
70
|
-
],
|
|
71
|
-
host: {
|
|
72
|
-
'[attr.aria-label]': 'config.navigationLabel',
|
|
73
|
-
'[attr.data-page]': 'page()',
|
|
74
|
-
'[attr.data-total-pages]': 'totalPages()',
|
|
75
|
-
},
|
|
76
|
-
})
|
|
77
|
-
export class KjPagination implements KjPaginationContext {
|
|
78
|
-
/** @internal */
|
|
79
|
-
readonly config = inject(KJ_PAGINATION_CONFIG);
|
|
80
|
-
private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* Current page (1-indexed). Two-way bound — the canonical surface is
|
|
84
|
-
* `[(kjPage)]`. Out-of-range writes are clamped to `[1, kjTotalPages()]`
|
|
85
|
-
* with a dev-mode console warning.
|
|
86
|
-
*/
|
|
87
|
-
// eslint-disable-next-line @angular-eslint/no-input-rename -- alias keeps the public `kjPage` name distinct from this internal linkedSignal-backed property
|
|
88
|
-
readonly kjPageInput = input<number>(1, { alias: 'kjPage' });
|
|
89
|
-
readonly kjPage: WritableSignal<number> = linkedSignal(this.kjPageInput);
|
|
90
|
-
|
|
91
|
-
/** Total number of pages. May be `0` (empty dataset). */
|
|
92
|
-
readonly kjTotalPages = input.required<number>();
|
|
93
|
-
|
|
94
|
-
/**
|
|
95
|
-
* Pages adjacent to the current page on each side. Default `1`, so the
|
|
96
|
-
* window includes `[current-1, current, current+1]`. `0` collapses the
|
|
97
|
-
* window to `[current]`.
|
|
98
|
-
*/
|
|
99
|
-
readonly kjSiblingCount = input<number>(this.config.defaults.siblingCount);
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Pages anchored at the start and end. Default `1`, so `[1]` and
|
|
103
|
-
* `[totalPages]` are always visible. `0` removes the boundary anchors.
|
|
104
|
-
*/
|
|
105
|
-
readonly kjBoundaryCount = input<number>(this.config.defaults.boundaryCount);
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* Cascaded variant for child items / boundary controls that did not set
|
|
109
|
-
* their own. Forwarded to each child's `KjVariant` host directive via
|
|
110
|
-
* the `KJ_PAGINATION` context.
|
|
111
|
-
*/
|
|
112
|
-
readonly kjVariant = input<string>(this.config.defaults.variant);
|
|
113
|
-
|
|
114
|
-
/** Cascaded size for child items / boundary controls. */
|
|
115
|
-
readonly kjSize = input<string>(this.config.defaults.size);
|
|
116
|
-
|
|
117
|
-
/**
|
|
118
|
-
* Page-change output. Mirrors `kjPage` writes; emitted whenever the
|
|
119
|
-
* model value settles after a clamp / boundary navigation / item click.
|
|
120
|
-
*/
|
|
121
|
-
readonly kjPageChange = output<number>();
|
|
122
|
-
|
|
123
|
-
/** Read-only view of the current page. */
|
|
124
|
-
readonly page: Signal<number> = computed(() => this.kjPage());
|
|
125
|
-
|
|
126
|
-
/** Read-only view of the total page count. */
|
|
127
|
-
readonly totalPages: Signal<number> = computed(() => this.kjTotalPages());
|
|
128
|
-
|
|
129
|
-
/** Cascaded variant exposed via context for children. */
|
|
130
|
-
readonly variant: Signal<string> = computed(() => this.kjVariant());
|
|
131
|
-
|
|
132
|
-
/** Cascaded size exposed via context for children. */
|
|
133
|
-
readonly size: Signal<string> = computed(() => this.kjSize());
|
|
134
|
-
|
|
135
|
-
/** Output of the windowed page-token algorithm. */
|
|
136
|
-
readonly pages: Signal<readonly KjPageToken[]> = computed(() =>
|
|
137
|
-
computePageTokens(
|
|
138
|
-
this.kjPage(),
|
|
139
|
-
this.kjTotalPages(),
|
|
140
|
-
this.kjSiblingCount(),
|
|
141
|
-
this.kjBoundaryCount(),
|
|
142
|
-
),
|
|
143
|
-
);
|
|
144
|
-
|
|
145
|
-
/** True on page 1, or whenever the dataset is empty. */
|
|
146
|
-
readonly isFirstPage: Signal<boolean> = computed(
|
|
147
|
-
() => this.kjTotalPages() <= 0 || this.kjPage() <= 1,
|
|
148
|
-
);
|
|
149
|
-
|
|
150
|
-
/** True on the last page, or whenever the dataset is empty. */
|
|
151
|
-
readonly isLastPage: Signal<boolean> = computed(
|
|
152
|
-
() => this.kjTotalPages() <= 0 || this.kjPage() >= this.kjTotalPages(),
|
|
153
|
-
);
|
|
154
|
-
|
|
155
|
-
/** The visually-hidden live-region span injected at construction. */
|
|
156
|
-
private liveRegion: HTMLSpanElement | null = null;
|
|
157
|
-
|
|
158
|
-
constructor() {
|
|
159
|
-
// Clamp out-of-range writes. The model can settle on a clamped value
|
|
160
|
-
// in a single re-run — the effect is idempotent because clamping a
|
|
161
|
-
// value that is already in-range is a no-op write that signals reject.
|
|
162
|
-
effect(() => {
|
|
163
|
-
const total = this.kjTotalPages();
|
|
164
|
-
const v = this.kjPage();
|
|
165
|
-
if (total <= 0) {
|
|
166
|
-
// Empty dataset: lock to 1 so consumer state is well-defined; do
|
|
167
|
-
// not emit page-change for the lock-in itself.
|
|
168
|
-
if (v !== 1) untracked(() => this.kjPage.set(1));
|
|
169
|
-
return;
|
|
170
|
-
}
|
|
171
|
-
if (v < 1) {
|
|
172
|
-
if (isDevMode()) {
|
|
173
|
-
console.warn(
|
|
174
|
-
`[kj] kjPage=${v} is out of range; clamping to 1.`,
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
untracked(() => this.kjPage.set(1));
|
|
178
|
-
} else if (v > total) {
|
|
179
|
-
if (isDevMode()) {
|
|
180
|
-
console.warn(
|
|
181
|
-
`[kj] kjPage=${v} exceeds kjTotalPages=${total}; clamping to ${total}.`,
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
untracked(() => this.kjPage.set(total));
|
|
185
|
-
}
|
|
186
|
-
});
|
|
187
|
-
|
|
188
|
-
// Emit kjPageChange on every settled page write. The output mirrors
|
|
189
|
-
// the model so consumers using the explicit `(kjPageChange)` shape get
|
|
190
|
-
// the same value regardless of whether the change came from a click,
|
|
191
|
-
// a programmatic write, or the clamp.
|
|
192
|
-
let lastEmitted: number | null = null;
|
|
193
|
-
effect(() => {
|
|
194
|
-
const v = this.kjPage();
|
|
195
|
-
const total = this.kjTotalPages();
|
|
196
|
-
// Skip emit while the value is mid-clamp — re-run will catch the
|
|
197
|
-
// settled value on the next tick.
|
|
198
|
-
if (total > 0 && (v < 1 || v > total)) return;
|
|
199
|
-
if (v !== lastEmitted) {
|
|
200
|
-
lastEmitted = v;
|
|
201
|
-
this.kjPageChange.emit(v);
|
|
202
|
-
}
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
// Inject the live region once the host has rendered. Polite by
|
|
206
|
-
// default; the live region survives focus changes so AT users hear
|
|
207
|
-
// "Page 5 of 10" even if the click moved focus elsewhere.
|
|
208
|
-
afterNextRender(() => {
|
|
209
|
-
if (typeof document === 'undefined') return;
|
|
210
|
-
const span = document.createElement('span');
|
|
211
|
-
span.setAttribute('aria-live', this.config.pageChangeAnnouncementPoliteness);
|
|
212
|
-
span.setAttribute('aria-atomic', 'true');
|
|
213
|
-
span.setAttribute('data-kj-pagination-live', '');
|
|
214
|
-
span.setAttribute(
|
|
215
|
-
'style',
|
|
216
|
-
'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0',
|
|
217
|
-
);
|
|
218
|
-
this.el.nativeElement.appendChild(span);
|
|
219
|
-
this.liveRegion = span;
|
|
220
|
-
});
|
|
221
|
-
|
|
222
|
-
// Live-region announcement effect lives in injection context. The
|
|
223
|
-
// first reactive run primes `lastAnnounced` so the initial render
|
|
224
|
-
// does not produce a spurious announcement; subsequent changes
|
|
225
|
-
// re-emit the configured template into the visually-hidden region.
|
|
226
|
-
let lastAnnounced: number | null = null;
|
|
227
|
-
effect(() => {
|
|
228
|
-
const page = this.kjPage();
|
|
229
|
-
const total = this.kjTotalPages();
|
|
230
|
-
if (total > 0 && (page < 1 || page > total)) return;
|
|
231
|
-
if (lastAnnounced === null) {
|
|
232
|
-
lastAnnounced = page;
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
if (lastAnnounced === page) return;
|
|
236
|
-
lastAnnounced = page;
|
|
237
|
-
if (!this.liveRegion) return;
|
|
238
|
-
// Brief clear-then-set so AT consistently picks up the change
|
|
239
|
-
// even when the same string is announced repeatedly (e.g. on a
|
|
240
|
-
// single-page dataset where every "click" yields "Page 1 of 1").
|
|
241
|
-
const region = this.liveRegion;
|
|
242
|
-
const message = this.config.pageChangeAnnouncement(page, total);
|
|
243
|
-
region.textContent = '';
|
|
244
|
-
// queueMicrotask makes the clear paint before the set; AT pickup
|
|
245
|
-
// is more reliable than two synchronous writes back-to-back.
|
|
246
|
-
queueMicrotask(() => {
|
|
247
|
-
// Guard against the directive being torn down between writes.
|
|
248
|
-
if (this.liveRegion === region) region.textContent = message;
|
|
249
|
-
});
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
/** Jump to a specific page. Clamped to `[1, totalPages]`. */
|
|
254
|
-
goToPage(page: number): void {
|
|
255
|
-
const total = this.kjTotalPages();
|
|
256
|
-
if (total <= 0) return;
|
|
257
|
-
const clamped = Math.min(Math.max(1, page), total);
|
|
258
|
-
if (this.kjPage() !== clamped) this.kjPage.set(clamped);
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
/** Jump to page 1. */
|
|
262
|
-
goToFirst(): void {
|
|
263
|
-
if (this.kjTotalPages() <= 0) return;
|
|
264
|
-
if (this.kjPage() !== 1) this.kjPage.set(1);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
/** Jump to the last page. */
|
|
268
|
-
goToLast(): void {
|
|
269
|
-
const total = this.kjTotalPages();
|
|
270
|
-
if (total <= 0) return;
|
|
271
|
-
if (this.kjPage() !== total) this.kjPage.set(total);
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
/** Advance one page. No-op on the last page. */
|
|
275
|
-
goToNext(): void {
|
|
276
|
-
const total = this.kjTotalPages();
|
|
277
|
-
if (total <= 0) return;
|
|
278
|
-
const next = this.kjPage() + 1;
|
|
279
|
-
if (next <= total) this.kjPage.set(next);
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
/** Retreat one page. No-op on page 1. */
|
|
283
|
-
goToPrevious(): void {
|
|
284
|
-
if (this.kjTotalPages() <= 0) return;
|
|
285
|
-
const prev = this.kjPage() - 1;
|
|
286
|
-
if (prev >= 1) this.kjPage.set(prev);
|
|
287
|
-
}
|
|
288
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export {
|
|
2
|
-
KjPasswordInput,
|
|
3
|
-
KjPasswordInputScope,
|
|
4
|
-
KjPasswordToggle,
|
|
5
|
-
KjPasswordStrength,
|
|
6
|
-
KjPasswordCapsLockWarning,
|
|
7
|
-
} from './password-input';
|
|
8
|
-
export {
|
|
9
|
-
KJ_PASSWORD_INPUT,
|
|
10
|
-
type KjPasswordAutocomplete,
|
|
11
|
-
type KjPasswordInputContext,
|
|
12
|
-
type KjPasswordScore,
|
|
13
|
-
type KjPasswordScoreLabel,
|
|
14
|
-
} from './password-input.context';
|
|
15
|
-
export { defaultPasswordScorer } from './password-input.scorer';
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { InjectionToken, Signal } from '@angular/core';
|
|
2
|
-
|
|
3
|
-
/** Numeric strength score, matching the de-facto `zxcvbn` 0..4 scale. */
|
|
4
|
-
export type KjPasswordScore = 0 | 1 | 2 | 3 | 4;
|
|
5
|
-
|
|
6
|
-
/** Human-readable strength label mapped from {@link KjPasswordScore}. */
|
|
7
|
-
export type KjPasswordScoreLabel =
|
|
8
|
-
| 'too weak'
|
|
9
|
-
| 'weak'
|
|
10
|
-
| 'fair'
|
|
11
|
-
| 'good'
|
|
12
|
-
| 'strong';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Allowed values for the `autocomplete` attribute on a password field.
|
|
16
|
-
*
|
|
17
|
-
* Restricted union — invalid strings are rejected at type-check time. This
|
|
18
|
-
* catches the common mis-spelling `autocomplete="password"` (which browsers
|
|
19
|
-
* silently ignore).
|
|
20
|
-
*/
|
|
21
|
-
export type KjPasswordAutocomplete =
|
|
22
|
-
| 'current-password'
|
|
23
|
-
| 'new-password'
|
|
24
|
-
| 'off';
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Shared state surfaced by `KjPasswordInput` for its sibling directives
|
|
28
|
-
* (`KjPasswordToggle`, `KjPasswordStrength`, `KjPasswordCapsLockWarning`) to
|
|
29
|
-
* read.
|
|
30
|
-
*
|
|
31
|
-
* The root directive owns all derivations: the raw `revealed` / `capsLock`
|
|
32
|
-
* signals, the `score` (computed lazily — only when at least one
|
|
33
|
-
* `KjPasswordStrength` has registered), and the human-readable `scoreLabel`.
|
|
34
|
-
*/
|
|
35
|
-
export interface KjPasswordInputContext {
|
|
36
|
-
/** Host `<input>` id, generated when the consumer didn't provide one. */
|
|
37
|
-
readonly inputId: Signal<string>;
|
|
38
|
-
/** Whether the password is currently rendered as plain text. */
|
|
39
|
-
readonly revealed: Signal<boolean>;
|
|
40
|
-
/** Whether Caps Lock was detected as on during the last keydown. */
|
|
41
|
-
readonly capsLock: Signal<boolean>;
|
|
42
|
-
/** Strength score in `0..4`. */
|
|
43
|
-
readonly score: Signal<KjPasswordScore>;
|
|
44
|
-
/** Human-readable strength label (i18n via `kjStrengthLabels`). */
|
|
45
|
-
readonly scoreLabel: Signal<string>;
|
|
46
|
-
/** Whether the host `<input>` is disabled (mirrors `KjInput`'s state). */
|
|
47
|
-
readonly disabled: Signal<boolean>;
|
|
48
|
-
/** Toggles `revealed`. No-op when disabled. */
|
|
49
|
-
toggle(): void;
|
|
50
|
-
/**
|
|
51
|
-
* Registers a `KjPasswordStrength` so the root knows to run the scorer.
|
|
52
|
-
* Returns a deregister function consumed via `DestroyRef`.
|
|
53
|
-
*/
|
|
54
|
-
registerStrength(): () => void;
|
|
55
|
-
/**
|
|
56
|
-
* Registers a `KjPasswordCapsLockWarning` so the root can wire the
|
|
57
|
-
* warning's id into `aria-describedby`. Returns a deregister function.
|
|
58
|
-
*/
|
|
59
|
-
registerCapsLockWarning(): () => void;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/** Injection token for {@link KjPasswordInputContext}. */
|
|
63
|
-
export const KJ_PASSWORD_INPUT = new InjectionToken<KjPasswordInputContext>(
|
|
64
|
-
'KjPasswordInput',
|
|
65
|
-
);
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { KjPasswordScore } from './password-input.context';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Default password strength scorer.
|
|
5
|
-
*
|
|
6
|
-
* A small length + character-class heuristic — intentionally not a security
|
|
7
|
-
* grade rating. Consumers wanting `zxcvbn`-equivalent scoring should provide
|
|
8
|
-
* their own scorer via `[kjStrengthScorer]`.
|
|
9
|
-
*
|
|
10
|
-
* Scoring rules:
|
|
11
|
-
* - empty / `< 4` chars → 0 (too weak)
|
|
12
|
-
* - `< 8` chars → 1 (weak)
|
|
13
|
-
* - `>= 8` chars + ≥2 character classes → 2 (fair)
|
|
14
|
-
* - `>= 10` chars + ≥3 character classes → 3 (good)
|
|
15
|
-
* - `>= 12` chars + 4 character classes → 4 (strong)
|
|
16
|
-
*
|
|
17
|
-
* Character classes: lowercase, uppercase, digit, symbol.
|
|
18
|
-
*/
|
|
19
|
-
export function defaultPasswordScorer(value: string): KjPasswordScore {
|
|
20
|
-
if (!value) return 0;
|
|
21
|
-
const len = value.length;
|
|
22
|
-
if (len < 4) return 0;
|
|
23
|
-
|
|
24
|
-
let classes = 0;
|
|
25
|
-
if (/[a-z]/.test(value)) classes++;
|
|
26
|
-
if (/[A-Z]/.test(value)) classes++;
|
|
27
|
-
if (/[0-9]/.test(value)) classes++;
|
|
28
|
-
if (/[^a-zA-Z0-9]/.test(value)) classes++;
|
|
29
|
-
|
|
30
|
-
if (len >= 12 && classes === 4) return 4;
|
|
31
|
-
if (len >= 10 && classes >= 3) return 3;
|
|
32
|
-
if (len >= 8 && classes >= 2) return 2;
|
|
33
|
-
return 1;
|
|
34
|
-
}
|
|
@@ -1,274 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
3
|
-
import { render } from '@testing-library/angular';
|
|
4
|
-
import { axe, toHaveNoViolations } from 'jest-axe';
|
|
5
|
-
import { describe, expect, it } from 'vitest';
|
|
6
|
-
|
|
7
|
-
import { KjButton } from '../button/button';
|
|
8
|
-
import {
|
|
9
|
-
KjPasswordCapsLockWarning,
|
|
10
|
-
KjPasswordInput,
|
|
11
|
-
KjPasswordInputScope,
|
|
12
|
-
KjPasswordStrength,
|
|
13
|
-
KjPasswordToggle,
|
|
14
|
-
} from './password-input';
|
|
15
|
-
import { defaultPasswordScorer } from './password-input.scorer';
|
|
16
|
-
|
|
17
|
-
expect.extend(toHaveNoViolations);
|
|
18
|
-
|
|
19
|
-
const ALL_DIRECTIVES = [
|
|
20
|
-
KjPasswordInput,
|
|
21
|
-
KjPasswordInputScope,
|
|
22
|
-
KjPasswordToggle,
|
|
23
|
-
KjPasswordStrength,
|
|
24
|
-
KjPasswordCapsLockWarning,
|
|
25
|
-
KjButton,
|
|
26
|
-
];
|
|
27
|
-
|
|
28
|
-
describe('KjPasswordInput', () => {
|
|
29
|
-
it('renders an input with type="password" by default', async () => {
|
|
30
|
-
const { container } = await render(`<input kjPasswordInput />`, {
|
|
31
|
-
imports: [KjPasswordInput],
|
|
32
|
-
});
|
|
33
|
-
const input = container.querySelector('input')!;
|
|
34
|
-
expect(input.getAttribute('type')).toBe('password');
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
it('defaults autocomplete to "current-password"', async () => {
|
|
38
|
-
const { container } = await render(`<input kjPasswordInput />`, {
|
|
39
|
-
imports: [KjPasswordInput],
|
|
40
|
-
});
|
|
41
|
-
expect(container.querySelector('input')!.getAttribute('autocomplete')).toBe(
|
|
42
|
-
'current-password',
|
|
43
|
-
);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
it('forwards kjAutocomplete="new-password"', async () => {
|
|
47
|
-
const { container } = await render(
|
|
48
|
-
`<input kjPasswordInput kjAutocomplete="new-password" />`,
|
|
49
|
-
{ imports: [KjPasswordInput] },
|
|
50
|
-
);
|
|
51
|
-
expect(container.querySelector('input')!.getAttribute('autocomplete')).toBe(
|
|
52
|
-
'new-password',
|
|
53
|
-
);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('forwards kjMaxLength to native maxlength', async () => {
|
|
57
|
-
const { container } = await render(
|
|
58
|
-
`<input kjPasswordInput [kjMaxLength]="32" />`,
|
|
59
|
-
{ imports: [KjPasswordInput] },
|
|
60
|
-
);
|
|
61
|
-
expect(container.querySelector('input')!.getAttribute('maxlength')).toBe(
|
|
62
|
-
'32',
|
|
63
|
-
);
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
it('auto-generates an id when none was supplied', async () => {
|
|
67
|
-
const { container } = await render(`<input kjPasswordInput />`, {
|
|
68
|
-
imports: [KjPasswordInput],
|
|
69
|
-
});
|
|
70
|
-
expect(container.querySelector('input')!.getAttribute('id')).toMatch(
|
|
71
|
-
/^kj-password-/,
|
|
72
|
-
);
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
it('keeps the consumer-provided id when present', async () => {
|
|
76
|
-
const { container } = await render(
|
|
77
|
-
`<input id="my-pw" kjPasswordInput />`,
|
|
78
|
-
{ imports: [KjPasswordInput] },
|
|
79
|
-
);
|
|
80
|
-
expect(container.querySelector('input')!.getAttribute('id')).toBe('my-pw');
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
it('flips type to "text" when kjRevealed is true', async () => {
|
|
84
|
-
const { container } = await render(
|
|
85
|
-
`<input kjPasswordInput [kjRevealed]="true" />`,
|
|
86
|
-
{ imports: [KjPasswordInput] },
|
|
87
|
-
);
|
|
88
|
-
expect(container.querySelector('input')!.getAttribute('type')).toBe('text');
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
it('toggle button flips reveal state on click', async () => {
|
|
92
|
-
const { container } = await render(
|
|
93
|
-
`<div kjPasswordInputScope>
|
|
94
|
-
<input kjPasswordInput />
|
|
95
|
-
<button kjButton kjPasswordToggle>eye</button>
|
|
96
|
-
</div>`,
|
|
97
|
-
{ imports: ALL_DIRECTIVES },
|
|
98
|
-
);
|
|
99
|
-
const input = container.querySelector('input')!;
|
|
100
|
-
const button = container.querySelector('button')!;
|
|
101
|
-
expect(input.getAttribute('type')).toBe('password');
|
|
102
|
-
button.click();
|
|
103
|
-
await new Promise(r => setTimeout(r, 0));
|
|
104
|
-
expect(input.getAttribute('type')).toBe('text');
|
|
105
|
-
button.click();
|
|
106
|
-
await new Promise(r => setTimeout(r, 0));
|
|
107
|
-
expect(input.getAttribute('type')).toBe('password');
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
it('toggle wires aria-controls to the input id', async () => {
|
|
111
|
-
const { container } = await render(
|
|
112
|
-
`<div kjPasswordInputScope>
|
|
113
|
-
<input id="pw1" kjPasswordInput />
|
|
114
|
-
<button kjButton kjPasswordToggle>eye</button>
|
|
115
|
-
</div>`,
|
|
116
|
-
{ imports: ALL_DIRECTIVES },
|
|
117
|
-
);
|
|
118
|
-
expect(container.querySelector('button')!.getAttribute('aria-controls')).toBe(
|
|
119
|
-
'pw1',
|
|
120
|
-
);
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
it('toggle aria-label switches with state', async () => {
|
|
124
|
-
const { container } = await render(
|
|
125
|
-
`<div kjPasswordInputScope>
|
|
126
|
-
<input kjPasswordInput />
|
|
127
|
-
<button kjButton kjPasswordToggle>eye</button>
|
|
128
|
-
</div>`,
|
|
129
|
-
{ imports: ALL_DIRECTIVES },
|
|
130
|
-
);
|
|
131
|
-
const button = container.querySelector('button')!;
|
|
132
|
-
expect(button.getAttribute('aria-label')).toBe('Show password');
|
|
133
|
-
button.click();
|
|
134
|
-
await new Promise(r => setTimeout(r, 0));
|
|
135
|
-
expect(button.getAttribute('aria-label')).toBe('Hide password');
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
it('toggle reflects aria-pressed', async () => {
|
|
139
|
-
const { container } = await render(
|
|
140
|
-
`<div kjPasswordInputScope>
|
|
141
|
-
<input kjPasswordInput />
|
|
142
|
-
<button kjButton kjPasswordToggle>eye</button>
|
|
143
|
-
</div>`,
|
|
144
|
-
{ imports: ALL_DIRECTIVES },
|
|
145
|
-
);
|
|
146
|
-
const button = container.querySelector('button')!;
|
|
147
|
-
expect(button.getAttribute('aria-pressed')).toBe('false');
|
|
148
|
-
button.click();
|
|
149
|
-
await new Promise(r => setTimeout(r, 0));
|
|
150
|
-
expect(button.getAttribute('aria-pressed')).toBe('true');
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
it('strength meter exposes role=progressbar with the score in 0..4', async () => {
|
|
154
|
-
const ctrl = new FormControl('');
|
|
155
|
-
const { container } = await render(
|
|
156
|
-
`<div kjPasswordInputScope>
|
|
157
|
-
<input kjPasswordInput [formControl]="ctrl" />
|
|
158
|
-
<div kjPasswordStrength></div>
|
|
159
|
-
</div>`,
|
|
160
|
-
{
|
|
161
|
-
imports: [...ALL_DIRECTIVES, ReactiveFormsModule],
|
|
162
|
-
componentProperties: { ctrl },
|
|
163
|
-
},
|
|
164
|
-
);
|
|
165
|
-
const meter = container.querySelector('[kjPasswordStrength]')!;
|
|
166
|
-
expect(meter.getAttribute('role')).toBe('progressbar');
|
|
167
|
-
expect(meter.getAttribute('aria-valuemin')).toBe('0');
|
|
168
|
-
expect(meter.getAttribute('aria-valuemax')).toBe('4');
|
|
169
|
-
// empty value → 0
|
|
170
|
-
expect(meter.getAttribute('aria-valuenow')).toBe('0');
|
|
171
|
-
expect(meter.getAttribute('aria-valuetext')).toBe('too weak');
|
|
172
|
-
|
|
173
|
-
// strong value → 4
|
|
174
|
-
ctrl.setValue('Aa1!Aa1!Aa1!Aa1!');
|
|
175
|
-
await new Promise(r => setTimeout(r, 0));
|
|
176
|
-
expect(meter.getAttribute('aria-valuenow')).toBe('4');
|
|
177
|
-
expect(meter.getAttribute('aria-valuetext')).toBe('strong');
|
|
178
|
-
});
|
|
179
|
-
|
|
180
|
-
it('caps lock warning is hidden by default', async () => {
|
|
181
|
-
const { container } = await render(
|
|
182
|
-
`<div kjPasswordInputScope>
|
|
183
|
-
<input kjPasswordInput />
|
|
184
|
-
<p kjPasswordCapsLockWarning>caps</p>
|
|
185
|
-
</div>`,
|
|
186
|
-
{ imports: ALL_DIRECTIVES },
|
|
187
|
-
);
|
|
188
|
-
const warn = container.querySelector('[kjPasswordCapsLockWarning]') as HTMLElement;
|
|
189
|
-
expect(warn.hidden).toBe(true);
|
|
190
|
-
expect(warn.getAttribute('role')).toBe('status');
|
|
191
|
-
expect(warn.getAttribute('aria-live')).toBe('polite');
|
|
192
|
-
});
|
|
193
|
-
|
|
194
|
-
it('caps lock warning becomes visible when CapsLock modifier is detected', async () => {
|
|
195
|
-
const { container } = await render(
|
|
196
|
-
`<div kjPasswordInputScope>
|
|
197
|
-
<input kjPasswordInput />
|
|
198
|
-
<p kjPasswordCapsLockWarning>caps</p>
|
|
199
|
-
</div>`,
|
|
200
|
-
{ imports: ALL_DIRECTIVES },
|
|
201
|
-
);
|
|
202
|
-
const input = container.querySelector('input')!;
|
|
203
|
-
const warn = container.querySelector('[kjPasswordCapsLockWarning]') as HTMLElement;
|
|
204
|
-
|
|
205
|
-
const event = new KeyboardEvent('keydown', { key: 'a' });
|
|
206
|
-
Object.defineProperty(event, 'getModifierState', {
|
|
207
|
-
value: (key: string) => key === 'CapsLock',
|
|
208
|
-
});
|
|
209
|
-
input.dispatchEvent(event);
|
|
210
|
-
await new Promise(r => setTimeout(r, 0));
|
|
211
|
-
expect(warn.hidden).toBe(false);
|
|
212
|
-
|
|
213
|
-
input.dispatchEvent(new Event('blur'));
|
|
214
|
-
await new Promise(r => setTimeout(r, 0));
|
|
215
|
-
expect(warn.hidden).toBe(true);
|
|
216
|
-
});
|
|
217
|
-
|
|
218
|
-
it('disabled toggle is a no-op', async () => {
|
|
219
|
-
@Component({
|
|
220
|
-
standalone: true,
|
|
221
|
-
imports: ALL_DIRECTIVES,
|
|
222
|
-
template: `
|
|
223
|
-
<div kjPasswordInputScope>
|
|
224
|
-
<input kjPasswordInput [kjDisabled]="true" />
|
|
225
|
-
<button kjButton kjPasswordToggle>eye</button>
|
|
226
|
-
</div>
|
|
227
|
-
`,
|
|
228
|
-
})
|
|
229
|
-
class Host {}
|
|
230
|
-
|
|
231
|
-
const { container } = await render(Host);
|
|
232
|
-
const input = container.querySelector('input')!;
|
|
233
|
-
const button = container.querySelector('button')!;
|
|
234
|
-
expect(input.getAttribute('type')).toBe('password');
|
|
235
|
-
button.click();
|
|
236
|
-
await new Promise(r => setTimeout(r, 0));
|
|
237
|
-
expect(input.getAttribute('type')).toBe('password');
|
|
238
|
-
});
|
|
239
|
-
|
|
240
|
-
it('passes axe audit (login form shape)', async () => {
|
|
241
|
-
const { container } = await render(
|
|
242
|
-
`<div kjPasswordInputScope>
|
|
243
|
-
<label for="pw">Password</label>
|
|
244
|
-
<input id="pw" kjPasswordInput />
|
|
245
|
-
<button kjButton kjPasswordToggle>eye</button>
|
|
246
|
-
</div>`,
|
|
247
|
-
{ imports: ALL_DIRECTIVES },
|
|
248
|
-
);
|
|
249
|
-
expect(await axe(container)).toHaveNoViolations();
|
|
250
|
-
});
|
|
251
|
-
});
|
|
252
|
-
|
|
253
|
-
describe('defaultPasswordScorer', () => {
|
|
254
|
-
it('returns 0 for empty / very short inputs', () => {
|
|
255
|
-
expect(defaultPasswordScorer('')).toBe(0);
|
|
256
|
-
expect(defaultPasswordScorer('abc')).toBe(0);
|
|
257
|
-
});
|
|
258
|
-
|
|
259
|
-
it('returns 1 for short passwords', () => {
|
|
260
|
-
expect(defaultPasswordScorer('abcdefg')).toBe(1);
|
|
261
|
-
});
|
|
262
|
-
|
|
263
|
-
it('returns 2 for medium-length, multi-class passwords', () => {
|
|
264
|
-
expect(defaultPasswordScorer('Abcdefg1')).toBe(2);
|
|
265
|
-
});
|
|
266
|
-
|
|
267
|
-
it('returns 3 for long, three-class passwords', () => {
|
|
268
|
-
expect(defaultPasswordScorer('Abcdefghi1')).toBe(3);
|
|
269
|
-
});
|
|
270
|
-
|
|
271
|
-
it('returns 4 for long, four-class passwords', () => {
|
|
272
|
-
expect(defaultPasswordScorer('Abcdefghij1!')).toBe(4);
|
|
273
|
-
});
|
|
274
|
-
});
|