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,58 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
|
-
import '../kemet-textarea';
|
|
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 / Textarea',
|
|
9
|
-
component: 'kemet-textarea',
|
|
10
|
-
argTypes: {
|
|
11
|
-
status: {
|
|
12
|
-
control: { type: 'radio' },
|
|
13
|
-
options: ['standard', 'error', 'success', 'warning'],
|
|
14
|
-
},
|
|
15
|
-
inputmode: {
|
|
16
|
-
control: { type: 'select' },
|
|
17
|
-
options: ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],
|
|
18
|
-
},
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
export default meta;
|
|
22
|
-
const Template = (args) => html `<kemet-textarea
|
|
23
|
-
status=${ifDefined(args.status)}
|
|
24
|
-
?required=${args.required}
|
|
25
|
-
?validate-on-blur=${args.validateOnBlur}
|
|
26
|
-
placeholder=${ifDefined(args.placeholder || null)}
|
|
27
|
-
minlength=${ifDefined(args.minlength || null)}
|
|
28
|
-
maxlength=${ifDefined(args.maxlength || null)}
|
|
29
|
-
inputmode=${args.inputmode}
|
|
30
|
-
?autofocus=${args.autofocus}
|
|
31
|
-
?disabled=${args.disabled}
|
|
32
|
-
?readonly=${args.readonly}
|
|
33
|
-
rows=${ifDefined(args.rows)}
|
|
34
|
-
?filled=${args.filled}
|
|
35
|
-
?rounded=${args.rounded}
|
|
36
|
-
></kemet-textarea>`;
|
|
37
|
-
export const Standard = {
|
|
38
|
-
render: args => Template(args),
|
|
39
|
-
};
|
|
40
|
-
export const Disabled = {
|
|
41
|
-
render: args => Template(args),
|
|
42
|
-
args: {
|
|
43
|
-
disabled: true
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
export const Filled = {
|
|
47
|
-
render: args => Template(args),
|
|
48
|
-
args: {
|
|
49
|
-
filled: true
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
export const Rounded = {
|
|
53
|
-
render: args => Template(args),
|
|
54
|
-
args: {
|
|
55
|
-
rounded: true
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-textarea/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,mBAAmB,CAAC;AAE3B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;SACrD;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC;SACjF;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;WACpB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;cACnB,IAAI,CAAC,QAAQ;sBACL,IAAI,CAAC,cAAc;gBACzB,SAAS,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC;cACrC,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC;cACjC,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC;cACjC,IAAI,CAAC,SAAS;eACb,IAAI,CAAC,SAAS;cACf,IAAI,CAAC,QAAQ;cACb,IAAI,CAAC,QAAQ;SAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;YACjB,IAAI,CAAC,MAAM;aACV,IAAI,CAAC,OAAO;mBACN,CAAC;AAEpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;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-textarea';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Textarea',\n component: 'kemet-textarea',\n argTypes: {\n status: {\n control: { type: 'radio' },\n options: ['standard', 'error', 'success', 'warning'],\n },\n inputmode: {\n control: { type: 'select' },\n options: ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`<kemet-textarea\n status=${ifDefined(args.status)}\n ?required=${args.required}\n ?validate-on-blur=${args.validateOnBlur}\n placeholder=${ifDefined(args.placeholder || null)}\n minlength=${ifDefined(args.minlength || null)}\n maxlength=${ifDefined(args.maxlength || null)}\n inputmode=${args.inputmode}\n ?autofocus=${args.autofocus}\n ?disabled=${args.disabled}\n ?readonly=${args.readonly}\n rows=${ifDefined(args.rows)}\n ?filled=${args.filled}\n ?rounded=${args.rounded}\n></kemet-textarea>`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n};\n\nexport const Disabled: Story = {\n render: args => Template(args),\n args: {\n disabled: true\n }\n};\n\nexport const Filled: Story = {\n render: args => Template(args),\n args: {\n filled: true\n }\n};\n\nexport const Rounded: Story = {\n render: args => Template(args),\n args: {\n rounded: true\n }\n};\n"]}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { FormSubmitController } from '../../utilities/controllers/forms';
|
|
3
|
-
import { KemetFieldInterface } from '../kemet-field/types';
|
|
4
|
-
import { TypeStatus } from './types';
|
|
5
|
-
/**
|
|
6
|
-
* @since 1.0.0
|
|
7
|
-
* @status stable
|
|
8
|
-
*
|
|
9
|
-
* @tagname kemet-textarea
|
|
10
|
-
* @summary An enhanced textarea element.
|
|
11
|
-
*
|
|
12
|
-
* @prop {string} slug
|
|
13
|
-
* @prop {string} name
|
|
14
|
-
* @prop {string} placeholder
|
|
15
|
-
* @prop {number} minlength
|
|
16
|
-
* @prop {number} maxlength
|
|
17
|
-
* @prop {string} inputmode
|
|
18
|
-
* @prop {boolean} disabled
|
|
19
|
-
* @prop {boolean} readonly
|
|
20
|
-
* @prop {boolean} required
|
|
21
|
-
* @prop {string} value
|
|
22
|
-
* @prop {boolean} invalid
|
|
23
|
-
* @prop {TypeStatus} status
|
|
24
|
-
* @prop {boolean} validateOnBlur
|
|
25
|
-
* @prop {boolean} rounded
|
|
26
|
-
* @prop {boolean} filled
|
|
27
|
-
* @prop {number} rows
|
|
28
|
-
* @prop {boolean} autocorrect
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* @csspart textarea
|
|
32
|
-
*
|
|
33
|
-
* @cssproperty --kemet-textarea-padding - The padding on the textarea.
|
|
34
|
-
* @cssproperty --kemet-textarea-border - The border of the textarea.
|
|
35
|
-
* @cssproperty --kemet-textarea-border-color-error - The border of the error state.
|
|
36
|
-
* @cssproperty --kemet-textarea-border-color-success - The border of the success state.
|
|
37
|
-
* @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.
|
|
38
|
-
* @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.
|
|
39
|
-
* @cssproperty --kemet-textarea-border-filled - The border on filled.
|
|
40
|
-
* @cssproperty --kemet-textarea-color-filled - The color on filled.
|
|
41
|
-
* @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.
|
|
42
|
-
* @cssproperty --kemet-textarea-background-color-error - The error state background color.
|
|
43
|
-
* @cssproperty --kemet-textarea-background-color-success - The success state background color.
|
|
44
|
-
* @cssproperty --kemet-textarea-background-color-warning - The warning state background color.
|
|
45
|
-
*
|
|
46
|
-
*/
|
|
47
|
-
export default class KemetTextarea extends LitElement {
|
|
48
|
-
formSubmitController: FormSubmitController;
|
|
49
|
-
static styles: import("lit").CSSResult[];
|
|
50
|
-
slug: string;
|
|
51
|
-
name: string;
|
|
52
|
-
placeholder: string;
|
|
53
|
-
minlength: number;
|
|
54
|
-
maxlength: number;
|
|
55
|
-
inputmode: string;
|
|
56
|
-
autofocus: boolean;
|
|
57
|
-
disabled: boolean;
|
|
58
|
-
readonly: boolean;
|
|
59
|
-
required: boolean;
|
|
60
|
-
value: string;
|
|
61
|
-
invalid: boolean;
|
|
62
|
-
status: TypeStatus;
|
|
63
|
-
rows: number;
|
|
64
|
-
validateOnBlur: boolean;
|
|
65
|
-
filled: boolean;
|
|
66
|
-
rounded: boolean;
|
|
67
|
-
autocorrect: boolean;
|
|
68
|
-
form: HTMLFormElement;
|
|
69
|
-
control: KemetFieldInterface;
|
|
70
|
-
textarea: HTMLTextAreaElement;
|
|
71
|
-
hasFocus: boolean;
|
|
72
|
-
validity: ValidityState;
|
|
73
|
-
constructor();
|
|
74
|
-
firstUpdated(): void;
|
|
75
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
76
|
-
/**
|
|
77
|
-
* Handles when the textarea receives focus
|
|
78
|
-
* @private
|
|
79
|
-
*/
|
|
80
|
-
handleFocus(): void;
|
|
81
|
-
/**
|
|
82
|
-
* Handles when the textarea loses focus
|
|
83
|
-
* @private
|
|
84
|
-
*/
|
|
85
|
-
handleBlur(): void;
|
|
86
|
-
/**
|
|
87
|
-
* Handles when the textarea changes value
|
|
88
|
-
* @private
|
|
89
|
-
*/
|
|
90
|
-
handleChange(): void;
|
|
91
|
-
/**
|
|
92
|
-
* Handles when the textarea receives input
|
|
93
|
-
* @private
|
|
94
|
-
*/
|
|
95
|
-
handleInput(): void;
|
|
96
|
-
/**
|
|
97
|
-
* Handles when the textarea has an error
|
|
98
|
-
* @private
|
|
99
|
-
*/
|
|
100
|
-
handleInvalid(): void;
|
|
101
|
-
/**
|
|
102
|
-
* Checks the validity of the character limit for the count component
|
|
103
|
-
* @private
|
|
104
|
-
* @returns {boolean}
|
|
105
|
-
*/
|
|
106
|
-
checkLimitValidity(): boolean;
|
|
107
|
-
/**
|
|
108
|
-
* Checks the validity of the standard input
|
|
109
|
-
* @public
|
|
110
|
-
* @returns {boolean}
|
|
111
|
-
*/
|
|
112
|
-
checkValidity(): boolean;
|
|
113
|
-
/**
|
|
114
|
-
* Focuses the standard input
|
|
115
|
-
* @public
|
|
116
|
-
*/
|
|
117
|
-
focus(): void;
|
|
118
|
-
}
|
|
119
|
-
declare global {
|
|
120
|
-
interface HTMLElementTagNameMap {
|
|
121
|
-
'kemet-textarea': KemetTextarea;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
@@ -1,293 +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 { FormSubmitController } from '../../utilities/controllers/forms';
|
|
7
|
-
import { stylesTextarea } from './styles';
|
|
8
|
-
/**
|
|
9
|
-
* @since 1.0.0
|
|
10
|
-
* @status stable
|
|
11
|
-
*
|
|
12
|
-
* @tagname kemet-textarea
|
|
13
|
-
* @summary An enhanced textarea element.
|
|
14
|
-
*
|
|
15
|
-
* @prop {string} slug
|
|
16
|
-
* @prop {string} name
|
|
17
|
-
* @prop {string} placeholder
|
|
18
|
-
* @prop {number} minlength
|
|
19
|
-
* @prop {number} maxlength
|
|
20
|
-
* @prop {string} inputmode
|
|
21
|
-
* @prop {boolean} disabled
|
|
22
|
-
* @prop {boolean} readonly
|
|
23
|
-
* @prop {boolean} required
|
|
24
|
-
* @prop {string} value
|
|
25
|
-
* @prop {boolean} invalid
|
|
26
|
-
* @prop {TypeStatus} status
|
|
27
|
-
* @prop {boolean} validateOnBlur
|
|
28
|
-
* @prop {boolean} rounded
|
|
29
|
-
* @prop {boolean} filled
|
|
30
|
-
* @prop {number} rows
|
|
31
|
-
* @prop {boolean} autocorrect
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* @csspart textarea
|
|
35
|
-
*
|
|
36
|
-
* @cssproperty --kemet-textarea-padding - The padding on the textarea.
|
|
37
|
-
* @cssproperty --kemet-textarea-border - The border of the textarea.
|
|
38
|
-
* @cssproperty --kemet-textarea-border-color-error - The border of the error state.
|
|
39
|
-
* @cssproperty --kemet-textarea-border-color-success - The border of the success state.
|
|
40
|
-
* @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.
|
|
41
|
-
* @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.
|
|
42
|
-
* @cssproperty --kemet-textarea-border-filled - The border on filled.
|
|
43
|
-
* @cssproperty --kemet-textarea-color-filled - The color on filled.
|
|
44
|
-
* @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.
|
|
45
|
-
* @cssproperty --kemet-textarea-background-color-error - The error state background color.
|
|
46
|
-
* @cssproperty --kemet-textarea-background-color-success - The success state background color.
|
|
47
|
-
* @cssproperty --kemet-textarea-background-color-warning - The warning state background color.
|
|
48
|
-
*
|
|
49
|
-
*/
|
|
50
|
-
let KemetTextarea = class KemetTextarea extends LitElement {
|
|
51
|
-
constructor() {
|
|
52
|
-
super();
|
|
53
|
-
this.slug = 'textarea';
|
|
54
|
-
this.name = 'textarea';
|
|
55
|
-
this.value = '';
|
|
56
|
-
this.status = 'standard';
|
|
57
|
-
this.rows = 4;
|
|
58
|
-
/** @internal */
|
|
59
|
-
this.formSubmitController = new FormSubmitController(this);
|
|
60
|
-
}
|
|
61
|
-
firstUpdated() {
|
|
62
|
-
// elements
|
|
63
|
-
this.form = this.closest('form');
|
|
64
|
-
this.control = this.closest('kemet-field');
|
|
65
|
-
this.textarea = this.shadowRoot.querySelector('textarea');
|
|
66
|
-
}
|
|
67
|
-
render() {
|
|
68
|
-
return html `
|
|
69
|
-
<textarea
|
|
70
|
-
part="textarea"
|
|
71
|
-
id=${this.slug}
|
|
72
|
-
name=${this.name}
|
|
73
|
-
.value=${live(this.value)}
|
|
74
|
-
?disabled=${this.disabled}
|
|
75
|
-
?readonly=${this.readonly}
|
|
76
|
-
?required=${this.required}
|
|
77
|
-
placeholder=${ifDefined(this.placeholder)}
|
|
78
|
-
rows=${ifDefined(this.rows)}
|
|
79
|
-
minlength=${ifDefined(this.minlength)}
|
|
80
|
-
maxlength=${ifDefined(this.maxlength)}
|
|
81
|
-
autocorrect=${ifDefined(this.autocorrect)}
|
|
82
|
-
?autofocus=${this.autofocus}
|
|
83
|
-
spellcheck=${ifDefined(this.spellcheck)}
|
|
84
|
-
inputmode=${ifDefined(this.inputmode)}
|
|
85
|
-
@change=${this.handleChange}
|
|
86
|
-
@input=${this.handleInput}
|
|
87
|
-
@focus=${this.handleFocus}
|
|
88
|
-
@blur=${this.handleBlur}
|
|
89
|
-
@invalid=${this.handleInvalid}
|
|
90
|
-
></textarea>
|
|
91
|
-
`;
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* Handles when the textarea receives focus
|
|
95
|
-
* @private
|
|
96
|
-
*/
|
|
97
|
-
handleFocus() {
|
|
98
|
-
this.hasFocus = true;
|
|
99
|
-
/**
|
|
100
|
-
* Fires when the input receives and loses focus
|
|
101
|
-
*/
|
|
102
|
-
this.dispatchEvent(new CustomEvent('kemet-input-focused', {
|
|
103
|
-
bubbles: true,
|
|
104
|
-
composed: true,
|
|
105
|
-
detail: true,
|
|
106
|
-
}));
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Handles when the textarea loses focus
|
|
110
|
-
* @private
|
|
111
|
-
*/
|
|
112
|
-
handleBlur() {
|
|
113
|
-
this.hasFocus = false;
|
|
114
|
-
/**
|
|
115
|
-
* Fires when the input receives and loses focus
|
|
116
|
-
*/
|
|
117
|
-
this.dispatchEvent(new CustomEvent('kemet-input-focused', {
|
|
118
|
-
bubbles: true,
|
|
119
|
-
composed: true,
|
|
120
|
-
detail: false,
|
|
121
|
-
}));
|
|
122
|
-
if (this.validateOnBlur && this.form && !this.form.noValidate) {
|
|
123
|
-
this.textarea.checkValidity();
|
|
124
|
-
this.validity = this.textarea.validity;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
/**
|
|
128
|
-
* Handles when the textarea changes value
|
|
129
|
-
* @private
|
|
130
|
-
*/
|
|
131
|
-
handleChange() {
|
|
132
|
-
this.value = this.textarea.value;
|
|
133
|
-
if (this.textarea.checkValidity() && this.checkLimitValidity()) {
|
|
134
|
-
this.invalid = false;
|
|
135
|
-
this.status = 'standard';
|
|
136
|
-
this.validity = this.textarea.validity;
|
|
137
|
-
/**
|
|
138
|
-
* Fires when there's a change in status
|
|
139
|
-
*/
|
|
140
|
-
this.dispatchEvent(new CustomEvent('kemet-input-status', {
|
|
141
|
-
bubbles: true,
|
|
142
|
-
composed: true,
|
|
143
|
-
detail: {
|
|
144
|
-
status: 'standard',
|
|
145
|
-
validity: this.textarea.validity,
|
|
146
|
-
element: this,
|
|
147
|
-
},
|
|
148
|
-
}));
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
/**
|
|
152
|
-
* Handles when the textarea receives input
|
|
153
|
-
* @private
|
|
154
|
-
*/
|
|
155
|
-
handleInput() {
|
|
156
|
-
this.value = this.textarea.value;
|
|
157
|
-
/**
|
|
158
|
-
* Fires when the input receives input
|
|
159
|
-
*/
|
|
160
|
-
this.dispatchEvent(new CustomEvent('kemet-input-input', {
|
|
161
|
-
bubbles: true,
|
|
162
|
-
composed: true,
|
|
163
|
-
detail: this.value,
|
|
164
|
-
}));
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* Handles when the textarea has an error
|
|
168
|
-
* @private
|
|
169
|
-
*/
|
|
170
|
-
handleInvalid() {
|
|
171
|
-
this.validity = this.textarea.validity;
|
|
172
|
-
if (this.validateOnBlur) {
|
|
173
|
-
this.invalid = true;
|
|
174
|
-
this.status = 'error';
|
|
175
|
-
/**
|
|
176
|
-
* Fires when there's a change in status
|
|
177
|
-
*/
|
|
178
|
-
this.dispatchEvent(new CustomEvent('kemet-input-status', {
|
|
179
|
-
bubbles: true,
|
|
180
|
-
composed: true,
|
|
181
|
-
detail: {
|
|
182
|
-
status: 'error',
|
|
183
|
-
validity: this.textarea.validity,
|
|
184
|
-
element: this,
|
|
185
|
-
},
|
|
186
|
-
}));
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
/**
|
|
190
|
-
* Checks the validity of the character limit for the count component
|
|
191
|
-
* @private
|
|
192
|
-
* @returns {boolean}
|
|
193
|
-
*/
|
|
194
|
-
checkLimitValidity() {
|
|
195
|
-
if (this.control) {
|
|
196
|
-
const count = this.control.querySelector('kemet-count');
|
|
197
|
-
if (count) {
|
|
198
|
-
return this.value.length < count.limit;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
return true;
|
|
202
|
-
}
|
|
203
|
-
/**
|
|
204
|
-
* Checks the validity of the standard input
|
|
205
|
-
* @public
|
|
206
|
-
* @returns {boolean}
|
|
207
|
-
*/
|
|
208
|
-
checkValidity() {
|
|
209
|
-
return this.textarea.checkValidity();
|
|
210
|
-
}
|
|
211
|
-
/**
|
|
212
|
-
* Focuses the standard input
|
|
213
|
-
* @public
|
|
214
|
-
*/
|
|
215
|
-
focus() {
|
|
216
|
-
return this.textarea.focus();
|
|
217
|
-
}
|
|
218
|
-
};
|
|
219
|
-
KemetTextarea.styles = [stylesTextarea];
|
|
220
|
-
__decorate([
|
|
221
|
-
property({ type: String })
|
|
222
|
-
], KemetTextarea.prototype, "slug", void 0);
|
|
223
|
-
__decorate([
|
|
224
|
-
property({ type: String })
|
|
225
|
-
], KemetTextarea.prototype, "name", void 0);
|
|
226
|
-
__decorate([
|
|
227
|
-
property({ type: String })
|
|
228
|
-
], KemetTextarea.prototype, "placeholder", void 0);
|
|
229
|
-
__decorate([
|
|
230
|
-
property({ type: Number })
|
|
231
|
-
], KemetTextarea.prototype, "minlength", void 0);
|
|
232
|
-
__decorate([
|
|
233
|
-
property({ type: Number })
|
|
234
|
-
], KemetTextarea.prototype, "maxlength", void 0);
|
|
235
|
-
__decorate([
|
|
236
|
-
property({ type: String })
|
|
237
|
-
], KemetTextarea.prototype, "inputmode", void 0);
|
|
238
|
-
__decorate([
|
|
239
|
-
property({ type: Boolean })
|
|
240
|
-
], KemetTextarea.prototype, "autofocus", void 0);
|
|
241
|
-
__decorate([
|
|
242
|
-
property({ type: Boolean, reflect: true })
|
|
243
|
-
], KemetTextarea.prototype, "disabled", void 0);
|
|
244
|
-
__decorate([
|
|
245
|
-
property({ type: Boolean })
|
|
246
|
-
], KemetTextarea.prototype, "readonly", void 0);
|
|
247
|
-
__decorate([
|
|
248
|
-
property({ type: Boolean, reflect: true })
|
|
249
|
-
], KemetTextarea.prototype, "required", void 0);
|
|
250
|
-
__decorate([
|
|
251
|
-
property({ type: String })
|
|
252
|
-
], KemetTextarea.prototype, "value", void 0);
|
|
253
|
-
__decorate([
|
|
254
|
-
property({ type: Boolean, reflect: true })
|
|
255
|
-
], KemetTextarea.prototype, "invalid", void 0);
|
|
256
|
-
__decorate([
|
|
257
|
-
property({ type: String, reflect: true })
|
|
258
|
-
], KemetTextarea.prototype, "status", void 0);
|
|
259
|
-
__decorate([
|
|
260
|
-
property({ type: Number })
|
|
261
|
-
], KemetTextarea.prototype, "rows", void 0);
|
|
262
|
-
__decorate([
|
|
263
|
-
property({ type: Boolean, attribute: 'validate-on-blur' })
|
|
264
|
-
], KemetTextarea.prototype, "validateOnBlur", void 0);
|
|
265
|
-
__decorate([
|
|
266
|
-
property({ type: Boolean, reflect: true })
|
|
267
|
-
], KemetTextarea.prototype, "filled", void 0);
|
|
268
|
-
__decorate([
|
|
269
|
-
property({ type: Boolean, reflect: true })
|
|
270
|
-
], KemetTextarea.prototype, "rounded", void 0);
|
|
271
|
-
__decorate([
|
|
272
|
-
property({ type: Boolean })
|
|
273
|
-
], KemetTextarea.prototype, "autocorrect", void 0);
|
|
274
|
-
__decorate([
|
|
275
|
-
state()
|
|
276
|
-
], KemetTextarea.prototype, "form", void 0);
|
|
277
|
-
__decorate([
|
|
278
|
-
state()
|
|
279
|
-
], KemetTextarea.prototype, "control", void 0);
|
|
280
|
-
__decorate([
|
|
281
|
-
state()
|
|
282
|
-
], KemetTextarea.prototype, "textarea", void 0);
|
|
283
|
-
__decorate([
|
|
284
|
-
state()
|
|
285
|
-
], KemetTextarea.prototype, "hasFocus", void 0);
|
|
286
|
-
__decorate([
|
|
287
|
-
state()
|
|
288
|
-
], KemetTextarea.prototype, "validity", void 0);
|
|
289
|
-
KemetTextarea = __decorate([
|
|
290
|
-
customElement('kemet-textarea')
|
|
291
|
-
], KemetTextarea);
|
|
292
|
-
export default KemetTextarea;
|
|
293
|
-
//# sourceMappingURL=kemet-textarea.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kemet-textarea.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/kemet-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesTextarea } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n *\n * @prop {string} slug\n * @prop {string} name\n * @prop {string} placeholder\n * @prop {number} minlength\n * @prop {number} maxlength\n * @prop {string} inputmode\n * @prop {boolean} disabled\n * @prop {boolean} readonly\n * @prop {boolean} required\n * @prop {string} value\n * @prop {boolean} invalid\n * @prop {TypeStatus} status\n * @prop {boolean} validateOnBlur\n * @prop {boolean} rounded\n * @prop {boolean} filled\n * @prop {number} rows\n * @prop {boolean} autocorrect\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n */\n\n@customElement('kemet-textarea')\nexport default class KemetTextarea extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [stylesTextarea];\n\n @property({ type: String })\n slug: string = 'textarea';\n\n @property({ type: String })\n name: string = 'textarea';\n\n @property({ type: String })\n placeholder: string;\n\n @property({ type: Number })\n minlength: number;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: String })\n inputmode: string;\n\n @property({ type: Boolean })\n autofocus: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean;\n\n @property({ type: Boolean })\n readonly: boolean;\n\n @property({ type: Boolean, reflect: true })\n required: boolean;\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n invalid: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: Number })\n rows: number = 4;\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean;\n\n @property({ type: Boolean })\n autocorrect: boolean;\n\n @state()\n form: HTMLFormElement;\n\n @state()\n control: KemetFieldInterface;\n\n @state()\n textarea: HTMLTextAreaElement;\n\n @state()\n hasFocus: boolean;\n\n @state()\n validity: ValidityState;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n // elements\n this.form = this.closest('form');\n this.control = this.closest('kemet-field');\n this.textarea = this.shadowRoot.querySelector('textarea');\n }\n\n render() {\n return html`\n <textarea\n part=\"textarea\"\n id=${this.slug}\n name=${this.name}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n inputmode=${ifDefined(this.inputmode)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @invalid=${this.handleInvalid}\n ></textarea>\n `;\n }\n\n /**\n * Handles when the textarea receives focus\n * @private\n */\n handleFocus() {\n this.hasFocus = true;\n\n /**\n * Fires when the input receives and loses focus\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-focused', {\n bubbles: true,\n composed: true,\n detail: true,\n }),\n );\n }\n\n /**\n * Handles when the textarea loses focus\n * @private\n */\n handleBlur() {\n this.hasFocus = false;\n\n /**\n * Fires when the input receives and loses focus\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-focused', {\n bubbles: true,\n composed: true,\n detail: false,\n }),\n );\n\n if (this.validateOnBlur && this.form && !this.form.noValidate) {\n this.textarea.checkValidity();\n this.validity = this.textarea.validity;\n }\n }\n\n /**\n * Handles when the textarea changes value\n * @private\n */\n handleChange() {\n this.value = this.textarea.value;\n\n if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n this.invalid = false;\n this.status = 'standard';\n this.validity = this.textarea.validity;\n\n /**\n * Fires when there's a change in status\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'standard',\n validity: this.textarea.validity,\n element: this,\n },\n }),\n );\n }\n }\n\n /**\n * Handles when the textarea receives input\n * @private\n */\n handleInput() {\n this.value = this.textarea.value;\n\n /**\n * Fires when the input receives input\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-input', {\n bubbles: true,\n composed: true,\n detail: this.value,\n }),\n );\n }\n\n /**\n * Handles when the textarea has an error\n * @private\n */\n handleInvalid() {\n this.validity = this.textarea.validity;\n\n if (this.validateOnBlur) {\n this.invalid = true;\n this.status = 'error';\n\n /**\n * Fires when there's a change in status\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: this.textarea.validity,\n element: this,\n },\n }),\n );\n }\n }\n\n /**\n * Checks the validity of the character limit for the count component\n * @private\n * @returns {boolean}\n */\n checkLimitValidity(): boolean {\n if (this.control) {\n const count = this.control.querySelector('kemet-count');\n if (count) {\n return this.value.length < count.limit;\n }\n }\n\n return true;\n }\n\n /**\n * Checks the validity of the standard input\n * @public\n * @returns {boolean}\n */\n checkValidity(): boolean {\n return this.textarea.checkValidity();\n }\n\n /**\n * Focuses the standard input\n * @public\n */\n focus() {\n return this.textarea.focus();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-textarea': KemetTextarea\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const stylesTextarea: import("lit").CSSResult;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTextarea = css`\n :host {\n --kemet-textarea-padding: 1rem;\n --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));\n --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));\n --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));\n --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n --kemet-textarea-icon-left-padding: 3rem;\n --kemet-textarea-icon-right-padding: 3rem;\n --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n --kemet-textarea-border-filled: none;\n --kemet-textarea-color-filled: rgb(var(--kemet-color-white));\n --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));\n --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));\n --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));\n --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));\n\n position: relative;\n display: block;\n }\n\n textarea {\n color: rgb(var(--kemet-color-text));\n display: block;\n width: 100%;\n padding: var(--kemet-textarea-padding);\n border: var(--kemet-textarea-border);\n appearance: none;\n box-sizing: border-box;\n background: transparent;\n }\n\n :host([status='error']) textarea {\n border: var(--kemet-textarea-border-color-error);\n }\n\n :host([status='success']) textarea {\n border: var(--kemet-textarea-border-color-success);\n }\n\n :host([status='warning']) textarea {\n border: var(--kemet-textarea-border-color-warning);\n }\n\n :host([disabled]) textarea {\n opacity: 0.5;\n }\n\n :host([icon-left]) textarea {\n padding-left: var(--kemet-textarea-icon-left-padding);\n }\n\n :host([icon-right]) textarea {\n padding-right: var(--kemet-textarea-icon-right-padding);\n }\n\n :host([rounded]) textarea {\n border-radius: var(--kemet-textarea-border-radius-rounded);\n }\n\n :host([filled]) textarea {\n border: var(--kemet-textarea-border-filled);\n color: var(--kemet-textarea-color-filled);\n background-color: var(--kemet-textarea-background-color-filled);\n }\n\n :host([filled]) textarea::placeholder {\n color: var(--kemet-textarea-color-filled);\n }\n\n :host([status='error'][filled]) textarea {\n background-color: var(--kemet-textarea-background-color-error);\n }\n\n :host([status='success'][filled]) textarea {\n background-color: var(--kemet-textarea-background-color-success);\n }\n\n :host([status='warning'][filled]) textarea {\n background-color: var(--kemet-textarea-background-color-warning);\n }\n`;\n"]}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
|
|
2
|
-
export interface KemetTextareaInterface extends HTMLElement {
|
|
3
|
-
slug?: string;
|
|
4
|
-
name?: string;
|
|
5
|
-
placeholder?: string;
|
|
6
|
-
minlength?: number;
|
|
7
|
-
maxlength?: number;
|
|
8
|
-
inputmode?: string;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
readonly?: boolean;
|
|
11
|
-
required?: boolean;
|
|
12
|
-
value?: string;
|
|
13
|
-
invalid?: boolean;
|
|
14
|
-
status?: TypeStatus;
|
|
15
|
-
validateOnBlur?: boolean;
|
|
16
|
-
rounded?: boolean;
|
|
17
|
-
filled?: boolean;
|
|
18
|
-
rows?: number;
|
|
19
|
-
autocorrect?: boolean;
|
|
20
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\n\nexport interface KemetTextareaInterface extends HTMLElement {\n slug?: string,\n name?: string,\n placeholder?: string,\n minlength?: number,\n maxlength?: number,\n inputmode?: string,\n disabled?: boolean,\n readonly?: boolean,\n required?: boolean,\n value?: string,\n invalid?: boolean,\n status?: TypeStatus,\n validateOnBlur?: boolean,\n rounded?: boolean,\n filled?: boolean,\n rows?: number,\n autocorrect?: boolean,\n}\n"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
-
import '../kemet-toggle';
|
|
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 Squared: Story;
|
|
11
|
-
export declare const ShowOptions: Story;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
|
-
import '../kemet-toggle';
|
|
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 / Toggle',
|
|
9
|
-
component: 'kemet-toggle',
|
|
10
|
-
args: {
|
|
11
|
-
label: 'Label'
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
export default meta;
|
|
15
|
-
const Template = (args) => html `
|
|
16
|
-
<kemet-toggle
|
|
17
|
-
label=${ifDefined(args.label)}
|
|
18
|
-
?disabled=${args.disabled}
|
|
19
|
-
?checked=${args.checked}
|
|
20
|
-
?show=${args.show}
|
|
21
|
-
?squared=${args.squared}
|
|
22
|
-
option-unchecked=${ifDefined(args.optionUnchecked)}
|
|
23
|
-
option-checked=${ifDefined(args.optionChecked)}
|
|
24
|
-
></kemet-toggle>
|
|
25
|
-
`;
|
|
26
|
-
export const Standard = {
|
|
27
|
-
render: args => Template(args),
|
|
28
|
-
};
|
|
29
|
-
export const Squared = {
|
|
30
|
-
render: args => Template(args),
|
|
31
|
-
args: {
|
|
32
|
-
squared: true,
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
export const ShowOptions = {
|
|
36
|
-
render: args => Template(args),
|
|
37
|
-
args: {
|
|
38
|
-
show: true,
|
|
39
|
-
optionUnchecked: 'No',
|
|
40
|
-
optionChecked: 'Yes',
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-toggle/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;YAEnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;gBACjB,IAAI,CAAC,QAAQ;eACd,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI;eACN,IAAI,CAAC,OAAO;uBACJ,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qBACjC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;CAEjD,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,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,KAAK;KACrB;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-toggle';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Toggle',\n component: 'kemet-toggle',\n args: {\n label: 'Label'\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n <kemet-toggle\n label=${ifDefined(args.label)}\n ?disabled=${args.disabled}\n ?checked=${args.checked}\n ?show=${args.show}\n ?squared=${args.squared}\n option-unchecked=${ifDefined(args.optionUnchecked)}\n option-checked=${ifDefined(args.optionChecked)}\n ></kemet-toggle>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n};\n\nexport const Squared: Story = {\n render: args => Template(args),\n args: {\n squared: true,\n },\n};\n\nexport const ShowOptions: Story = {\n render: args => Template(args),\n args: {\n show: true,\n optionUnchecked: 'No',\n optionChecked: 'Yes',\n },\n};\n"]}
|