kemet-ui 3.0.1 → 4.0.0
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/custom-elements.json +2671 -1274
- package/dist/{components/kemet-accordion/styles.js → styles/elements/accordion.ts} +4 -3
- package/dist/{components/kemet-alert/styles.js → styles/elements/alert.ts} +53 -3
- package/dist/{components/kemet-avatar/styles.js → styles/elements/avatar.ts} +26 -12
- package/dist/styles/elements/badge.ts +92 -0
- package/dist/{components/kemet-button/styles.js → styles/elements/button.ts} +32 -13
- package/dist/{components/kemet-card/styles.js → styles/elements/card.ts} +3 -3
- package/dist/{components/kemet-carousel/styles.js → styles/elements/carousel.ts} +2 -2
- package/dist/{components/kemet-checkbox/styles.js → styles/elements/checkbox.ts} +2 -2
- package/dist/{components/kemet-combo/styles.js → styles/elements/combo.ts} +2 -2
- package/dist/{components/kemet-drawer/styles.js → styles/elements/drawer.ts} +5 -3
- package/dist/{components/kemet-fab/styles.js → styles/elements/fab.ts} +2 -2
- package/dist/{components/kemet-field/styles.js → styles/elements/field.ts} +2 -14
- package/dist/{components/kemet-flipcard/styles.js → styles/elements/flipcard.ts} +2 -2
- package/dist/styles/elements/icon-lucide.ts +7 -0
- package/dist/{components/kemet-input/styles.js → styles/elements/input.ts} +36 -12
- package/dist/{components/kemet-modal/styles.js → styles/elements/modal.ts} +27 -6
- package/dist/styles/elements/multi-input.ts +125 -0
- package/dist/{components/kemet-password/styles.js → styles/elements/password.ts} +3 -3
- package/dist/{components/kemet-popper/styles.effects.js → styles/elements/popper.ts} +52 -9
- package/dist/{components/kemet-radio/styles.js → styles/elements/radio.ts} +4 -3
- package/dist/{components/kemet-rotator/styles.js → styles/elements/rotator.ts} +2 -2
- package/dist/{components/kemet-scroll-nav/styles.js → styles/elements/scroll-nav.ts} +2 -2
- package/dist/{components/kemet-scroll-snap/styles.js → styles/elements/scroll-snap.ts} +4 -3
- package/dist/{components/kemet-select/styles.js → styles/elements/select.ts} +34 -10
- package/dist/{components/kemet-sortable/styles.js → styles/elements/sortable.ts} +4 -3
- package/dist/{components/kemet-tabs/styles.js → styles/elements/tabs.ts} +7 -5
- package/dist/{components/kemet-textarea/styles.js → styles/elements/textarea.ts} +29 -4
- package/dist/styles/elements/timer.ts +13 -0
- package/dist/{components/kemet-toggle/styles.js → styles/elements/toggle.ts} +2 -2
- package/dist/{components/kemet-tooltip/styles.js → styles/elements/tooltip.ts} +2 -2
- package/dist/{components/kemet-tracker/styles.js → styles/elements/tracker.ts} +2 -2
- package/dist/{components/kemet-upload/styles.js → styles/elements/upload.ts} +6 -4
- package/dist/styles/kemet.base.css +24 -2
- package/dist/styles/kemet.base.css.map +1 -1
- package/dist/styles/kemet.core.css +266 -2
- package/dist/styles/kemet.core.css.map +1 -1
- package/dist/styles/shared/_config.scss +25 -1
- package/dist/styles/shared/_helpers.scss +19 -18
- package/package.json +76 -80
- package/types/global.d.ts +3 -0
- package/types/jsx.d.ts +140 -0
- package/dist/components/kemet-accordion/kemet-accordion-panel.d.ts +0 -50
- package/dist/components/kemet-accordion/kemet-accordion-panel.js +0 -137
- package/dist/components/kemet-accordion/kemet-accordion-panel.js.map +0 -1
- package/dist/components/kemet-accordion/kemet-accordion.d.ts +0 -38
- package/dist/components/kemet-accordion/kemet-accordion.js +0 -138
- package/dist/components/kemet-accordion/kemet-accordion.js.map +0 -1
- package/dist/components/kemet-accordion/stories.d.ts +0 -12
- package/dist/components/kemet-accordion/stories.js +0 -47
- package/dist/components/kemet-accordion/stories.js.map +0 -1
- package/dist/components/kemet-accordion/styles.d.ts +0 -2
- package/dist/components/kemet-accordion/styles.js.map +0 -1
- package/dist/components/kemet-alert/docs/stories.d.ts +0 -21
- package/dist/components/kemet-alert/docs/stories.js +0 -221
- package/dist/components/kemet-alert/docs/stories.js.map +0 -1
- package/dist/components/kemet-alert/kemet-alert.d.ts +0 -51
- package/dist/components/kemet-alert/kemet-alert.js +0 -111
- package/dist/components/kemet-alert/kemet-alert.js.map +0 -1
- package/dist/components/kemet-alert/styles.d.ts +0 -1
- package/dist/components/kemet-alert/styles.js.map +0 -1
- package/dist/components/kemet-alert/types.d.ts +0 -1
- package/dist/components/kemet-alert/types.js +0 -2
- package/dist/components/kemet-alert/types.js.map +0 -1
- package/dist/components/kemet-avatar/docs/stories.d.ts +0 -15
- package/dist/components/kemet-avatar/docs/stories.js +0 -108
- package/dist/components/kemet-avatar/docs/stories.js.map +0 -1
- package/dist/components/kemet-avatar/kemet-avatar.d.ts +0 -43
- package/dist/components/kemet-avatar/kemet-avatar.js +0 -78
- package/dist/components/kemet-avatar/kemet-avatar.js.map +0 -1
- package/dist/components/kemet-avatar/kemet-avatars.d.ts +0 -20
- package/dist/components/kemet-avatar/kemet-avatars.js +0 -25
- package/dist/components/kemet-avatar/kemet-avatars.js.map +0 -1
- package/dist/components/kemet-avatar/styles.d.ts +0 -2
- package/dist/components/kemet-avatar/styles.js.map +0 -1
- package/dist/components/kemet-badge/docs/stories.d.ts +0 -15
- package/dist/components/kemet-badge/docs/stories.js +0 -76
- package/dist/components/kemet-badge/docs/stories.js.map +0 -1
- package/dist/components/kemet-badge/kemet-badge.d.ts +0 -31
- package/dist/components/kemet-badge/kemet-badge.js +0 -55
- package/dist/components/kemet-badge/kemet-badge.js.map +0 -1
- package/dist/components/kemet-badge/styles.d.ts +0 -1
- package/dist/components/kemet-badge/styles.js +0 -42
- package/dist/components/kemet-badge/styles.js.map +0 -1
- package/dist/components/kemet-badge/types.d.ts +0 -1
- package/dist/components/kemet-badge/types.js +0 -2
- package/dist/components/kemet-badge/types.js.map +0 -1
- package/dist/components/kemet-button/docs/stories.d.ts +0 -21
- package/dist/components/kemet-button/docs/stories.js +0 -112
- package/dist/components/kemet-button/docs/stories.js.map +0 -1
- package/dist/components/kemet-button/kemet-button.d.ts +0 -89
- package/dist/components/kemet-button/kemet-button.js +0 -153
- package/dist/components/kemet-button/kemet-button.js.map +0 -1
- package/dist/components/kemet-button/styles.d.ts +0 -1
- package/dist/components/kemet-button/styles.js.map +0 -1
- package/dist/components/kemet-button/types.d.ts +0 -1
- package/dist/components/kemet-button/types.js +0 -2
- package/dist/components/kemet-button/types.js.map +0 -1
- package/dist/components/kemet-card/docs/stories.d.ts +0 -19
- package/dist/components/kemet-card/docs/stories.js +0 -120
- package/dist/components/kemet-card/docs/stories.js.map +0 -1
- package/dist/components/kemet-card/kemet-card.d.ts +0 -47
- package/dist/components/kemet-card/kemet-card.js +0 -65
- package/dist/components/kemet-card/kemet-card.js.map +0 -1
- package/dist/components/kemet-card/styles.d.ts +0 -1
- package/dist/components/kemet-card/styles.js.map +0 -1
- package/dist/components/kemet-carousel/docs/stories.d.ts +0 -23
- package/dist/components/kemet-carousel/docs/stories.js +0 -180
- package/dist/components/kemet-carousel/docs/stories.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-current.d.ts +0 -26
- package/dist/components/kemet-carousel/kemet-carousel-current.js +0 -44
- package/dist/components/kemet-carousel/kemet-carousel-current.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-first.d.ts +0 -25
- package/dist/components/kemet-carousel/kemet-carousel-first.js +0 -50
- package/dist/components/kemet-carousel/kemet-carousel-first.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-last.d.ts +0 -25
- package/dist/components/kemet-carousel/kemet-carousel-last.js +0 -50
- package/dist/components/kemet-carousel/kemet-carousel-last.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-link.d.ts +0 -31
- package/dist/components/kemet-carousel/kemet-carousel-link.js +0 -64
- package/dist/components/kemet-carousel/kemet-carousel-link.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-next.d.ts +0 -25
- package/dist/components/kemet-carousel/kemet-carousel-next.js +0 -50
- package/dist/components/kemet-carousel/kemet-carousel-next.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-prev.d.ts +0 -25
- package/dist/components/kemet-carousel/kemet-carousel-prev.js +0 -50
- package/dist/components/kemet-carousel/kemet-carousel-prev.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-slide.d.ts +0 -29
- package/dist/components/kemet-carousel/kemet-carousel-slide.js +0 -53
- package/dist/components/kemet-carousel/kemet-carousel-slide.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel-total.d.ts +0 -26
- package/dist/components/kemet-carousel/kemet-carousel-total.js +0 -44
- package/dist/components/kemet-carousel/kemet-carousel-total.js.map +0 -1
- package/dist/components/kemet-carousel/kemet-carousel.d.ts +0 -118
- package/dist/components/kemet-carousel/kemet-carousel.js +0 -429
- package/dist/components/kemet-carousel/kemet-carousel.js.map +0 -1
- package/dist/components/kemet-carousel/styles.d.ts +0 -1
- package/dist/components/kemet-carousel/styles.js.map +0 -1
- package/dist/components/kemet-checkbox/docs/stories.d.ts +0 -13
- package/dist/components/kemet-checkbox/docs/stories.js +0 -45
- package/dist/components/kemet-checkbox/docs/stories.js.map +0 -1
- package/dist/components/kemet-checkbox/kemet-checkbox.d.ts +0 -71
- package/dist/components/kemet-checkbox/kemet-checkbox.js +0 -192
- package/dist/components/kemet-checkbox/kemet-checkbox.js.map +0 -1
- package/dist/components/kemet-checkbox/styles.d.ts +0 -1
- package/dist/components/kemet-checkbox/styles.js.map +0 -1
- package/dist/components/kemet-checkbox/types.d.ts +0 -15
- package/dist/components/kemet-checkbox/types.js +0 -2
- package/dist/components/kemet-checkbox/types.js.map +0 -1
- package/dist/components/kemet-combo/docs/stories.d.ts +0 -11
- package/dist/components/kemet-combo/docs/stories.js +0 -32
- package/dist/components/kemet-combo/docs/stories.js.map +0 -1
- package/dist/components/kemet-combo/kemet-combo.d.ts +0 -50
- package/dist/components/kemet-combo/kemet-combo.js +0 -158
- package/dist/components/kemet-combo/kemet-combo.js.map +0 -1
- package/dist/components/kemet-combo/styles.d.ts +0 -1
- package/dist/components/kemet-combo/styles.js.map +0 -1
- package/dist/components/kemet-count/docs/stories.d.ts +0 -11
- package/dist/components/kemet-count/docs/stories.js +0 -36
- package/dist/components/kemet-count/docs/stories.js.map +0 -1
- package/dist/components/kemet-count/kemet-count.d.ts +0 -39
- package/dist/components/kemet-count/kemet-count.js +0 -98
- package/dist/components/kemet-count/kemet-count.js.map +0 -1
- package/dist/components/kemet-draggable/docs/stories.d.ts +0 -10
- package/dist/components/kemet-draggable/docs/stories.js +0 -25
- package/dist/components/kemet-draggable/docs/stories.js.map +0 -1
- package/dist/components/kemet-draggable/kemet-draggable.d.ts +0 -49
- package/dist/components/kemet-draggable/kemet-draggable.js +0 -138
- package/dist/components/kemet-draggable/kemet-draggable.js.map +0 -1
- package/dist/components/kemet-drawer/docs/stories.d.ts +0 -16
- package/dist/components/kemet-drawer/docs/stories.js +0 -90
- package/dist/components/kemet-drawer/docs/stories.js.map +0 -1
- package/dist/components/kemet-drawer/kemet-drawer.d.ts +0 -48
- package/dist/components/kemet-drawer/kemet-drawer.js +0 -95
- package/dist/components/kemet-drawer/kemet-drawer.js.map +0 -1
- package/dist/components/kemet-drawer/styles.d.ts +0 -2
- package/dist/components/kemet-drawer/styles.js.map +0 -1
- package/dist/components/kemet-drawer/types.d.ts +0 -2
- package/dist/components/kemet-drawer/types.js +0 -2
- package/dist/components/kemet-drawer/types.js.map +0 -1
- package/dist/components/kemet-fab/docs/stories.d.ts +0 -14
- package/dist/components/kemet-fab/docs/stories.js +0 -78
- package/dist/components/kemet-fab/docs/stories.js.map +0 -1
- package/dist/components/kemet-fab/kemet-fab.d.ts +0 -49
- package/dist/components/kemet-fab/kemet-fab.js +0 -107
- package/dist/components/kemet-fab/kemet-fab.js.map +0 -1
- package/dist/components/kemet-fab/styles.d.ts +0 -1
- package/dist/components/kemet-fab/styles.js.map +0 -1
- package/dist/components/kemet-fab/types.d.ts +0 -8
- package/dist/components/kemet-fab/types.js +0 -2
- package/dist/components/kemet-fab/types.js.map +0 -1
- package/dist/components/kemet-field/docs/stories.d.ts +0 -15
- package/dist/components/kemet-field/docs/stories.js +0 -55
- package/dist/components/kemet-field/docs/stories.js.map +0 -1
- package/dist/components/kemet-field/kemet-field.d.ts +0 -61
- package/dist/components/kemet-field/kemet-field.js +0 -139
- package/dist/components/kemet-field/kemet-field.js.map +0 -1
- package/dist/components/kemet-field/styles.d.ts +0 -1
- package/dist/components/kemet-field/styles.js.map +0 -1
- package/dist/components/kemet-field/types.d.ts +0 -13
- package/dist/components/kemet-field/types.js +0 -2
- package/dist/components/kemet-field/types.js.map +0 -1
- package/dist/components/kemet-flipcard/docs/stories.d.ts +0 -14
- package/dist/components/kemet-flipcard/docs/stories.js +0 -60
- package/dist/components/kemet-flipcard/docs/stories.js.map +0 -1
- package/dist/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +0 -21
- package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js +0 -41
- package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js.map +0 -1
- package/dist/components/kemet-flipcard/kemet-flipcard.d.ts +0 -52
- package/dist/components/kemet-flipcard/kemet-flipcard.js +0 -129
- package/dist/components/kemet-flipcard/kemet-flipcard.js.map +0 -1
- package/dist/components/kemet-flipcard/styles.d.ts +0 -1
- package/dist/components/kemet-flipcard/styles.js.map +0 -1
- package/dist/components/kemet-flipcard/types.d.ts +0 -7
- package/dist/components/kemet-flipcard/types.js +0 -2
- package/dist/components/kemet-flipcard/types.js.map +0 -1
- package/dist/components/kemet-icon/docs/stories.d.ts +0 -9
- package/dist/components/kemet-icon/docs/stories.js +0 -27
- package/dist/components/kemet-icon/docs/stories.js.map +0 -1
- package/dist/components/kemet-icon/kemet-icon.d.ts +0 -28
- package/dist/components/kemet-icon/kemet-icon.js +0 -114
- package/dist/components/kemet-icon/kemet-icon.js.map +0 -1
- package/dist/components/kemet-icon/styles.d.ts +0 -1
- package/dist/components/kemet-icon/styles.js +0 -9
- package/dist/components/kemet-icon/styles.js.map +0 -1
- package/dist/components/kemet-icon/types.d.ts +0 -5
- package/dist/components/kemet-icon/types.js +0 -2
- package/dist/components/kemet-icon/types.js.map +0 -1
- package/dist/components/kemet-input/docs/stories.d.ts +0 -13
- package/dist/components/kemet-input/docs/stories.js +0 -83
- package/dist/components/kemet-input/docs/stories.js.map +0 -1
- package/dist/components/kemet-input/kemet-input.d.ts +0 -174
- package/dist/components/kemet-input/kemet-input.js +0 -397
- package/dist/components/kemet-input/kemet-input.js.map +0 -1
- package/dist/components/kemet-input/styles.d.ts +0 -1
- package/dist/components/kemet-input/styles.js.map +0 -1
- package/dist/components/kemet-input/types.d.ts +0 -35
- package/dist/components/kemet-input/types.js +0 -2
- package/dist/components/kemet-input/types.js.map +0 -1
- package/dist/components/kemet-modal/docs/stories.d.ts +0 -12
- package/dist/components/kemet-modal/docs/stories.js +0 -58
- package/dist/components/kemet-modal/docs/stories.js.map +0 -1
- package/dist/components/kemet-modal/kemet-modal-close.d.ts +0 -21
- package/dist/components/kemet-modal/kemet-modal-close.js +0 -40
- package/dist/components/kemet-modal/kemet-modal-close.js.map +0 -1
- package/dist/components/kemet-modal/kemet-modal.d.ts +0 -59
- package/dist/components/kemet-modal/kemet-modal.js +0 -150
- package/dist/components/kemet-modal/kemet-modal.js.map +0 -1
- package/dist/components/kemet-modal/styles.d.ts +0 -2
- package/dist/components/kemet-modal/styles.js.map +0 -1
- package/dist/components/kemet-modal/types.d.ts +0 -8
- package/dist/components/kemet-modal/types.js +0 -2
- package/dist/components/kemet-modal/types.js.map +0 -1
- package/dist/components/kemet-password/docs/stories.d.ts +0 -10
- package/dist/components/kemet-password/docs/stories.js +0 -29
- package/dist/components/kemet-password/docs/stories.js.map +0 -1
- package/dist/components/kemet-password/kemet-password.d.ts +0 -83
- package/dist/components/kemet-password/kemet-password.js +0 -155
- package/dist/components/kemet-password/kemet-password.js.map +0 -1
- package/dist/components/kemet-password/styles.d.ts +0 -1
- package/dist/components/kemet-password/styles.js.map +0 -1
- package/dist/components/kemet-password/types.d.ts +0 -10
- package/dist/components/kemet-password/types.js +0 -2
- package/dist/components/kemet-password/types.js.map +0 -1
- package/dist/components/kemet-popper/docs/stories.d.ts +0 -12
- package/dist/components/kemet-popper/docs/stories.js +0 -65
- package/dist/components/kemet-popper/docs/stories.js.map +0 -1
- package/dist/components/kemet-popper/kemet-popper-close.d.ts +0 -22
- package/dist/components/kemet-popper/kemet-popper-close.js +0 -48
- package/dist/components/kemet-popper/kemet-popper-close.js.map +0 -1
- package/dist/components/kemet-popper/kemet-popper.d.ts +0 -72
- package/dist/components/kemet-popper/kemet-popper.js +0 -173
- package/dist/components/kemet-popper/kemet-popper.js.map +0 -1
- package/dist/components/kemet-popper/styles.d.ts +0 -1
- package/dist/components/kemet-popper/styles.effects.d.ts +0 -8
- package/dist/components/kemet-popper/styles.effects.js.map +0 -1
- package/dist/components/kemet-popper/styles.js +0 -37
- package/dist/components/kemet-popper/styles.js.map +0 -1
- package/dist/components/kemet-popper/types.d.ts +0 -3
- package/dist/components/kemet-popper/types.js +0 -2
- package/dist/components/kemet-popper/types.js.map +0 -1
- package/dist/components/kemet-radio/docs/stories.d.ts +0 -12
- package/dist/components/kemet-radio/docs/stories.js +0 -44
- package/dist/components/kemet-radio/docs/stories.js.map +0 -1
- package/dist/components/kemet-radio/kemet-radio.d.ts +0 -57
- package/dist/components/kemet-radio/kemet-radio.js +0 -130
- package/dist/components/kemet-radio/kemet-radio.js.map +0 -1
- package/dist/components/kemet-radio/kemet-radios.d.ts +0 -50
- package/dist/components/kemet-radio/kemet-radios.js +0 -149
- package/dist/components/kemet-radio/kemet-radios.js.map +0 -1
- package/dist/components/kemet-radio/styles.d.ts +0 -2
- package/dist/components/kemet-radio/styles.js.map +0 -1
- package/dist/components/kemet-radio/types.d.ts +0 -20
- package/dist/components/kemet-radio/types.js +0 -2
- package/dist/components/kemet-radio/types.js.map +0 -1
- package/dist/components/kemet-rotator/docs/stories.d.ts +0 -10
- package/dist/components/kemet-rotator/docs/stories.js +0 -34
- package/dist/components/kemet-rotator/docs/stories.js.map +0 -1
- package/dist/components/kemet-rotator/kemet-rotator.d.ts +0 -40
- package/dist/components/kemet-rotator/kemet-rotator.js +0 -121
- package/dist/components/kemet-rotator/kemet-rotator.js.map +0 -1
- package/dist/components/kemet-rotator/styles.d.ts +0 -1
- package/dist/components/kemet-rotator/styles.js.map +0 -1
- package/dist/components/kemet-rotator/types.d.ts +0 -9
- package/dist/components/kemet-rotator/types.js +0 -2
- package/dist/components/kemet-rotator/types.js.map +0 -1
- package/dist/components/kemet-scroll-link/docs/stories.d.ts +0 -9
- package/dist/components/kemet-scroll-link/docs/stories.js +0 -97
- package/dist/components/kemet-scroll-link/docs/stories.js.map +0 -1
- package/dist/components/kemet-scroll-link/kemet-scroll-link.d.ts +0 -31
- package/dist/components/kemet-scroll-link/kemet-scroll-link.js +0 -83
- package/dist/components/kemet-scroll-link/kemet-scroll-link.js.map +0 -1
- package/dist/components/kemet-scroll-link/types.d.ts +0 -6
- package/dist/components/kemet-scroll-link/types.js +0 -2
- package/dist/components/kemet-scroll-link/types.js.map +0 -1
- package/dist/components/kemet-scroll-nav/docs/stories.d.ts +0 -10
- package/dist/components/kemet-scroll-nav/docs/stories.js +0 -162
- package/dist/components/kemet-scroll-nav/docs/stories.js.map +0 -1
- package/dist/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +0 -34
- package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js +0 -65
- package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js.map +0 -1
- package/dist/components/kemet-scroll-nav/styles.d.ts +0 -1
- package/dist/components/kemet-scroll-nav/styles.js.map +0 -1
- package/dist/components/kemet-scroll-nav/types.d.ts +0 -6
- package/dist/components/kemet-scroll-nav/types.js +0 -2
- package/dist/components/kemet-scroll-nav/types.js.map +0 -1
- package/dist/components/kemet-scroll-snap/docs/stories.d.ts +0 -17
- package/dist/components/kemet-scroll-snap/docs/stories.js +0 -121
- package/dist/components/kemet-scroll-snap/docs/stories.js.map +0 -1
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +0 -45
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +0 -120
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +0 -1
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +0 -30
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +0 -53
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +0 -1
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +0 -47
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js +0 -117
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map +0 -1
- package/dist/components/kemet-scroll-snap/styles.d.ts +0 -2
- package/dist/components/kemet-scroll-snap/styles.js.map +0 -1
- package/dist/components/kemet-scroll-snap/types.d.ts +0 -20
- package/dist/components/kemet-scroll-snap/types.js +0 -2
- package/dist/components/kemet-scroll-snap/types.js.map +0 -1
- package/dist/components/kemet-select/docs/stories.d.ts +0 -13
- package/dist/components/kemet-select/docs/stories.js +0 -49
- package/dist/components/kemet-select/docs/stories.js.map +0 -1
- package/dist/components/kemet-select/kemet-option.d.ts +0 -29
- package/dist/components/kemet-select/kemet-option.js +0 -45
- package/dist/components/kemet-select/kemet-option.js.map +0 -1
- package/dist/components/kemet-select/kemet-select.d.ts +0 -119
- package/dist/components/kemet-select/kemet-select.js +0 -198
- package/dist/components/kemet-select/kemet-select.js.map +0 -1
- package/dist/components/kemet-select/styles.d.ts +0 -1
- package/dist/components/kemet-select/styles.js.map +0 -1
- package/dist/components/kemet-select/types.d.ts +0 -20
- package/dist/components/kemet-select/types.js +0 -2
- package/dist/components/kemet-select/types.js.map +0 -1
- package/dist/components/kemet-sortable/docs/stories.d.ts +0 -10
- package/dist/components/kemet-sortable/docs/stories.js +0 -29
- package/dist/components/kemet-sortable/docs/stories.js.map +0 -1
- package/dist/components/kemet-sortable/kemet-sortable-item.d.ts +0 -21
- package/dist/components/kemet-sortable/kemet-sortable-item.js +0 -30
- package/dist/components/kemet-sortable/kemet-sortable-item.js.map +0 -1
- package/dist/components/kemet-sortable/kemet-sortable.d.ts +0 -25
- package/dist/components/kemet-sortable/kemet-sortable.js +0 -77
- package/dist/components/kemet-sortable/kemet-sortable.js.map +0 -1
- package/dist/components/kemet-sortable/styles.d.ts +0 -2
- package/dist/components/kemet-sortable/styles.js.map +0 -1
- package/dist/components/kemet-sortable/types.d.ts +0 -3
- package/dist/components/kemet-sortable/types.js +0 -2
- package/dist/components/kemet-sortable/types.js.map +0 -1
- package/dist/components/kemet-svgs/docs/stories.d.ts +0 -10
- package/dist/components/kemet-svgs/docs/stories.js +0 -67
- package/dist/components/kemet-svgs/docs/stories.js.map +0 -1
- package/dist/components/kemet-svgs/kemet-svg.d.ts +0 -38
- package/dist/components/kemet-svgs/kemet-svg.js +0 -97
- package/dist/components/kemet-svgs/kemet-svg.js.map +0 -1
- package/dist/components/kemet-svgs/kemet-svgs.d.ts +0 -27
- package/dist/components/kemet-svgs/kemet-svgs.js +0 -51
- package/dist/components/kemet-svgs/kemet-svgs.js.map +0 -1
- package/dist/components/kemet-svgs/types.d.ts +0 -10
- package/dist/components/kemet-svgs/types.js +0 -2
- package/dist/components/kemet-svgs/types.js.map +0 -1
- package/dist/components/kemet-tabs/docs/stories.d.ts +0 -18
- package/dist/components/kemet-tabs/docs/stories.js +0 -142
- package/dist/components/kemet-tabs/docs/stories.js.map +0 -1
- package/dist/components/kemet-tabs/kemet-tab-panel.d.ts +0 -28
- package/dist/components/kemet-tabs/kemet-tab-panel.js +0 -55
- package/dist/components/kemet-tabs/kemet-tab-panel.js.map +0 -1
- package/dist/components/kemet-tabs/kemet-tab.d.ts +0 -38
- package/dist/components/kemet-tabs/kemet-tab.js +0 -82
- package/dist/components/kemet-tabs/kemet-tab.js.map +0 -1
- package/dist/components/kemet-tabs/kemet-tabs.d.ts +0 -100
- package/dist/components/kemet-tabs/kemet-tabs.js +0 -487
- package/dist/components/kemet-tabs/kemet-tabs.js.map +0 -1
- package/dist/components/kemet-tabs/styles.d.ts +0 -3
- package/dist/components/kemet-tabs/styles.js.map +0 -1
- package/dist/components/kemet-tabs/types.d.ts +0 -27
- package/dist/components/kemet-tabs/types.js +0 -2
- package/dist/components/kemet-tabs/types.js.map +0 -1
- package/dist/components/kemet-textarea/docs/stories.d.ts +0 -12
- package/dist/components/kemet-textarea/docs/stories.js +0 -58
- package/dist/components/kemet-textarea/docs/stories.js.map +0 -1
- package/dist/components/kemet-textarea/kemet-textarea.d.ts +0 -123
- package/dist/components/kemet-textarea/kemet-textarea.js +0 -293
- package/dist/components/kemet-textarea/kemet-textarea.js.map +0 -1
- package/dist/components/kemet-textarea/styles.d.ts +0 -1
- package/dist/components/kemet-textarea/styles.js.map +0 -1
- package/dist/components/kemet-textarea/types.d.ts +0 -20
- package/dist/components/kemet-textarea/types.js +0 -2
- package/dist/components/kemet-textarea/types.js.map +0 -1
- package/dist/components/kemet-toggle/docs/stories.d.ts +0 -11
- package/dist/components/kemet-toggle/docs/stories.js +0 -43
- package/dist/components/kemet-toggle/docs/stories.js.map +0 -1
- package/dist/components/kemet-toggle/kemet-toggle.d.ts +0 -60
- package/dist/components/kemet-toggle/kemet-toggle.js +0 -130
- package/dist/components/kemet-toggle/kemet-toggle.js.map +0 -1
- package/dist/components/kemet-toggle/styles.d.ts +0 -1
- package/dist/components/kemet-toggle/styles.js.map +0 -1
- package/dist/components/kemet-toggle/types.d.ts +0 -10
- package/dist/components/kemet-toggle/types.js +0 -2
- package/dist/components/kemet-toggle/types.js.map +0 -1
- package/dist/components/kemet-tooltip/docs/stories.d.ts +0 -14
- package/dist/components/kemet-tooltip/docs/stories.js +0 -97
- package/dist/components/kemet-tooltip/docs/stories.js.map +0 -1
- package/dist/components/kemet-tooltip/kemet-tooltip.d.ts +0 -33
- package/dist/components/kemet-tooltip/kemet-tooltip.js +0 -69
- package/dist/components/kemet-tooltip/kemet-tooltip.js.map +0 -1
- package/dist/components/kemet-tooltip/styles.d.ts +0 -1
- package/dist/components/kemet-tooltip/styles.js.map +0 -1
- package/dist/components/kemet-tooltip/types.d.ts +0 -3
- package/dist/components/kemet-tooltip/types.js +0 -2
- package/dist/components/kemet-tooltip/types.js.map +0 -1
- package/dist/components/kemet-tracker/docs/stories.d.ts +0 -11
- package/dist/components/kemet-tracker/docs/stories.js +0 -42
- package/dist/components/kemet-tracker/docs/stories.js.map +0 -1
- package/dist/components/kemet-tracker/kemet-tracker-step.d.ts +0 -63
- package/dist/components/kemet-tracker/kemet-tracker-step.js +0 -127
- package/dist/components/kemet-tracker/kemet-tracker-step.js.map +0 -1
- package/dist/components/kemet-tracker/kemet-tracker.d.ts +0 -27
- package/dist/components/kemet-tracker/kemet-tracker.js +0 -70
- package/dist/components/kemet-tracker/kemet-tracker.js.map +0 -1
- package/dist/components/kemet-tracker/styles.d.ts +0 -1
- package/dist/components/kemet-tracker/styles.js.map +0 -1
- package/dist/components/kemet-tracker/types.d.ts +0 -13
- package/dist/components/kemet-tracker/types.js +0 -2
- package/dist/components/kemet-tracker/types.js.map +0 -1
- package/dist/components/kemet-upload/docs/stories.d.ts +0 -10
- package/dist/components/kemet-upload/docs/stories.js +0 -52
- package/dist/components/kemet-upload/docs/stories.js.map +0 -1
- package/dist/components/kemet-upload/kemet-upload-file.d.ts +0 -46
- package/dist/components/kemet-upload/kemet-upload-file.js +0 -109
- package/dist/components/kemet-upload/kemet-upload-file.js.map +0 -1
- package/dist/components/kemet-upload/kemet-upload.d.ts +0 -58
- package/dist/components/kemet-upload/kemet-upload.js +0 -149
- package/dist/components/kemet-upload/kemet-upload.js.map +0 -1
- package/dist/components/kemet-upload/styles.d.ts +0 -3
- package/dist/components/kemet-upload/styles.js.map +0 -1
- package/dist/components/kemet-upload/types.d.ts +0 -21
- package/dist/components/kemet-upload/types.js +0 -2
- package/dist/components/kemet-upload/types.js.map +0 -1
- package/dist/kemet-components.bundle.js +0 -99
- package/dist/kemet-components.bundle.js.map +0 -1
- package/dist/kemet-components.cjs +0 -11691
- package/dist/kemet-components.js +0 -11689
- package/dist/styles/components/_config.scss +0 -4
- package/dist/styles/components/accordion.scss +0 -9
- package/dist/styles/components/scrollsnap.scss +0 -11
- package/dist/styles/kemet.components.css +0 -23
- package/dist/styles/kemet.components.css.map +0 -1
- package/dist/styles/kemet.components.scss +0 -2
- package/dist/tsconfig.tsbuildinfo +0 -1
- package/dist/utilities/controllers/forms.d.ts +0 -11
- package/dist/utilities/controllers/forms.js +0 -102
- package/dist/utilities/controllers/forms.js.map +0 -1
- package/dist/utilities/misc/constants.d.ts +0 -5
- package/dist/utilities/misc/constants.js +0 -6
- package/dist/utilities/misc/constants.js.map +0 -1
- package/dist/utilities/misc/events.d.ts +0 -1
- package/dist/utilities/misc/events.js +0 -4
- package/dist/utilities/misc/events.js.map +0 -1
- package/index.js +0 -1
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
/**
|
|
3
|
-
* @since 1.0.0
|
|
4
|
-
* @status stable
|
|
5
|
-
*
|
|
6
|
-
* @tagname kemet-radio
|
|
7
|
-
* @summary An enhanced radio button.
|
|
8
|
-
*
|
|
9
|
-
* @prop {string} label - The text next to the radio button
|
|
10
|
-
* @prop {boolean} checked - Determines whether or not the button is checked
|
|
11
|
-
* @prop {string} name - The name of the field
|
|
12
|
-
* @prop {string} value - The value of the radio button
|
|
13
|
-
* @prop {boolean} disabled - Determines if the button should be disabled
|
|
14
|
-
* @prop {boolean} focused - Is true when the button is focused on
|
|
15
|
-
* @prop {boolean} filled - Displayed the button as a filled button
|
|
16
|
-
*
|
|
17
|
-
* @csspart label - The label that contains the radio button.
|
|
18
|
-
* @csspart button - The radio button.
|
|
19
|
-
* @csspart text - The text next to the radio button.
|
|
20
|
-
* @csspart dot - The circle that fills the radio button.
|
|
21
|
-
*
|
|
22
|
-
* @cssproperty --kemet-radio-size - The size of the radio button.
|
|
23
|
-
* @cssproperty --kemet-radio-border - The outer border of the radio button.
|
|
24
|
-
* @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.
|
|
25
|
-
* @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.
|
|
26
|
-
* @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.
|
|
27
|
-
* @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.
|
|
28
|
-
* @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.
|
|
29
|
-
*
|
|
30
|
-
* @event kemet-radio-focused - Fires when the checkbox loses or receives focus
|
|
31
|
-
* @event kemet-radio-focused - Fires when the checkbox loses or receives focus
|
|
32
|
-
*
|
|
33
|
-
*/
|
|
34
|
-
export default class KemetRadio extends LitElement {
|
|
35
|
-
static styles: import("lit").CSSResult[];
|
|
36
|
-
label: string;
|
|
37
|
-
checked: boolean;
|
|
38
|
-
name: string;
|
|
39
|
-
value: string;
|
|
40
|
-
disabled: boolean;
|
|
41
|
-
focused: boolean;
|
|
42
|
-
filled: boolean;
|
|
43
|
-
input: HTMLInputElement;
|
|
44
|
-
firstUpdated(): void;
|
|
45
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
46
|
-
click(): void;
|
|
47
|
-
blur(): void;
|
|
48
|
-
focus(): void;
|
|
49
|
-
handleBlur(): void;
|
|
50
|
-
handleFocus(): void;
|
|
51
|
-
makeDot(): import("lit-html").TemplateResult<1>;
|
|
52
|
-
}
|
|
53
|
-
declare global {
|
|
54
|
-
interface HTMLElementTagNameMap {
|
|
55
|
-
'kemet-radio': KemetRadio;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
3
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { live } from 'lit/directives/live.js';
|
|
6
|
-
import { emitEvent } from '../../utilities/misc/events';
|
|
7
|
-
import { stylesRadio } from './styles';
|
|
8
|
-
/**
|
|
9
|
-
* @since 1.0.0
|
|
10
|
-
* @status stable
|
|
11
|
-
*
|
|
12
|
-
* @tagname kemet-radio
|
|
13
|
-
* @summary An enhanced radio button.
|
|
14
|
-
*
|
|
15
|
-
* @prop {string} label - The text next to the radio button
|
|
16
|
-
* @prop {boolean} checked - Determines whether or not the button is checked
|
|
17
|
-
* @prop {string} name - The name of the field
|
|
18
|
-
* @prop {string} value - The value of the radio button
|
|
19
|
-
* @prop {boolean} disabled - Determines if the button should be disabled
|
|
20
|
-
* @prop {boolean} focused - Is true when the button is focused on
|
|
21
|
-
* @prop {boolean} filled - Displayed the button as a filled button
|
|
22
|
-
*
|
|
23
|
-
* @csspart label - The label that contains the radio button.
|
|
24
|
-
* @csspart button - The radio button.
|
|
25
|
-
* @csspart text - The text next to the radio button.
|
|
26
|
-
* @csspart dot - The circle that fills the radio button.
|
|
27
|
-
*
|
|
28
|
-
* @cssproperty --kemet-radio-size - The size of the radio button.
|
|
29
|
-
* @cssproperty --kemet-radio-border - The outer border of the radio button.
|
|
30
|
-
* @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.
|
|
31
|
-
* @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.
|
|
32
|
-
* @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.
|
|
33
|
-
* @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.
|
|
34
|
-
* @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.
|
|
35
|
-
*
|
|
36
|
-
* @event kemet-radio-focused - Fires when the checkbox loses or receives focus
|
|
37
|
-
* @event kemet-radio-focused - Fires when the checkbox loses or receives focus
|
|
38
|
-
*
|
|
39
|
-
*/
|
|
40
|
-
let KemetRadio = class KemetRadio extends LitElement {
|
|
41
|
-
constructor() {
|
|
42
|
-
super(...arguments);
|
|
43
|
-
this.label = '';
|
|
44
|
-
this.disabled = false;
|
|
45
|
-
}
|
|
46
|
-
firstUpdated() {
|
|
47
|
-
const radiosElement = this.closest('kemet-radios');
|
|
48
|
-
this.name = radiosElement.name || 'radio-button';
|
|
49
|
-
this.input = this.shadowRoot.querySelector('input');
|
|
50
|
-
this.setAttribute('role', 'radio');
|
|
51
|
-
if (this.checked) {
|
|
52
|
-
this.setAttribute('aria-checked', 'true');
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
this.setAttribute('aria-checked', 'false');
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
render() {
|
|
59
|
-
return html `
|
|
60
|
-
<label part="label">
|
|
61
|
-
<input
|
|
62
|
-
type="radio"
|
|
63
|
-
name=${ifDefined(this.name)}
|
|
64
|
-
.value=${this.value}
|
|
65
|
-
.checked=${live(this.checked)}
|
|
66
|
-
.disabled=${this.disabled}
|
|
67
|
-
@blur=${() => this.handleBlur()}
|
|
68
|
-
@focus=${() => this.handleFocus()}
|
|
69
|
-
/>
|
|
70
|
-
<button part="button" aria-label=${this.label}>${this.makeDot()}</button>
|
|
71
|
-
<span part="text">${this.label}</span>
|
|
72
|
-
</label>
|
|
73
|
-
`;
|
|
74
|
-
}
|
|
75
|
-
click() {
|
|
76
|
-
this.input.click();
|
|
77
|
-
}
|
|
78
|
-
blur() {
|
|
79
|
-
this.input.blur();
|
|
80
|
-
}
|
|
81
|
-
focus() {
|
|
82
|
-
this.input.focus();
|
|
83
|
-
}
|
|
84
|
-
handleBlur() {
|
|
85
|
-
this.focused = false;
|
|
86
|
-
emitEvent(this, 'kemet-radio-focused', false);
|
|
87
|
-
}
|
|
88
|
-
handleFocus() {
|
|
89
|
-
this.focused = true;
|
|
90
|
-
emitEvent(this, 'kemet-radio-focused', true);
|
|
91
|
-
}
|
|
92
|
-
makeDot() {
|
|
93
|
-
if (this.checked) {
|
|
94
|
-
return html `
|
|
95
|
-
<span part="dot"></span>
|
|
96
|
-
`;
|
|
97
|
-
}
|
|
98
|
-
return null;
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
KemetRadio.styles = [stylesRadio];
|
|
102
|
-
__decorate([
|
|
103
|
-
property({ type: String })
|
|
104
|
-
], KemetRadio.prototype, "label", void 0);
|
|
105
|
-
__decorate([
|
|
106
|
-
property({ type: Boolean, reflect: true })
|
|
107
|
-
], KemetRadio.prototype, "checked", void 0);
|
|
108
|
-
__decorate([
|
|
109
|
-
property({ type: String })
|
|
110
|
-
], KemetRadio.prototype, "name", void 0);
|
|
111
|
-
__decorate([
|
|
112
|
-
property({ type: String })
|
|
113
|
-
], KemetRadio.prototype, "value", void 0);
|
|
114
|
-
__decorate([
|
|
115
|
-
property({ type: Boolean, reflect: true })
|
|
116
|
-
], KemetRadio.prototype, "disabled", void 0);
|
|
117
|
-
__decorate([
|
|
118
|
-
property({ type: Boolean, reflect: true })
|
|
119
|
-
], KemetRadio.prototype, "focused", void 0);
|
|
120
|
-
__decorate([
|
|
121
|
-
property({ type: Boolean, reflect: true })
|
|
122
|
-
], KemetRadio.prototype, "filled", void 0);
|
|
123
|
-
__decorate([
|
|
124
|
-
state()
|
|
125
|
-
], KemetRadio.prototype, "input", void 0);
|
|
126
|
-
KemetRadio = __decorate([
|
|
127
|
-
customElement('kemet-radio')
|
|
128
|
-
], KemetRadio);
|
|
129
|
-
export default KemetRadio;
|
|
130
|
-
//# sourceMappingURL=kemet-radio.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n static styles = [stylesRadio];\n\n @property({ type: String })\n label: string = '';\n\n @property({ type: Boolean, reflect: true })\n checked: boolean;\n\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n value: string;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @state()\n input: HTMLInputElement;\n\n firstUpdated() {\n const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n this.name = radiosElement.name || 'radio-button';\n this.input = this.shadowRoot.querySelector('input');\n this.setAttribute('role', 'radio');\n\n if (this.checked) {\n this.setAttribute('aria-checked', 'true');\n } else {\n this.setAttribute('aria-checked', 'false');\n }\n }\n\n render() {\n return html`\n <label part=\"label\">\n <input\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n @blur=${() => this.handleBlur()}\n @focus=${() => this.handleFocus()}\n />\n <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n <span part=\"text\">${this.label}</span>\n </label>\n `;\n }\n\n click() {\n this.input.click();\n }\n\n blur() {\n this.input.blur();\n }\n\n focus() {\n this.input.focus();\n }\n\n handleBlur() {\n this.focused = false;\n emitEvent(this, 'kemet-radio-focused', false);\n }\n\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-radio-focused', true);\n }\n\n makeDot() {\n if (this.checked) {\n return html`\n <span part=\"dot\"></span>\n `;\n }\n\n return null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radio': KemetRadio\n }\n}\n"]}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { FormSubmitController } from '../../utilities/controllers/forms';
|
|
3
|
-
import { TypeAxis, TypeStatus } from './types';
|
|
4
|
-
import type KemetRadio from './kemet-radio';
|
|
5
|
-
/**
|
|
6
|
-
* @since 1.0.0
|
|
7
|
-
* @status stable
|
|
8
|
-
*
|
|
9
|
-
* @tagname kemet-radios
|
|
10
|
-
* @summary A group of radio buttons.
|
|
11
|
-
*
|
|
12
|
-
* @prop {string} legend - The legend text for the fieldset
|
|
13
|
-
* @prop {string} axis - The direction of the button's layout
|
|
14
|
-
* @prop {string} value - The value of the selected radio button
|
|
15
|
-
* @prop {string} name - The name of the radio button set
|
|
16
|
-
* @prop {string} status - The status of the radio button set
|
|
17
|
-
* @prop {string} message - Validation message for the user
|
|
18
|
-
* @prop {boolean} required - Determines whether the radio button set is required
|
|
19
|
-
*
|
|
20
|
-
* @csspart fieldset - The fieldset element.
|
|
21
|
-
* @csspart legend - The legend element.
|
|
22
|
-
*
|
|
23
|
-
* @event kemet-radios-change - Fires when the state of the checkbox changes
|
|
24
|
-
*
|
|
25
|
-
*/
|
|
26
|
-
export default class KemetRadios extends LitElement {
|
|
27
|
-
formSubmitController: FormSubmitController;
|
|
28
|
-
static styles: import("lit").CSSResult[];
|
|
29
|
-
legend: string;
|
|
30
|
-
axis: TypeAxis;
|
|
31
|
-
value: string;
|
|
32
|
-
name: string;
|
|
33
|
-
status: TypeStatus;
|
|
34
|
-
message: string;
|
|
35
|
-
required: boolean;
|
|
36
|
-
radios: NodeListOf<KemetRadio>;
|
|
37
|
-
constructor();
|
|
38
|
-
firstUpdated(): void;
|
|
39
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
40
|
-
handleClick(event: MouseEvent): void;
|
|
41
|
-
handleKeyDown(event: KeyboardEvent): void;
|
|
42
|
-
handleSlotChange(): void;
|
|
43
|
-
makeMessage(): import("lit-html").TemplateResult<1>;
|
|
44
|
-
checkValidity(): boolean;
|
|
45
|
-
}
|
|
46
|
-
declare global {
|
|
47
|
-
interface HTMLElementTagNameMap {
|
|
48
|
-
'kemet-radios': KemetRadios;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
3
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
|
-
import { FormSubmitController } from '../../utilities/controllers/forms';
|
|
5
|
-
import { emitEvent } from '../../utilities/misc/events';
|
|
6
|
-
import { stylesRadios } from './styles';
|
|
7
|
-
/**
|
|
8
|
-
* @since 1.0.0
|
|
9
|
-
* @status stable
|
|
10
|
-
*
|
|
11
|
-
* @tagname kemet-radios
|
|
12
|
-
* @summary A group of radio buttons.
|
|
13
|
-
*
|
|
14
|
-
* @prop {string} legend - The legend text for the fieldset
|
|
15
|
-
* @prop {string} axis - The direction of the button's layout
|
|
16
|
-
* @prop {string} value - The value of the selected radio button
|
|
17
|
-
* @prop {string} name - The name of the radio button set
|
|
18
|
-
* @prop {string} status - The status of the radio button set
|
|
19
|
-
* @prop {string} message - Validation message for the user
|
|
20
|
-
* @prop {boolean} required - Determines whether the radio button set is required
|
|
21
|
-
*
|
|
22
|
-
* @csspart fieldset - The fieldset element.
|
|
23
|
-
* @csspart legend - The legend element.
|
|
24
|
-
*
|
|
25
|
-
* @event kemet-radios-change - Fires when the state of the checkbox changes
|
|
26
|
-
*
|
|
27
|
-
*/
|
|
28
|
-
let KemetRadios = class KemetRadios extends LitElement {
|
|
29
|
-
constructor() {
|
|
30
|
-
super();
|
|
31
|
-
this.legend = '';
|
|
32
|
-
this.axis = 'horizontal';
|
|
33
|
-
this.name = 'radios';
|
|
34
|
-
this.status = 'standard';
|
|
35
|
-
/** @internal */
|
|
36
|
-
this.formSubmitController = new FormSubmitController(this);
|
|
37
|
-
}
|
|
38
|
-
firstUpdated() {
|
|
39
|
-
this.radios = this.querySelectorAll('kemet-radio');
|
|
40
|
-
this.setAttribute('role', 'radiogroup');
|
|
41
|
-
}
|
|
42
|
-
render() {
|
|
43
|
-
return html `
|
|
44
|
-
<fieldset part="fieldset">
|
|
45
|
-
${this.legend !== '' ? html `<legend part="legend">${this.legend}</legend>` : null}
|
|
46
|
-
<slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
|
|
47
|
-
</fieldset>
|
|
48
|
-
${this.makeMessage()}
|
|
49
|
-
`;
|
|
50
|
-
}
|
|
51
|
-
handleClick(event) {
|
|
52
|
-
const target = event.target;
|
|
53
|
-
this.radios.forEach((radio) => {
|
|
54
|
-
radio.checked = false;
|
|
55
|
-
radio.tabIndex = radio === target ? 0 : -1;
|
|
56
|
-
radio.setAttribute('aria-checked', 'false');
|
|
57
|
-
});
|
|
58
|
-
if (!target.disabled) {
|
|
59
|
-
target.checked = true;
|
|
60
|
-
target.setAttribute('aria-checked', 'true');
|
|
61
|
-
this.value = target.value;
|
|
62
|
-
this.status = 'standard';
|
|
63
|
-
emitEvent(this, 'kemet-radios-change', target);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
handleKeyDown(event) {
|
|
67
|
-
var _a;
|
|
68
|
-
const radios = Array.from(this.radios);
|
|
69
|
-
const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
|
|
70
|
-
const forwardKeys = ['ArrowRight', 'ArrowDown'];
|
|
71
|
-
const shift = forwardKeys.includes(event.key) ? 1 : -1;
|
|
72
|
-
const checkedIndex = (_a = radios.findIndex((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0];
|
|
73
|
-
let index;
|
|
74
|
-
if (typeof checkedIndex === 'number') {
|
|
75
|
-
index = checkedIndex + shift;
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
index = shift;
|
|
79
|
-
}
|
|
80
|
-
if (arrowKeys.includes(event.key)) {
|
|
81
|
-
if (index < 0) {
|
|
82
|
-
index = radios.length - 1;
|
|
83
|
-
}
|
|
84
|
-
if (index > radios.length - 1) {
|
|
85
|
-
index = 0;
|
|
86
|
-
}
|
|
87
|
-
this.radios.forEach((radio) => {
|
|
88
|
-
radio.checked = false;
|
|
89
|
-
radio.tabIndex = -1;
|
|
90
|
-
});
|
|
91
|
-
this.radios[index].focus();
|
|
92
|
-
this.radios[index].checked = true;
|
|
93
|
-
this.radios[index].tabIndex = 0;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
handleSlotChange() {
|
|
97
|
-
const radios = Array.from(this.radios);
|
|
98
|
-
const checkedRadio = radios.find((radio) => radio.checked);
|
|
99
|
-
this.radios.forEach((radio) => {
|
|
100
|
-
radio.tabIndex = -1;
|
|
101
|
-
radio.input.tabIndex = -1;
|
|
102
|
-
});
|
|
103
|
-
if (checkedRadio) {
|
|
104
|
-
checkedRadio.tabIndex = 0;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
makeMessage() {
|
|
108
|
-
if (this.status === 'error' || this.status === 'warning') {
|
|
109
|
-
return html `<span part="message">${this.message}</span>`;
|
|
110
|
-
}
|
|
111
|
-
return null;
|
|
112
|
-
}
|
|
113
|
-
checkValidity() {
|
|
114
|
-
if (this.required) {
|
|
115
|
-
return !!this.value;
|
|
116
|
-
}
|
|
117
|
-
return true;
|
|
118
|
-
}
|
|
119
|
-
};
|
|
120
|
-
KemetRadios.styles = [stylesRadios];
|
|
121
|
-
__decorate([
|
|
122
|
-
property({ type: String })
|
|
123
|
-
], KemetRadios.prototype, "legend", void 0);
|
|
124
|
-
__decorate([
|
|
125
|
-
property({ type: String, reflect: true })
|
|
126
|
-
], KemetRadios.prototype, "axis", void 0);
|
|
127
|
-
__decorate([
|
|
128
|
-
property({ type: String })
|
|
129
|
-
], KemetRadios.prototype, "value", void 0);
|
|
130
|
-
__decorate([
|
|
131
|
-
property({ type: String })
|
|
132
|
-
], KemetRadios.prototype, "name", void 0);
|
|
133
|
-
__decorate([
|
|
134
|
-
property({ type: String, reflect: true })
|
|
135
|
-
], KemetRadios.prototype, "status", void 0);
|
|
136
|
-
__decorate([
|
|
137
|
-
property({ type: String })
|
|
138
|
-
], KemetRadios.prototype, "message", void 0);
|
|
139
|
-
__decorate([
|
|
140
|
-
property({ type: Boolean })
|
|
141
|
-
], KemetRadios.prototype, "required", void 0);
|
|
142
|
-
__decorate([
|
|
143
|
-
state()
|
|
144
|
-
], KemetRadios.prototype, "radios", void 0);
|
|
145
|
-
KemetRadios = __decorate([
|
|
146
|
-
customElement('kemet-radios')
|
|
147
|
-
], KemetRadios);
|
|
148
|
-
export default KemetRadios;
|
|
149
|
-
//# sourceMappingURL=kemet-radios.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { TypeAxis, TypeStatus } from './types';\n\nimport type KemetRadio from './kemet-radio';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [stylesRadios];\n\n @property({ type: String })\n legend: string = '';\n\n @property({ type: String, reflect: true })\n axis: TypeAxis = 'horizontal';\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n name: string = 'radios';\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: String })\n message: string;\n\n @property({ type: Boolean })\n required: boolean;\n\n @state()\n radios: NodeListOf<KemetRadio>;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n this.radios = this.querySelectorAll('kemet-radio');\n this.setAttribute('role', 'radiogroup');\n }\n\n render() {\n return html`\n <fieldset part=\"fieldset\">\n ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n </fieldset>\n ${this.makeMessage()}\n `;\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as KemetRadio;\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = radio === target ? 0 : -1;\n radio.setAttribute('aria-checked', 'false');\n });\n\n if (!target.disabled) {\n target.checked = true;\n target.setAttribute('aria-checked', 'true');\n this.value = target.value;\n this.status = 'standard';\n\n emitEvent(this, 'kemet-radios-change', target);\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const radios = Array.from(this.radios);\n const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n const forwardKeys = ['ArrowRight', 'ArrowDown'];\n const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n const checkedIndex: number | KemetRadio = radios.findIndex((radio: KemetRadio) => radio.checked) ?? radios[0];\n\n let index: number;\n\n if (typeof checkedIndex === 'number') {\n index = checkedIndex + shift;\n } else {\n index = shift;\n }\n\n if (arrowKeys.includes(event.key)) {\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.radios[index].focus();\n this.radios[index].checked = true;\n this.radios[index].tabIndex = 0;\n }\n }\n\n handleSlotChange() {\n const radios = Array.from(this.radios);\n const checkedRadio = radios.find((radio: KemetRadio) => radio.checked) as KemetRadio;\n\n this.radios.forEach((radio: KemetRadio) => {\n radio.tabIndex = -1;\n radio.input.tabIndex = -1;\n });\n\n if (checkedRadio) {\n checkedRadio.tabIndex = 0;\n }\n }\n\n makeMessage() {\n if (this.status === 'error' || this.status === 'warning') {\n return html`<span part=\"message\">${this.message}</span>`;\n }\n\n return null;\n }\n\n checkValidity() {\n if (this.required) {\n return !!this.value;\n }\n\n return true;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radios': KemetRadios\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE7B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRadio = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n :host {\n --kemet-radio-size: 18px;\n --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));\n --kemet-radio-dot-color: rgb(var(--kemet-color-primary));\n --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));\n --kemet-radio-dot-border-width: 3px;\n --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));\n --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));\n --kemet-radio-dot-border-width: 4px;\n --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));\n\n display: inline-block;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n }\n\n label {\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n margin-right: 0.5rem;\n }\n\n input {\n cursor: pointer;\n margin: 0;\n padding: 0;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n position: absolute;\n opacity: 0;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n padding: 0;\n border-radius: var(--kemet-border-radius-circle);\n background: none;\n border: var(--kemet-radio-border);\n }\n\n [part='dot'] {\n display: inline-flex;\n border-radius: var(--kemet-border-radius-circle);\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n background: var(--kemet-radio-dot-color);\n border: var(--kemet-radio-dot-border);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n }\n\n :host([filled]) [part='dot'] {\n background: var(--kemet-radio-dot-color-filled);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n }\n`;\n\nexport const stylesRadios = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n :host {\n display: block;\n }\n\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: flex;\n gap: 0.5rem;\n }\n\n legend {\n margin-bottom: 1rem;\n }\n\n :host([axis='vertical']) fieldset {\n flex-direction: column;\n }\n\n [part='message'] {\n display: block;\n margin-top: 0.5rem;\n }\n\n :host([status='error']) [part='message'] {\n color: rgb(var(--kemet-color-error));\n }\n\n :host([status='warning']) [part='message'] {\n color: rgb(var(--kemet-color-error));\n }\n`;\n"]}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
|
|
2
|
-
export declare type TypeAxis = 'horizontal' | 'vertical';
|
|
3
|
-
export interface KemetRadioInterface extends HTMLElement {
|
|
4
|
-
label?: string;
|
|
5
|
-
checked?: boolean;
|
|
6
|
-
name?: string;
|
|
7
|
-
value?: string;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
focused?: boolean;
|
|
10
|
-
filled?: boolean;
|
|
11
|
-
}
|
|
12
|
-
export interface KemetRadiosInterface extends HTMLElement {
|
|
13
|
-
legend?: string;
|
|
14
|
-
axis?: string;
|
|
15
|
-
value?: string;
|
|
16
|
-
name?: string;
|
|
17
|
-
status?: TypeStatus;
|
|
18
|
-
message?: string;
|
|
19
|
-
required?: boolean;
|
|
20
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\nexport type TypeAxis = 'horizontal' | 'vertical';\n\nexport interface KemetRadioInterface extends HTMLElement {\n label?: string,\n checked?: boolean,\n name?: string,\n value?: string,\n disabled?: boolean,\n focused?: boolean,\n filled?: boolean,\n}\n\nexport interface KemetRadiosInterface extends HTMLElement {\n legend?: string,\n axis?: string,\n value?: string,\n name?: string,\n status?: TypeStatus,\n message?: string,\n required?: boolean,\n}\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
-
import '../kemet-rotator';
|
|
3
|
-
import '../../kemet-tabs/kemet-tabs';
|
|
4
|
-
import '../../kemet-tabs/kemet-tab';
|
|
5
|
-
import '../../kemet-tabs/kemet-tab-panel';
|
|
6
|
-
declare const meta: Meta;
|
|
7
|
-
export default meta;
|
|
8
|
-
declare type Story = StoryObj;
|
|
9
|
-
export declare const Standard: Story;
|
|
10
|
-
export declare const Flip: Story;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
|
-
import '../kemet-rotator';
|
|
4
|
-
import '../../kemet-tabs/kemet-tabs';
|
|
5
|
-
import '../../kemet-tabs/kemet-tab';
|
|
6
|
-
import '../../kemet-tabs/kemet-tab-panel';
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Components / Rotator',
|
|
9
|
-
component: 'kemet-rotator',
|
|
10
|
-
args: {
|
|
11
|
-
rotationSpeed: 3,
|
|
12
|
-
messages: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Praesent ornare porta nulla.', 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.']
|
|
13
|
-
},
|
|
14
|
-
argTypes: {
|
|
15
|
-
effect: {
|
|
16
|
-
control: { type: 'radio' },
|
|
17
|
-
options: ['fade', 'flip'],
|
|
18
|
-
},
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
export default meta;
|
|
22
|
-
const Template = (args) => html `
|
|
23
|
-
<kemet-rotator effect="${ifDefined(args.effect)}" .rotation-speed=${args.rotationSpeed} .messages="${args.messages}"></kemet-rotator>
|
|
24
|
-
`;
|
|
25
|
-
export const Standard = {
|
|
26
|
-
render: args => Template(args),
|
|
27
|
-
};
|
|
28
|
-
export const Flip = {
|
|
29
|
-
render: args => Template(args),
|
|
30
|
-
args: {
|
|
31
|
-
effect: 'flip',
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,CAAC,0DAA0D,EAAE,8BAA8B,EAAE,yEAAyE,CAAC;KAClL;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC1B;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;2BACJ,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,qBAAqB,IAAI,CAAC,aAAa,eAAe,IAAI,CAAC,QAAQ;CACnH,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-rotator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Rotator',\n component: 'kemet-rotator',\n args: {\n rotationSpeed: 3,\n messages: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Praesent ornare porta nulla.', 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.']\n },\n argTypes: {\n effect: {\n control: { type: 'radio' },\n options: ['fade', 'flip'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n <kemet-rotator effect=\"${ifDefined(args.effect)}\" .rotation-speed=${args.rotationSpeed} .messages=\"${args.messages}\"></kemet-rotator>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n};\n\nexport const Flip: Story = {\n render: args => Template(args),\n args: {\n effect: 'flip',\n },\n};\n"]}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { TypeEffect } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* @since 1.0.0
|
|
5
|
-
* @status stable
|
|
6
|
-
*
|
|
7
|
-
* @tagname kemet-rotator
|
|
8
|
-
* @summary A component that rotates through an array of text.
|
|
9
|
-
*
|
|
10
|
-
* @prop {number} activeSlide - The index number for the current slide.
|
|
11
|
-
* @prop {string} width - The width of the rotator block.
|
|
12
|
-
* @prop {string} height - The height of the rotator block.
|
|
13
|
-
* @prop {array} messages - Text in the rotator. Supports HTML.
|
|
14
|
-
* @prop {string} effect - The transition effect type.
|
|
15
|
-
* @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
|
|
16
|
-
*
|
|
17
|
-
* @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
export default class KemetRotator extends LitElement {
|
|
21
|
-
static styles: import("lit").CSSResult[];
|
|
22
|
-
activeSlide: number;
|
|
23
|
-
width: string;
|
|
24
|
-
height: string;
|
|
25
|
-
messages: string[];
|
|
26
|
-
effect: TypeEffect;
|
|
27
|
-
rotationSpeed: number;
|
|
28
|
-
prevSlide: number | null;
|
|
29
|
-
firstUpdated(): void;
|
|
30
|
-
updated(changed: Map<string, never>): void;
|
|
31
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
32
|
-
makeMessages(): import("lit-html").TemplateResult<1>[];
|
|
33
|
-
setDimensions(): void;
|
|
34
|
-
nextSlide(): void;
|
|
35
|
-
}
|
|
36
|
-
declare global {
|
|
37
|
-
interface HTMLElementTagNameMap {
|
|
38
|
-
'kemet-rotator': KemetRotator;
|
|
39
|
-
}
|
|
40
|
-
}
|