@kouji-ui/components 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-components.mjs +17668 -0
- package/fesm2022/kouji-ui-components.mjs.map +1 -0
- package/package.json +17 -10
- package/types/kouji-ui-components.d.ts +8032 -0
- package/.turbo/turbo-build.log +0 -29
- package/CHANGELOG.md +0 -192
- package/ng-package.json +0 -7
- package/src/accordion/_examples/accordion.default.example.ts +0 -31
- package/src/accordion/_examples/accordion.disabled.example.ts +0 -38
- package/src/accordion/_examples/accordion.multiple.example.ts +0 -31
- package/src/accordion/_examples/accordion.rich-content.example.ts +0 -49
- package/src/accordion/_examples/index.ts +0 -6
- package/src/accordion/accordion.arrow-nav.example.ts +0 -39
- package/src/accordion/accordion.css +0 -68
- package/src/accordion/accordion.playground.ts +0 -119
- package/src/accordion/accordion.spec.ts +0 -117
- package/src/accordion/accordion.ts +0 -153
- package/src/accordion/accordion.usage.example.ts +0 -38
- package/src/accordion/accordion.value.example.ts +0 -60
- package/src/accordion/index.ts +0 -1
- package/src/alert/_examples/alert.banner.example.ts +0 -56
- package/src/alert/_examples/alert.dismissible.example.ts +0 -53
- package/src/alert/_examples/alert.example.ts +0 -40
- package/src/alert/_examples/alert.variants.example.ts +0 -66
- package/src/alert/_examples/alert.with-actions.example.ts +0 -57
- package/src/alert/_examples/index.ts +0 -7
- package/src/alert/alert.css +0 -133
- package/src/alert/alert.playground.ts +0 -111
- package/src/alert/alert.spec.ts +0 -167
- package/src/alert/alert.ts +0 -250
- package/src/alert/alert.usage.example.ts +0 -58
- package/src/alert/index.ts +0 -8
- package/src/avatar/_examples/avatar-group.example.ts +0 -31
- package/src/avatar/_examples/avatar-group.list.example.ts +0 -45
- package/src/avatar/_examples/avatar-group.overflow.example.ts +0 -33
- package/src/avatar/_examples/avatar-group.shapes.example.ts +0 -39
- package/src/avatar/_examples/avatar-group.sizes.example.ts +0 -44
- package/src/avatar/_examples/avatar.default.example.ts +0 -18
- package/src/avatar/_examples/avatar.initials.example.ts +0 -20
- package/src/avatar/_examples/avatar.shapes.example.ts +0 -22
- package/src/avatar/_examples/avatar.sizes.example.ts +0 -26
- package/src/avatar/_examples/avatar.with-image.example.ts +0 -20
- package/src/avatar/_examples/index.ts +0 -12
- package/src/avatar/avatar-group.spec.ts +0 -138
- package/src/avatar/avatar-group.ts +0 -127
- package/src/avatar/avatar-group.usage.example.ts +0 -30
- package/src/avatar/avatar.css +0 -58
- package/src/avatar/avatar.playground.ts +0 -95
- package/src/avatar/avatar.ts +0 -123
- package/src/avatar/index.ts +0 -2
- package/src/badge/_examples/badge.default.example.ts +0 -18
- package/src/badge/_examples/badge.sizes.example.ts +0 -25
- package/src/badge/_examples/badge.variants.example.ts +0 -24
- package/src/badge/_examples/badge.with-dot.example.ts +0 -31
- package/src/badge/_examples/badge.with-icon.example.ts +0 -23
- package/src/badge/_examples/index.ts +0 -7
- package/src/badge/badge.css +0 -59
- package/src/badge/badge.playground.ts +0 -49
- package/src/badge/badge.ts +0 -86
- package/src/badge/badge.usage.example.ts +0 -22
- package/src/badge/index.ts +0 -1
- package/src/breadcrumb/_examples/breadcrumb.custom-separator.example.ts +0 -53
- package/src/breadcrumb/_examples/breadcrumb.example.ts +0 -48
- package/src/breadcrumb/_examples/breadcrumb.long-path.example.ts +0 -58
- package/src/breadcrumb/_examples/breadcrumb.truncated.example.ts +0 -59
- package/src/breadcrumb/_examples/breadcrumb.with-icons.example.ts +0 -66
- package/src/breadcrumb/_examples/index.ts +0 -7
- package/src/breadcrumb/breadcrumb.css +0 -121
- package/src/breadcrumb/breadcrumb.playground.ts +0 -93
- package/src/breadcrumb/breadcrumb.spec.ts +0 -230
- package/src/breadcrumb/breadcrumb.ts +0 -272
- package/src/breadcrumb/breadcrumb.usage.example.ts +0 -45
- package/src/breadcrumb/index.ts +0 -1
- package/src/button/_examples/button.anchor.example.ts +0 -18
- package/src/button/_examples/button.configured.example.ts +0 -43
- package/src/button/_examples/button.disabled.example.ts +0 -25
- package/src/button/_examples/button.example.ts +0 -22
- package/src/button/_examples/button.icon.example.ts +0 -27
- package/src/button/_examples/button.loading.example.ts +0 -31
- package/src/button/_examples/button.pressed.example.ts +0 -24
- package/src/button/_examples/button.sizes.example.ts +0 -26
- package/src/button/_examples/button.usage.example.ts +0 -66
- package/src/button/_examples/button.variants.example.ts +0 -26
- package/src/button/_examples/index.ts +0 -12
- package/src/button/button.css +0 -263
- package/src/button/button.playground.ts +0 -79
- package/src/button/button.spec.ts +0 -100
- package/src/button/button.ts +0 -150
- package/src/button/index.ts +0 -1
- package/src/button-group/_examples/button-group.example.ts +0 -30
- package/src/button-group/_examples/button-group.icon-only.example.ts +0 -30
- package/src/button-group/_examples/button-group.toggle.example.ts +0 -36
- package/src/button-group/_examples/button-group.variants.example.ts +0 -40
- package/src/button-group/_examples/button-group.vertical.example.ts +0 -29
- package/src/button-group/_examples/index.ts +0 -7
- package/src/button-group/button-group.css +0 -80
- package/src/button-group/button-group.playground.ts +0 -94
- package/src/button-group/button-group.spec.ts +0 -119
- package/src/button-group/button-group.ts +0 -130
- package/src/button-group/button-group.usage.example.ts +0 -35
- package/src/button-group/index.ts +0 -1
- package/src/calendar/_examples/calendar.example.ts +0 -33
- package/src/calendar/_examples/index.ts +0 -3
- package/src/calendar/calendar.css +0 -129
- package/src/calendar/calendar.playground.ts +0 -84
- package/src/calendar/calendar.spec.ts +0 -50
- package/src/calendar/calendar.ts +0 -171
- package/src/calendar/calendar.usage.example.ts +0 -33
- package/src/calendar/index.ts +0 -1
- package/src/card/_examples/card.cover.example.ts +0 -53
- package/src/card/_examples/card.example.ts +0 -27
- package/src/card/_examples/card.full.example.ts +0 -51
- package/src/card/_examples/index.ts +0 -5
- package/src/card/card.css +0 -120
- package/src/card/card.playground.ts +0 -116
- package/src/card/card.spec.ts +0 -50
- package/src/card/card.ts +0 -194
- package/src/card/card.usage.example.ts +0 -46
- package/src/card/index.ts +0 -1
- package/src/carousel/_examples/carousel.autoplay.example.ts +0 -69
- package/src/carousel/_examples/carousel.example.ts +0 -60
- package/src/carousel/_examples/carousel.indicators.example.ts +0 -64
- package/src/carousel/_examples/carousel.lazy-load.example.ts +0 -85
- package/src/carousel/_examples/carousel.tabs-pattern.example.ts +0 -61
- package/src/carousel/_examples/index.ts +0 -7
- package/src/carousel/carousel.css +0 -181
- package/src/carousel/carousel.playground.ts +0 -135
- package/src/carousel/carousel.spec.ts +0 -211
- package/src/carousel/carousel.ts +0 -399
- package/src/carousel/carousel.usage.example.ts +0 -46
- package/src/carousel/index.ts +0 -1
- package/src/cascade-select/_examples/cascade-select.data-driven.example.ts +0 -119
- package/src/cascade-select/_examples/cascade-select.disabled.example.ts +0 -74
- package/src/cascade-select/_examples/cascade-select.example.ts +0 -80
- package/src/cascade-select/_examples/cascade-select.field.example.ts +0 -73
- package/src/cascade-select/_examples/cascade-select.path.example.ts +0 -85
- package/src/cascade-select/_examples/index.ts +0 -7
- package/src/cascade-select/cascade-select.css +0 -120
- package/src/cascade-select/cascade-select.playground.ts +0 -133
- package/src/cascade-select/cascade-select.ts +0 -201
- package/src/cascade-select/cascade-select.usage.example.ts +0 -44
- package/src/cascade-select/index.ts +0 -5
- package/src/chat/_examples/chat-bubble.example.ts +0 -71
- package/src/chat/_examples/chat-bubble.grouped.example.ts +0 -69
- package/src/chat/_examples/chat-bubble.sides.example.ts +0 -41
- package/src/chat/_examples/chat-bubble.variants.example.ts +0 -58
- package/src/chat/_examples/chat-bubble.with-state.example.ts +0 -57
- package/src/chat/_examples/index.ts +0 -7
- package/src/chat/chat.css +0 -231
- package/src/chat/chat.playground.ts +0 -171
- package/src/chat/chat.spec.ts +0 -343
- package/src/chat/chat.ts +0 -269
- package/src/chat/chat.usage.example.ts +0 -49
- package/src/chat/index.ts +0 -13
- package/src/checkbox/_examples/checkbox.checked.example.ts +0 -20
- package/src/checkbox/_examples/checkbox.default.example.ts +0 -20
- package/src/checkbox/_examples/checkbox.disabled.example.ts +0 -26
- package/src/checkbox/_examples/checkbox.indeterminate.example.ts +0 -20
- package/src/checkbox/_examples/checkbox.usage.example.ts +0 -62
- package/src/checkbox/_examples/index.ts +0 -7
- package/src/checkbox/checkbox.css +0 -74
- package/src/checkbox/checkbox.playground.ts +0 -68
- package/src/checkbox/checkbox.ts +0 -122
- package/src/checkbox/index.ts +0 -1
- package/src/color-picker/_examples/color-picker.alpha.example.ts +0 -36
- package/src/color-picker/_examples/color-picker.example.ts +0 -34
- package/src/color-picker/_examples/color-picker.hex-input.example.ts +0 -53
- package/src/color-picker/_examples/color-picker.in-form.example.ts +0 -60
- package/src/color-picker/_examples/color-picker.usage.example.ts +0 -58
- package/src/color-picker/_examples/color-picker.with-presets.example.ts +0 -45
- package/src/color-picker/_examples/index.ts +0 -8
- package/src/color-picker/color-picker.css +0 -183
- package/src/color-picker/color-picker.playground.ts +0 -83
- package/src/color-picker/color-picker.spec.ts +0 -94
- package/src/color-picker/color-picker.ts +0 -234
- package/src/color-picker/index.ts +0 -1
- package/src/combobox/_examples/combobox.async.example.ts +0 -85
- package/src/combobox/_examples/combobox.empty-state.example.ts +0 -36
- package/src/combobox/_examples/combobox.example.ts +0 -36
- package/src/combobox/_examples/combobox.free-text.example.ts +0 -42
- package/src/combobox/_examples/combobox.usage.example.ts +0 -51
- package/src/combobox/_examples/combobox.with-icons.example.ts +0 -49
- package/src/combobox/_examples/index.ts +0 -8
- package/src/combobox/combobox.css +0 -101
- package/src/combobox/combobox.playground.ts +0 -90
- package/src/combobox/combobox.spec.ts +0 -111
- package/src/combobox/combobox.ts +0 -219
- package/src/combobox/index.ts +0 -6
- package/src/command-palette/_examples/command-palette.async.example.ts +0 -99
- package/src/command-palette/_examples/command-palette.dialog.example.ts +0 -90
- package/src/command-palette/_examples/command-palette.example.ts +0 -40
- package/src/command-palette/_examples/command-palette.fuzzy.example.ts +0 -54
- package/src/command-palette/_examples/command-palette.groups.example.ts +0 -55
- package/src/command-palette/_examples/command-palette.usage.example.ts +0 -49
- package/src/command-palette/_examples/index.ts +0 -8
- package/src/command-palette/command-palette.css +0 -234
- package/src/command-palette/command-palette.playground.ts +0 -119
- package/src/command-palette/command-palette.ts +0 -448
- package/src/command-palette/index.ts +0 -10
- package/src/confirm-popup/_examples/confirm-popup.destructive.example.ts +0 -72
- package/src/confirm-popup/_examples/confirm-popup.example.ts +0 -82
- package/src/confirm-popup/_examples/confirm-popup.placement.example.ts +0 -97
- package/src/confirm-popup/_examples/confirm-popup.usage.example.ts +0 -94
- package/src/confirm-popup/_examples/confirm-popup.with-message.example.ts +0 -76
- package/src/confirm-popup/_examples/index.ts +0 -7
- package/src/confirm-popup/confirm-popup.css +0 -47
- package/src/confirm-popup/confirm-popup.playground.ts +0 -109
- package/src/confirm-popup/confirm-popup.spec.ts +0 -209
- package/src/confirm-popup/confirm-popup.ts +0 -279
- package/src/confirm-popup/index.ts +0 -1
- package/src/date-picker/_examples/date-picker.disabled-dates.example.ts +0 -44
- package/src/date-picker/_examples/date-picker.example.ts +0 -38
- package/src/date-picker/_examples/date-picker.locale.example.ts +0 -50
- package/src/date-picker/_examples/date-picker.readonly.example.ts +0 -32
- package/src/date-picker/_examples/date-picker.usage.example.ts +0 -60
- package/src/date-picker/_examples/date-picker.with-min-max.example.ts +0 -47
- package/src/date-picker/_examples/index.ts +0 -8
- package/src/date-picker/date-picker.css +0 -61
- package/src/date-picker/date-picker.playground.ts +0 -79
- package/src/date-picker/date-picker.spec.ts +0 -71
- package/src/date-picker/date-picker.ts +0 -185
- package/src/date-picker/index.ts +0 -1
- package/src/dialog/_examples/dialog.confirmation.example.ts +0 -30
- package/src/dialog/_examples/dialog.default.example.ts +0 -30
- package/src/dialog/_examples/dialog.nested.example.ts +0 -86
- package/src/dialog/_examples/dialog.scrollable.example.ts +0 -30
- package/src/dialog/_examples/dialog.usage.example.ts +0 -57
- package/src/dialog/_examples/dialog.with-form.example.ts +0 -48
- package/src/dialog/_examples/index.ts +0 -8
- package/src/dialog/dialog.css +0 -56
- package/src/dialog/dialog.playground.ts +0 -136
- package/src/dialog/dialog.ts +0 -82
- package/src/dialog/index.ts +0 -1
- package/src/divider/_examples/divider.example.ts +0 -27
- package/src/divider/_examples/divider.sizes.example.ts +0 -33
- package/src/divider/_examples/divider.structural.example.ts +0 -55
- package/src/divider/_examples/divider.usage.example.ts +0 -48
- package/src/divider/_examples/divider.variants.example.ts +0 -33
- package/src/divider/_examples/divider.vertical.example.ts +0 -38
- package/src/divider/_examples/divider.with-content.example.ts +0 -38
- package/src/divider/_examples/index.ts +0 -9
- package/src/divider/divider.css +0 -93
- package/src/divider/divider.playground.ts +0 -97
- package/src/divider/divider.spec.ts +0 -207
- package/src/divider/divider.ts +0 -220
- package/src/divider/index.ts +0 -1
- package/src/drawer/_examples/drawer.example.ts +0 -30
- package/src/drawer/_examples/drawer.modal-vs-non-modal.example.ts +0 -27
- package/src/drawer/_examples/drawer.scrollable.example.ts +0 -30
- package/src/drawer/_examples/drawer.sides.example.ts +0 -32
- package/src/drawer/_examples/drawer.usage.example.ts +0 -56
- package/src/drawer/_examples/drawer.with-form.example.ts +0 -48
- package/src/drawer/_examples/index.ts +0 -8
- package/src/drawer/drawer.css +0 -130
- package/src/drawer/drawer.playground.ts +0 -107
- package/src/drawer/drawer.spec.ts +0 -216
- package/src/drawer/drawer.ts +0 -85
- package/src/drawer/index.ts +0 -1
- package/src/dropdown-menu/_examples/dropdown-menu.disabled.example.ts +0 -19
- package/src/dropdown-menu/_examples/dropdown-menu.example.ts +0 -20
- package/src/dropdown-menu/_examples/dropdown-menu.shortcuts.example.ts +0 -31
- package/src/dropdown-menu/_examples/dropdown-menu.sides.example.ts +0 -18
- package/src/dropdown-menu/_examples/dropdown-menu.usage.example.ts +0 -56
- package/src/dropdown-menu/_examples/dropdown-menu.with-icons.example.ts +0 -31
- package/src/dropdown-menu/_examples/dropdown-menu.with-separator.example.ts +0 -41
- package/src/dropdown-menu/_examples/index.ts +0 -9
- package/src/dropdown-menu/dropdown-menu.css +0 -108
- package/src/dropdown-menu/dropdown-menu.playground.ts +0 -109
- package/src/dropdown-menu/dropdown-menu.spec.ts +0 -5
- package/src/dropdown-menu/dropdown-menu.ts +0 -128
- package/src/dropdown-menu/index.ts +0 -1
- package/src/empty-state/_examples/empty-state.error.example.ts +0 -63
- package/src/empty-state/_examples/empty-state.example.ts +0 -59
- package/src/empty-state/_examples/empty-state.search.example.ts +0 -82
- package/src/empty-state/_examples/empty-state.sizes.example.ts +0 -76
- package/src/empty-state/_examples/empty-state.usage.example.ts +0 -66
- package/src/empty-state/_examples/empty-state.with-actions.example.ts +0 -68
- package/src/empty-state/_examples/index.ts +0 -8
- package/src/empty-state/empty-state.css +0 -114
- package/src/empty-state/empty-state.playground.ts +0 -87
- package/src/empty-state/empty-state.spec.ts +0 -211
- package/src/empty-state/empty-state.ts +0 -276
- package/src/empty-state/index.ts +0 -1
- package/src/example-components.ts +0 -396
- package/src/field/_examples/field.disabled.example.ts +0 -49
- package/src/field/_examples/field.example.ts +0 -51
- package/src/field/_examples/field.required.example.ts +0 -46
- package/src/field/_examples/field.with-error.example.ts +0 -73
- package/src/field/_examples/field.with-prefix-suffix.example.ts +0 -63
- package/src/field/_examples/index.ts +0 -7
- package/src/field/field.css +0 -138
- package/src/field/field.playground.ts +0 -108
- package/src/field/field.spec.ts +0 -132
- package/src/field/field.ts +0 -232
- package/src/field/field.usage.example.ts +0 -63
- package/src/field/index.ts +0 -7
- package/src/file-upload/_examples/file-upload.dropzone.example.ts +0 -32
- package/src/file-upload/_examples/file-upload.example.ts +0 -29
- package/src/file-upload/_examples/file-upload.image-preview.example.ts +0 -31
- package/src/file-upload/_examples/file-upload.multiple.example.ts +0 -23
- package/src/file-upload/_examples/file-upload.with-progress.example.ts +0 -59
- package/src/file-upload/_examples/index.ts +0 -7
- package/src/file-upload/file-upload.css +0 -207
- package/src/file-upload/file-upload.playground.ts +0 -84
- package/src/file-upload/file-upload.spec.ts +0 -94
- package/src/file-upload/file-upload.ts +0 -301
- package/src/file-upload/file-upload.usage.example.ts +0 -45
- package/src/file-upload/index.ts +0 -1
- package/src/form/_examples/form.async-submit.example.ts +0 -72
- package/src/form/_examples/form.compound.example.ts +0 -93
- package/src/form/_examples/form.example.ts +0 -70
- package/src/form/_examples/form.validation.example.ts +0 -67
- package/src/form/_examples/index.ts +0 -6
- package/src/form/form.css +0 -63
- package/src/form/form.playground.ts +0 -145
- package/src/form/form.spec.ts +0 -96
- package/src/form/form.ts +0 -216
- package/src/form/form.usage.example.ts +0 -63
- package/src/form/index.ts +0 -5
- package/src/icon/_examples/icon.gallery.example.ts +0 -199
- package/src/icon/_examples/icon.usage.example.ts +0 -46
- package/src/icon/_examples/index.ts +0 -4
- package/src/icon/icon.playground.ts +0 -63
- package/src/icon/index.ts +0 -5
- package/src/icon/lucide/icon-names.generated.ts +0 -1708
- package/src/icon/lucide/icon-names.ts +0 -18
- package/src/icon/lucide/index.ts +0 -2
- package/src/icon/lucide/provide-lucide-icons.ts +0 -96
- package/src/input/_examples/index.ts +0 -4
- package/src/input/_examples/input.color.example.ts +0 -33
- package/src/input/_examples/input.example.ts +0 -22
- package/src/input/index.ts +0 -1
- package/src/input/input.css +0 -70
- package/src/input/input.playground.ts +0 -79
- package/src/input/input.spec.ts +0 -98
- package/src/input/input.ts +0 -158
- package/src/input/input.usage.example.ts +0 -40
- package/src/input-group/_examples/index.ts +0 -7
- package/src/input-group/_examples/input-group.button.example.ts +0 -43
- package/src/input-group/_examples/input-group.example.ts +0 -39
- package/src/input-group/_examples/input-group.icon.example.ts +0 -49
- package/src/input-group/_examples/input-group.url.example.ts +0 -36
- package/src/input-group/_examples/input-group.variants.example.ts +0 -39
- package/src/input-group/index.ts +0 -1
- package/src/input-group/input-group.css +0 -125
- package/src/input-group/input-group.playground.ts +0 -90
- package/src/input-group/input-group.ts +0 -142
- package/src/input-group/input-group.usage.example.ts +0 -47
- package/src/input-mask/_examples/index.ts +0 -8
- package/src/input-mask/_examples/input-mask.credit-card.example.ts +0 -90
- package/src/input-mask/_examples/input-mask.custom-tokens.example.ts +0 -87
- package/src/input-mask/_examples/input-mask.date.example.ts +0 -61
- package/src/input-mask/_examples/input-mask.example.ts +0 -61
- package/src/input-mask/_examples/input-mask.usage.example.ts +0 -44
- package/src/input-mask/_examples/input-mask.validation.example.ts +0 -80
- package/src/input-mask/index.ts +0 -9
- package/src/input-mask/input-mask.css +0 -39
- package/src/input-mask/input-mask.playground.ts +0 -79
- package/src/input-mask/input-mask.ts +0 -130
- package/src/input-otp/_examples/index.ts +0 -8
- package/src/input-otp/_examples/input-otp.autosubmit.example.ts +0 -71
- package/src/input-otp/_examples/input-otp.example.ts +0 -47
- package/src/input-otp/_examples/input-otp.lengths.example.ts +0 -67
- package/src/input-otp/_examples/input-otp.masked.example.ts +0 -46
- package/src/input-otp/_examples/input-otp.reactive.example.ts +0 -58
- package/src/input-otp/_examples/input-otp.separator.example.ts +0 -49
- package/src/input-otp/index.ts +0 -1
- package/src/input-otp/input-otp.css +0 -87
- package/src/input-otp/input-otp.playground.ts +0 -107
- package/src/input-otp/input-otp.ts +0 -244
- package/src/input-otp/input-otp.usage.example.ts +0 -45
- package/src/kbd/_examples/index.ts +0 -6
- package/src/kbd/_examples/kbd.combo.example.ts +0 -24
- package/src/kbd/_examples/kbd.example.ts +0 -22
- package/src/kbd/_examples/kbd.in-tooltip.example.ts +0 -43
- package/src/kbd/_examples/kbd.sizes.example.ts +0 -31
- package/src/kbd/index.ts +0 -1
- package/src/kbd/kbd.css +0 -67
- package/src/kbd/kbd.playground.ts +0 -51
- package/src/kbd/kbd.spec.ts +0 -123
- package/src/kbd/kbd.ts +0 -123
- package/src/kbd/kbd.usage.example.ts +0 -38
- package/src/link/_examples/index.ts +0 -8
- package/src/link/_examples/link.disabled.example.ts +0 -23
- package/src/link/_examples/link.example.ts +0 -26
- package/src/link/_examples/link.external.example.ts +0 -33
- package/src/link/_examples/link.in-prose.example.ts +0 -36
- package/src/link/_examples/link.sizes.example.ts +0 -28
- package/src/link/_examples/link.variants.example.ts +0 -25
- package/src/link/index.ts +0 -1
- package/src/link/link.css +0 -104
- package/src/link/link.playground.ts +0 -98
- package/src/link/link.spec.ts +0 -146
- package/src/link/link.ts +0 -133
- package/src/link/link.usage.example.ts +0 -37
- package/src/list/_examples/index.ts +0 -7
- package/src/list/_examples/list.divided.example.ts +0 -32
- package/src/list/_examples/list.example.ts +0 -31
- package/src/list/_examples/list.interactive.example.ts +0 -51
- package/src/list/_examples/list.nav.example.ts +0 -44
- package/src/list/_examples/list.with-icons.example.ts +0 -97
- package/src/list/index.ts +0 -1
- package/src/list/list.css +0 -166
- package/src/list/list.playground.ts +0 -90
- package/src/list/list.spec.ts +0 -121
- package/src/list/list.ts +0 -227
- package/src/list/list.usage.example.ts +0 -45
- package/src/menubar/_examples/index.ts +0 -6
- package/src/menubar/_examples/menubar.disabled-item.example.ts +0 -23
- package/src/menubar/_examples/menubar.example.ts +0 -22
- package/src/menubar/_examples/menubar.with-shortcuts.example.ts +0 -33
- package/src/menubar/_examples/menubar.with-submenu.example.ts +0 -76
- package/src/menubar/index.ts +0 -1
- package/src/menubar/menubar.css +0 -62
- package/src/menubar/menubar.playground.ts +0 -96
- package/src/menubar/menubar.ts +0 -160
- package/src/menubar/menubar.usage.example.ts +0 -33
- package/src/number-input/_examples/index.ts +0 -7
- package/src/number-input/_examples/number-input.currency.example.ts +0 -35
- package/src/number-input/_examples/number-input.decimal.example.ts +0 -34
- package/src/number-input/_examples/number-input.example.ts +0 -24
- package/src/number-input/_examples/number-input.min-max.example.ts +0 -33
- package/src/number-input/_examples/number-input.with-stepper.example.ts +0 -45
- package/src/number-input/index.ts +0 -1
- package/src/number-input/number-input.css +0 -115
- package/src/number-input/number-input.playground.ts +0 -92
- package/src/number-input/number-input.spec.ts +0 -102
- package/src/number-input/number-input.ts +0 -212
- package/src/number-input/number-input.usage.example.ts +0 -73
- package/src/overlay/overlay.css +0 -32
- package/src/overlay-badge/_examples/index.ts +0 -7
- package/src/overlay-badge/_examples/overlay-badge.described.example.ts +0 -36
- package/src/overlay-badge/_examples/overlay-badge.dot.example.ts +0 -28
- package/src/overlay-badge/_examples/overlay-badge.example.ts +0 -34
- package/src/overlay-badge/_examples/overlay-badge.on-avatar.example.ts +0 -38
- package/src/overlay-badge/_examples/overlay-badge.positions.example.ts +0 -39
- package/src/overlay-badge/index.ts +0 -1
- package/src/overlay-badge/overlay-badge.css +0 -118
- package/src/overlay-badge/overlay-badge.playground.ts +0 -92
- package/src/overlay-badge/overlay-badge.spec.ts +0 -174
- package/src/overlay-badge/overlay-badge.ts +0 -232
- package/src/overlay-badge/overlay-badge.usage.example.ts +0 -44
- package/src/pagination/_examples/index.ts +0 -7
- package/src/pagination/_examples/pagination.boundaries.example.ts +0 -56
- package/src/pagination/_examples/pagination.compact.example.ts +0 -42
- package/src/pagination/_examples/pagination.example.ts +0 -55
- package/src/pagination/_examples/pagination.large.example.ts +0 -54
- package/src/pagination/_examples/pagination.with-info.example.ts +0 -49
- package/src/pagination/index.ts +0 -1
- package/src/pagination/pagination.css +0 -146
- package/src/pagination/pagination.playground.ts +0 -107
- package/src/pagination/pagination.spec.ts +0 -202
- package/src/pagination/pagination.ts +0 -432
- package/src/pagination/pagination.usage.example.ts +0 -50
- package/src/password-input/_examples/index.ts +0 -6
- package/src/password-input/_examples/password-input.example.ts +0 -24
- package/src/password-input/_examples/password-input.strength.example.ts +0 -45
- package/src/password-input/_examples/password-input.toggle.example.ts +0 -43
- package/src/password-input/_examples/password-input.with-rules.example.ts +0 -78
- package/src/password-input/index.ts +0 -1
- package/src/password-input/password-input.css +0 -155
- package/src/password-input/password-input.playground.ts +0 -81
- package/src/password-input/password-input.spec.ts +0 -129
- package/src/password-input/password-input.ts +0 -254
- package/src/password-input/password-input.usage.example.ts +0 -55
- package/src/playground-types.ts +0 -47
- package/src/popover/_examples/index.ts +0 -7
- package/src/popover/_examples/popover.cancellable.example.ts +0 -20
- package/src/popover/_examples/popover.example.ts +0 -20
- package/src/popover/_examples/popover.modal.example.ts +0 -22
- package/src/popover/_examples/popover.sides.example.ts +0 -37
- package/src/popover/_examples/popover.with-form.example.ts +0 -38
- package/src/popover/index.ts +0 -1
- package/src/popover/popover.css +0 -71
- package/src/popover/popover.playground.ts +0 -86
- package/src/popover/popover.spec.ts +0 -5
- package/src/popover/popover.ts +0 -94
- package/src/popover/popover.usage.example.ts +0 -48
- package/src/progress-bar/_examples/index.ts +0 -7
- package/src/progress-bar/_examples/progress-bar.example.ts +0 -22
- package/src/progress-bar/_examples/progress-bar.indeterminate.example.ts +0 -23
- package/src/progress-bar/_examples/progress-bar.sizes.example.ts +0 -29
- package/src/progress-bar/_examples/progress-bar.variants.example.ts +0 -30
- package/src/progress-bar/_examples/progress-bar.with-label.example.ts +0 -30
- package/src/progress-bar/index.ts +0 -1
- package/src/progress-bar/progress-bar.css +0 -113
- package/src/progress-bar/progress-bar.playground.ts +0 -87
- package/src/progress-bar/progress-bar.spec.ts +0 -233
- package/src/progress-bar/progress-bar.ts +0 -155
- package/src/progress-bar/progress-bar.usage.example.ts +0 -52
- package/src/public-api.ts +0 -61
- package/src/radio/_examples/index.ts +0 -6
- package/src/radio/_examples/radio.default.example.ts +0 -26
- package/src/radio/_examples/radio.disabled.example.ts +0 -26
- package/src/radio/_examples/radio.group.example.ts +0 -27
- package/src/radio/_examples/radio.inline.example.ts +0 -26
- package/src/radio/index.ts +0 -1
- package/src/radio/radio.css +0 -58
- package/src/radio/radio.playground.ts +0 -90
- package/src/radio/radio.ts +0 -143
- package/src/radio/radio.usage.example.ts +0 -54
- package/src/select/_examples/index.ts +0 -6
- package/src/select/_examples/select.default.example.ts +0 -26
- package/src/select/_examples/select.disabled.example.ts +0 -24
- package/src/select/_examples/select.grouped.example.ts +0 -37
- package/src/select/_examples/select.placeholder.example.ts +0 -26
- package/src/select/index.ts +0 -1
- package/src/select/select.css +0 -65
- package/src/select/select.playground.ts +0 -81
- package/src/select/select.ts +0 -176
- package/src/select/select.usage.example.ts +0 -64
- package/src/skeleton/_examples/index.ts +0 -6
- package/src/skeleton/_examples/skeleton.animations.example.ts +0 -52
- package/src/skeleton/_examples/skeleton.card.example.ts +0 -68
- package/src/skeleton/_examples/skeleton.example.ts +0 -24
- package/src/skeleton/_examples/skeleton.shapes.example.ts +0 -55
- package/src/skeleton/index.ts +0 -1
- package/src/skeleton/skeleton.css +0 -111
- package/src/skeleton/skeleton.playground.ts +0 -80
- package/src/skeleton/skeleton.spec.ts +0 -126
- package/src/skeleton/skeleton.ts +0 -155
- package/src/skeleton/skeleton.usage.example.ts +0 -49
- package/src/slider/_examples/index.ts +0 -7
- package/src/slider/_examples/slider.example.ts +0 -41
- package/src/slider/_examples/slider.formatted.example.ts +0 -53
- package/src/slider/_examples/slider.range.example.ts +0 -48
- package/src/slider/_examples/slider.vertical.example.ts +0 -48
- package/src/slider/_examples/slider.with-marks.example.ts +0 -46
- package/src/slider/index.ts +0 -1
- package/src/slider/slider.css +0 -172
- package/src/slider/slider.playground.ts +0 -88
- package/src/slider/slider.spec.ts +0 -139
- package/src/slider/slider.ts +0 -246
- package/src/slider/slider.usage.example.ts +0 -68
- package/src/speed-dial/_examples/index.ts +0 -7
- package/src/speed-dial/_examples/speed-dial.directions.example.ts +0 -85
- package/src/speed-dial/_examples/speed-dial.disabled.example.ts +0 -71
- package/src/speed-dial/_examples/speed-dial.example.ts +0 -48
- package/src/speed-dial/_examples/speed-dial.usage.example.ts +0 -59
- package/src/speed-dial/_examples/speed-dial.with-tooltips.example.ts +0 -65
- package/src/speed-dial/index.ts +0 -1
- package/src/speed-dial/speed-dial.css +0 -137
- package/src/speed-dial/speed-dial.playground.ts +0 -137
- package/src/speed-dial/speed-dial.spec.ts +0 -191
- package/src/speed-dial/speed-dial.ts +0 -257
- package/src/spinner/_examples/index.ts +0 -8
- package/src/spinner/_examples/spinner.animations.example.ts +0 -54
- package/src/spinner/_examples/spinner.example.ts +0 -26
- package/src/spinner/_examples/spinner.in-button.example.ts +0 -51
- package/src/spinner/_examples/spinner.sizes.example.ts +0 -31
- package/src/spinner/_examples/spinner.usage.example.ts +0 -45
- package/src/spinner/_examples/spinner.variants.example.ts +0 -34
- package/src/spinner/index.ts +0 -1
- package/src/spinner/spinner.css +0 -161
- package/src/spinner/spinner.playground.ts +0 -68
- package/src/spinner/spinner.spec.ts +0 -184
- package/src/spinner/spinner.ts +0 -185
- package/src/stepper/_examples/index.ts +0 -8
- package/src/stepper/_examples/stepper.example.ts +0 -62
- package/src/stepper/_examples/stepper.non-linear.example.ts +0 -63
- package/src/stepper/_examples/stepper.optional-step.example.ts +0 -62
- package/src/stepper/_examples/stepper.usage.example.ts +0 -73
- package/src/stepper/_examples/stepper.vertical.example.ts +0 -66
- package/src/stepper/_examples/stepper.with-error.example.ts +0 -63
- package/src/stepper/index.ts +0 -1
- package/src/stepper/stepper.css +0 -147
- package/src/stepper/stepper.playground.ts +0 -88
- package/src/stepper/stepper.spec.ts +0 -200
- package/src/stepper/stepper.ts +0 -242
- package/src/table/_examples/index.ts +0 -23
- package/src/table/_examples/table.column-pinning.example.ts +0 -55
- package/src/table/_examples/table.column-resize.example.ts +0 -49
- package/src/table/_examples/table.column-visibility.example.ts +0 -52
- package/src/table/_examples/table.density.example.ts +0 -71
- package/src/table/_examples/table.editable.example.ts +0 -85
- package/src/table/_examples/table.empty-and-error.example.ts +0 -112
- package/src/table/_examples/table.example.ts +0 -45
- package/src/table/_examples/table.export.example.ts +0 -82
- package/src/table/_examples/table.filterable.example.ts +0 -67
- package/src/table/_examples/table.grouping.example.ts +0 -63
- package/src/table/_examples/table.keyboard.example.ts +0 -115
- package/src/table/_examples/table.master-detail.example.ts +0 -102
- package/src/table/_examples/table.persistence.example.ts +0 -85
- package/src/table/_examples/table.playground.ts +0 -154
- package/src/table/_examples/table.row-pinning.example.ts +0 -71
- package/src/table/_examples/table.selection.example.ts +0 -67
- package/src/table/_examples/table.server-mode.example.ts +0 -120
- package/src/table/_examples/table.sortable.example.ts +0 -49
- package/src/table/_examples/table.theming.example.ts +0 -64
- package/src/table/_examples/table.usage.example.ts +0 -90
- package/src/table/_examples/table.virtualized.example.ts +0 -122
- package/src/table/index.ts +0 -11
- package/src/table/table-cell-editor-outlet.ts +0 -111
- package/src/table/table-editors/boolean-editor.ts +0 -71
- package/src/table/table-editors/date-editor.ts +0 -117
- package/src/table/table-editors/editors.spec.ts +0 -147
- package/src/table/table-editors/index.ts +0 -41
- package/src/table/table-editors/number-editor.ts +0 -89
- package/src/table/table-editors/select-editor.ts +0 -107
- package/src/table/table-editors/text-editor.ts +0 -82
- package/src/table/table-export.spec.ts +0 -33
- package/src/table/table-export.ts +0 -53
- package/src/table/table-filter-outlet.ts +0 -137
- package/src/table/table-filters/date-filter.ts +0 -122
- package/src/table/table-filters/filters.css +0 -53
- package/src/table/table-filters/filters.spec.ts +0 -277
- package/src/table/table-filters/index.ts +0 -11
- package/src/table/table-filters/number-filter.ts +0 -232
- package/src/table/table-filters/select-filter.ts +0 -129
- package/src/table/table-filters/text-filter.ts +0 -110
- package/src/table/table-pagination.spec.ts +0 -118
- package/src/table/table-pagination.ts +0 -191
- package/src/table/table-side-panel.spec.ts +0 -170
- package/src/table/table-side-panel.ts +0 -263
- package/src/table/table-status-bar.spec.ts +0 -78
- package/src/table/table-status-bar.ts +0 -70
- package/src/table/table-toolbar.spec.ts +0 -180
- package/src/table/table-toolbar.ts +0 -244
- package/src/table/table-virtual.spec.ts +0 -103
- package/src/table/table-virtual.ts +0 -180
- package/src/table/table.css +0 -468
- package/src/table/table.spec.ts +0 -175
- package/src/table/table.ts +0 -1009
- package/src/tabs/_examples/index.ts +0 -8
- package/src/tabs/_examples/tabs.controlled.example.ts +0 -59
- package/src/tabs/_examples/tabs.disabled.example.ts +0 -34
- package/src/tabs/_examples/tabs.example.ts +0 -34
- package/src/tabs/_examples/tabs.manual-activation.example.ts +0 -34
- package/src/tabs/_examples/tabs.usage.example.ts +0 -43
- package/src/tabs/_examples/tabs.vertical.example.ts +0 -33
- package/src/tabs/index.ts +0 -1
- package/src/tabs/tabs.css +0 -80
- package/src/tabs/tabs.playground.ts +0 -88
- package/src/tabs/tabs.spec.ts +0 -135
- package/src/tabs/tabs.ts +0 -204
- package/src/tag/_examples/index.ts +0 -9
- package/src/tag/_examples/tag.example.ts +0 -22
- package/src/tag/_examples/tag.list.example.ts +0 -38
- package/src/tag/_examples/tag.removable.example.ts +0 -39
- package/src/tag/_examples/tag.selectable.example.ts +0 -33
- package/src/tag/_examples/tag.sizes.example.ts +0 -25
- package/src/tag/_examples/tag.usage.example.ts +0 -62
- package/src/tag/_examples/tag.variants.example.ts +0 -29
- package/src/tag/index.ts +0 -1
- package/src/tag/tag.css +0 -167
- package/src/tag/tag.playground.ts +0 -63
- package/src/tag/tag.spec.ts +0 -153
- package/src/tag/tag.ts +0 -186
- package/src/test-setup.ts +0 -5
- package/src/textarea/_examples/index.ts +0 -8
- package/src/textarea/_examples/textarea.autoresize.example.ts +0 -37
- package/src/textarea/_examples/textarea.character-count.example.ts +0 -34
- package/src/textarea/_examples/textarea.example.ts +0 -22
- package/src/textarea/_examples/textarea.no-resize.example.ts +0 -28
- package/src/textarea/_examples/textarea.usage.example.ts +0 -50
- package/src/textarea/_examples/textarea.with-field.example.ts +0 -66
- package/src/textarea/index.ts +0 -1
- package/src/textarea/textarea.css +0 -117
- package/src/textarea/textarea.playground.ts +0 -70
- package/src/textarea/textarea.spec.ts +0 -161
- package/src/textarea/textarea.ts +0 -339
- package/src/time-picker/_examples/index.ts +0 -8
- package/src/time-picker/_examples/time-picker.12-hour.example.ts +0 -24
- package/src/time-picker/_examples/time-picker.example.ts +0 -24
- package/src/time-picker/_examples/time-picker.formatted.example.ts +0 -32
- package/src/time-picker/_examples/time-picker.range.example.ts +0 -54
- package/src/time-picker/_examples/time-picker.usage.example.ts +0 -53
- package/src/time-picker/_examples/time-picker.with-seconds.example.ts +0 -24
- package/src/time-picker/index.ts +0 -1
- package/src/time-picker/time-picker.css +0 -126
- package/src/time-picker/time-picker.playground.ts +0 -72
- package/src/time-picker/time-picker.spec.ts +0 -77
- package/src/time-picker/time-picker.ts +0 -207
- package/src/toast/_examples/index.ts +0 -7
- package/src/toast/_examples/toast.default.example.ts +0 -37
- package/src/toast/_examples/toast.dismissible.example.ts +0 -38
- package/src/toast/_examples/toast.usage.example.ts +0 -57
- package/src/toast/_examples/toast.variants.example.ts +0 -43
- package/src/toast/_examples/toast.with-action.example.ts +0 -46
- package/src/toast/index.ts +0 -1
- package/src/toast/toast.css +0 -115
- package/src/toast/toast.playground.ts +0 -61
- package/src/toast/toast.ts +0 -168
- package/src/toggle/_examples/index.ts +0 -7
- package/src/toggle/_examples/toggle.checked.example.ts +0 -20
- package/src/toggle/_examples/toggle.default.example.ts +0 -20
- package/src/toggle/_examples/toggle.disabled.example.ts +0 -26
- package/src/toggle/_examples/toggle.usage.example.ts +0 -51
- package/src/toggle/_examples/toggle.with-label.example.ts +0 -30
- package/src/toggle/index.ts +0 -1
- package/src/toggle/toggle.css +0 -123
- package/src/toggle/toggle.playground.ts +0 -65
- package/src/toggle/toggle.ts +0 -113
- package/src/tooltip/_examples/index.ts +0 -9
- package/src/tooltip/_examples/tooltip.delays.example.ts +0 -16
- package/src/tooltip/_examples/tooltip.disabled.example.ts +0 -16
- package/src/tooltip/_examples/tooltip.example.ts +0 -16
- package/src/tooltip/_examples/tooltip.group.example.ts +0 -20
- package/src/tooltip/_examples/tooltip.rich.example.ts +0 -19
- package/src/tooltip/_examples/tooltip.sides.example.ts +0 -18
- package/src/tooltip/_examples/tooltip.usage.example.ts +0 -50
- package/src/tooltip/index.ts +0 -1
- package/src/tooltip/tooltip.css +0 -61
- package/src/tooltip/tooltip.playground.ts +0 -79
- package/src/tooltip/tooltip.spec.ts +0 -5
- package/src/tooltip/tooltip.ts +0 -102
- package/src/tree-select/_examples/index.ts +0 -8
- package/src/tree-select/_examples/tree-select.disabled.example.ts +0 -106
- package/src/tree-select/_examples/tree-select.example.ts +0 -65
- package/src/tree-select/_examples/tree-select.expanded.example.ts +0 -72
- package/src/tree-select/_examples/tree-select.field.example.ts +0 -77
- package/src/tree-select/_examples/tree-select.multi.example.ts +0 -73
- package/src/tree-select/_examples/tree-select.usage.example.ts +0 -85
- package/src/tree-select/index.ts +0 -1
- package/src/tree-select/tree-select.css +0 -220
- package/src/tree-select/tree-select.playground.ts +0 -83
- package/src/tree-select/tree-select.ts +0 -348
- package/src/typography/_examples/index.ts +0 -9
- package/src/typography/_examples/typography.blockquote.example.ts +0 -34
- package/src/typography/_examples/typography.code.example.ts +0 -32
- package/src/typography/_examples/typography.example.ts +0 -42
- package/src/typography/_examples/typography.lead.example.ts +0 -37
- package/src/typography/_examples/typography.muted.example.ts +0 -27
- package/src/typography/_examples/typography.truncate.example.ts +0 -41
- package/src/typography/_examples/typography.usage.example.ts +0 -44
- package/src/typography/index.ts +0 -8
- package/src/typography/typography.playground.ts +0 -101
- package/src/typography/typography.spec.ts +0 -70
- package/src/typography/typography.ts +0 -105
- package/tsconfig.lib.json +0 -25
- package/tsconfig.lib.prod.json +0 -17
- package/tsconfig.spec.json +0 -16
- package/vite.config.ts +0 -33
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
-
import { KjMenubarComponent, KjMenubarItemComponent } from '../menubar';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Default menubar — the canonical File / Edit / View arrangement.
|
|
6
|
-
*/
|
|
7
|
-
@Component({
|
|
8
|
-
selector: 'kj-menubar-example',
|
|
9
|
-
standalone: true,
|
|
10
|
-
imports: [KjMenubarComponent, KjMenubarItemComponent],
|
|
11
|
-
styles: [`:host { display: block; }`],
|
|
12
|
-
template: `
|
|
13
|
-
<kj-menubar kjAriaLabel="Application">
|
|
14
|
-
<kj-menubar-item>File</kj-menubar-item>
|
|
15
|
-
<kj-menubar-item>Edit</kj-menubar-item>
|
|
16
|
-
<kj-menubar-item>View</kj-menubar-item>
|
|
17
|
-
<kj-menubar-item>Help</kj-menubar-item>
|
|
18
|
-
</kj-menubar>
|
|
19
|
-
`,
|
|
20
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
21
|
-
})
|
|
22
|
-
export class KjMenubarExample {}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
-
import { KjMenubarComponent, KjMenubarItemComponent } from '../menubar';
|
|
3
|
-
import { KjKbdComponent } from '../../kbd/kbd';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Menubar items with trailing keyboard-shortcut hints. The `<kj-kbd>`
|
|
7
|
-
* sibling sits inline alongside the label and stays right-aligned via the
|
|
8
|
-
* menubar item's flex layout.
|
|
9
|
-
*/
|
|
10
|
-
@Component({
|
|
11
|
-
selector: 'kj-menubar-with-shortcuts-example',
|
|
12
|
-
standalone: true,
|
|
13
|
-
imports: [KjMenubarComponent, KjMenubarItemComponent, KjKbdComponent],
|
|
14
|
-
styles: [`:host { display: block; }`],
|
|
15
|
-
template: `
|
|
16
|
-
<kj-menubar kjAriaLabel="Application">
|
|
17
|
-
<kj-menubar-item>
|
|
18
|
-
File <kj-kbd>Alt+F</kj-kbd>
|
|
19
|
-
</kj-menubar-item>
|
|
20
|
-
<kj-menubar-item>
|
|
21
|
-
Edit <kj-kbd>Alt+E</kj-kbd>
|
|
22
|
-
</kj-menubar-item>
|
|
23
|
-
<kj-menubar-item>
|
|
24
|
-
View <kj-kbd>Alt+V</kj-kbd>
|
|
25
|
-
</kj-menubar-item>
|
|
26
|
-
<kj-menubar-item>
|
|
27
|
-
Help <kj-kbd>F1</kj-kbd>
|
|
28
|
-
</kj-menubar-item>
|
|
29
|
-
</kj-menubar>
|
|
30
|
-
`,
|
|
31
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
32
|
-
})
|
|
33
|
-
export class KjMenubarWithShortcutsExample {}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
-
import { KjMenubarComponent } from '../menubar';
|
|
3
|
-
import { KjDropdownMenuContent } from '../../dropdown-menu/dropdown-menu';
|
|
4
|
-
import {
|
|
5
|
-
KjDropdownMenuItem,
|
|
6
|
-
KjDropdownMenuSeparator,
|
|
7
|
-
KjDropdownMenuTrigger,
|
|
8
|
-
KjMenubarItem,
|
|
9
|
-
} from '@kouji-ui/core';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Menubar with nested submenus. Each item is a raw
|
|
13
|
-
* `<button kjMenubarItem kjDropdownMenuTrigger>` that composes the menubar
|
|
14
|
-
* item with the dropdown-menu trigger — activating the item opens the
|
|
15
|
-
* paired `<kj-dropdown-menu-content [kjFor]="…">` panel, which is portalled
|
|
16
|
-
* to `<body>` and anchored to the trigger.
|
|
17
|
-
*/
|
|
18
|
-
@Component({
|
|
19
|
-
selector: 'kj-menubar-with-submenu-example',
|
|
20
|
-
standalone: true,
|
|
21
|
-
imports: [
|
|
22
|
-
KjMenubarComponent,
|
|
23
|
-
KjMenubarItem,
|
|
24
|
-
KjDropdownMenuTrigger,
|
|
25
|
-
KjDropdownMenuContent,
|
|
26
|
-
KjDropdownMenuItem,
|
|
27
|
-
KjDropdownMenuSeparator,
|
|
28
|
-
],
|
|
29
|
-
styles: [`:host { display: block; }`],
|
|
30
|
-
template: `
|
|
31
|
-
<kj-menubar kjAriaLabel="Application">
|
|
32
|
-
<button
|
|
33
|
-
kjMenubarItem
|
|
34
|
-
kjDropdownMenuTrigger
|
|
35
|
-
#fileT="kjDropdownMenuTrigger"
|
|
36
|
-
class="kj-menubar-item"
|
|
37
|
-
>File</button>
|
|
38
|
-
<kj-dropdown-menu-content [kjFor]="fileT" kjSide="bottom" kjAlign="start">
|
|
39
|
-
<button kjDropdownMenuItem>New</button>
|
|
40
|
-
<button kjDropdownMenuItem>Open…</button>
|
|
41
|
-
<hr kjDropdownMenuSeparator />
|
|
42
|
-
<button kjDropdownMenuItem>Save</button>
|
|
43
|
-
<button kjDropdownMenuItem>Save As…</button>
|
|
44
|
-
</kj-dropdown-menu-content>
|
|
45
|
-
|
|
46
|
-
<button
|
|
47
|
-
kjMenubarItem
|
|
48
|
-
kjDropdownMenuTrigger
|
|
49
|
-
#editT="kjDropdownMenuTrigger"
|
|
50
|
-
class="kj-menubar-item"
|
|
51
|
-
>Edit</button>
|
|
52
|
-
<kj-dropdown-menu-content [kjFor]="editT" kjSide="bottom" kjAlign="start">
|
|
53
|
-
<button kjDropdownMenuItem>Undo</button>
|
|
54
|
-
<button kjDropdownMenuItem>Redo</button>
|
|
55
|
-
<hr kjDropdownMenuSeparator />
|
|
56
|
-
<button kjDropdownMenuItem>Cut</button>
|
|
57
|
-
<button kjDropdownMenuItem>Copy</button>
|
|
58
|
-
<button kjDropdownMenuItem>Paste</button>
|
|
59
|
-
</kj-dropdown-menu-content>
|
|
60
|
-
|
|
61
|
-
<button
|
|
62
|
-
kjMenubarItem
|
|
63
|
-
kjDropdownMenuTrigger
|
|
64
|
-
#viewT="kjDropdownMenuTrigger"
|
|
65
|
-
class="kj-menubar-item"
|
|
66
|
-
>View</button>
|
|
67
|
-
<kj-dropdown-menu-content [kjFor]="viewT" kjSide="bottom" kjAlign="start">
|
|
68
|
-
<button kjDropdownMenuItem>Zoom in</button>
|
|
69
|
-
<button kjDropdownMenuItem>Zoom out</button>
|
|
70
|
-
<button kjDropdownMenuItem>Reset zoom</button>
|
|
71
|
-
</kj-dropdown-menu-content>
|
|
72
|
-
</kj-menubar>
|
|
73
|
-
`,
|
|
74
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
75
|
-
})
|
|
76
|
-
export class KjMenubarWithSubmenuExample {}
|
package/src/menubar/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './menubar';
|
package/src/menubar/menubar.css
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
@layer kj.component {
|
|
2
|
-
.kj-menubar {
|
|
3
|
-
--kj-menubar-bg: var(--kj-bg-body);
|
|
4
|
-
--kj-menubar-fg: var(--kj-fg-default);
|
|
5
|
-
--kj-menubar-border-color: var(--kj-border-default);
|
|
6
|
-
--kj-menubar-radius: var(--kj-radius-box);
|
|
7
|
-
--kj-menubar-padding: var(--kj-space-2xs);
|
|
8
|
-
--kj-menubar-gap: var(--kj-space-2xs);
|
|
9
|
-
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: row;
|
|
12
|
-
align-items: stretch;
|
|
13
|
-
gap: var(--kj-menubar-gap);
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
background: var(--kj-menubar-bg);
|
|
16
|
-
color: var(--kj-menubar-fg);
|
|
17
|
-
border: var(--kj-border) solid var(--kj-menubar-border-color);
|
|
18
|
-
border-radius: var(--kj-menubar-radius);
|
|
19
|
-
padding: var(--kj-menubar-padding);
|
|
20
|
-
font: 0.875rem / 1.5 var(--kj-font-sans);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.kj-menubar-item {
|
|
24
|
-
--kj-menubar-item-padding-x: var(--kj-space-md);
|
|
25
|
-
--kj-menubar-item-padding-y: var(--kj-space-xs);
|
|
26
|
-
--kj-menubar-item-min-height: 2.75rem; /* 44px AAA touch target */
|
|
27
|
-
--kj-menubar-item-radius: var(--kj-radius-field);
|
|
28
|
-
--kj-menubar-item-hover-bg: var(--kj-bg-surface);
|
|
29
|
-
--kj-menubar-item-active-bg: var(--kj-bg-elevated);
|
|
30
|
-
|
|
31
|
-
display: inline-flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
justify-content: center;
|
|
34
|
-
min-height: var(--kj-menubar-item-min-height);
|
|
35
|
-
box-sizing: border-box;
|
|
36
|
-
padding: var(--kj-menubar-item-padding-y) var(--kj-menubar-item-padding-x);
|
|
37
|
-
margin: 0;
|
|
38
|
-
background: transparent;
|
|
39
|
-
color: inherit;
|
|
40
|
-
border: none;
|
|
41
|
-
border-radius: var(--kj-menubar-item-radius);
|
|
42
|
-
font: inherit;
|
|
43
|
-
line-height: 1;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
user-select: none;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.kj-menubar-item:hover:not([aria-disabled="true"]) {
|
|
49
|
-
background: var(--kj-menubar-item-hover-bg);
|
|
50
|
-
}
|
|
51
|
-
.kj-menubar-item:focus-visible {
|
|
52
|
-
outline: 2px solid var(--kj-fg-primary);
|
|
53
|
-
outline-offset: -2px;
|
|
54
|
-
}
|
|
55
|
-
.kj-menubar-item[data-state="active"] {
|
|
56
|
-
background: var(--kj-menubar-item-active-bg);
|
|
57
|
-
}
|
|
58
|
-
.kj-menubar-item[aria-disabled="true"] {
|
|
59
|
-
cursor: not-allowed;
|
|
60
|
-
opacity: 0.5;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
|
|
2
|
-
import { KjMenubarComponent, KjMenubarItemComponent } from './menubar';
|
|
3
|
-
import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Playground state — module-scope signals. Compound knobs cover item
|
|
7
|
-
* count, an optional disabled item, and the bar-level loop / aria-label
|
|
8
|
-
* affordances. Submenu disclosure stays out — pending the overlay-
|
|
9
|
-
* migration follow-up tracked on the menubar examples.
|
|
10
|
-
*/
|
|
11
|
-
const itemCount = signal<3 | 4 | 5>(4);
|
|
12
|
-
const disableLast = signal(true);
|
|
13
|
-
const loop = signal(false);
|
|
14
|
-
const ariaLabel = signal('Application');
|
|
15
|
-
|
|
16
|
-
const ITEMS = ['File', 'Edit', 'View', 'Help', 'Window'] as const;
|
|
17
|
-
|
|
18
|
-
@Component({
|
|
19
|
-
selector: 'kj-menubar-playground',
|
|
20
|
-
standalone: true,
|
|
21
|
-
imports: [KjMenubarComponent, KjMenubarItemComponent],
|
|
22
|
-
styles: [`
|
|
23
|
-
:host { display: flex; flex-direction: column; gap: var(--kj-space-md); align-items: flex-start; }
|
|
24
|
-
.kj-menubar-playground-readout { font: 0.875rem var(--kj-font-sans); color: var(--kj-fg-muted); }
|
|
25
|
-
.kj-menubar-playground-readout strong { color: var(--kj-fg-default); font-weight: 600; }
|
|
26
|
-
`],
|
|
27
|
-
template: `
|
|
28
|
-
<kj-menubar [kjLoop]="loop()" [kjAriaLabel]="ariaLabel()">
|
|
29
|
-
@for (item of visibleItems(); track item; let last = $last) {
|
|
30
|
-
<kj-menubar-item
|
|
31
|
-
[kjDisabled]="disableLast() && last"
|
|
32
|
-
(kjActivate)="lastSelected.set(item)"
|
|
33
|
-
>{{ item }}</kj-menubar-item>
|
|
34
|
-
}
|
|
35
|
-
</kj-menubar>
|
|
36
|
-
|
|
37
|
-
<p class="kj-menubar-playground-readout">
|
|
38
|
-
Last selected: <strong>{{ lastSelected() ?? '—' }}</strong>
|
|
39
|
-
</p>
|
|
40
|
-
`,
|
|
41
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
42
|
-
})
|
|
43
|
-
export class KjMenubarPlaygroundDemo {
|
|
44
|
-
protected readonly itemCount = itemCount;
|
|
45
|
-
protected readonly disableLast = disableLast;
|
|
46
|
-
protected readonly loop = loop;
|
|
47
|
-
protected readonly ariaLabel = ariaLabel;
|
|
48
|
-
protected readonly lastSelected = signal<string | null>(null);
|
|
49
|
-
|
|
50
|
-
protected readonly visibleItems = computed(() =>
|
|
51
|
-
ITEMS.slice(0, itemCount()),
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export const PLAYGROUND: PlaygroundFile = {
|
|
57
|
-
component: KjMenubarPlaygroundDemo,
|
|
58
|
-
state: {
|
|
59
|
-
itemCount: itemCount as unknown as ReturnType<typeof signal>,
|
|
60
|
-
disableLast: disableLast as unknown as ReturnType<typeof signal>,
|
|
61
|
-
loop: loop as unknown as ReturnType<typeof signal>,
|
|
62
|
-
ariaLabel: ariaLabel as unknown as ReturnType<typeof signal>,
|
|
63
|
-
},
|
|
64
|
-
controls: [
|
|
65
|
-
{ kind: 'chips', name: 'itemCount', label: 'items', options: [3, 4, 5] },
|
|
66
|
-
{ kind: 'text', name: 'ariaLabel', label: 'aria-label' },
|
|
67
|
-
{ kind: 'toggle', name: 'disableLast', label: 'disable last' },
|
|
68
|
-
{ kind: 'toggle', name: 'loop', label: 'loop focus' },
|
|
69
|
-
],
|
|
70
|
-
snippet: (values) => {
|
|
71
|
-
const s = values as {
|
|
72
|
-
itemCount: number;
|
|
73
|
-
disableLast: boolean;
|
|
74
|
-
loop: boolean;
|
|
75
|
-
ariaLabel: string;
|
|
76
|
-
};
|
|
77
|
-
const attrs: string[] = [`kjAriaLabel="${s.ariaLabel}"`];
|
|
78
|
-
if (s.loop) attrs.push('[kjLoop]="true"');
|
|
79
|
-
const rows = Array.from(ITEMS.slice(0, s.itemCount))
|
|
80
|
-
.map((label, i, arr) => {
|
|
81
|
-
const isLast = i === arr.length - 1;
|
|
82
|
-
const disabled = s.disableLast && isLast ? ' [kjDisabled]="true"' : '';
|
|
83
|
-
return ` <kj-menubar-item${disabled} (kjActivate)="lastSelected.set('${label}')">${label}</kj-menubar-item>`;
|
|
84
|
-
})
|
|
85
|
-
.join('\n');
|
|
86
|
-
return [
|
|
87
|
-
`<kj-menubar`,
|
|
88
|
-
` ${attrs.join('\n ')}`,
|
|
89
|
-
`>`,
|
|
90
|
-
rows,
|
|
91
|
-
`</kj-menubar>`,
|
|
92
|
-
'',
|
|
93
|
-
`<p>Last selected: <strong>{{ lastSelected() ?? '—' }}</strong></p>`,
|
|
94
|
-
].join('\n');
|
|
95
|
-
},
|
|
96
|
-
};
|
package/src/menubar/menubar.ts
DELETED
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChangeDetectionStrategy,
|
|
3
|
-
Component,
|
|
4
|
-
ViewEncapsulation,
|
|
5
|
-
booleanAttribute,
|
|
6
|
-
input,
|
|
7
|
-
output,
|
|
8
|
-
} from '@angular/core';
|
|
9
|
-
import {
|
|
10
|
-
KjMenubar,
|
|
11
|
-
KjMenubarItem,
|
|
12
|
-
} from '@kouji-ui/core';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Styled wrapper around the headless `KjMenubar` directive.
|
|
16
|
-
*
|
|
17
|
-
* Renders an inner `<nav kjMenubar>` so theme tokens land on the bar
|
|
18
|
-
* element. The component projects its bar items as content; the bar items
|
|
19
|
-
* themselves use `<kj-menubar-item>` (styled wrapper) or `<button
|
|
20
|
-
* kjMenubarItem>` directly.
|
|
21
|
-
*
|
|
22
|
-
* @doc-example Default
|
|
23
|
-
* The canonical File / Edit / View bar — the bare-minimum recipe.
|
|
24
|
-
* @doc-file menubar.example.ts
|
|
25
|
-
* @doc-example Usage
|
|
26
|
-
* A walkthrough of the most common menubar usages — action items and a
|
|
27
|
-
* disabled item. Use this as the copy-paste starting point.
|
|
28
|
-
* @doc-file menubar.usage.example.ts
|
|
29
|
-
* @doc-example With shortcuts
|
|
30
|
-
* Trailing `<kj-kbd>` hints render aligned to the right of each item label.
|
|
31
|
-
* @doc-file menubar.with-shortcuts.example.ts
|
|
32
|
-
* @doc-example With submenu
|
|
33
|
-
* Nested submenu trigger pattern (pending overlay-migration follow-up).
|
|
34
|
-
* @doc-file menubar.with-submenu.example.ts
|
|
35
|
-
* @doc-example Disabled item
|
|
36
|
-
* `[kjDisabled]="true"` drops the item from the keyboard cycle and dims it.
|
|
37
|
-
* @doc-file menubar.disabled-item.example.ts
|
|
38
|
-
*
|
|
39
|
-
* @doc-keyboard
|
|
40
|
-
* ArrowLeft|ArrowRight — Moves focus between menubar items (wraps when [kjLoop]="true")
|
|
41
|
-
* Home — Moves focus to the first menubar item
|
|
42
|
-
* End — Moves focus to the last menubar item
|
|
43
|
-
* Enter|Space — Activates the focused item
|
|
44
|
-
* Tab — Moves focus out of the bar to the next focusable element
|
|
45
|
-
*
|
|
46
|
-
* @doc-aria
|
|
47
|
-
* role="menubar" — On the host `<nav>` (provided by the directive)
|
|
48
|
-
* aria-label — Wired from `kjAriaLabel` so AT announces the bar's purpose
|
|
49
|
-
* aria-orientation — Reflects horizontal orientation
|
|
50
|
-
* aria-disabled — Reflected on items when `kjDisabled` is true
|
|
51
|
-
* data-active — Mirrors the active/open state for theme hooks
|
|
52
|
-
*
|
|
53
|
-
* @doc-touch
|
|
54
|
-
* Items use a 2.75rem (44px) min-height by default — meets WCAG 2.5.5 for
|
|
55
|
-
* touch-first surfaces. Override `--kj-menubar-item-min-height` for denser
|
|
56
|
-
* keyboard-only desktop chrome.
|
|
57
|
-
*
|
|
58
|
-
* @doc-a11y
|
|
59
|
-
* Follows the WAI-ARIA menubar pattern. Focus cycles left/right within the
|
|
60
|
-
* bar; submenu disclosure is opt-in via `kjAutoDisclose`. The bar always
|
|
61
|
-
* exposes a programmatic name — supply `kjAriaLabel` even when a visible
|
|
62
|
-
* heading is nearby.
|
|
63
|
-
*
|
|
64
|
-
* @doc-related dropdown-menu,command-palette,tabs
|
|
65
|
-
*
|
|
66
|
-
* @doc-css-var
|
|
67
|
-
* --kj-menubar-bg — Bar background fill. Defaults to --kj-bg-body.
|
|
68
|
-
* --kj-menubar-fg — Bar foreground (label) color. Defaults to --kj-fg-default.
|
|
69
|
-
* --kj-menubar-border-color — Bar outer border color. Inherits --kj-border-default.
|
|
70
|
-
* --kj-menubar-radius — Bar corner radius. Inherits --kj-radius-box.
|
|
71
|
-
* --kj-menubar-padding — Inner padding around the item row.
|
|
72
|
-
* --kj-menubar-gap — Gap between adjacent menubar items.
|
|
73
|
-
* --kj-menubar-item-padding-x — Per-item horizontal padding.
|
|
74
|
-
* --kj-menubar-item-padding-y — Per-item vertical padding.
|
|
75
|
-
* --kj-menubar-item-min-height — Per-item min height. 2.75rem for WCAG 2.5.5.
|
|
76
|
-
* --kj-menubar-item-radius — Per-item corner radius. Inherits --kj-radius-field.
|
|
77
|
-
* --kj-menubar-item-hover-bg — Item hover background fill.
|
|
78
|
-
* --kj-menubar-item-active-bg — Item background when its menu is open.
|
|
79
|
-
*
|
|
80
|
-
* @doc-category Library/Navigation
|
|
81
|
-
* @doc
|
|
82
|
-
* @doc-name menubar
|
|
83
|
-
* @doc-description Themed desktop-style application menubar with arrow-key navigation and dropdown submenus.
|
|
84
|
-
* @doc-is-main
|
|
85
|
-
*/
|
|
86
|
-
@Component({
|
|
87
|
-
selector: 'kj-menubar',
|
|
88
|
-
standalone: true,
|
|
89
|
-
// KjMenubar must live on this component's host element (not on an
|
|
90
|
-
// inner `<nav>`) so projected `<kj-menubar-item>` children can
|
|
91
|
-
// resolve KJ_MENUBAR through their declaration-tree element-injector
|
|
92
|
-
// walk. Composing via hostDirectives places the directive — and the
|
|
93
|
-
// KJ_MENUBAR provider — exactly there.
|
|
94
|
-
hostDirectives: [
|
|
95
|
-
{
|
|
96
|
-
directive: KjMenubar,
|
|
97
|
-
inputs: [
|
|
98
|
-
'kjLoop',
|
|
99
|
-
'kjAutoDisclose',
|
|
100
|
-
'kjAutoDiscloseDelayMs',
|
|
101
|
-
'kjAriaLabel',
|
|
102
|
-
],
|
|
103
|
-
},
|
|
104
|
-
],
|
|
105
|
-
template: `<ng-content />`,
|
|
106
|
-
styleUrl: './menubar.css',
|
|
107
|
-
encapsulation: ViewEncapsulation.None,
|
|
108
|
-
host: {
|
|
109
|
-
'class': 'kj-menubar',
|
|
110
|
-
},
|
|
111
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
112
|
-
})
|
|
113
|
-
export class KjMenubarComponent {
|
|
114
|
-
// Inputs (kjLoop, kjAutoDisclose, kjAutoDiscloseDelayMs, kjAriaLabel)
|
|
115
|
-
// are exposed via the composed `KjMenubar` host directive above.
|
|
116
|
-
// Re-declaring them on this class would register them twice in the
|
|
117
|
-
// component's input metadata, which the docs extractor renders as
|
|
118
|
-
// duplicated rows and which triggers NG0955 (duplicate track keys)
|
|
119
|
-
// when the `@for` walking the inputs uses the input name as its key.
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* Styled wrapper around `KjMenubarItem`. Renders a real `<button>` with
|
|
124
|
-
* the `[kjMenubarItem]` directive applied.
|
|
125
|
-
*
|
|
126
|
-
* TODO: menubar+dropdown-menu wiring pending overlay-migration follow-up.
|
|
127
|
-
* In this version, menubar items are plain action buttons without submenu
|
|
128
|
-
* support. Submenu wiring will be reintroduced via the new dropdown-menu
|
|
129
|
-
* API (`<kj-dropdown-menu-content [kjFor]="t">` on the panel side).
|
|
130
|
-
*
|
|
131
|
-
* @doc-category Library/Navigation
|
|
132
|
-
* @doc
|
|
133
|
-
* @doc-name menubar
|
|
134
|
-
*/
|
|
135
|
-
@Component({
|
|
136
|
-
selector: 'kj-menubar-item',
|
|
137
|
-
standalone: true,
|
|
138
|
-
imports: [KjMenubarItem],
|
|
139
|
-
template: `
|
|
140
|
-
<button
|
|
141
|
-
type="button"
|
|
142
|
-
kjMenubarItem
|
|
143
|
-
class="kj-menubar-item"
|
|
144
|
-
[kjDisabled]="kjDisabled()"
|
|
145
|
-
(kjActivate)="kjActivate.emit()"
|
|
146
|
-
>
|
|
147
|
-
<ng-content />
|
|
148
|
-
</button>
|
|
149
|
-
`,
|
|
150
|
-
styleUrl: './menubar.css',
|
|
151
|
-
encapsulation: ViewEncapsulation.None,
|
|
152
|
-
host: { style: 'display: contents;' },
|
|
153
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
154
|
-
})
|
|
155
|
-
export class KjMenubarItemComponent {
|
|
156
|
-
/** Disable the item. Reflects `aria-disabled`; popup never opens. */
|
|
157
|
-
readonly kjDisabled = input(false, { transform: booleanAttribute });
|
|
158
|
-
/** Fires when the item is activated (click / Enter / Space). */
|
|
159
|
-
readonly kjActivate = output<void>();
|
|
160
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { KjMenubarComponent, KjMenubarItemComponent } from './menubar';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* A walkthrough of the most common menubar usages — a single bar with action
|
|
6
|
-
* items, one disabled item, and an explicit `kjAriaLabel`. Use this as the
|
|
7
|
-
* copy-paste starting point for an application-level menubar.
|
|
8
|
-
*
|
|
9
|
-
* TODO(overlay-migration): extend with submenu triggers once the dropdown-menu
|
|
10
|
-
* compound exposes its `[kjFor]` content panel via the new overlay primitives.
|
|
11
|
-
*/
|
|
12
|
-
@Component({
|
|
13
|
-
selector: 'kj-menubar-usage-example',
|
|
14
|
-
standalone: true,
|
|
15
|
-
imports: [KjMenubarComponent, KjMenubarItemComponent],
|
|
16
|
-
styles: [
|
|
17
|
-
`
|
|
18
|
-
:host {
|
|
19
|
-
display: block;
|
|
20
|
-
}
|
|
21
|
-
`,
|
|
22
|
-
],
|
|
23
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
24
|
-
template: `
|
|
25
|
-
<kj-menubar kjAriaLabel="Application">
|
|
26
|
-
<kj-menubar-item>File</kj-menubar-item>
|
|
27
|
-
<kj-menubar-item>Edit</kj-menubar-item>
|
|
28
|
-
<kj-menubar-item>View</kj-menubar-item>
|
|
29
|
-
<kj-menubar-item [kjDisabled]="true">Help</kj-menubar-item>
|
|
30
|
-
</kj-menubar>
|
|
31
|
-
`,
|
|
32
|
-
})
|
|
33
|
-
export class KjMenubarUsageExample {}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
// AUTO-GENERATED by scripts/migrate-examples.mjs
|
|
2
|
-
// One barrel per component folder — used by the docs app as a lazy chunk.
|
|
3
|
-
export { KjNumberInputCurrencyExample } from './number-input.currency.example';
|
|
4
|
-
export { KjNumberInputDecimalExample } from './number-input.decimal.example';
|
|
5
|
-
export { KjNumberInputExample } from './number-input.example';
|
|
6
|
-
export { KjNumberInputMinMaxExample } from './number-input.min-max.example';
|
|
7
|
-
export { KjNumberInputWithStepperExample } from './number-input.with-stepper.example';
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { KjNumberInputComponent } from '../number-input';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Currency formatting via `Intl.NumberFormat`. The displayed value shows the
|
|
6
|
-
* currency symbol and locale-aware grouping; the stored model stays a clean
|
|
7
|
-
* `number` (e.g. `1234.5`).
|
|
8
|
-
*/
|
|
9
|
-
@Component({
|
|
10
|
-
selector: 'kj-number-input-currency-example',
|
|
11
|
-
standalone: true,
|
|
12
|
-
imports: [KjNumberInputComponent],
|
|
13
|
-
styles: [
|
|
14
|
-
`
|
|
15
|
-
:host {
|
|
16
|
-
display: block;
|
|
17
|
-
}
|
|
18
|
-
`,
|
|
19
|
-
],
|
|
20
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
21
|
-
template: `
|
|
22
|
-
<kj-number-input
|
|
23
|
-
[(kjValue)]="price"
|
|
24
|
-
kjFormat="currency"
|
|
25
|
-
kjCurrency="USD"
|
|
26
|
-
kjLocale="en-US"
|
|
27
|
-
[kjMin]="0"
|
|
28
|
-
[kjStep]="0.01"
|
|
29
|
-
kjAriaLabel="Price"
|
|
30
|
-
/>
|
|
31
|
-
`,
|
|
32
|
-
})
|
|
33
|
-
export class KjNumberInputCurrencyExample {
|
|
34
|
-
readonly price = signal<number>(1234.5);
|
|
35
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { KjNumberInputComponent } from '../number-input';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Demonstrates fractional precision via `kjMinimumFractionDigits` /
|
|
6
|
-
* `kjMaximumFractionDigits` and a decimal step (`0.1`).
|
|
7
|
-
*/
|
|
8
|
-
@Component({
|
|
9
|
-
selector: 'kj-number-input-decimal-example',
|
|
10
|
-
standalone: true,
|
|
11
|
-
imports: [KjNumberInputComponent],
|
|
12
|
-
styles: [
|
|
13
|
-
`
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
`,
|
|
18
|
-
],
|
|
19
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
20
|
-
template: `
|
|
21
|
-
<kj-number-input
|
|
22
|
-
[(kjValue)]="weight"
|
|
23
|
-
[kjMin]="0"
|
|
24
|
-
[kjMax]="200"
|
|
25
|
-
[kjStep]="0.1"
|
|
26
|
-
[kjMinimumFractionDigits]="1"
|
|
27
|
-
[kjMaximumFractionDigits]="2"
|
|
28
|
-
kjAriaLabel="Weight in kilograms"
|
|
29
|
-
/>
|
|
30
|
-
`,
|
|
31
|
-
})
|
|
32
|
-
export class KjNumberInputDecimalExample {
|
|
33
|
-
readonly weight = signal<number>(72.5);
|
|
34
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { KjNumberInputComponent } from '../number-input';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Default usage example for KjNumberInputComponent.
|
|
6
|
-
* Rendered live in the docs and as code in the example panel.
|
|
7
|
-
*/
|
|
8
|
-
@Component({
|
|
9
|
-
selector: 'kj-number-input-example',
|
|
10
|
-
standalone: true,
|
|
11
|
-
imports: [KjNumberInputComponent],
|
|
12
|
-
styles: [
|
|
13
|
-
`
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
`,
|
|
18
|
-
],
|
|
19
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
20
|
-
template: ` <kj-number-input [(kjValue)]="qty" kjAriaLabel="Quantity" /> `,
|
|
21
|
-
})
|
|
22
|
-
export class KjNumberInputExample {
|
|
23
|
-
readonly qty = signal<number>(3);
|
|
24
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { KjNumberInputComponent } from '../number-input';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Demonstrates clamp-on-commit + snap-to-step. Bounds are 0..100 with step 5;
|
|
6
|
-
* values typed off the lattice snap on the next stepper press, and PageUp /
|
|
7
|
-
* PageDown jump by 50.
|
|
8
|
-
*/
|
|
9
|
-
@Component({
|
|
10
|
-
selector: 'kj-number-input-min-max-example',
|
|
11
|
-
standalone: true,
|
|
12
|
-
imports: [KjNumberInputComponent],
|
|
13
|
-
styles: [
|
|
14
|
-
`
|
|
15
|
-
:host {
|
|
16
|
-
display: block;
|
|
17
|
-
}
|
|
18
|
-
`,
|
|
19
|
-
],
|
|
20
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
21
|
-
template: `
|
|
22
|
-
<kj-number-input
|
|
23
|
-
[(kjValue)]="percentage"
|
|
24
|
-
[kjMin]="0"
|
|
25
|
-
[kjMax]="100"
|
|
26
|
-
[kjStep]="5"
|
|
27
|
-
kjAriaLabel="Percentage"
|
|
28
|
-
/>
|
|
29
|
-
`,
|
|
30
|
-
})
|
|
31
|
-
export class KjNumberInputMinMaxExample {
|
|
32
|
-
readonly percentage = signal<number>(50);
|
|
33
|
-
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { KjNumberInputComponent } from '../number-input';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Demonstrates the canonical stepper layout. The wrapper renders the +/-
|
|
6
|
-
* buttons internally; consumers only set bounds + step.
|
|
7
|
-
*/
|
|
8
|
-
@Component({
|
|
9
|
-
selector: 'kj-number-input-with-stepper-example',
|
|
10
|
-
standalone: true,
|
|
11
|
-
imports: [KjNumberInputComponent],
|
|
12
|
-
styles: [
|
|
13
|
-
`
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
.row {
|
|
18
|
-
display: flex;
|
|
19
|
-
gap: var(--kj-space-md);
|
|
20
|
-
align-items: center;
|
|
21
|
-
}
|
|
22
|
-
label {
|
|
23
|
-
font: 0.875rem var(--kj-font-sans);
|
|
24
|
-
color: var(--kj-fg-default);
|
|
25
|
-
}
|
|
26
|
-
`,
|
|
27
|
-
],
|
|
28
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
29
|
-
template: `
|
|
30
|
-
<div class="row">
|
|
31
|
-
<label for="number-input-servings">Servings</label>
|
|
32
|
-
<kj-number-input
|
|
33
|
-
id="number-input-servings"
|
|
34
|
-
[(kjValue)]="servings"
|
|
35
|
-
[kjMin]="1"
|
|
36
|
-
[kjMax]="20"
|
|
37
|
-
[kjStep]="1"
|
|
38
|
-
kjAriaLabel="Servings"
|
|
39
|
-
/>
|
|
40
|
-
</div>
|
|
41
|
-
`,
|
|
42
|
-
})
|
|
43
|
-
export class KjNumberInputWithStepperExample {
|
|
44
|
-
readonly servings = signal<number>(4);
|
|
45
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './number-input';
|