kemet-ui 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +305 -305
- package/dist/components/kemet-alert/docs/stories.js.map +1 -1
- package/dist/components/kemet-avatar/docs/stories.d.ts +1 -0
- package/dist/components/kemet-avatar/docs/stories.js +5 -4
- package/dist/components/kemet-avatar/docs/stories.js.map +1 -1
- package/dist/components/kemet-card/docs/stories.js.map +1 -0
- package/dist/components/kemet-carousel/docs/stories.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel.d.ts +13 -0
- package/dist/components/kemet-carousel/kemet-carousel.js +2 -0
- package/dist/components/kemet-carousel/kemet-carousel.js.map +1 -1
- package/dist/components/kemet-checkbox/docs/stories.js.map +1 -0
- package/dist/components/kemet-combo/docs/stories.js.map +1 -0
- package/dist/components/kemet-count/docs/stories.js.map +1 -0
- package/dist/components/kemet-draggable/docs/stories.js.map +1 -0
- package/dist/components/kemet-draggable/kemet-draggable.d.ts +7 -0
- package/dist/components/kemet-draggable/kemet-draggable.js.map +1 -1
- package/dist/components/kemet-drawer/docs/stories.js.map +1 -0
- package/dist/components/kemet-fab/docs/stories.js.map +1 -0
- package/dist/components/kemet-field/docs/stories.js.map +1 -0
- package/dist/components/kemet-flipcard/docs/stories.js.map +1 -0
- package/dist/components/kemet-icon/docs/stories.js.map +1 -0
- package/dist/components/kemet-input/docs/stories.js.map +1 -0
- package/dist/components/kemet-modal/docs/stories.js.map +1 -0
- package/dist/components/kemet-password/docs/stories.js.map +1 -0
- package/dist/components/kemet-popper/docs/stories.js.map +1 -0
- package/dist/components/kemet-radio/docs/stories.js.map +1 -0
- package/dist/components/kemet-rotator/docs/stories.js.map +1 -0
- package/dist/components/kemet-scroll-link/docs/stories.js.map +1 -0
- package/dist/components/kemet-scroll-nav/docs/stories.js.map +1 -0
- package/dist/components/kemet-scroll-nav/styles.js +1 -0
- package/dist/components/kemet-scroll-nav/styles.js.map +1 -1
- package/dist/components/kemet-scroll-snap/docs/stories.js.map +1 -0
- package/dist/components/kemet-select/docs/stories.js.map +1 -0
- package/dist/components/kemet-sortable/docs/stories.js.map +1 -0
- package/dist/components/kemet-svgs/docs/stories.js.map +1 -0
- package/dist/components/kemet-tabs/docs/stories.js.map +1 -0
- package/dist/components/kemet-tabs/kemet-tab-panel.js.map +1 -1
- package/dist/components/kemet-tabs/kemet-tabs.d.ts +1 -5
- package/dist/components/kemet-tabs/kemet-tabs.js +8 -27
- package/dist/components/kemet-tabs/kemet-tabs.js.map +1 -1
- package/dist/components/kemet-tabs/styles.js +14 -0
- package/dist/components/kemet-tabs/styles.js.map +1 -1
- package/dist/components/kemet-tabs/types.d.ts +1 -3
- package/dist/components/kemet-tabs/types.js.map +1 -1
- package/dist/components/kemet-textarea/docs/stories.js.map +1 -0
- package/dist/components/kemet-toggle/docs/stories.js.map +1 -0
- package/dist/components/kemet-tooltip/docs/stories.js.map +1 -0
- package/dist/components/kemet-tracker/docs/stories.js.map +1 -0
- package/dist/components/kemet-upload/docs/stories.js.map +1 -0
- package/dist/kemet-components.bundle.js +7 -7
- package/dist/kemet-components.bundle.js.map +1 -1
- package/dist/kemet-components.cjs +1802 -1804
- package/dist/kemet-components.js +1802 -1804
- package/dist/styles/components/_config.scss +4 -0
- package/dist/styles/components/accordion.scss +9 -0
- package/dist/styles/components/drawer.scss +11 -0
- package/dist/styles/components/modal.scss +8 -0
- package/dist/styles/components/scrollsnap.scss +11 -0
- package/dist/styles/core/attributes.scss +38 -0
- package/dist/styles/core/layout.scss +169 -0
- package/dist/styles/kemet.base.css +1 -0
- package/dist/styles/kemet.base.scss +28 -0
- package/dist/styles/kemet.components.scss +4 -0
- package/dist/styles/kemet.core.css +155 -154
- package/dist/styles/kemet.core.css.map +1 -1
- package/dist/styles/kemet.core.scss +2 -0
- package/dist/styles/shared/_config.scss +358 -0
- package/dist/styles/shared/_helpers.scss +458 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/dist/.storybook/decorators.d.ts +0 -2
- package/dist/.storybook/decorators.js +0 -28
- package/dist/.storybook/decorators.js.map +0 -1
- package/dist/components/kemet-alert/stories.d.ts +0 -9
- package/dist/components/kemet-alert/stories.js +0 -77
- package/dist/components/kemet-alert/stories.js.map +0 -1
- package/dist/components/kemet-avatar/stories.d.ts +0 -10
- package/dist/components/kemet-avatar/stories.js +0 -85
- package/dist/components/kemet-avatar/stories.js.map +0 -1
- package/dist/src/components/kemet-accordion/kemet-accordion-panel.d.ts +0 -51
- package/dist/src/components/kemet-accordion/kemet-accordion-panel.js +0 -136
- package/dist/src/components/kemet-accordion/kemet-accordion-panel.js.map +0 -1
- package/dist/src/components/kemet-accordion/kemet-accordion.d.ts +0 -37
- package/dist/src/components/kemet-accordion/kemet-accordion.js +0 -129
- package/dist/src/components/kemet-accordion/kemet-accordion.js.map +0 -1
- package/dist/src/components/kemet-accordion/stories.d.ts +0 -10
- package/dist/src/components/kemet-accordion/stories.js +0 -44
- package/dist/src/components/kemet-accordion/stories.js.map +0 -1
- package/dist/src/components/kemet-accordion/styles.d.ts +0 -2
- package/dist/src/components/kemet-accordion/styles.js +0 -42
- package/dist/src/components/kemet-accordion/styles.js.map +0 -1
- package/dist/src/components/kemet-accordion/types.d.ts +0 -9
- package/dist/src/components/kemet-accordion/types.js +0 -2
- package/dist/src/components/kemet-accordion/types.js.map +0 -1
- package/dist/src/components/kemet-alert/docs/stories.d.ts +0 -9
- package/dist/src/components/kemet-alert/docs/stories.js +0 -77
- package/dist/src/components/kemet-alert/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-alert/kemet-alert.d.ts +0 -52
- package/dist/src/components/kemet-alert/kemet-alert.js +0 -108
- package/dist/src/components/kemet-alert/kemet-alert.js.map +0 -1
- package/dist/src/components/kemet-alert/styles.d.ts +0 -1
- package/dist/src/components/kemet-alert/styles.js +0 -104
- package/dist/src/components/kemet-alert/styles.js.map +0 -1
- package/dist/src/components/kemet-alert/types.d.ts +0 -10
- package/dist/src/components/kemet-alert/types.js +0 -2
- package/dist/src/components/kemet-alert/types.js.map +0 -1
- package/dist/src/components/kemet-avatar/docs/stories.d.ts +0 -11
- package/dist/src/components/kemet-avatar/docs/stories.js +0 -86
- package/dist/src/components/kemet-avatar/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-avatar/kemet-avatar.d.ts +0 -43
- package/dist/src/components/kemet-avatar/kemet-avatar.js +0 -78
- package/dist/src/components/kemet-avatar/kemet-avatar.js.map +0 -1
- package/dist/src/components/kemet-avatar/kemet-avatars.d.ts +0 -20
- package/dist/src/components/kemet-avatar/kemet-avatars.js +0 -25
- package/dist/src/components/kemet-avatar/kemet-avatars.js.map +0 -1
- package/dist/src/components/kemet-avatar/styles.d.ts +0 -2
- package/dist/src/components/kemet-avatar/styles.js +0 -58
- package/dist/src/components/kemet-avatar/styles.js.map +0 -1
- package/dist/src/components/kemet-avatar/types.d.ts +0 -8
- package/dist/src/components/kemet-avatar/types.js +0 -2
- package/dist/src/components/kemet-avatar/types.js.map +0 -1
- package/dist/src/components/kemet-badge/docs/stories.d.ts +0 -9
- package/dist/src/components/kemet-badge/docs/stories.js +0 -40
- package/dist/src/components/kemet-badge/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-badge/kemet-badge.d.ts +0 -30
- package/dist/src/components/kemet-badge/kemet-badge.js +0 -55
- package/dist/src/components/kemet-badge/kemet-badge.js.map +0 -1
- package/dist/src/components/kemet-badge/styles.d.ts +0 -1
- package/dist/src/components/kemet-badge/styles.js +0 -40
- package/dist/src/components/kemet-badge/styles.js.map +0 -1
- package/dist/src/components/kemet-badge/types.d.ts +0 -6
- package/dist/src/components/kemet-badge/types.js +0 -2
- package/dist/src/components/kemet-badge/types.js.map +0 -1
- package/dist/src/components/kemet-button/docs/stories.d.ts +0 -9
- package/dist/src/components/kemet-button/docs/stories.js +0 -51
- package/dist/src/components/kemet-button/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-button/kemet-button.d.ts +0 -89
- package/dist/src/components/kemet-button/kemet-button.js +0 -153
- package/dist/src/components/kemet-button/kemet-button.js.map +0 -1
- package/dist/src/components/kemet-button/styles.d.ts +0 -1
- package/dist/src/components/kemet-button/styles.js +0 -73
- package/dist/src/components/kemet-button/styles.js.map +0 -1
- package/dist/src/components/kemet-button/types.d.ts +0 -10
- package/dist/src/components/kemet-button/types.js +0 -2
- package/dist/src/components/kemet-button/types.js.map +0 -1
- package/dist/src/components/kemet-card/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-card/kemet-card.d.ts +0 -47
- package/dist/src/components/kemet-card/kemet-card.js +0 -65
- package/dist/src/components/kemet-card/kemet-card.js.map +0 -1
- package/dist/src/components/kemet-card/styles.d.ts +0 -1
- package/dist/src/components/kemet-card/styles.js +0 -63
- package/dist/src/components/kemet-card/styles.js.map +0 -1
- package/dist/src/components/kemet-card/types.d.ts +0 -3
- package/dist/src/components/kemet-card/types.js +0 -2
- package/dist/src/components/kemet-card/types.js.map +0 -1
- package/dist/src/components/kemet-carousel/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-current.d.ts +0 -26
- package/dist/src/components/kemet-carousel/kemet-carousel-current.js +0 -44
- package/dist/src/components/kemet-carousel/kemet-carousel-current.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-first.d.ts +0 -25
- package/dist/src/components/kemet-carousel/kemet-carousel-first.js +0 -50
- package/dist/src/components/kemet-carousel/kemet-carousel-first.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-last.d.ts +0 -25
- package/dist/src/components/kemet-carousel/kemet-carousel-last.js +0 -50
- package/dist/src/components/kemet-carousel/kemet-carousel-last.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-link.d.ts +0 -31
- package/dist/src/components/kemet-carousel/kemet-carousel-link.js +0 -64
- package/dist/src/components/kemet-carousel/kemet-carousel-link.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-next.d.ts +0 -25
- package/dist/src/components/kemet-carousel/kemet-carousel-next.js +0 -50
- package/dist/src/components/kemet-carousel/kemet-carousel-next.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-prev.d.ts +0 -25
- package/dist/src/components/kemet-carousel/kemet-carousel-prev.js +0 -50
- package/dist/src/components/kemet-carousel/kemet-carousel-prev.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-slide.d.ts +0 -29
- package/dist/src/components/kemet-carousel/kemet-carousel-slide.js +0 -53
- package/dist/src/components/kemet-carousel/kemet-carousel-slide.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel-total.d.ts +0 -26
- package/dist/src/components/kemet-carousel/kemet-carousel-total.js +0 -44
- package/dist/src/components/kemet-carousel/kemet-carousel-total.js.map +0 -1
- package/dist/src/components/kemet-carousel/kemet-carousel.d.ts +0 -114
- package/dist/src/components/kemet-carousel/kemet-carousel.js +0 -410
- package/dist/src/components/kemet-carousel/kemet-carousel.js.map +0 -1
- package/dist/src/components/kemet-carousel/styles.d.ts +0 -1
- package/dist/src/components/kemet-carousel/styles.js +0 -66
- package/dist/src/components/kemet-carousel/styles.js.map +0 -1
- package/dist/src/components/kemet-carousel/types.d.ts +0 -21
- package/dist/src/components/kemet-carousel/types.js +0 -2
- package/dist/src/components/kemet-carousel/types.js.map +0 -1
- package/dist/src/components/kemet-checkbox/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-checkbox/kemet-checkbox.d.ts +0 -71
- package/dist/src/components/kemet-checkbox/kemet-checkbox.js +0 -192
- package/dist/src/components/kemet-checkbox/kemet-checkbox.js.map +0 -1
- package/dist/src/components/kemet-checkbox/styles.d.ts +0 -1
- package/dist/src/components/kemet-checkbox/styles.js +0 -83
- package/dist/src/components/kemet-checkbox/styles.js.map +0 -1
- package/dist/src/components/kemet-checkbox/types.d.ts +0 -15
- package/dist/src/components/kemet-checkbox/types.js +0 -2
- package/dist/src/components/kemet-checkbox/types.js.map +0 -1
- package/dist/src/components/kemet-combo/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-combo/kemet-combo.d.ts +0 -50
- package/dist/src/components/kemet-combo/kemet-combo.js +0 -162
- package/dist/src/components/kemet-combo/kemet-combo.js.map +0 -1
- package/dist/src/components/kemet-combo/styles.d.ts +0 -1
- package/dist/src/components/kemet-combo/styles.js +0 -44
- package/dist/src/components/kemet-combo/styles.js.map +0 -1
- package/dist/src/components/kemet-combo/types.d.ts +0 -5
- package/dist/src/components/kemet-combo/types.js +0 -2
- package/dist/src/components/kemet-combo/types.js.map +0 -1
- package/dist/src/components/kemet-count/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-count/kemet-count.d.ts +0 -39
- package/dist/src/components/kemet-count/kemet-count.js +0 -98
- package/dist/src/components/kemet-count/kemet-count.js.map +0 -1
- package/dist/src/components/kemet-draggable/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-draggable/kemet-draggable.d.ts +0 -49
- package/dist/src/components/kemet-draggable/kemet-draggable.js +0 -137
- package/dist/src/components/kemet-draggable/kemet-draggable.js.map +0 -1
- package/dist/src/components/kemet-draggable/types.d.ts +0 -6
- package/dist/src/components/kemet-draggable/types.js +0 -2
- package/dist/src/components/kemet-draggable/types.js.map +0 -1
- package/dist/src/components/kemet-drawer/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-drawer/kemet-drawer.d.ts +0 -48
- package/dist/src/components/kemet-drawer/kemet-drawer.js +0 -95
- package/dist/src/components/kemet-drawer/kemet-drawer.js.map +0 -1
- package/dist/src/components/kemet-drawer/styles.d.ts +0 -2
- package/dist/src/components/kemet-drawer/styles.js +0 -314
- package/dist/src/components/kemet-drawer/styles.js.map +0 -1
- package/dist/src/components/kemet-drawer/types.d.ts +0 -8
- package/dist/src/components/kemet-drawer/types.js +0 -2
- package/dist/src/components/kemet-drawer/types.js.map +0 -1
- package/dist/src/components/kemet-fab/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-fab/kemet-fab.d.ts +0 -49
- package/dist/src/components/kemet-fab/kemet-fab.js +0 -107
- package/dist/src/components/kemet-fab/kemet-fab.js.map +0 -1
- package/dist/src/components/kemet-fab/styles.d.ts +0 -1
- package/dist/src/components/kemet-fab/styles.js +0 -95
- package/dist/src/components/kemet-fab/styles.js.map +0 -1
- package/dist/src/components/kemet-fab/types.d.ts +0 -8
- package/dist/src/components/kemet-fab/types.js +0 -2
- package/dist/src/components/kemet-fab/types.js.map +0 -1
- package/dist/src/components/kemet-field/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-field/kemet-field.d.ts +0 -61
- package/dist/src/components/kemet-field/kemet-field.js +0 -144
- package/dist/src/components/kemet-field/kemet-field.js.map +0 -1
- package/dist/src/components/kemet-field/styles.d.ts +0 -1
- package/dist/src/components/kemet-field/styles.js +0 -61
- package/dist/src/components/kemet-field/styles.js.map +0 -1
- package/dist/src/components/kemet-field/types.d.ts +0 -13
- package/dist/src/components/kemet-field/types.js +0 -2
- package/dist/src/components/kemet-field/types.js.map +0 -1
- package/dist/src/components/kemet-flipcard/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +0 -21
- package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.js +0 -42
- package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.js.map +0 -1
- package/dist/src/components/kemet-flipcard/kemet-flipcard.d.ts +0 -52
- package/dist/src/components/kemet-flipcard/kemet-flipcard.js +0 -131
- package/dist/src/components/kemet-flipcard/kemet-flipcard.js.map +0 -1
- package/dist/src/components/kemet-flipcard/styles.d.ts +0 -1
- package/dist/src/components/kemet-flipcard/styles.js +0 -85
- package/dist/src/components/kemet-flipcard/styles.js.map +0 -1
- package/dist/src/components/kemet-flipcard/types.d.ts +0 -7
- package/dist/src/components/kemet-flipcard/types.js +0 -2
- package/dist/src/components/kemet-flipcard/types.js.map +0 -1
- package/dist/src/components/kemet-icon/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-icon/kemet-icon.d.ts +0 -28
- package/dist/src/components/kemet-icon/kemet-icon.js +0 -114
- package/dist/src/components/kemet-icon/kemet-icon.js.map +0 -1
- package/dist/src/components/kemet-icon/styles.d.ts +0 -1
- package/dist/src/components/kemet-icon/styles.js +0 -9
- package/dist/src/components/kemet-icon/styles.js.map +0 -1
- package/dist/src/components/kemet-icon/types.d.ts +0 -5
- package/dist/src/components/kemet-icon/types.js +0 -2
- package/dist/src/components/kemet-icon/types.js.map +0 -1
- package/dist/src/components/kemet-input/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-input/kemet-input.d.ts +0 -193
- package/dist/src/components/kemet-input/kemet-input.js +0 -417
- package/dist/src/components/kemet-input/kemet-input.js.map +0 -1
- package/dist/src/components/kemet-input/styles.d.ts +0 -1
- package/dist/src/components/kemet-input/styles.js +0 -115
- package/dist/src/components/kemet-input/styles.js.map +0 -1
- package/dist/src/components/kemet-input/types.d.ts +0 -35
- package/dist/src/components/kemet-input/types.js +0 -2
- package/dist/src/components/kemet-input/types.js.map +0 -1
- package/dist/src/components/kemet-modal/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-modal/kemet-modal-close.d.ts +0 -21
- package/dist/src/components/kemet-modal/kemet-modal-close.js +0 -40
- package/dist/src/components/kemet-modal/kemet-modal-close.js.map +0 -1
- package/dist/src/components/kemet-modal/kemet-modal.d.ts +0 -49
- package/dist/src/components/kemet-modal/kemet-modal.js +0 -131
- package/dist/src/components/kemet-modal/kemet-modal.js.map +0 -1
- package/dist/src/components/kemet-modal/styles.d.ts +0 -2
- package/dist/src/components/kemet-modal/styles.js +0 -267
- package/dist/src/components/kemet-modal/styles.js.map +0 -1
- package/dist/src/components/kemet-modal/types.d.ts +0 -8
- package/dist/src/components/kemet-modal/types.js +0 -2
- package/dist/src/components/kemet-modal/types.js.map +0 -1
- package/dist/src/components/kemet-password/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-password/kemet-password.d.ts +0 -77
- package/dist/src/components/kemet-password/kemet-password.js +0 -184
- package/dist/src/components/kemet-password/kemet-password.js.map +0 -1
- package/dist/src/components/kemet-password/styles.d.ts +0 -1
- package/dist/src/components/kemet-password/styles.js +0 -80
- package/dist/src/components/kemet-password/styles.js.map +0 -1
- package/dist/src/components/kemet-password/types.d.ts +0 -10
- package/dist/src/components/kemet-password/types.js +0 -2
- package/dist/src/components/kemet-password/types.js.map +0 -1
- package/dist/src/components/kemet-popper/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-popper/kemet-popper-close.d.ts +0 -22
- package/dist/src/components/kemet-popper/kemet-popper-close.js +0 -49
- package/dist/src/components/kemet-popper/kemet-popper-close.js.map +0 -1
- package/dist/src/components/kemet-popper/kemet-popper.d.ts +0 -63
- package/dist/src/components/kemet-popper/kemet-popper.js +0 -182
- package/dist/src/components/kemet-popper/kemet-popper.js.map +0 -1
- package/dist/src/components/kemet-popper/styles.d.ts +0 -1
- package/dist/src/components/kemet-popper/styles.effects.d.ts +0 -8
- package/dist/src/components/kemet-popper/styles.effects.js +0 -306
- package/dist/src/components/kemet-popper/styles.effects.js.map +0 -1
- package/dist/src/components/kemet-popper/styles.js +0 -28
- package/dist/src/components/kemet-popper/styles.js.map +0 -1
- package/dist/src/components/kemet-popper/types.d.ts +0 -3
- package/dist/src/components/kemet-popper/types.js +0 -2
- package/dist/src/components/kemet-popper/types.js.map +0 -1
- package/dist/src/components/kemet-radio/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-radio/kemet-radio.d.ts +0 -56
- package/dist/src/components/kemet-radio/kemet-radio.js +0 -129
- package/dist/src/components/kemet-radio/kemet-radio.js.map +0 -1
- package/dist/src/components/kemet-radio/kemet-radios.d.ts +0 -49
- package/dist/src/components/kemet-radio/kemet-radios.js +0 -143
- package/dist/src/components/kemet-radio/kemet-radios.js.map +0 -1
- package/dist/src/components/kemet-radio/styles.d.ts +0 -2
- package/dist/src/components/kemet-radio/styles.js +0 -102
- package/dist/src/components/kemet-radio/styles.js.map +0 -1
- package/dist/src/components/kemet-radio/types.d.ts +0 -20
- package/dist/src/components/kemet-radio/types.js +0 -2
- package/dist/src/components/kemet-radio/types.js.map +0 -1
- package/dist/src/components/kemet-rotator/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-rotator/kemet-rotator.d.ts +0 -40
- package/dist/src/components/kemet-rotator/kemet-rotator.js +0 -122
- package/dist/src/components/kemet-rotator/kemet-rotator.js.map +0 -1
- package/dist/src/components/kemet-rotator/styles.d.ts +0 -1
- package/dist/src/components/kemet-rotator/styles.js +0 -72
- package/dist/src/components/kemet-rotator/styles.js.map +0 -1
- package/dist/src/components/kemet-rotator/types.d.ts +0 -9
- package/dist/src/components/kemet-rotator/types.js +0 -2
- package/dist/src/components/kemet-rotator/types.js.map +0 -1
- package/dist/src/components/kemet-scroll-link/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-scroll-link/kemet-scroll-link.d.ts +0 -31
- package/dist/src/components/kemet-scroll-link/kemet-scroll-link.js +0 -82
- package/dist/src/components/kemet-scroll-link/kemet-scroll-link.js.map +0 -1
- package/dist/src/components/kemet-scroll-link/types.d.ts +0 -6
- package/dist/src/components/kemet-scroll-link/types.js +0 -2
- package/dist/src/components/kemet-scroll-link/types.js.map +0 -1
- package/dist/src/components/kemet-scroll-nav/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +0 -34
- package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js +0 -70
- package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js.map +0 -1
- package/dist/src/components/kemet-scroll-nav/styles.d.ts +0 -1
- package/dist/src/components/kemet-scroll-nav/styles.js +0 -27
- package/dist/src/components/kemet-scroll-nav/styles.js.map +0 -1
- package/dist/src/components/kemet-scroll-nav/types.d.ts +0 -6
- package/dist/src/components/kemet-scroll-nav/types.js +0 -2
- package/dist/src/components/kemet-scroll-nav/types.js.map +0 -1
- package/dist/src/components/kemet-scroll-snap/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +0 -44
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +0 -120
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +0 -1
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +0 -30
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +0 -53
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +0 -1
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +0 -46
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.js +0 -122
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.js.map +0 -1
- package/dist/src/components/kemet-scroll-snap/styles.d.ts +0 -2
- package/dist/src/components/kemet-scroll-snap/styles.js +0 -74
- package/dist/src/components/kemet-scroll-snap/styles.js.map +0 -1
- package/dist/src/components/kemet-scroll-snap/types.d.ts +0 -20
- package/dist/src/components/kemet-scroll-snap/types.js +0 -2
- package/dist/src/components/kemet-scroll-snap/types.js.map +0 -1
- package/dist/src/components/kemet-select/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-select/kemet-option.d.ts +0 -29
- package/dist/src/components/kemet-select/kemet-option.js +0 -45
- package/dist/src/components/kemet-select/kemet-option.js.map +0 -1
- package/dist/src/components/kemet-select/kemet-select.d.ts +0 -110
- package/dist/src/components/kemet-select/kemet-select.js +0 -239
- package/dist/src/components/kemet-select/kemet-select.js.map +0 -1
- package/dist/src/components/kemet-select/styles.d.ts +0 -1
- package/dist/src/components/kemet-select/styles.js +0 -73
- package/dist/src/components/kemet-select/styles.js.map +0 -1
- package/dist/src/components/kemet-select/types.d.ts +0 -20
- package/dist/src/components/kemet-select/types.js +0 -2
- package/dist/src/components/kemet-select/types.js.map +0 -1
- package/dist/src/components/kemet-sortable/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-sortable/kemet-sortable-item.d.ts +0 -21
- package/dist/src/components/kemet-sortable/kemet-sortable-item.js +0 -30
- package/dist/src/components/kemet-sortable/kemet-sortable-item.js.map +0 -1
- package/dist/src/components/kemet-sortable/kemet-sortable.d.ts +0 -25
- package/dist/src/components/kemet-sortable/kemet-sortable.js +0 -77
- package/dist/src/components/kemet-sortable/kemet-sortable.js.map +0 -1
- package/dist/src/components/kemet-sortable/styles.d.ts +0 -2
- package/dist/src/components/kemet-sortable/styles.js +0 -22
- package/dist/src/components/kemet-sortable/styles.js.map +0 -1
- package/dist/src/components/kemet-sortable/types.d.ts +0 -3
- package/dist/src/components/kemet-sortable/types.js +0 -2
- package/dist/src/components/kemet-sortable/types.js.map +0 -1
- package/dist/src/components/kemet-svgs/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-svgs/kemet-svg.d.ts +0 -38
- package/dist/src/components/kemet-svgs/kemet-svg.js +0 -97
- package/dist/src/components/kemet-svgs/kemet-svg.js.map +0 -1
- package/dist/src/components/kemet-svgs/kemet-svgs.d.ts +0 -27
- package/dist/src/components/kemet-svgs/kemet-svgs.js +0 -51
- package/dist/src/components/kemet-svgs/kemet-svgs.js.map +0 -1
- package/dist/src/components/kemet-svgs/types.d.ts +0 -10
- package/dist/src/components/kemet-svgs/types.js +0 -2
- package/dist/src/components/kemet-svgs/types.js.map +0 -1
- package/dist/src/components/kemet-tabs/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-tabs/kemet-tab-panel.d.ts +0 -27
- package/dist/src/components/kemet-tabs/kemet-tab-panel.js +0 -52
- package/dist/src/components/kemet-tabs/kemet-tab-panel.js.map +0 -1
- package/dist/src/components/kemet-tabs/kemet-tab.d.ts +0 -37
- package/dist/src/components/kemet-tabs/kemet-tab.js +0 -79
- package/dist/src/components/kemet-tabs/kemet-tab.js.map +0 -1
- package/dist/src/components/kemet-tabs/kemet-tabs.d.ts +0 -91
- package/dist/src/components/kemet-tabs/kemet-tabs.js +0 -523
- package/dist/src/components/kemet-tabs/kemet-tabs.js.map +0 -1
- package/dist/src/components/kemet-tabs/styles.d.ts +0 -3
- package/dist/src/components/kemet-tabs/styles.js +0 -268
- package/dist/src/components/kemet-tabs/styles.js.map +0 -1
- package/dist/src/components/kemet-tabs/types.d.ts +0 -27
- package/dist/src/components/kemet-tabs/types.js +0 -2
- package/dist/src/components/kemet-tabs/types.js.map +0 -1
- package/dist/src/components/kemet-textarea/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-textarea/kemet-textarea.d.ts +0 -123
- package/dist/src/components/kemet-textarea/kemet-textarea.js +0 -293
- package/dist/src/components/kemet-textarea/kemet-textarea.js.map +0 -1
- package/dist/src/components/kemet-textarea/styles.d.ts +0 -1
- package/dist/src/components/kemet-textarea/styles.js +0 -69
- package/dist/src/components/kemet-textarea/styles.js.map +0 -1
- package/dist/src/components/kemet-textarea/types.d.ts +0 -20
- package/dist/src/components/kemet-textarea/types.js +0 -2
- package/dist/src/components/kemet-textarea/types.js.map +0 -1
- package/dist/src/components/kemet-toggle/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-toggle/kemet-toggle.d.ts +0 -60
- package/dist/src/components/kemet-toggle/kemet-toggle.js +0 -130
- package/dist/src/components/kemet-toggle/kemet-toggle.js.map +0 -1
- package/dist/src/components/kemet-toggle/styles.d.ts +0 -1
- package/dist/src/components/kemet-toggle/styles.js +0 -84
- package/dist/src/components/kemet-toggle/styles.js.map +0 -1
- package/dist/src/components/kemet-toggle/types.d.ts +0 -10
- package/dist/src/components/kemet-toggle/types.js +0 -2
- package/dist/src/components/kemet-toggle/types.js.map +0 -1
- package/dist/src/components/kemet-tooltip/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-tooltip/kemet-tooltip.d.ts +0 -33
- package/dist/src/components/kemet-tooltip/kemet-tooltip.js +0 -68
- package/dist/src/components/kemet-tooltip/kemet-tooltip.js.map +0 -1
- package/dist/src/components/kemet-tooltip/styles.d.ts +0 -1
- package/dist/src/components/kemet-tooltip/styles.js +0 -61
- package/dist/src/components/kemet-tooltip/styles.js.map +0 -1
- package/dist/src/components/kemet-tooltip/types.d.ts +0 -3
- package/dist/src/components/kemet-tooltip/types.js +0 -2
- package/dist/src/components/kemet-tooltip/types.js.map +0 -1
- package/dist/src/components/kemet-tracker/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-tracker/kemet-tracker-step.d.ts +0 -63
- package/dist/src/components/kemet-tracker/kemet-tracker-step.js +0 -127
- package/dist/src/components/kemet-tracker/kemet-tracker-step.js.map +0 -1
- package/dist/src/components/kemet-tracker/kemet-tracker.d.ts +0 -26
- package/dist/src/components/kemet-tracker/kemet-tracker.js +0 -70
- package/dist/src/components/kemet-tracker/kemet-tracker.js.map +0 -1
- package/dist/src/components/kemet-tracker/styles.d.ts +0 -1
- package/dist/src/components/kemet-tracker/styles.js +0 -111
- package/dist/src/components/kemet-tracker/styles.js.map +0 -1
- package/dist/src/components/kemet-tracker/types.d.ts +0 -13
- package/dist/src/components/kemet-tracker/types.js +0 -2
- package/dist/src/components/kemet-tracker/types.js.map +0 -1
- package/dist/src/components/kemet-upload/docs/stories.js.map +0 -1
- package/dist/src/components/kemet-upload/kemet-upload-file.d.ts +0 -46
- package/dist/src/components/kemet-upload/kemet-upload-file.js +0 -110
- package/dist/src/components/kemet-upload/kemet-upload-file.js.map +0 -1
- package/dist/src/components/kemet-upload/kemet-upload.d.ts +0 -58
- package/dist/src/components/kemet-upload/kemet-upload.js +0 -154
- package/dist/src/components/kemet-upload/kemet-upload.js.map +0 -1
- package/dist/src/components/kemet-upload/styles.d.ts +0 -3
- package/dist/src/components/kemet-upload/styles.js +0 -169
- package/dist/src/components/kemet-upload/styles.js.map +0 -1
- package/dist/src/components/kemet-upload/types.d.ts +0 -21
- package/dist/src/components/kemet-upload/types.js +0 -2
- package/dist/src/components/kemet-upload/types.js.map +0 -1
- package/dist/src/stories/styles/borders/borders.stories.d.ts +0 -5
- package/dist/src/stories/styles/borders/borders.stories.js +0 -46
- package/dist/src/stories/styles/borders/borders.stories.js.map +0 -1
- package/dist/src/stories/styles/borders/stories.d.ts +0 -5
- package/dist/src/stories/styles/borders/stories.js +0 -46
- package/dist/src/stories/styles/borders/stories.js.map +0 -1
- package/dist/src/stories/styles/borders.stories.d.ts +0 -5
- package/dist/src/stories/styles/borders.stories.js +0 -46
- package/dist/src/stories/styles/borders.stories.js.map +0 -1
- package/dist/src/stories/styles/elevation/elevation.stories.d.ts +0 -1
- package/dist/src/stories/styles/elevation/elevation.stories.js +0 -15
- package/dist/src/stories/styles/elevation/elevation.stories.js.map +0 -1
- package/dist/src/stories/styles/elevation/stories.d.ts +0 -5
- package/dist/src/stories/styles/elevation/stories.js +0 -21
- package/dist/src/stories/styles/elevation/stories.js.map +0 -1
- package/dist/src/stories/styles/flexcolumn/stories.d.ts +0 -6
- package/dist/src/stories/styles/flexcolumn/stories.js +0 -44
- package/dist/src/stories/styles/flexcolumn/stories.js.map +0 -1
- package/dist/src/stories/styles/flexgrid/stories.d.ts +0 -6
- package/dist/src/stories/styles/flexgrid/stories.js +0 -44
- package/dist/src/stories/styles/flexgrid/stories.js.map +0 -1
- package/dist/src/stories/styles/flexlist/stories.d.ts +0 -7
- package/dist/src/stories/styles/flexlist/stories.js +0 -45
- package/dist/src/stories/styles/flexlist/stories.js.map +0 -1
- package/dist/src/stories/styles/flexrow/stories.d.ts +0 -10
- package/dist/src/stories/styles/flexrow/stories.js +0 -77
- package/dist/src/stories/styles/flexrow/stories.js.map +0 -1
- package/dist/src/stories/styles/spacing/stories.d.ts +0 -6
- package/dist/src/stories/styles/spacing/stories.js +0 -49
- package/dist/src/stories/styles/spacing/stories.js.map +0 -1
- package/dist/src/stories/styles/typealignment/stories.d.ts +0 -5
- package/dist/src/stories/styles/typealignment/stories.js +0 -14
- package/dist/src/stories/styles/typealignment/stories.js.map +0 -1
- package/dist/src/stories/styles/typography/stories.d.ts +0 -6
- package/dist/src/stories/styles/typography/stories.js +0 -41
- package/dist/src/stories/styles/typography/stories.js.map +0 -1
- package/dist/src/stories/styles/visibility/stories.d.ts +0 -6
- package/dist/src/stories/styles/visibility/stories.js +0 -60
- package/dist/src/stories/styles/visibility/stories.js.map +0 -1
- package/dist/src/stories/templates/bootstrap/stories.d.ts +0 -6
- package/dist/src/stories/templates/bootstrap/stories.js +0 -159
- package/dist/src/stories/templates/bootstrap/stories.js.map +0 -1
- package/dist/src/stories/templates/foundation/stories.d.ts +0 -8
- package/dist/src/stories/templates/foundation/stories.js +0 -911
- package/dist/src/stories/templates/foundation/stories.js.map +0 -1
- package/dist/src/utilities/controllers/forms.d.ts +0 -11
- package/dist/src/utilities/controllers/forms.js +0 -102
- package/dist/src/utilities/controllers/forms.js.map +0 -1
- package/dist/src/utilities/misc/constants.d.ts +0 -5
- package/dist/src/utilities/misc/constants.js +0 -6
- package/dist/src/utilities/misc/constants.js.map +0 -1
- package/dist/src/utilities/misc/events.d.ts +0 -1
- package/dist/src/utilities/misc/events.js +0 -4
- package/dist/src/utilities/misc/events.js.map +0 -1
- package/dist/utilities/misc/decorators.d.ts +0 -1
- package/dist/utilities/misc/decorators.js +0 -5
- package/dist/utilities/misc/decorators.js.map +0 -1
- /package/dist/{src/components → components}/kemet-card/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-card/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-carousel/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-carousel/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-checkbox/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-checkbox/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-combo/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-combo/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-count/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-count/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-draggable/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-draggable/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-drawer/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-drawer/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-fab/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-fab/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-field/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-field/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-flipcard/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-flipcard/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-icon/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-icon/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-input/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-input/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-modal/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-modal/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-password/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-password/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-popper/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-popper/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-radio/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-radio/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-rotator/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-rotator/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-scroll-link/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-scroll-link/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-scroll-nav/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-scroll-nav/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-scroll-snap/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-scroll-snap/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-select/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-select/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-sortable/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-sortable/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-svgs/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-svgs/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-tabs/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-tabs/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-textarea/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-textarea/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-toggle/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-toggle/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-tooltip/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-tooltip/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-tracker/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-tracker/docs/stories.js +0 -0
- /package/dist/{src/components → components}/kemet-upload/docs/stories.d.ts +0 -0
- /package/dist/{src/components → components}/kemet-upload/docs/stories.js +0 -0
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const stylesBase = css `
|
|
3
|
-
:host {
|
|
4
|
-
display: block;
|
|
5
|
-
}
|
|
6
|
-
`;
|
|
7
|
-
export const stylesPanel = css `
|
|
8
|
-
*,
|
|
9
|
-
*::before,
|
|
10
|
-
*::after {
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
padding: 1.5rem 1rem;
|
|
17
|
-
border-bottom: 1px solid var(--kemet-color-background);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.trigger {
|
|
21
|
-
color: inherit;
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
display: grid;
|
|
24
|
-
gap: 1rem;
|
|
25
|
-
grid-template-columns: 1fr auto;
|
|
26
|
-
width: 100%;
|
|
27
|
-
text-align: left;
|
|
28
|
-
padding: 0;
|
|
29
|
-
border: none;
|
|
30
|
-
background: none;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.body {
|
|
34
|
-
overflow: hidden;
|
|
35
|
-
transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
::slotted([slot='body']) {
|
|
39
|
-
padding: 1rem 0;
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
42
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAI,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n:host {\n display: block;\n}\n`;\n\nexport const stylesPanel = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n :host {\n display: block;\n padding: 1.5rem 1rem;\n border-bottom: 1px solid var(--kemet-color-background);\n }\n\n .trigger {\n color: inherit;\n cursor: pointer;\n display: grid;\n gap: 1rem;\n grid-template-columns: 1fr auto;\n width: 100%;\n text-align: left;\n padding: 0;\n border: none;\n background: none;\n }\n\n .body {\n overflow: hidden;\n transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;\n }\n\n ::slotted([slot='body']) {\n padding: 1rem 0;\n }\n`;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-accordion/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetAccordionInterface {\n currentPanel: number,\n togglePanels: boolean,\n}\n\nexport interface KemetAccordionPanelInterface {\n opened: boolean,\n maxHeight: string,\n slug: string,\n}\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
-
import '../kemet-alert';
|
|
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;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { html, nothing } from 'lit';
|
|
2
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
|
-
import '../kemet-alert';
|
|
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 / Alert',
|
|
9
|
-
component: 'kemet-alert',
|
|
10
|
-
};
|
|
11
|
-
export default meta;
|
|
12
|
-
const Template = ({ heading, text, icon, status, closable, border, opened, overlay, }) => {
|
|
13
|
-
const makeIcon = () => {
|
|
14
|
-
if (icon !== 'none') {
|
|
15
|
-
return html `<kemet-icon slot="icon" icon=${icon} size="24" ></kemet-icon>`;
|
|
16
|
-
}
|
|
17
|
-
return null;
|
|
18
|
-
};
|
|
19
|
-
return html `
|
|
20
|
-
<kemet-alert
|
|
21
|
-
status=${status}
|
|
22
|
-
?closable=${closable}
|
|
23
|
-
?opened=${opened}
|
|
24
|
-
border-status=${border}
|
|
25
|
-
overlay=${ifDefined(overlay !== 'none' ? overlay : null)}
|
|
26
|
-
kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>
|
|
27
|
-
${makeIcon()}
|
|
28
|
-
<strong>${heading}</strong>
|
|
29
|
-
<br />
|
|
30
|
-
${text}
|
|
31
|
-
</kemet-alert>
|
|
32
|
-
`;
|
|
33
|
-
};
|
|
34
|
-
export const Standard = {
|
|
35
|
-
render: (args) => Template(args),
|
|
36
|
-
args: {
|
|
37
|
-
heading: 'This is a heading.',
|
|
38
|
-
text: 'The brown fox jumped over the lazy dog.',
|
|
39
|
-
icon: 'gear',
|
|
40
|
-
status: 'standard',
|
|
41
|
-
closable: false,
|
|
42
|
-
border: 'left',
|
|
43
|
-
opened: true,
|
|
44
|
-
overlay: 'none',
|
|
45
|
-
},
|
|
46
|
-
argTypes: {
|
|
47
|
-
heading: {
|
|
48
|
-
control: { type: 'text' },
|
|
49
|
-
},
|
|
50
|
-
text: {
|
|
51
|
-
control: { type: 'text' },
|
|
52
|
-
},
|
|
53
|
-
icon: {
|
|
54
|
-
control: { type: 'select' },
|
|
55
|
-
options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],
|
|
56
|
-
},
|
|
57
|
-
status: {
|
|
58
|
-
control: { type: 'select' },
|
|
59
|
-
options: ['standard', 'primary', 'success', 'warning', 'error'],
|
|
60
|
-
},
|
|
61
|
-
closable: {
|
|
62
|
-
control: { type: 'boolean' },
|
|
63
|
-
},
|
|
64
|
-
border: {
|
|
65
|
-
control: { type: 'select' },
|
|
66
|
-
options: ['none', 'top', 'right', 'bottom', 'left'],
|
|
67
|
-
},
|
|
68
|
-
opened: {
|
|
69
|
-
control: { type: 'boolean' },
|
|
70
|
-
},
|
|
71
|
-
overlay: {
|
|
72
|
-
control: { type: 'select' },
|
|
73
|
-
options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],
|
|
74
|
-
},
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;eAEE,MAAM;kBACH,QAAQ;gBACV,MAAM;sBACA,MAAM;gBACZ,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACzC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7E,QAAQ,EAAE;gBACF,OAAO;;QAEf,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,oBAAoB;QAC7B,IAAI,EAAE,yCAAyC;QAC/C,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,EAAE,oBAAoB,CAAC;SAC/E;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAChE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACpD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;SACrG;KACF;CACF,CAAC","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-alert';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Alert',\n component: 'kemet-alert',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n heading,\n text,\n icon,\n status,\n closable,\n border,\n opened,\n overlay,\n}) => {\n const makeIcon = () => {\n if (icon !== 'none') {\n return html`<kemet-icon slot=\"icon\" icon=${icon} size=\"24\" ></kemet-icon>`;\n }\n\n return null;\n };\n\n return html`\n <kemet-alert\n status=${status}\n ?closable=${closable}\n ?opened=${opened}\n border-status=${border}\n overlay=${ifDefined(overlay !== 'none' ? overlay : null)}\n kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>\n ${makeIcon()}\n <strong>${heading}</strong>\n <br />\n ${text}\n </kemet-alert>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n heading: 'This is a heading.',\n text: 'The brown fox jumped over the lazy dog.',\n icon: 'gear',\n status: 'standard',\n closable: false,\n border: 'left',\n opened: true,\n overlay: 'none',\n },\n argTypes: {\n heading: {\n control: { type: 'text' },\n },\n text: {\n control: { type: 'text' },\n },\n icon: {\n control: { type: 'select' },\n options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n },\n status: {\n control: { type: 'select' },\n options: ['standard', 'primary', 'success', 'warning', 'error'],\n },\n closable: {\n control: { type: 'boolean' },\n },\n border: {\n control: { type: 'select' },\n options: ['none', 'top', 'right', 'bottom', 'left'],\n },\n opened: {\n control: { type: 'boolean' },\n },\n overlay: {\n control: { type: 'select' },\n options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n },\n }\n};\n"]}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { TypeStatus } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* @since 1.4.0
|
|
5
|
-
* @status stable
|
|
6
|
-
*
|
|
7
|
-
* @tagname kemet-alert
|
|
8
|
-
* @summary Calls out important messages and notifications.
|
|
9
|
-
*
|
|
10
|
-
* @prop {boolean} opened - Determines if the alert is opened or not.
|
|
11
|
-
* @prop {boolean} reveal - Fades in the alert when opened.
|
|
12
|
-
* @prop {boolean} closable - Adds a close button to the alert.
|
|
13
|
-
* @prop {string} borderStatus - Adds a border that indicates the status.
|
|
14
|
-
* @prop {boolean} hidden - Hides the element from document flow.
|
|
15
|
-
* @prop {string} overlay - Fixes the alert over content in specified position.
|
|
16
|
-
*
|
|
17
|
-
* @slot default - The contents of the alert.
|
|
18
|
-
*
|
|
19
|
-
* @event kemet-alert-opened - Fires when alert is opened.
|
|
20
|
-
* @event kemet-alert-closed - Fires when alert is closed.
|
|
21
|
-
*
|
|
22
|
-
* @csspart close - Container for the close button.
|
|
23
|
-
*
|
|
24
|
-
* @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
|
|
25
|
-
* @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
|
|
26
|
-
* @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
|
|
27
|
-
* @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).
|
|
28
|
-
* @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
|
|
29
|
-
* @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
|
|
30
|
-
*
|
|
31
|
-
*/
|
|
32
|
-
export default class KemetAlert extends LitElement {
|
|
33
|
-
static styles: import("lit").CSSResult[];
|
|
34
|
-
opened: boolean;
|
|
35
|
-
reveal: boolean;
|
|
36
|
-
closable: boolean;
|
|
37
|
-
status: TypeStatus;
|
|
38
|
-
borderStatus: string;
|
|
39
|
-
hidden: boolean;
|
|
40
|
-
overlay: string;
|
|
41
|
-
shouldUpdate(prevProps: any): boolean;
|
|
42
|
-
firstUpdated(): void;
|
|
43
|
-
updated(prevProps: any): void;
|
|
44
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
45
|
-
makeCloseBtn(): import("lit-html").TemplateResult<1>;
|
|
46
|
-
handleMotion(): void;
|
|
47
|
-
}
|
|
48
|
-
declare global {
|
|
49
|
-
interface HTMLElementTagNameMap {
|
|
50
|
-
'kemet-alert': KemetAlert;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import { emitEvent } from '../../utilities/misc/events';
|
|
5
|
-
import { stylesBase } from './styles';
|
|
6
|
-
/**
|
|
7
|
-
* @since 1.4.0
|
|
8
|
-
* @status stable
|
|
9
|
-
*
|
|
10
|
-
* @tagname kemet-alert
|
|
11
|
-
* @summary Calls out important messages and notifications.
|
|
12
|
-
*
|
|
13
|
-
* @prop {boolean} opened - Determines if the alert is opened or not.
|
|
14
|
-
* @prop {boolean} reveal - Fades in the alert when opened.
|
|
15
|
-
* @prop {boolean} closable - Adds a close button to the alert.
|
|
16
|
-
* @prop {string} borderStatus - Adds a border that indicates the status.
|
|
17
|
-
* @prop {boolean} hidden - Hides the element from document flow.
|
|
18
|
-
* @prop {string} overlay - Fixes the alert over content in specified position.
|
|
19
|
-
*
|
|
20
|
-
* @slot default - The contents of the alert.
|
|
21
|
-
*
|
|
22
|
-
* @event kemet-alert-opened - Fires when alert is opened.
|
|
23
|
-
* @event kemet-alert-closed - Fires when alert is closed.
|
|
24
|
-
*
|
|
25
|
-
* @csspart close - Container for the close button.
|
|
26
|
-
*
|
|
27
|
-
* @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
|
|
28
|
-
* @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
|
|
29
|
-
* @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
|
|
30
|
-
* @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).
|
|
31
|
-
* @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
|
|
32
|
-
* @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
|
|
33
|
-
*
|
|
34
|
-
*/
|
|
35
|
-
let KemetAlert = class KemetAlert extends LitElement {
|
|
36
|
-
shouldUpdate(prevProps) {
|
|
37
|
-
if (prevProps.has('opened') && !prevProps.get('opened')) {
|
|
38
|
-
this.hidden = false;
|
|
39
|
-
this.reveal = true;
|
|
40
|
-
}
|
|
41
|
-
return true;
|
|
42
|
-
}
|
|
43
|
-
firstUpdated() {
|
|
44
|
-
this.handleMotion();
|
|
45
|
-
}
|
|
46
|
-
updated(prevProps) {
|
|
47
|
-
if (!prevProps.get('opened') && this.opened === true) {
|
|
48
|
-
emitEvent(this, 'kemet-alert-opened', this);
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
emitEvent(this, 'kemet-alert-closed', this);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
render() {
|
|
55
|
-
return html `
|
|
56
|
-
<slot name="icon"></slot>
|
|
57
|
-
<div>
|
|
58
|
-
<slot></slot>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="close" part="close">
|
|
61
|
-
${this.makeCloseBtn()}
|
|
62
|
-
</div>
|
|
63
|
-
`;
|
|
64
|
-
}
|
|
65
|
-
makeCloseBtn() {
|
|
66
|
-
if (this.closable) {
|
|
67
|
-
return html `<kemet-icon icon="x-lg" @click=${() => { this.opened = false; }}></kemet-icon>`;
|
|
68
|
-
}
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
handleMotion() {
|
|
72
|
-
this.addEventListener('transitionend', () => {
|
|
73
|
-
if (!this.opened) {
|
|
74
|
-
this.hidden = true;
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
this.addEventListener('animationend', () => {
|
|
78
|
-
this.reveal = false;
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
KemetAlert.styles = [stylesBase];
|
|
83
|
-
__decorate([
|
|
84
|
-
property({ type: Boolean, reflect: true })
|
|
85
|
-
], KemetAlert.prototype, "opened", void 0);
|
|
86
|
-
__decorate([
|
|
87
|
-
property({ type: Boolean, reflect: true })
|
|
88
|
-
], KemetAlert.prototype, "reveal", void 0);
|
|
89
|
-
__decorate([
|
|
90
|
-
property({ type: Boolean, reflect: true })
|
|
91
|
-
], KemetAlert.prototype, "closable", void 0);
|
|
92
|
-
__decorate([
|
|
93
|
-
property({ type: String, reflect: true })
|
|
94
|
-
], KemetAlert.prototype, "status", void 0);
|
|
95
|
-
__decorate([
|
|
96
|
-
property({ type: String, reflect: true, attribute: 'border-status' })
|
|
97
|
-
], KemetAlert.prototype, "borderStatus", void 0);
|
|
98
|
-
__decorate([
|
|
99
|
-
property({ type: Boolean, reflect: true })
|
|
100
|
-
], KemetAlert.prototype, "hidden", void 0);
|
|
101
|
-
__decorate([
|
|
102
|
-
property({ type: String, reflect: true })
|
|
103
|
-
], KemetAlert.prototype, "overlay", void 0);
|
|
104
|
-
KemetAlert = __decorate([
|
|
105
|
-
customElement('kemet-alert')
|
|
106
|
-
], KemetAlert);
|
|
107
|
-
export default KemetAlert;
|
|
108
|
-
//# sourceMappingURL=kemet-alert.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kemet-alert.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/kemet-alert.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAwBhD,YAAY,CAAC,SAAS;QACpB,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACvD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,OAAO,CAAC,SAAS;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACpD,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;SAC7C;aAAM;YACL,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;SAC7C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;UAML,IAAI,CAAC,YAAY,EAAE;;KAExB,CAAC;IACJ,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC;SAC7F;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA3EQ,iBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACzB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACvB;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDACjD;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAtBG,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CA4E9B;eA5EoB,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {string} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {string} overlay - Fixes the alert over content in specified position.\n *\n * @slot default - The contents of the alert.\n *\n * @event kemet-alert-opened - Fires when alert is opened.\n * @event kemet-alert-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).\n * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.\n * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n static styles = [stylesBase];\n\n @property({ type: Boolean, reflect: true })\n opened: boolean;\n\n @property({ type: Boolean, reflect: true })\n reveal: boolean;\n\n @property({ type: Boolean, reflect: true })\n closable: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus;\n\n @property({ type: String, reflect: true, attribute: 'border-status' })\n borderStatus: string;\n\n @property({ type: Boolean, reflect: true })\n hidden: boolean;\n\n @property({ type: String, reflect: true })\n overlay: string;\n\n shouldUpdate(prevProps) {\n if (prevProps.has('opened') && !prevProps.get('opened')) {\n this.hidden = false;\n this.reveal = true;\n }\n\n return true;\n }\n\n firstUpdated() {\n this.handleMotion();\n }\n\n updated(prevProps) {\n if (!prevProps.get('opened') && this.opened === true) {\n emitEvent(this, 'kemet-alert-opened', this);\n } else {\n emitEvent(this, 'kemet-alert-closed', this);\n }\n }\n\n render() {\n return html`\n <slot name=\"icon\"></slot>\n <div>\n <slot></slot>\n </div>\n <div class=\"close\" part=\"close\">\n ${this.makeCloseBtn()}\n </div>\n `;\n }\n\n makeCloseBtn() {\n if (this.closable) {\n return html`<kemet-icon icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon>`;\n }\n\n return null;\n }\n\n handleMotion() {\n this.addEventListener('transitionend', () => {\n if (!this.opened) {\n this.hidden = true;\n }\n });\n\n this.addEventListener('animationend', () => {\n this.reveal = false;\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-alert': KemetAlert\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const stylesBase: import("lit").CSSResult;
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const stylesBase = css `
|
|
3
|
-
:host {
|
|
4
|
-
--kemet-alert-padding: 1rem;
|
|
5
|
-
--kemet-alert-border-thickness: 4px;
|
|
6
|
-
--kemet-alert-status-color: inherit;
|
|
7
|
-
|
|
8
|
-
display: flex;
|
|
9
|
-
grid-template-columns: auto 1fr auto;
|
|
10
|
-
gap: var(--kemet-alert-gap, var(--kemet-alert-padding));
|
|
11
|
-
align-items: var(--kemet-alert-align-items, center);
|
|
12
|
-
opacity: 0;
|
|
13
|
-
padding: var(--kemet-alert-padding);
|
|
14
|
-
border: var(--kemet-alert-border, 1px solid var(--kemet-alert-status-color));
|
|
15
|
-
transition: opacity 300ms ease;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
:host([opened]) {
|
|
19
|
-
opacity: 1;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([border-status="top"]) {
|
|
23
|
-
border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host([border-status="right"]) {
|
|
27
|
-
border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
:host([border-status="bottom"]) {
|
|
31
|
-
border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:host([border-status="left"]) {
|
|
35
|
-
border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([status="standard"]) {
|
|
39
|
-
--kemet-alert-status-color: var(--kemet-color-text);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
:host([status="primary"]) {
|
|
43
|
-
--kemet-alert-status-color: var(--kemet-color-primary);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
:host([status="success"]) {
|
|
47
|
-
--kemet-alert-status-color: var(--kemet-color-success);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
:host([status="warning"]) {
|
|
51
|
-
--kemet-alert-status-color: var(--kemet-color-warning);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
:host([status="error"]) {
|
|
55
|
-
--kemet-alert-status-color: var(--kemet-color-error);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
:host([hidden]) {
|
|
59
|
-
display: none;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
:host([reveal]) {
|
|
63
|
-
animation: fadeIn 300ms ease forwards;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
:host([overlay]) {
|
|
67
|
-
position: fixed;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
:host([overlay*="full"]) {
|
|
71
|
-
width: 100%;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
:host([overlay*="top"]) {
|
|
75
|
-
top: 0;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
:host([overlay*="bottom"]) {
|
|
79
|
-
bottom: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
:host([overlay*="left"]) {
|
|
83
|
-
left: 0;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
:host([overlay*="right"]) {
|
|
87
|
-
right: 0;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.close {
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
margin-left: auto;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
::slotted(kemet-icon) {
|
|
96
|
-
color: var(--kemet-alert-status-color);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
@keyframes fadeIn {
|
|
100
|
-
from { opacity: 0; }
|
|
101
|
-
to { opacity: 1; }
|
|
102
|
-
}
|
|
103
|
-
`;
|
|
104
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqG5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n :host {\n --kemet-alert-padding: 1rem;\n --kemet-alert-border-thickness: 4px;\n --kemet-alert-status-color: inherit;\n\n display: flex;\n grid-template-columns: auto 1fr auto;\n gap: var(--kemet-alert-gap, var(--kemet-alert-padding));\n align-items: var(--kemet-alert-align-items, center);\n opacity: 0;\n padding: var(--kemet-alert-padding);\n border: var(--kemet-alert-border, 1px solid var(--kemet-alert-status-color));\n transition: opacity 300ms ease;\n }\n\n :host([opened]) {\n opacity: 1;\n }\n\n :host([border-status=\"top\"]) {\n border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n }\n\n :host([border-status=\"right\"]) {\n border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n }\n\n :host([border-status=\"bottom\"]) {\n border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n }\n\n :host([border-status=\"left\"]) {\n border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n }\n\n :host([status=\"standard\"]) {\n --kemet-alert-status-color: var(--kemet-color-text);\n }\n\n :host([status=\"primary\"]) {\n --kemet-alert-status-color: var(--kemet-color-primary);\n }\n\n :host([status=\"success\"]) {\n --kemet-alert-status-color: var(--kemet-color-success);\n }\n\n :host([status=\"warning\"]) {\n --kemet-alert-status-color: var(--kemet-color-warning);\n }\n\n :host([status=\"error\"]) {\n --kemet-alert-status-color: var(--kemet-color-error);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([reveal]) {\n animation: fadeIn 300ms ease forwards;\n }\n\n :host([overlay]) {\n position: fixed;\n }\n\n :host([overlay*=\"full\"]) {\n width: 100%;\n }\n\n :host([overlay*=\"top\"]) {\n top: 0;\n }\n\n :host([overlay*=\"bottom\"]) {\n bottom: 0;\n }\n\n :host([overlay*=\"left\"]) {\n left: 0;\n }\n\n :host([overlay*=\"right\"]) {\n right: 0;\n }\n\n .close {\n cursor: pointer;\n margin-left: auto;\n }\n\n ::slotted(kemet-icon) {\n color: var(--kemet-alert-status-color);\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n`;\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning' | 'primary';
|
|
2
|
-
export interface KemetAlertInterface {
|
|
3
|
-
opened: boolean;
|
|
4
|
-
reveal: boolean;
|
|
5
|
-
closable: boolean;
|
|
6
|
-
borderStatus: string;
|
|
7
|
-
hidden: boolean;
|
|
8
|
-
overlay: string;
|
|
9
|
-
status: TypeStatus;
|
|
10
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning' | 'primary';\n\nexport interface KemetAlertInterface {\n opened: boolean,\n reveal: boolean,\n closable: boolean,\n borderStatus: string,\n hidden: boolean,\n overlay: string,\n status: TypeStatus,\n}\n"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
-
import '../kemet-avatar';
|
|
3
|
-
import '../kemet-avatars';
|
|
4
|
-
import '../../kemet-tabs/kemet-tabs';
|
|
5
|
-
import '../../kemet-tabs/kemet-tab';
|
|
6
|
-
import '../../kemet-tabs/kemet-tab-panel';
|
|
7
|
-
declare const meta: Meta;
|
|
8
|
-
export default meta;
|
|
9
|
-
declare type Story = StoryObj;
|
|
10
|
-
export declare const Standard: Story;
|
|
11
|
-
export declare const Multiple: Story;
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
|
-
import '../kemet-avatar';
|
|
4
|
-
import '../kemet-avatars';
|
|
5
|
-
import '../../kemet-tabs/kemet-tabs';
|
|
6
|
-
import '../../kemet-tabs/kemet-tab';
|
|
7
|
-
import '../../kemet-tabs/kemet-tab-panel';
|
|
8
|
-
const meta = {
|
|
9
|
-
title: 'Components / Avatar',
|
|
10
|
-
component: 'kemet-avatar',
|
|
11
|
-
};
|
|
12
|
-
export default meta;
|
|
13
|
-
const Template = ({ icon, image, circle, rounded, initials, status, }) => html `
|
|
14
|
-
<kemet-avatar
|
|
15
|
-
?circle=${circle}
|
|
16
|
-
?rounded=${rounded}
|
|
17
|
-
image="${ifDefined(image !== '' ? image : null)}"
|
|
18
|
-
initials="${ifDefined(initials !== '' ? initials : null)}"
|
|
19
|
-
>
|
|
20
|
-
${icon !== '' ? html `<kemet-icon icon=${icon} size="48" kemet-margin="tiny:smallest"></kemet-icon>` : null}
|
|
21
|
-
${status ? html `<kemet-badge slot="status" status="success" kemet-border="all-2 solid white"></kemet-badge>` : null}
|
|
22
|
-
</kemet-avatar>
|
|
23
|
-
`;
|
|
24
|
-
const TemplateMultiple = ({ squeeze, numOfAvatars, }) => {
|
|
25
|
-
const avatars = [];
|
|
26
|
-
for (let i = 0; i < numOfAvatars; i += 1) {
|
|
27
|
-
avatars.push(html `<kemet-avatar circle image="https://via.placeholder.com/64x64" kemet-border="all-4 solid gray1"></kemet-avatar>\n`);
|
|
28
|
-
}
|
|
29
|
-
return html `
|
|
30
|
-
<style>
|
|
31
|
-
kemet-avatars {
|
|
32
|
-
--kemet-avatars-squeeze: ${squeeze};
|
|
33
|
-
}
|
|
34
|
-
</style>
|
|
35
|
-
<kemet-avatars>
|
|
36
|
-
${avatars}
|
|
37
|
-
</kemet-avatars>
|
|
38
|
-
`;
|
|
39
|
-
};
|
|
40
|
-
export const Standard = {
|
|
41
|
-
render: (args) => Template(args),
|
|
42
|
-
args: {
|
|
43
|
-
circle: true,
|
|
44
|
-
rounded: false,
|
|
45
|
-
image: 'https://via.placeholder.com/64x64',
|
|
46
|
-
initials: 'KU',
|
|
47
|
-
icon: 'person',
|
|
48
|
-
status: false,
|
|
49
|
-
},
|
|
50
|
-
argTypes: {
|
|
51
|
-
circle: {
|
|
52
|
-
control: { type: 'boolean' },
|
|
53
|
-
},
|
|
54
|
-
rounded: {
|
|
55
|
-
control: { type: 'boolean' },
|
|
56
|
-
},
|
|
57
|
-
image: {
|
|
58
|
-
control: { type: 'text' },
|
|
59
|
-
},
|
|
60
|
-
initials: {
|
|
61
|
-
control: { type: 'text' },
|
|
62
|
-
},
|
|
63
|
-
icon: {
|
|
64
|
-
control: { type: 'text' },
|
|
65
|
-
},
|
|
66
|
-
status: {
|
|
67
|
-
control: { type: 'boolean' },
|
|
68
|
-
},
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
export const Multiple = {
|
|
72
|
-
render: (args) => TemplateMultiple(args),
|
|
73
|
-
args: {
|
|
74
|
-
squeeze: '-1.5rem',
|
|
75
|
-
numOfAvatars: 3,
|
|
76
|
-
},
|
|
77
|
-
argTypes: {
|
|
78
|
-
squeeze: {
|
|
79
|
-
control: { type: 'text' },
|
|
80
|
-
},
|
|
81
|
-
numOfAvatars: {
|
|
82
|
-
control: { type: 'number' },
|
|
83
|
-
},
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-avatar/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;AACzB,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;eACL,OAAO;aACT,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;gBACnC,SAAS,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;;MAEtD,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,uDAAuD,CAAC,CAAC,CAAC,IAAI;MACxG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6FAA6F,CAAC,CAAC,CAAC,IAAI;;CAEtH,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,OAAO,EACP,YAAY,GACb,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE;QACxC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,mHAAmH,CAAC,CAAC;KACvI;IAED,OAAO,IAAI,CAAA;;;mCAGsB,OAAO;;;;QAIlC,OAAO;;GAEZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,mCAAmC;QAC1C,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;IAC7C,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;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-avatar';\nimport '../kemet-avatars';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Avatar',\n component: 'kemet-avatar',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n icon,\n image,\n circle,\n rounded,\n initials,\n status,\n}) => html`\n <kemet-avatar\n ?circle=${circle}\n ?rounded=${rounded}\n image=\"${ifDefined(image !== '' ? image : null)}\"\n initials=\"${ifDefined(initials !== '' ? initials : null)}\"\n >\n ${icon !== '' ? html`<kemet-icon icon=${icon} size=\"48\" kemet-margin=\"tiny:smallest\"></kemet-icon>` : null}\n ${status ? html`<kemet-badge slot=\"status\" status=\"success\" kemet-border=\"all-2 solid white\"></kemet-badge>` : null}\n </kemet-avatar>\n`;\n\nconst TemplateMultiple = ({\n squeeze,\n numOfAvatars,\n}) => {\n const avatars = [];\n\n for (let i = 0; i < numOfAvatars; i += 1) {\n avatars.push(html`<kemet-avatar circle image=\"https://via.placeholder.com/64x64\" kemet-border=\"all-4 solid gray1\"></kemet-avatar>\\n`);\n }\n\n return html`\n <style>\n kemet-avatars {\n --kemet-avatars-squeeze: ${squeeze};\n }\n </style>\n <kemet-avatars>\n ${avatars}\n </kemet-avatars>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n circle: true,\n rounded: false,\n image: 'https://via.placeholder.com/64x64',\n initials: 'KU',\n icon: 'person',\n status: false,\n },\n argTypes: {\n circle: {\n control: { type: 'boolean' },\n },\n rounded: {\n control: { type: 'boolean' },\n },\n image: {\n control: { type: 'text' },\n },\n initials: {\n control: { type: 'text' },\n },\n icon: {\n control: { type: 'text' },\n },\n status: {\n control: { type: 'boolean' },\n },\n }\n};\n\nexport const Multiple: Story = {\n render: (args: any) => TemplateMultiple(args),\n args: {\n squeeze: '-1.5rem',\n numOfAvatars: 3,\n },\n argTypes: {\n squeeze: {\n control: { type: 'text' },\n },\n numOfAvatars: {\n control: { type: 'number' },\n },\n }\n};\n"]}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
/**
|
|
3
|
-
* @since 1.4.0
|
|
4
|
-
* @status stable
|
|
5
|
-
*
|
|
6
|
-
* @tagname kemet-avatar
|
|
7
|
-
* @summary A representation of a person or thing.
|
|
8
|
-
*
|
|
9
|
-
* @prop {string} size - The size in pixels.
|
|
10
|
-
* @prop {string} image - Url to an image.
|
|
11
|
-
* @prop {string} label - Labels the avatar.
|
|
12
|
-
* @prop {string} initials - Initials of the user.
|
|
13
|
-
* @prop {boolean} circle - Displays in a circle.
|
|
14
|
-
* @prop {boolean} rounded - Displays with rounded corners
|
|
15
|
-
*
|
|
16
|
-
* @slot status - A slot for an icon or element that indicates the status of the avatar.
|
|
17
|
-
*
|
|
18
|
-
* @csspart initials - Contains the initials for the avatar.
|
|
19
|
-
*
|
|
20
|
-
* @cssproperty --kemet-avatar-color - The color of the text. Default: var(--kemet-color-white).
|
|
21
|
-
* @cssproperty --kemet-avatar-background-color - The color of the background. Default: var(--kemet-color-gray4).
|
|
22
|
-
* @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type. Default: 1rem.
|
|
23
|
-
* @cssproperty --kemet-avatar-initials-margin - The space around the initials. Default: 1rem.
|
|
24
|
-
*
|
|
25
|
-
*/
|
|
26
|
-
export default class KemetAvatar extends LitElement {
|
|
27
|
-
static styles: import("lit").CSSResult[];
|
|
28
|
-
size: string;
|
|
29
|
-
image: string;
|
|
30
|
-
label: string;
|
|
31
|
-
initials: string;
|
|
32
|
-
circle: boolean;
|
|
33
|
-
rounded: boolean;
|
|
34
|
-
firstUpdated(): void;
|
|
35
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
36
|
-
makeSize(): void;
|
|
37
|
-
makeContent(): import("lit-html").TemplateResult<1>;
|
|
38
|
-
}
|
|
39
|
-
declare global {
|
|
40
|
-
interface HTMLElementTagNameMap {
|
|
41
|
-
'kemet-avatar': KemetAvatar;
|
|
42
|
-
}
|
|
43
|
-
}
|