kemet-ui 1.4.0 → 2.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/README.md +1 -1
- package/custom-elements.json +2940 -2397
- package/dist/.storybook/decorators.d.ts +2 -0
- package/dist/.storybook/decorators.js +28 -0
- package/dist/.storybook/decorators.js.map +1 -0
- package/dist/components/kemet-accordion/kemet-accordion-panel.d.ts +51 -0
- package/dist/components/kemet-accordion/kemet-accordion-panel.js +94 -134
- package/dist/components/kemet-accordion/kemet-accordion-panel.js.map +1 -0
- package/dist/components/kemet-accordion/kemet-accordion.d.ts +37 -0
- package/dist/components/kemet-accordion/kemet-accordion.js +113 -129
- package/dist/components/kemet-accordion/kemet-accordion.js.map +1 -0
- package/dist/components/kemet-accordion/stories.d.ts +10 -0
- package/dist/components/kemet-accordion/stories.js +44 -0
- package/dist/components/kemet-accordion/stories.js.map +1 -0
- package/dist/components/kemet-accordion/styles.d.ts +2 -0
- package/dist/components/kemet-accordion/styles.js +42 -0
- package/dist/components/kemet-accordion/styles.js.map +1 -0
- package/dist/components/kemet-accordion/types.d.ts +9 -0
- package/dist/components/kemet-accordion/types.js +2 -0
- package/dist/components/kemet-accordion/types.js.map +1 -0
- package/dist/components/kemet-alert/docs/stories.d.ts +9 -0
- package/dist/components/kemet-alert/docs/stories.js +77 -0
- package/dist/components/kemet-alert/docs/stories.js.map +1 -0
- package/dist/components/kemet-alert/kemet-alert.d.ts +52 -0
- package/dist/components/kemet-alert/kemet-alert.js +67 -65
- package/dist/components/kemet-alert/kemet-alert.js.map +1 -0
- package/dist/components/kemet-alert/stories.d.ts +9 -0
- package/dist/components/kemet-alert/stories.js +77 -0
- package/dist/components/kemet-alert/stories.js.map +1 -0
- package/dist/components/kemet-alert/styles.d.ts +1 -0
- package/dist/components/kemet-alert/styles.js +4 -4
- package/dist/components/kemet-alert/styles.js.map +1 -0
- package/dist/components/kemet-alert/types.d.ts +10 -0
- package/dist/components/kemet-alert/types.js +2 -0
- package/dist/components/kemet-alert/types.js.map +1 -0
- package/dist/components/kemet-avatar/docs/stories.d.ts +10 -0
- package/dist/components/kemet-avatar/docs/stories.js +85 -0
- package/dist/components/kemet-avatar/docs/stories.js.map +1 -0
- package/dist/components/kemet-avatar/kemet-avatar.d.ts +43 -0
- package/dist/components/kemet-avatar/kemet-avatar.js +48 -88
- package/dist/components/kemet-avatar/kemet-avatar.js.map +1 -0
- package/dist/components/kemet-avatar/kemet-avatars.d.ts +20 -0
- package/dist/components/kemet-avatar/kemet-avatars.js +15 -31
- package/dist/components/kemet-avatar/kemet-avatars.js.map +1 -0
- package/dist/components/kemet-avatar/stories.d.ts +10 -0
- package/dist/components/kemet-avatar/stories.js +85 -0
- package/dist/components/kemet-avatar/stories.js.map +1 -0
- package/dist/components/kemet-avatar/styles.d.ts +2 -0
- package/dist/components/kemet-avatar/styles.js +58 -0
- package/dist/components/kemet-avatar/styles.js.map +1 -0
- package/dist/components/kemet-avatar/types.d.ts +8 -0
- package/dist/components/kemet-avatar/types.js +2 -0
- package/dist/components/kemet-avatar/types.js.map +1 -0
- package/dist/components/kemet-badge/docs/stories.d.ts +9 -0
- package/dist/components/kemet-badge/docs/stories.js +40 -0
- package/dist/components/kemet-badge/docs/stories.js.map +1 -0
- package/dist/components/kemet-badge/kemet-badge.d.ts +30 -0
- package/dist/components/kemet-badge/kemet-badge.js +38 -89
- package/dist/components/kemet-badge/kemet-badge.js.map +1 -0
- package/dist/components/kemet-badge/styles.d.ts +1 -0
- package/dist/components/kemet-badge/styles.js +40 -0
- package/dist/components/kemet-badge/styles.js.map +1 -0
- package/dist/components/kemet-badge/types.d.ts +6 -0
- package/dist/components/kemet-badge/types.js +2 -0
- package/dist/components/kemet-badge/types.js.map +1 -0
- package/dist/components/kemet-button/docs/stories.d.ts +9 -0
- package/dist/components/kemet-button/docs/stories.js +51 -0
- package/dist/components/kemet-button/docs/stories.js.map +1 -0
- package/dist/components/kemet-button/kemet-button.d.ts +89 -0
- package/dist/components/kemet-button/kemet-button.js +101 -195
- package/dist/components/kemet-button/kemet-button.js.map +1 -0
- package/dist/components/kemet-button/styles.d.ts +1 -0
- package/dist/components/kemet-button/styles.js +73 -0
- package/dist/components/kemet-button/styles.js.map +1 -0
- package/dist/components/kemet-button/types.d.ts +10 -0
- package/dist/components/kemet-button/types.js +2 -0
- package/dist/components/kemet-button/types.js.map +1 -0
- package/dist/components/kemet-card/kemet-card.d.ts +47 -0
- package/dist/components/kemet-card/kemet-card.js +17 -21
- package/dist/components/kemet-card/kemet-card.js.map +1 -0
- package/dist/components/kemet-card/styles.d.ts +1 -0
- package/dist/components/kemet-card/styles.js +2 -2
- package/dist/components/kemet-card/styles.js.map +1 -0
- package/dist/components/kemet-card/types.d.ts +3 -0
- package/dist/components/kemet-card/types.js +2 -0
- package/dist/components/kemet-card/types.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-current.d.ts +26 -0
- package/dist/components/kemet-carousel/kemet-carousel-current.js +32 -34
- package/dist/components/kemet-carousel/kemet-carousel-current.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-first.d.ts +25 -0
- package/dist/components/kemet-carousel/kemet-carousel-first.js +30 -35
- package/dist/components/kemet-carousel/kemet-carousel-first.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-last.d.ts +25 -0
- package/dist/components/kemet-carousel/kemet-carousel-last.js +30 -35
- package/dist/components/kemet-carousel/kemet-carousel-last.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-link.d.ts +31 -0
- package/dist/components/kemet-carousel/kemet-carousel-link.js +40 -41
- package/dist/components/kemet-carousel/kemet-carousel-link.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-next.d.ts +25 -0
- package/dist/components/kemet-carousel/kemet-carousel-next.js +30 -35
- package/dist/components/kemet-carousel/kemet-carousel-next.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-prev.d.ts +25 -0
- package/dist/components/kemet-carousel/kemet-carousel-prev.js +30 -35
- package/dist/components/kemet-carousel/kemet-carousel-prev.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-slide.d.ts +29 -0
- package/dist/components/kemet-carousel/kemet-carousel-slide.js +38 -39
- package/dist/components/kemet-carousel/kemet-carousel-slide.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel-total.d.ts +26 -0
- package/dist/components/kemet-carousel/kemet-carousel-total.js +32 -34
- package/dist/components/kemet-carousel/kemet-carousel-total.js.map +1 -0
- package/dist/components/kemet-carousel/kemet-carousel.d.ts +101 -0
- package/dist/components/kemet-carousel/kemet-carousel.js +326 -340
- package/dist/components/kemet-carousel/kemet-carousel.js.map +1 -0
- package/dist/components/kemet-carousel/styles.d.ts +1 -0
- package/dist/components/kemet-carousel/styles.js +2 -2
- package/dist/components/kemet-carousel/styles.js.map +1 -0
- package/dist/components/kemet-carousel/types.d.ts +21 -0
- package/dist/components/kemet-carousel/types.js +2 -0
- package/dist/components/kemet-carousel/types.js.map +1 -0
- package/dist/components/kemet-checkbox/kemet-checkbox.d.ts +71 -0
- package/dist/components/kemet-checkbox/kemet-checkbox.js +118 -217
- package/dist/components/kemet-checkbox/kemet-checkbox.js.map +1 -0
- package/dist/components/kemet-checkbox/styles.d.ts +1 -0
- package/dist/components/kemet-checkbox/styles.js +83 -0
- package/dist/components/kemet-checkbox/styles.js.map +1 -0
- package/dist/components/kemet-checkbox/types.d.ts +15 -0
- package/dist/components/kemet-checkbox/types.js +2 -0
- package/dist/components/kemet-checkbox/types.js.map +1 -0
- package/dist/components/kemet-combo/kemet-combo.d.ts +50 -0
- package/dist/components/kemet-combo/kemet-combo.js +111 -175
- package/dist/components/kemet-combo/kemet-combo.js.map +1 -0
- package/dist/components/kemet-combo/styles.d.ts +1 -0
- package/dist/components/kemet-combo/styles.js +44 -0
- package/dist/components/kemet-combo/styles.js.map +1 -0
- package/dist/components/kemet-combo/types.d.ts +5 -0
- package/dist/components/kemet-combo/types.js +2 -0
- package/dist/components/kemet-combo/types.js.map +1 -0
- package/dist/components/kemet-count/kemet-count.d.ts +39 -0
- package/dist/components/kemet-count/kemet-count.js +79 -82
- package/dist/components/kemet-count/kemet-count.js.map +1 -0
- package/dist/components/kemet-draggable/kemet-draggable.d.ts +42 -0
- package/dist/components/kemet-draggable/kemet-draggable.js +111 -114
- package/dist/components/kemet-draggable/kemet-draggable.js.map +1 -0
- package/dist/components/kemet-draggable/types.d.ts +6 -0
- package/dist/components/kemet-draggable/types.js +2 -0
- package/dist/components/kemet-draggable/types.js.map +1 -0
- package/dist/components/kemet-drawer/kemet-drawer.d.ts +48 -0
- package/dist/components/kemet-drawer/kemet-drawer.js +50 -65
- package/dist/components/kemet-drawer/kemet-drawer.js.map +1 -0
- package/dist/components/kemet-drawer/styles.d.ts +2 -0
- package/dist/components/kemet-drawer/styles.js +3 -5
- package/dist/components/kemet-drawer/styles.js.map +1 -0
- package/dist/components/kemet-drawer/types.d.ts +8 -0
- package/dist/components/kemet-drawer/types.js +2 -0
- package/dist/components/kemet-drawer/types.js.map +1 -0
- package/dist/components/kemet-fab/kemet-fab.d.ts +49 -0
- package/dist/components/kemet-fab/kemet-fab.js +64 -67
- package/dist/components/kemet-fab/kemet-fab.js.map +1 -0
- package/dist/components/kemet-fab/styles.d.ts +1 -0
- package/dist/components/kemet-fab/styles.js +5 -5
- package/dist/components/kemet-fab/styles.js.map +1 -0
- package/dist/components/kemet-fab/types.d.ts +8 -0
- package/dist/components/kemet-fab/types.js +2 -0
- package/dist/components/kemet-fab/types.js.map +1 -0
- package/dist/components/kemet-field/kemet-field.d.ts +61 -0
- package/dist/components/kemet-field/kemet-field.js +102 -182
- package/dist/components/kemet-field/kemet-field.js.map +1 -0
- package/dist/components/kemet-field/styles.d.ts +1 -0
- package/dist/components/kemet-field/styles.js +61 -0
- package/dist/components/kemet-field/styles.js.map +1 -0
- package/dist/components/kemet-field/types.d.ts +13 -0
- package/dist/components/kemet-field/types.js +2 -0
- package/dist/components/kemet-field/types.js.map +1 -0
- package/dist/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +21 -0
- package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js +29 -39
- package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js.map +1 -0
- package/dist/components/kemet-flipcard/kemet-flipcard.d.ts +52 -0
- package/dist/components/kemet-flipcard/kemet-flipcard.js +97 -173
- package/dist/components/kemet-flipcard/kemet-flipcard.js.map +1 -0
- package/dist/components/kemet-flipcard/styles.d.ts +1 -0
- package/dist/components/kemet-flipcard/styles.js +85 -0
- package/dist/components/kemet-flipcard/styles.js.map +1 -0
- package/dist/components/kemet-flipcard/types.d.ts +7 -0
- package/dist/components/kemet-flipcard/types.js +2 -0
- package/dist/components/kemet-flipcard/types.js.map +1 -0
- package/dist/components/kemet-icon/kemet-icon.d.ts +28 -0
- package/dist/components/kemet-icon/kemet-icon.js +86 -101
- package/dist/components/kemet-icon/kemet-icon.js.map +1 -0
- package/dist/components/kemet-icon/styles.d.ts +1 -0
- package/dist/components/kemet-icon/styles.js +9 -0
- package/dist/components/kemet-icon/styles.js.map +1 -0
- package/dist/components/kemet-icon/types.d.ts +5 -0
- package/dist/components/kemet-icon/types.js +2 -0
- package/dist/components/kemet-icon/types.js.map +1 -0
- package/dist/components/kemet-input/kemet-input.d.ts +193 -0
- package/dist/components/kemet-input/kemet-input.js +296 -447
- package/dist/components/kemet-input/kemet-input.js.map +1 -0
- package/dist/components/kemet-input/styles.d.ts +1 -0
- package/dist/components/kemet-input/styles.js +115 -0
- package/dist/components/kemet-input/styles.js.map +1 -0
- package/dist/components/kemet-input/types.d.ts +35 -0
- package/dist/components/kemet-input/types.js +2 -0
- package/dist/components/kemet-input/types.js.map +1 -0
- package/dist/components/kemet-modal/kemet-modal-close.d.ts +21 -0
- package/dist/components/kemet-modal/kemet-modal-close.js +27 -30
- package/dist/components/kemet-modal/kemet-modal-close.js.map +1 -0
- package/dist/components/kemet-modal/kemet-modal.d.ts +49 -0
- package/dist/components/kemet-modal/kemet-modal.js +101 -115
- package/dist/components/kemet-modal/kemet-modal.js.map +1 -0
- package/dist/components/kemet-modal/styles.d.ts +2 -0
- package/dist/components/kemet-modal/styles.js +4 -4
- package/dist/components/kemet-modal/styles.js.map +1 -0
- package/dist/components/kemet-modal/types.d.ts +8 -0
- package/dist/components/kemet-modal/types.js +2 -0
- package/dist/components/kemet-modal/types.js.map +1 -0
- package/dist/components/kemet-password/kemet-password.d.ts +77 -0
- package/dist/components/kemet-password/kemet-password.js +142 -144
- package/dist/components/kemet-password/kemet-password.js.map +1 -0
- package/dist/components/kemet-password/styles.d.ts +1 -0
- package/dist/components/kemet-password/styles.js +5 -5
- package/dist/components/kemet-password/styles.js.map +1 -0
- package/dist/components/kemet-password/types.d.ts +10 -0
- package/dist/components/kemet-password/types.js +2 -0
- package/dist/components/kemet-password/types.js.map +1 -0
- package/dist/components/kemet-popper/kemet-popper-close.d.ts +22 -0
- package/dist/components/kemet-popper/kemet-popper-close.js +49 -0
- package/dist/components/kemet-popper/kemet-popper-close.js.map +1 -0
- package/dist/components/kemet-popper/kemet-popper.d.ts +63 -0
- package/dist/components/kemet-popper/kemet-popper.js +182 -0
- package/dist/components/kemet-popper/kemet-popper.js.map +1 -0
- package/dist/components/kemet-popper/styles.d.ts +1 -0
- package/dist/components/kemet-popper/styles.effects.d.ts +8 -0
- package/dist/components/{kemet-popover → kemet-popper}/styles.effects.js +9 -16
- package/dist/components/kemet-popper/styles.effects.js.map +1 -0
- package/dist/components/kemet-popper/styles.js +28 -0
- package/dist/components/kemet-popper/styles.js.map +1 -0
- package/dist/components/kemet-popper/types.d.ts +3 -0
- package/dist/components/kemet-popper/types.js +2 -0
- package/dist/components/kemet-popper/types.js.map +1 -0
- package/dist/components/kemet-radio/kemet-radio.d.ts +56 -0
- package/dist/components/kemet-radio/kemet-radio.js +76 -153
- package/dist/components/kemet-radio/kemet-radio.js.map +1 -0
- package/dist/components/kemet-radio/kemet-radios.d.ts +49 -0
- package/dist/components/kemet-radio/kemet-radios.js +112 -178
- package/dist/components/kemet-radio/kemet-radios.js.map +1 -0
- package/dist/components/kemet-radio/styles.d.ts +2 -0
- package/dist/components/kemet-radio/styles.js +102 -0
- package/dist/components/kemet-radio/styles.js.map +1 -0
- package/dist/components/kemet-radio/types.d.ts +20 -0
- package/dist/components/kemet-radio/types.js +2 -0
- package/dist/components/kemet-radio/types.js.map +1 -0
- package/dist/components/kemet-rotator/kemet-rotator.d.ts +40 -0
- package/dist/components/kemet-rotator/kemet-rotator.js +91 -180
- package/dist/components/kemet-rotator/kemet-rotator.js.map +1 -0
- package/dist/components/kemet-rotator/styles.d.ts +1 -0
- package/dist/components/kemet-rotator/styles.js +72 -0
- package/dist/components/kemet-rotator/styles.js.map +1 -0
- package/dist/components/kemet-rotator/types.d.ts +9 -0
- package/dist/components/kemet-rotator/types.js +2 -0
- package/dist/components/kemet-rotator/types.js.map +1 -0
- package/dist/components/kemet-scroll-link/kemet-scroll-link.d.ts +31 -0
- package/dist/components/kemet-scroll-link/kemet-scroll-link.js +62 -79
- package/dist/components/kemet-scroll-link/kemet-scroll-link.js.map +1 -0
- package/dist/components/kemet-scroll-link/types.d.ts +6 -0
- package/dist/components/kemet-scroll-link/types.js +2 -0
- package/dist/components/kemet-scroll-link/types.js.map +1 -0
- package/dist/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +34 -0
- package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js +49 -86
- package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js.map +1 -0
- package/dist/components/kemet-scroll-nav/styles.d.ts +1 -0
- package/dist/components/kemet-scroll-nav/styles.js +26 -0
- package/dist/components/kemet-scroll-nav/styles.js.map +1 -0
- package/dist/components/kemet-scroll-nav/types.d.ts +6 -0
- package/dist/components/kemet-scroll-nav/types.js +2 -0
- package/dist/components/kemet-scroll-nav/types.js.map +1 -0
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +44 -0
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +79 -124
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +1 -0
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +30 -0
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +36 -47
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +1 -0
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +46 -0
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js +93 -164
- package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map +1 -0
- package/dist/components/kemet-scroll-snap/styles.d.ts +2 -0
- package/dist/components/kemet-scroll-snap/styles.js +74 -0
- package/dist/components/kemet-scroll-snap/styles.js.map +1 -0
- package/dist/components/kemet-scroll-snap/types.d.ts +20 -0
- package/dist/components/kemet-scroll-snap/types.js +2 -0
- package/dist/components/kemet-scroll-snap/types.js.map +1 -0
- package/dist/components/kemet-select/kemet-option.d.ts +29 -0
- package/dist/components/kemet-select/kemet-option.js +28 -33
- package/dist/components/kemet-select/kemet-option.js.map +1 -0
- package/dist/components/kemet-select/kemet-select.d.ts +110 -0
- package/dist/components/kemet-select/kemet-select.js +179 -265
- package/dist/components/kemet-select/kemet-select.js.map +1 -0
- package/dist/components/kemet-select/styles.d.ts +1 -0
- package/dist/components/kemet-select/styles.js +73 -0
- package/dist/components/kemet-select/styles.js.map +1 -0
- package/dist/components/kemet-select/types.d.ts +20 -0
- package/dist/components/kemet-select/types.js +2 -0
- package/dist/components/kemet-select/types.js.map +1 -0
- package/dist/components/kemet-sortable/kemet-sortable-item.d.ts +21 -0
- package/dist/components/kemet-sortable/kemet-sortable-item.js +21 -39
- package/dist/components/kemet-sortable/kemet-sortable-item.js.map +1 -0
- package/dist/components/kemet-sortable/kemet-sortable.d.ts +25 -0
- package/dist/components/kemet-sortable/kemet-sortable.js +61 -79
- package/dist/components/kemet-sortable/kemet-sortable.js.map +1 -0
- package/dist/components/kemet-sortable/styles.d.ts +2 -0
- package/dist/components/kemet-sortable/styles.js +22 -0
- package/dist/components/kemet-sortable/styles.js.map +1 -0
- package/dist/components/kemet-sortable/types.d.ts +3 -0
- package/dist/components/kemet-sortable/types.js +2 -0
- package/dist/components/kemet-sortable/types.js.map +1 -0
- package/dist/components/kemet-svgs/kemet-svg.d.ts +38 -0
- package/dist/components/kemet-svgs/kemet-svg.js +76 -90
- package/dist/components/kemet-svgs/kemet-svg.js.map +1 -0
- package/dist/components/kemet-svgs/kemet-svgs.d.ts +27 -0
- package/dist/components/kemet-svgs/kemet-svgs.js +39 -48
- package/dist/components/kemet-svgs/kemet-svgs.js.map +1 -0
- package/dist/components/kemet-svgs/types.d.ts +10 -0
- package/dist/components/kemet-svgs/types.js +2 -0
- package/dist/components/kemet-svgs/types.js.map +1 -0
- package/dist/components/kemet-tabs/kemet-tab-panel.d.ts +27 -0
- package/dist/components/kemet-tabs/kemet-tab-panel.js +36 -76
- package/dist/components/kemet-tabs/kemet-tab-panel.js.map +1 -0
- package/dist/components/kemet-tabs/kemet-tab.d.ts +37 -0
- package/dist/components/kemet-tabs/kemet-tab.js +57 -92
- package/dist/components/kemet-tabs/kemet-tab.js.map +1 -0
- package/dist/components/kemet-tabs/kemet-tabs.d.ts +95 -0
- package/dist/components/kemet-tabs/kemet-tabs.js +456 -472
- package/dist/components/kemet-tabs/kemet-tabs.js.map +1 -0
- package/dist/components/kemet-tabs/styles.d.ts +3 -0
- package/dist/components/kemet-tabs/styles.js +57 -3
- package/dist/components/kemet-tabs/styles.js.map +1 -0
- package/dist/components/kemet-tabs/types.d.ts +29 -0
- package/dist/components/kemet-tabs/types.js +2 -0
- package/dist/components/kemet-tabs/types.js.map +1 -0
- package/dist/components/kemet-textarea/kemet-textarea.d.ts +123 -0
- package/dist/components/kemet-textarea/kemet-textarea.js +235 -308
- package/dist/components/kemet-textarea/kemet-textarea.js.map +1 -0
- package/dist/components/kemet-textarea/styles.d.ts +1 -0
- package/dist/components/kemet-textarea/styles.js +69 -0
- package/dist/components/kemet-textarea/styles.js.map +1 -0
- package/dist/components/kemet-textarea/types.d.ts +20 -0
- package/dist/components/kemet-textarea/types.js +2 -0
- package/dist/components/kemet-textarea/types.js.map +1 -0
- package/dist/components/kemet-toggle/kemet-toggle.d.ts +60 -0
- package/dist/components/kemet-toggle/kemet-toggle.js +73 -169
- package/dist/components/kemet-toggle/kemet-toggle.js.map +1 -0
- package/dist/components/kemet-toggle/styles.d.ts +1 -0
- package/dist/components/kemet-toggle/styles.js +84 -0
- package/dist/components/kemet-toggle/styles.js.map +1 -0
- package/dist/components/kemet-toggle/types.d.ts +10 -0
- package/dist/components/kemet-toggle/types.js +2 -0
- package/dist/components/kemet-toggle/types.js.map +1 -0
- package/dist/components/kemet-tooltip/kemet-tooltip.d.ts +33 -0
- package/dist/components/kemet-tooltip/kemet-tooltip.js +68 -0
- package/dist/components/kemet-tooltip/kemet-tooltip.js.map +1 -0
- package/dist/components/kemet-tooltip/styles.d.ts +1 -0
- package/dist/components/kemet-tooltip/styles.js +61 -0
- package/dist/components/kemet-tooltip/styles.js.map +1 -0
- package/dist/components/kemet-tooltip/types.d.ts +3 -0
- package/dist/components/kemet-tooltip/types.js +2 -0
- package/dist/components/kemet-tooltip/types.js.map +1 -0
- package/dist/components/kemet-tracker/kemet-tracker-step.d.ts +63 -0
- package/dist/components/kemet-tracker/kemet-tracker-step.js +75 -76
- package/dist/components/kemet-tracker/kemet-tracker-step.js.map +1 -0
- package/dist/components/kemet-tracker/kemet-tracker.d.ts +26 -0
- package/dist/components/kemet-tracker/kemet-tracker.js +59 -65
- package/dist/components/kemet-tracker/kemet-tracker.js.map +1 -0
- package/dist/components/kemet-tracker/styles.d.ts +1 -0
- package/dist/components/kemet-tracker/styles.js +2 -2
- package/dist/components/kemet-tracker/styles.js.map +1 -0
- package/dist/components/kemet-tracker/types.d.ts +13 -0
- package/dist/components/kemet-tracker/types.js +2 -0
- package/dist/components/kemet-tracker/types.js.map +1 -0
- package/dist/components/kemet-upload/kemet-upload-file.d.ts +46 -0
- package/dist/components/kemet-upload/kemet-upload-file.js +69 -117
- package/dist/components/kemet-upload/kemet-upload-file.js.map +1 -0
- package/dist/components/kemet-upload/kemet-upload.d.ts +58 -0
- package/dist/components/kemet-upload/kemet-upload.js +105 -169
- package/dist/components/kemet-upload/kemet-upload.js.map +1 -0
- package/dist/components/kemet-upload/styles.d.ts +3 -0
- package/dist/components/kemet-upload/styles.js +117 -1
- package/dist/components/kemet-upload/styles.js.map +1 -0
- package/dist/components/kemet-upload/types.d.ts +21 -0
- package/dist/components/kemet-upload/types.js +2 -0
- package/dist/components/kemet-upload/types.js.map +1 -0
- package/dist/kemet-components.bundle.js +88 -0
- package/dist/kemet-components.bundle.js.map +1 -0
- package/dist/kemet-components.cjs +8910 -7781
- package/dist/kemet-components.js +8717 -7582
- package/dist/src/components/kemet-accordion/kemet-accordion-panel.d.ts +51 -0
- package/dist/src/components/kemet-accordion/kemet-accordion-panel.js +136 -0
- package/dist/src/components/kemet-accordion/kemet-accordion-panel.js.map +1 -0
- package/dist/src/components/kemet-accordion/kemet-accordion.d.ts +37 -0
- package/dist/src/components/kemet-accordion/kemet-accordion.js +129 -0
- package/dist/src/components/kemet-accordion/kemet-accordion.js.map +1 -0
- package/dist/src/components/kemet-accordion/stories.d.ts +10 -0
- package/dist/src/components/kemet-accordion/stories.js +44 -0
- package/dist/src/components/kemet-accordion/stories.js.map +1 -0
- package/dist/src/components/kemet-accordion/styles.d.ts +2 -0
- package/dist/src/components/kemet-accordion/styles.js +42 -0
- package/dist/src/components/kemet-accordion/styles.js.map +1 -0
- package/dist/src/components/kemet-accordion/types.d.ts +9 -0
- package/dist/src/components/kemet-accordion/types.js +2 -0
- package/dist/src/components/kemet-accordion/types.js.map +1 -0
- package/dist/src/components/kemet-alert/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-alert/docs/stories.js +77 -0
- package/dist/src/components/kemet-alert/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-alert/kemet-alert.d.ts +52 -0
- package/dist/src/components/kemet-alert/kemet-alert.js +108 -0
- package/dist/src/components/kemet-alert/kemet-alert.js.map +1 -0
- package/dist/src/components/kemet-alert/styles.d.ts +1 -0
- package/dist/src/components/kemet-alert/styles.js +104 -0
- package/dist/src/components/kemet-alert/styles.js.map +1 -0
- package/dist/src/components/kemet-alert/types.d.ts +10 -0
- package/dist/src/components/kemet-alert/types.js +2 -0
- package/dist/src/components/kemet-alert/types.js.map +1 -0
- package/dist/src/components/kemet-avatar/docs/stories.d.ts +11 -0
- package/dist/src/components/kemet-avatar/docs/stories.js +86 -0
- package/dist/src/components/kemet-avatar/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-avatar/kemet-avatar.d.ts +43 -0
- package/dist/src/components/kemet-avatar/kemet-avatar.js +78 -0
- package/dist/src/components/kemet-avatar/kemet-avatar.js.map +1 -0
- package/dist/src/components/kemet-avatar/kemet-avatars.d.ts +20 -0
- package/dist/src/components/kemet-avatar/kemet-avatars.js +25 -0
- package/dist/src/components/kemet-avatar/kemet-avatars.js.map +1 -0
- package/dist/src/components/kemet-avatar/styles.d.ts +2 -0
- package/dist/src/components/kemet-avatar/styles.js +58 -0
- package/dist/src/components/kemet-avatar/styles.js.map +1 -0
- package/dist/src/components/kemet-avatar/types.d.ts +8 -0
- package/dist/src/components/kemet-avatar/types.js +2 -0
- package/dist/src/components/kemet-avatar/types.js.map +1 -0
- package/dist/src/components/kemet-badge/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-badge/docs/stories.js +40 -0
- package/dist/src/components/kemet-badge/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-badge/kemet-badge.d.ts +30 -0
- package/dist/src/components/kemet-badge/kemet-badge.js +55 -0
- package/dist/src/components/kemet-badge/kemet-badge.js.map +1 -0
- package/dist/src/components/kemet-badge/styles.d.ts +1 -0
- package/dist/src/components/kemet-badge/styles.js +40 -0
- package/dist/src/components/kemet-badge/styles.js.map +1 -0
- package/dist/src/components/kemet-badge/types.d.ts +6 -0
- package/dist/src/components/kemet-badge/types.js +2 -0
- package/dist/src/components/kemet-badge/types.js.map +1 -0
- package/dist/src/components/kemet-button/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-button/docs/stories.js +51 -0
- package/dist/src/components/kemet-button/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-button/kemet-button.d.ts +89 -0
- package/dist/src/components/kemet-button/kemet-button.js +153 -0
- package/dist/src/components/kemet-button/kemet-button.js.map +1 -0
- package/dist/src/components/kemet-button/styles.d.ts +1 -0
- package/dist/src/components/kemet-button/styles.js +73 -0
- package/dist/src/components/kemet-button/styles.js.map +1 -0
- package/dist/src/components/kemet-button/types.d.ts +10 -0
- package/dist/src/components/kemet-button/types.js +2 -0
- package/dist/src/components/kemet-button/types.js.map +1 -0
- package/dist/src/components/kemet-card/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-card/docs/stories.js +108 -0
- package/dist/src/components/kemet-card/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-card/kemet-card.d.ts +47 -0
- package/dist/src/components/kemet-card/kemet-card.js +65 -0
- package/dist/src/components/kemet-card/kemet-card.js.map +1 -0
- package/dist/src/components/kemet-card/styles.d.ts +1 -0
- package/dist/src/components/kemet-card/styles.js +63 -0
- package/dist/src/components/kemet-card/styles.js.map +1 -0
- package/dist/src/components/kemet-card/types.d.ts +3 -0
- package/dist/src/components/kemet-card/types.js +2 -0
- package/dist/src/components/kemet-card/types.js.map +1 -0
- package/dist/src/components/kemet-carousel/docs/stories.d.ts +17 -0
- package/dist/src/components/kemet-carousel/docs/stories.js +168 -0
- package/dist/src/components/kemet-carousel/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-current.d.ts +26 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-current.js +44 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-current.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-first.d.ts +25 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-first.js +50 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-first.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-last.d.ts +25 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-last.js +50 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-last.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-link.d.ts +31 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-link.js +64 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-link.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-next.d.ts +25 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-next.js +50 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-next.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-prev.d.ts +25 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-prev.js +50 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-prev.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-slide.d.ts +29 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-slide.js +53 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-slide.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-total.d.ts +26 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-total.js +44 -0
- package/dist/src/components/kemet-carousel/kemet-carousel-total.js.map +1 -0
- package/dist/src/components/kemet-carousel/kemet-carousel.d.ts +114 -0
- package/dist/src/components/kemet-carousel/kemet-carousel.js +410 -0
- package/dist/src/components/kemet-carousel/kemet-carousel.js.map +1 -0
- package/dist/src/components/kemet-carousel/styles.d.ts +1 -0
- package/dist/src/components/kemet-carousel/styles.js +66 -0
- package/dist/src/components/kemet-carousel/styles.js.map +1 -0
- package/dist/src/components/kemet-carousel/types.d.ts +21 -0
- package/dist/src/components/kemet-carousel/types.js +2 -0
- package/dist/src/components/kemet-carousel/types.js.map +1 -0
- package/dist/src/components/kemet-checkbox/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-checkbox/docs/stories.js +45 -0
- package/dist/src/components/kemet-checkbox/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-checkbox/kemet-checkbox.d.ts +71 -0
- package/dist/src/components/kemet-checkbox/kemet-checkbox.js +192 -0
- package/dist/src/components/kemet-checkbox/kemet-checkbox.js.map +1 -0
- package/dist/src/components/kemet-checkbox/styles.d.ts +1 -0
- package/dist/src/components/kemet-checkbox/styles.js +83 -0
- package/dist/src/components/kemet-checkbox/styles.js.map +1 -0
- package/dist/src/components/kemet-checkbox/types.d.ts +15 -0
- package/dist/src/components/kemet-checkbox/types.js +2 -0
- package/dist/src/components/kemet-checkbox/types.js.map +1 -0
- package/dist/src/components/kemet-combo/docs/stories.d.ts +11 -0
- package/dist/src/components/kemet-combo/docs/stories.js +30 -0
- package/dist/src/components/kemet-combo/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-combo/kemet-combo.d.ts +50 -0
- package/dist/src/components/kemet-combo/kemet-combo.js +162 -0
- package/dist/src/components/kemet-combo/kemet-combo.js.map +1 -0
- package/dist/src/components/kemet-combo/styles.d.ts +1 -0
- package/dist/src/components/kemet-combo/styles.js +44 -0
- package/dist/src/components/kemet-combo/styles.js.map +1 -0
- package/dist/src/components/kemet-combo/types.d.ts +5 -0
- package/dist/src/components/kemet-combo/types.js +2 -0
- package/dist/src/components/kemet-combo/types.js.map +1 -0
- package/dist/src/components/kemet-count/docs/stories.d.ts +11 -0
- package/dist/src/components/kemet-count/docs/stories.js +51 -0
- package/dist/src/components/kemet-count/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-count/kemet-count.d.ts +39 -0
- package/dist/src/components/kemet-count/kemet-count.js +98 -0
- package/dist/src/components/kemet-count/kemet-count.js.map +1 -0
- package/dist/src/components/kemet-draggable/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-draggable/docs/stories.js +32 -0
- package/dist/src/components/kemet-draggable/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-draggable/kemet-draggable.d.ts +49 -0
- package/dist/src/components/kemet-draggable/kemet-draggable.js +137 -0
- package/dist/src/components/kemet-draggable/kemet-draggable.js.map +1 -0
- package/dist/src/components/kemet-draggable/types.d.ts +6 -0
- package/dist/src/components/kemet-draggable/types.js +2 -0
- package/dist/src/components/kemet-draggable/types.js.map +1 -0
- package/dist/src/components/kemet-drawer/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-drawer/docs/stories.js +91 -0
- package/dist/src/components/kemet-drawer/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-drawer/kemet-drawer.d.ts +48 -0
- package/dist/src/components/kemet-drawer/kemet-drawer.js +95 -0
- package/dist/src/components/kemet-drawer/kemet-drawer.js.map +1 -0
- package/dist/src/components/kemet-drawer/styles.d.ts +2 -0
- package/dist/src/components/kemet-drawer/styles.js +314 -0
- package/dist/src/components/kemet-drawer/styles.js.map +1 -0
- package/dist/src/components/kemet-drawer/types.d.ts +8 -0
- package/dist/src/components/kemet-drawer/types.js +2 -0
- package/dist/src/components/kemet-drawer/types.js.map +1 -0
- package/dist/src/components/kemet-fab/docs/stories.d.ts +11 -0
- package/dist/src/components/kemet-fab/docs/stories.js +87 -0
- package/dist/src/components/kemet-fab/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-fab/kemet-fab.d.ts +49 -0
- package/dist/src/components/kemet-fab/kemet-fab.js +107 -0
- package/dist/src/components/kemet-fab/kemet-fab.js.map +1 -0
- package/dist/src/components/kemet-fab/styles.d.ts +1 -0
- package/dist/src/components/kemet-fab/styles.js +95 -0
- package/dist/src/components/kemet-fab/styles.js.map +1 -0
- package/dist/src/components/kemet-fab/types.d.ts +8 -0
- package/dist/src/components/kemet-fab/types.js +2 -0
- package/dist/src/components/kemet-fab/types.js.map +1 -0
- package/dist/src/components/kemet-field/docs/stories.d.ts +15 -0
- package/dist/src/components/kemet-field/docs/stories.js +105 -0
- package/dist/src/components/kemet-field/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-field/kemet-field.d.ts +61 -0
- package/dist/src/components/kemet-field/kemet-field.js +144 -0
- package/dist/src/components/kemet-field/kemet-field.js.map +1 -0
- package/dist/src/components/kemet-field/styles.d.ts +1 -0
- package/dist/src/components/kemet-field/styles.js +61 -0
- package/dist/src/components/kemet-field/styles.js.map +1 -0
- package/dist/src/components/kemet-field/types.d.ts +13 -0
- package/dist/src/components/kemet-field/types.js +2 -0
- package/dist/src/components/kemet-field/types.js.map +1 -0
- package/dist/src/components/kemet-flipcard/docs/stories.d.ts +11 -0
- package/dist/src/components/kemet-flipcard/docs/stories.js +109 -0
- package/dist/src/components/kemet-flipcard/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +21 -0
- package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.js +42 -0
- package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.js.map +1 -0
- package/dist/src/components/kemet-flipcard/kemet-flipcard.d.ts +52 -0
- package/dist/src/components/kemet-flipcard/kemet-flipcard.js +131 -0
- package/dist/src/components/kemet-flipcard/kemet-flipcard.js.map +1 -0
- package/dist/src/components/kemet-flipcard/styles.d.ts +1 -0
- package/dist/src/components/kemet-flipcard/styles.js +85 -0
- package/dist/src/components/kemet-flipcard/styles.js.map +1 -0
- package/dist/src/components/kemet-flipcard/types.d.ts +7 -0
- package/dist/src/components/kemet-flipcard/types.js +2 -0
- package/dist/src/components/kemet-flipcard/types.js.map +1 -0
- package/dist/src/components/kemet-icon/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-icon/docs/stories.js +34 -0
- package/dist/src/components/kemet-icon/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-icon/kemet-icon.d.ts +28 -0
- package/dist/src/components/kemet-icon/kemet-icon.js +114 -0
- package/dist/src/components/kemet-icon/kemet-icon.js.map +1 -0
- package/dist/src/components/kemet-icon/styles.d.ts +1 -0
- package/dist/src/components/kemet-icon/styles.js +9 -0
- package/dist/src/components/kemet-icon/styles.js.map +1 -0
- package/dist/src/components/kemet-icon/types.d.ts +5 -0
- package/dist/src/components/kemet-icon/types.js +2 -0
- package/dist/src/components/kemet-icon/types.js.map +1 -0
- package/dist/src/components/kemet-input/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-input/docs/stories.js +142 -0
- package/dist/src/components/kemet-input/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-input/kemet-input.d.ts +193 -0
- package/dist/src/components/kemet-input/kemet-input.js +417 -0
- package/dist/src/components/kemet-input/kemet-input.js.map +1 -0
- package/dist/src/components/kemet-input/styles.d.ts +1 -0
- package/dist/src/components/kemet-input/styles.js +115 -0
- package/dist/src/components/kemet-input/styles.js.map +1 -0
- package/dist/src/components/kemet-input/types.d.ts +35 -0
- package/dist/src/components/kemet-input/types.js +2 -0
- package/dist/src/components/kemet-input/types.js.map +1 -0
- package/dist/src/components/kemet-modal/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-modal/docs/stories.js +101 -0
- package/dist/src/components/kemet-modal/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-modal/kemet-modal-close.d.ts +21 -0
- package/dist/src/components/kemet-modal/kemet-modal-close.js +40 -0
- package/dist/src/components/kemet-modal/kemet-modal-close.js.map +1 -0
- package/dist/src/components/kemet-modal/kemet-modal.d.ts +49 -0
- package/dist/src/components/kemet-modal/kemet-modal.js +131 -0
- package/dist/src/components/kemet-modal/kemet-modal.js.map +1 -0
- package/dist/src/components/kemet-modal/styles.d.ts +2 -0
- package/dist/src/components/kemet-modal/styles.js +267 -0
- package/dist/src/components/kemet-modal/styles.js.map +1 -0
- package/dist/src/components/kemet-modal/types.d.ts +8 -0
- package/dist/src/components/kemet-modal/types.js +2 -0
- package/dist/src/components/kemet-modal/types.js.map +1 -0
- package/dist/src/components/kemet-password/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-password/docs/stories.js +37 -0
- package/dist/src/components/kemet-password/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-password/kemet-password.d.ts +77 -0
- package/dist/src/components/kemet-password/kemet-password.js +184 -0
- package/dist/src/components/kemet-password/kemet-password.js.map +1 -0
- package/dist/src/components/kemet-password/styles.d.ts +1 -0
- package/dist/src/components/kemet-password/styles.js +80 -0
- package/dist/src/components/kemet-password/styles.js.map +1 -0
- package/dist/src/components/kemet-password/types.d.ts +10 -0
- package/dist/src/components/kemet-password/types.js +2 -0
- package/dist/src/components/kemet-password/types.js.map +1 -0
- package/dist/src/components/kemet-popper/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-popper/docs/stories.js +72 -0
- package/dist/src/components/kemet-popper/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-popper/kemet-popper-close.d.ts +22 -0
- package/dist/src/components/kemet-popper/kemet-popper-close.js +49 -0
- package/dist/src/components/kemet-popper/kemet-popper-close.js.map +1 -0
- package/dist/src/components/kemet-popper/kemet-popper.d.ts +63 -0
- package/dist/src/components/kemet-popper/kemet-popper.js +182 -0
- package/dist/src/components/kemet-popper/kemet-popper.js.map +1 -0
- package/dist/src/components/kemet-popper/styles.d.ts +1 -0
- package/dist/src/components/kemet-popper/styles.effects.d.ts +8 -0
- package/dist/src/components/kemet-popper/styles.effects.js +306 -0
- package/dist/src/components/kemet-popper/styles.effects.js.map +1 -0
- package/dist/src/components/kemet-popper/styles.js +28 -0
- package/dist/src/components/kemet-popper/styles.js.map +1 -0
- package/dist/src/components/kemet-popper/types.d.ts +3 -0
- package/dist/src/components/kemet-popper/types.js +2 -0
- package/dist/src/components/kemet-popper/types.js.map +1 -0
- package/dist/src/components/kemet-radio/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-radio/docs/stories.js +40 -0
- package/dist/src/components/kemet-radio/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-radio/kemet-radio.d.ts +56 -0
- package/dist/src/components/kemet-radio/kemet-radio.js +129 -0
- package/dist/src/components/kemet-radio/kemet-radio.js.map +1 -0
- package/dist/src/components/kemet-radio/kemet-radios.d.ts +49 -0
- package/dist/src/components/kemet-radio/kemet-radios.js +143 -0
- package/dist/src/components/kemet-radio/kemet-radios.js.map +1 -0
- package/dist/src/components/kemet-radio/styles.d.ts +2 -0
- package/dist/src/components/kemet-radio/styles.js +102 -0
- package/dist/src/components/kemet-radio/styles.js.map +1 -0
- package/dist/src/components/kemet-radio/types.d.ts +20 -0
- package/dist/src/components/kemet-radio/types.js +2 -0
- package/dist/src/components/kemet-radio/types.js.map +1 -0
- package/dist/src/components/kemet-rotator/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-rotator/docs/stories.js +46 -0
- package/dist/src/components/kemet-rotator/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-rotator/kemet-rotator.d.ts +40 -0
- package/dist/src/components/kemet-rotator/kemet-rotator.js +122 -0
- package/dist/src/components/kemet-rotator/kemet-rotator.js.map +1 -0
- package/dist/src/components/kemet-rotator/styles.d.ts +1 -0
- package/dist/src/components/kemet-rotator/styles.js +72 -0
- package/dist/src/components/kemet-rotator/styles.js.map +1 -0
- package/dist/src/components/kemet-rotator/types.d.ts +9 -0
- package/dist/src/components/kemet-rotator/types.js +2 -0
- package/dist/src/components/kemet-rotator/types.js.map +1 -0
- package/dist/src/components/kemet-scroll-link/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-scroll-link/docs/stories.js +97 -0
- package/dist/src/components/kemet-scroll-link/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-scroll-link/kemet-scroll-link.d.ts +31 -0
- package/dist/src/components/kemet-scroll-link/kemet-scroll-link.js +82 -0
- package/dist/src/components/kemet-scroll-link/kemet-scroll-link.js.map +1 -0
- package/dist/src/components/kemet-scroll-link/types.d.ts +6 -0
- package/dist/src/components/kemet-scroll-link/types.js +2 -0
- package/dist/src/components/kemet-scroll-link/types.js.map +1 -0
- package/dist/src/components/kemet-scroll-nav/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-scroll-nav/docs/stories.js +162 -0
- package/dist/src/components/kemet-scroll-nav/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +34 -0
- package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js +70 -0
- package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js.map +1 -0
- package/dist/src/components/kemet-scroll-nav/styles.d.ts +1 -0
- package/dist/src/components/kemet-scroll-nav/styles.js +27 -0
- package/dist/src/components/kemet-scroll-nav/styles.js.map +1 -0
- package/dist/src/components/kemet-scroll-nav/types.d.ts +6 -0
- package/dist/src/components/kemet-scroll-nav/types.js +2 -0
- package/dist/src/components/kemet-scroll-nav/types.js.map +1 -0
- package/dist/src/components/kemet-scroll-snap/docs/stories.d.ts +11 -0
- package/dist/src/components/kemet-scroll-snap/docs/stories.js +131 -0
- package/dist/src/components/kemet-scroll-snap/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +44 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +120 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +1 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +30 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +53 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +1 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +46 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.js +122 -0
- package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.js.map +1 -0
- package/dist/src/components/kemet-scroll-snap/styles.d.ts +2 -0
- package/dist/src/components/kemet-scroll-snap/styles.js +74 -0
- package/dist/src/components/kemet-scroll-snap/styles.js.map +1 -0
- package/dist/src/components/kemet-scroll-snap/types.d.ts +20 -0
- package/dist/src/components/kemet-scroll-snap/types.js +2 -0
- package/dist/src/components/kemet-scroll-snap/types.js.map +1 -0
- package/dist/src/components/kemet-select/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-select/docs/stories.js +57 -0
- package/dist/src/components/kemet-select/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-select/kemet-option.d.ts +29 -0
- package/dist/src/components/kemet-select/kemet-option.js +45 -0
- package/dist/src/components/kemet-select/kemet-option.js.map +1 -0
- package/dist/src/components/kemet-select/kemet-select.d.ts +110 -0
- package/dist/src/components/kemet-select/kemet-select.js +239 -0
- package/dist/src/components/kemet-select/kemet-select.js.map +1 -0
- package/dist/src/components/kemet-select/styles.d.ts +1 -0
- package/dist/src/components/kemet-select/styles.js +73 -0
- package/dist/src/components/kemet-select/styles.js.map +1 -0
- package/dist/src/components/kemet-select/types.d.ts +20 -0
- package/dist/src/components/kemet-select/types.js +2 -0
- package/dist/src/components/kemet-select/types.js.map +1 -0
- package/dist/src/components/kemet-sortable/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-sortable/docs/stories.js +34 -0
- package/dist/src/components/kemet-sortable/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-sortable/kemet-sortable-item.d.ts +21 -0
- package/dist/src/components/kemet-sortable/kemet-sortable-item.js +30 -0
- package/dist/src/components/kemet-sortable/kemet-sortable-item.js.map +1 -0
- package/dist/src/components/kemet-sortable/kemet-sortable.d.ts +25 -0
- package/dist/src/components/kemet-sortable/kemet-sortable.js +77 -0
- package/dist/src/components/kemet-sortable/kemet-sortable.js.map +1 -0
- package/dist/src/components/kemet-sortable/styles.d.ts +2 -0
- package/dist/src/components/kemet-sortable/styles.js +22 -0
- package/dist/src/components/kemet-sortable/styles.js.map +1 -0
- package/dist/src/components/kemet-sortable/types.d.ts +3 -0
- package/dist/src/components/kemet-sortable/types.js +2 -0
- package/dist/src/components/kemet-sortable/types.js.map +1 -0
- package/dist/src/components/kemet-svgs/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-svgs/docs/stories.js +67 -0
- package/dist/src/components/kemet-svgs/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-svgs/kemet-svg.d.ts +38 -0
- package/dist/src/components/kemet-svgs/kemet-svg.js +97 -0
- package/dist/src/components/kemet-svgs/kemet-svg.js.map +1 -0
- package/dist/src/components/kemet-svgs/kemet-svgs.d.ts +27 -0
- package/dist/src/components/kemet-svgs/kemet-svgs.js +51 -0
- package/dist/src/components/kemet-svgs/kemet-svgs.js.map +1 -0
- package/dist/src/components/kemet-svgs/types.d.ts +10 -0
- package/dist/src/components/kemet-svgs/types.js +2 -0
- package/dist/src/components/kemet-svgs/types.js.map +1 -0
- package/dist/src/components/kemet-tabs/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-tabs/docs/stories.js +142 -0
- package/dist/src/components/kemet-tabs/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-tabs/kemet-tab-panel.d.ts +27 -0
- package/dist/src/components/kemet-tabs/kemet-tab-panel.js +52 -0
- package/dist/src/components/kemet-tabs/kemet-tab-panel.js.map +1 -0
- package/dist/src/components/kemet-tabs/kemet-tab.d.ts +37 -0
- package/dist/src/components/kemet-tabs/kemet-tab.js +79 -0
- package/dist/src/components/kemet-tabs/kemet-tab.js.map +1 -0
- package/dist/src/components/kemet-tabs/kemet-tabs.d.ts +91 -0
- package/dist/src/components/kemet-tabs/kemet-tabs.js +523 -0
- package/dist/src/components/kemet-tabs/kemet-tabs.js.map +1 -0
- package/dist/src/components/kemet-tabs/styles.d.ts +3 -0
- package/dist/src/components/kemet-tabs/styles.js +268 -0
- package/dist/src/components/kemet-tabs/styles.js.map +1 -0
- package/dist/src/components/kemet-tabs/types.d.ts +27 -0
- package/dist/src/components/kemet-tabs/types.js +2 -0
- package/dist/src/components/kemet-tabs/types.js.map +1 -0
- package/dist/src/components/kemet-textarea/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-textarea/docs/stories.js +88 -0
- package/dist/src/components/kemet-textarea/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-textarea/kemet-textarea.d.ts +123 -0
- package/dist/src/components/kemet-textarea/kemet-textarea.js +293 -0
- package/dist/src/components/kemet-textarea/kemet-textarea.js.map +1 -0
- package/dist/src/components/kemet-textarea/styles.d.ts +1 -0
- package/dist/src/components/kemet-textarea/styles.js +69 -0
- package/dist/src/components/kemet-textarea/styles.js.map +1 -0
- package/dist/src/components/kemet-textarea/types.d.ts +20 -0
- package/dist/src/components/kemet-textarea/types.js +2 -0
- package/dist/src/components/kemet-textarea/types.js.map +1 -0
- package/dist/src/components/kemet-toggle/docs/stories.d.ts +9 -0
- package/dist/src/components/kemet-toggle/docs/stories.js +58 -0
- package/dist/src/components/kemet-toggle/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-toggle/kemet-toggle.d.ts +60 -0
- package/dist/src/components/kemet-toggle/kemet-toggle.js +130 -0
- package/dist/src/components/kemet-toggle/kemet-toggle.js.map +1 -0
- package/dist/src/components/kemet-toggle/styles.d.ts +1 -0
- package/dist/src/components/kemet-toggle/styles.js +84 -0
- package/dist/src/components/kemet-toggle/styles.js.map +1 -0
- package/dist/src/components/kemet-toggle/types.d.ts +10 -0
- package/dist/src/components/kemet-toggle/types.js +2 -0
- package/dist/src/components/kemet-toggle/types.js.map +1 -0
- package/dist/src/components/kemet-tooltip/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-tooltip/docs/stories.js +72 -0
- package/dist/src/components/kemet-tooltip/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-tooltip/kemet-tooltip.d.ts +33 -0
- package/dist/src/components/kemet-tooltip/kemet-tooltip.js +68 -0
- package/dist/src/components/kemet-tooltip/kemet-tooltip.js.map +1 -0
- package/dist/src/components/kemet-tooltip/styles.d.ts +1 -0
- package/dist/src/components/kemet-tooltip/styles.js +61 -0
- package/dist/src/components/kemet-tooltip/styles.js.map +1 -0
- package/dist/src/components/kemet-tooltip/types.d.ts +3 -0
- package/dist/src/components/kemet-tooltip/types.js +2 -0
- package/dist/src/components/kemet-tooltip/types.js.map +1 -0
- package/dist/src/components/kemet-tracker/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-tracker/docs/stories.js +46 -0
- package/dist/src/components/kemet-tracker/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-tracker/kemet-tracker-step.d.ts +63 -0
- package/dist/src/components/kemet-tracker/kemet-tracker-step.js +127 -0
- package/dist/src/components/kemet-tracker/kemet-tracker-step.js.map +1 -0
- package/dist/src/components/kemet-tracker/kemet-tracker.d.ts +26 -0
- package/dist/src/components/kemet-tracker/kemet-tracker.js +70 -0
- package/dist/src/components/kemet-tracker/kemet-tracker.js.map +1 -0
- package/dist/src/components/kemet-tracker/styles.d.ts +1 -0
- package/dist/src/components/kemet-tracker/styles.js +111 -0
- package/dist/src/components/kemet-tracker/styles.js.map +1 -0
- package/dist/src/components/kemet-tracker/types.d.ts +13 -0
- package/dist/src/components/kemet-tracker/types.js +2 -0
- package/dist/src/components/kemet-tracker/types.js.map +1 -0
- package/dist/src/components/kemet-upload/docs/stories.d.ts +10 -0
- package/dist/src/components/kemet-upload/docs/stories.js +57 -0
- package/dist/src/components/kemet-upload/docs/stories.js.map +1 -0
- package/dist/src/components/kemet-upload/kemet-upload-file.d.ts +46 -0
- package/dist/src/components/kemet-upload/kemet-upload-file.js +110 -0
- package/dist/src/components/kemet-upload/kemet-upload-file.js.map +1 -0
- package/dist/src/components/kemet-upload/kemet-upload.d.ts +58 -0
- package/dist/src/components/kemet-upload/kemet-upload.js +154 -0
- package/dist/src/components/kemet-upload/kemet-upload.js.map +1 -0
- package/dist/src/components/kemet-upload/styles.d.ts +3 -0
- package/dist/src/components/kemet-upload/styles.js +169 -0
- package/dist/src/components/kemet-upload/styles.js.map +1 -0
- package/dist/src/components/kemet-upload/types.d.ts +21 -0
- package/dist/src/components/kemet-upload/types.js +2 -0
- package/dist/src/components/kemet-upload/types.js.map +1 -0
- package/dist/src/stories/styles/borders/borders.stories.d.ts +5 -0
- package/dist/src/stories/styles/borders/borders.stories.js +46 -0
- package/dist/src/stories/styles/borders/borders.stories.js.map +1 -0
- package/dist/src/stories/styles/borders/stories.d.ts +5 -0
- package/dist/src/stories/styles/borders/stories.js +46 -0
- package/dist/src/stories/styles/borders/stories.js.map +1 -0
- package/dist/src/stories/styles/borders.stories.d.ts +5 -0
- package/dist/src/stories/styles/borders.stories.js +46 -0
- package/dist/src/stories/styles/borders.stories.js.map +1 -0
- package/dist/src/stories/styles/elevation/elevation.stories.d.ts +1 -0
- package/dist/src/stories/styles/elevation/elevation.stories.js +15 -0
- package/dist/src/stories/styles/elevation/elevation.stories.js.map +1 -0
- package/dist/src/stories/styles/elevation/stories.d.ts +5 -0
- package/dist/src/stories/styles/elevation/stories.js +21 -0
- package/dist/src/stories/styles/elevation/stories.js.map +1 -0
- package/dist/src/stories/styles/flexcolumn/stories.d.ts +6 -0
- package/dist/src/stories/styles/flexcolumn/stories.js +44 -0
- package/dist/src/stories/styles/flexcolumn/stories.js.map +1 -0
- package/dist/src/stories/styles/flexgrid/stories.d.ts +6 -0
- package/dist/src/stories/styles/flexgrid/stories.js +44 -0
- package/dist/src/stories/styles/flexgrid/stories.js.map +1 -0
- package/dist/src/stories/styles/flexlist/stories.d.ts +7 -0
- package/dist/src/stories/styles/flexlist/stories.js +45 -0
- package/dist/src/stories/styles/flexlist/stories.js.map +1 -0
- package/dist/src/stories/styles/flexrow/stories.d.ts +10 -0
- package/dist/src/stories/styles/flexrow/stories.js +77 -0
- package/dist/src/stories/styles/flexrow/stories.js.map +1 -0
- package/dist/src/stories/styles/spacing/stories.d.ts +6 -0
- package/dist/src/stories/styles/spacing/stories.js +49 -0
- package/dist/src/stories/styles/spacing/stories.js.map +1 -0
- package/dist/src/stories/styles/typealignment/stories.d.ts +5 -0
- package/dist/src/stories/styles/typealignment/stories.js +14 -0
- package/dist/src/stories/styles/typealignment/stories.js.map +1 -0
- package/dist/src/stories/styles/typography/stories.d.ts +6 -0
- package/dist/src/stories/styles/typography/stories.js +41 -0
- package/dist/src/stories/styles/typography/stories.js.map +1 -0
- package/dist/src/stories/styles/visibility/stories.d.ts +6 -0
- package/dist/src/stories/styles/visibility/stories.js +60 -0
- package/dist/src/stories/styles/visibility/stories.js.map +1 -0
- package/dist/src/stories/templates/bootstrap/stories.d.ts +6 -0
- package/dist/src/stories/templates/bootstrap/stories.js +159 -0
- package/dist/src/stories/templates/bootstrap/stories.js.map +1 -0
- package/dist/src/stories/templates/foundation/stories.d.ts +8 -0
- package/dist/src/stories/templates/foundation/stories.js +911 -0
- package/dist/src/stories/templates/foundation/stories.js.map +1 -0
- package/dist/src/utilities/controllers/forms.d.ts +11 -0
- package/dist/src/utilities/controllers/forms.js +102 -0
- package/dist/src/utilities/controllers/forms.js.map +1 -0
- package/dist/src/utilities/misc/constants.d.ts +5 -0
- package/dist/src/utilities/misc/constants.js +6 -0
- package/dist/src/utilities/misc/constants.js.map +1 -0
- package/dist/src/utilities/misc/events.d.ts +1 -0
- package/dist/src/utilities/misc/events.js +4 -0
- package/dist/src/utilities/misc/events.js.map +1 -0
- package/dist/styles/kemet.base.css +106 -0
- package/dist/styles/kemet.base.css.map +1 -0
- package/dist/styles/kemet.core.css +37 -762
- package/dist/styles/kemet.core.css.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/utilities/controllers/forms.d.ts +11 -0
- package/dist/utilities/controllers/forms.js +93 -114
- package/dist/utilities/controllers/forms.js.map +1 -0
- package/dist/utilities/misc/constants.d.ts +5 -0
- package/dist/utilities/misc/constants.js +6 -0
- package/dist/utilities/misc/constants.js.map +1 -0
- package/dist/utilities/misc/decorators.d.ts +1 -0
- package/dist/utilities/misc/decorators.js +5 -0
- package/dist/utilities/misc/decorators.js.map +1 -0
- package/dist/utilities/misc/events.d.ts +1 -0
- package/dist/utilities/misc/events.js +2 -3
- package/dist/utilities/misc/events.js.map +1 -0
- package/package.json +69 -76
- package/dist/components/kemet-popover/kemet-popover-close.js +0 -57
- package/dist/components/kemet-popover/kemet-popover.js +0 -418
- package/dist/components/kemet-popover/styles.tooltip.js +0 -96
- package/dist/kemet-components.min.js +0 -3689
- package/dist/styles/components/_config.scss +0 -4
- package/dist/styles/components/accordion.scss +0 -9
- package/dist/styles/components/drawer.scss +0 -11
- package/dist/styles/components/modal.scss +0 -8
- package/dist/styles/components/scrollsnap.scss +0 -11
- package/dist/styles/core/_config.scss +0 -354
- package/dist/styles/core/_helpers.scss +0 -407
- package/dist/styles/core/attributes.scss +0 -38
- package/dist/styles/core/base.scss +0 -38
- package/dist/styles/core/layout.scss +0 -169
- package/dist/styles/kemet.components.scss +0 -4
- package/dist/styles/kemet.core.scss +0 -3
|
@@ -1,3689 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2019 Google LLC
|
|
4
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/
|
|
6
|
-
const t=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e=Symbol(),s=new Map;class i{constructor(t,s){if(this._$cssResult$=!0,s!==e)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let e=s.get(this.cssText);return t&&void 0===e&&(s.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const o=t=>new i("string"==typeof t?t:t+"",e),r=(t,...s)=>{const o=1===t.length?t[0]:s.reduce(((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1]),t[0]);return new i(o,e)},a=t?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return o(e)})(t):t
|
|
7
|
-
/**
|
|
8
|
-
* @license
|
|
9
|
-
* Copyright 2017 Google LLC
|
|
10
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/;var n;const l=window.trustedTypes,d=l?l.emptyScript:"",h=window.reactiveElementPolyfillSupport,c={toAttribute(t,e){switch(e){case Boolean:t=t?d:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},p=(t,e)=>e!==t&&(e==e||t==t),u={attribute:!0,type:String,converter:c,reflect:!1,hasChanged:p};class m extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;null!==(e=this.l)&&void 0!==e||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const i=this._$Eh(s,e);void 0!==i&&(this._$Eu.set(i,s),t.push(i))})),t}static createProperty(t,e=u){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const o=this[t];this[e]=i,this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||u}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eh(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this._$Eg)&&void 0!==e?e:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this._$Eg)||void 0===e||e.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])}))}createRenderRoot(){var e;const s=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return((e,s)=>{t?e.adoptedStyleSheets=s.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):s.forEach((t=>{const s=document.createElement("style"),i=window.litNonce;void 0!==i&&s.setAttribute("nonce",i),s.textContent=t.cssText,e.appendChild(s)}))})(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ES(t,e,s=u){var i,o;const r=this.constructor._$Eh(t,s);if(void 0!==r&&!0===s.reflect){const a=(null!==(o=null===(i=s.converter)||void 0===i?void 0:i.toAttribute)&&void 0!==o?o:c.toAttribute)(e,s.type);this._$Ei=t,null==a?this.removeAttribute(r):this.setAttribute(r,a),this._$Ei=null}}_$AK(t,e){var s,i,o;const r=this.constructor,a=r._$Eu.get(t);if(void 0!==a&&this._$Ei!==a){const t=r.getPropertyOptions(a),n=t.converter,l=null!==(o=null!==(i=null===(s=n)||void 0===s?void 0:s.fromAttribute)&&void 0!==i?i:"function"==typeof n?n:null)&&void 0!==o?o:c.fromAttribute;this._$Ei=a,this[a]=l(e,t.type),this._$Ei=null}}requestUpdate(t,e,s){let i=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||p)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this._$Ep=this._$E_())}async _$E_(){this.isUpdatePending=!0;try{await this._$Ep}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,e)=>this[e]=t)),this._$Et=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null===(e=this._$Eg)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$ES(e,this[e],t))),this._$EC=void 0),this._$EU()}updated(t){}firstUpdated(t){}}
|
|
12
|
-
/**
|
|
13
|
-
* @license
|
|
14
|
-
* Copyright 2017 Google LLC
|
|
15
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
|
-
*/
|
|
17
|
-
var f;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:m}),(null!==(n=globalThis.reactiveElementVersions)&&void 0!==n?n:globalThis.reactiveElementVersions=[]).push("1.3.2");const g=globalThis.trustedTypes,v=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,b=`lit$${(Math.random()+"").slice(9)}$`,k="?"+b,y=`<${k}>`,x=document,w=(t="")=>x.createComment(t),$=t=>null===t||"object"!=typeof t&&"function"!=typeof t,E=Array.isArray,S=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,A=/>/g,C=/>|[ \n\r](?:([^\s"'>=/]+)([ \n\r]*=[ \n\r]*(?:[^ \n\r"'`<>=]|("|')|))|$)/g,z=/'/g,L=/"/g,B=/^(?:script|style|textarea|title)$/i,I=(t=>(e,...s)=>({_$litType$:t,strings:e,values:s}))(1),O=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),P=new WeakMap,D=x.createTreeWalker(x,129,null,!1),M=(t,e)=>{const s=t.length-1,i=[];let o,r=2===e?"<svg>":"",a=S;for(let e=0;e<s;e++){const s=t[e];let n,l,d=-1,h=0;for(;h<s.length&&(a.lastIndex=h,l=a.exec(s),null!==l);)h=a.lastIndex,a===S?"!--"===l[1]?a=_:void 0!==l[1]?a=A:void 0!==l[2]?(B.test(l[2])&&(o=RegExp("</"+l[2],"g")),a=C):void 0!==l[3]&&(a=C):a===C?">"===l[0]?(a=null!=o?o:S,d=-1):void 0===l[1]?d=-2:(d=a.lastIndex-l[2].length,n=l[1],a=void 0===l[3]?C:'"'===l[3]?L:z):a===L||a===z?a=C:a===_||a===A?a=S:(a=C,o=void 0);const c=a===C&&t[e+1].startsWith("/>")?" ":"";r+=a===S?s+y:d>=0?(i.push(n),s.slice(0,d)+"$lit$"+s.slice(d)+b+c):s+b+(-2===d?(i.push(void 0),e):c)}const n=r+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==v?v.createHTML(n):n,i]};class U{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const a=t.length-1,n=this.parts,[l,d]=M(t,e);if(this.el=U.createElement(l,s),D.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=D.nextNode())&&n.length<a;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(b)){const s=d[r++];if(t.push(e),void 0!==s){const t=i.getAttribute(s.toLowerCase()+"$lit$").split(b),e=/([.?@])?(.*)/.exec(s);n.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?Y:"?"===e[1]?V:"@"===e[1]?F:R})}else n.push({type:6,index:o})}for(const e of t)i.removeAttribute(e)}if(B.test(i.tagName)){const t=i.textContent.split(b),e=t.length-1;if(e>0){i.textContent=g?g.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],w()),D.nextNode(),n.push({type:2,index:++o});i.append(t[e],w())}}}else if(8===i.nodeType)if(i.data===k)n.push({type:2,index:o});else{let t=-1;for(;-1!==(t=i.data.indexOf(b,t+1));)n.push({type:7,index:o}),t+=b.length-1}o++}}static createElement(t,e){const s=x.createElement("template");return s.innerHTML=t,s}}function X(t,e,s=t,i){var o,r,a,n;if(e===O)return e;let l=void 0!==i?null===(o=s._$Cl)||void 0===o?void 0:o[i]:s._$Cu;const d=$(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==d&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===d?l=void 0:(l=new d(t),l._$AT(t,s,i)),void 0!==i?(null!==(a=(n=s)._$Cl)&&void 0!==a?a:n._$Cl=[])[i]=l:s._$Cu=l),void 0!==l&&(e=X(t,l._$AS(t,e.values),l,i)),e}class N{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:s},parts:i}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:x).importNode(s,!0);D.currentNode=o;let r=D.nextNode(),a=0,n=0,l=i[0];for(;void 0!==l;){if(a===l.index){let e;2===l.type?e=new q(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new j(r,this,t)),this.v.push(e),l=i[++n]}a!==(null==l?void 0:l.index)&&(r=D.nextNode(),a++)}return o}m(t){let e=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class q{constructor(t,e,s,i){var o;this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cg=null===(o=null==i?void 0:i.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=X(this,t,e),$(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==O&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):(t=>{var e;return E(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.S(t):this.$(t)}M(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==T&&$(this._$AH)?this._$AA.nextSibling.data=t:this.k(x.createTextNode(t)),this._$AH=t}T(t){var e;const{values:s,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=U.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(s);else{const t=new N(o,this),e=t.p(this.options);t.m(s),this.k(e),this._$AH=t}}_$AC(t){let e=P.get(t.strings);return void 0===e&&P.set(t.strings,e=new U(t)),e}S(t){E(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new q(this.M(w()),this.M(w()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cg=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class R{constructor(t,e,s,i,o){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=T}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const o=this.strings;let r=!1;if(void 0===o)t=X(this,t,e,0),r=!$(t)||t!==this._$AH&&t!==O,r&&(this._$AH=t);else{const i=t;let a,n;for(t=o[0],a=0;a<o.length-1;a++)n=X(this,i[s+a],e,a),n===O&&(n=this._$AH[a]),r||(r=!$(n)||n!==this._$AH[a]),n===T?t=T:t!==T&&(t+=(null!=n?n:"")+o[a+1]),this._$AH[a]=n}r&&!i&&this.C(t)}C(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class Y extends R{constructor(){super(...arguments),this.type=3}C(t){this.element[this.name]=t===T?void 0:t}}const H=g?g.emptyScript:"";class V extends R{constructor(){super(...arguments),this.type=4}C(t){t&&t!==T?this.element.setAttribute(this.name,H):this.element.removeAttribute(this.name)}}class F extends R{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=X(this,t,e,0))&&void 0!==s?s:T)===O)return;const i=this._$AH,o=t===T&&i!==T||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,r=t!==T&&(i===T||o);o&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class j{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){X(this,t)}}const K=window.litHtmlPolyfillSupport;
|
|
18
|
-
/**
|
|
19
|
-
* @license
|
|
20
|
-
* Copyright 2017 Google LLC
|
|
21
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/
|
|
23
|
-
var W,J;null==K||K(U,q),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:globalThis.litHtmlVersions=[]).push("2.2.3");class Z extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,e,s)=>{var i,o;const r=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let a=r._$litPart$;if(void 0===a){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;r._$litPart$=a=new q(e.insertBefore(w(),t),t,void 0,null!=s?s:{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return O}}Z.finalized=!0,Z._$litElement$=!0,null===(W=globalThis.litElementHydrateSupport)||void 0===W||W.call(globalThis,{LitElement:Z});const G=globalThis.litElementPolyfillSupport;null==G||G({LitElement:Z}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.0");const Q=(t,e,s,i=!0,o=!0)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:i,composed:o,detail:s}))};customElements.get("kemet-icon")||customElements.define("kemet-icon",class extends Z{static get properties(){return{icon:{type:String},set:{type:String},size:{type:Number}}}static get styles(){return[r`
|
|
24
|
-
:host {
|
|
25
|
-
display: inline-flex;
|
|
26
|
-
align-items: center;
|
|
27
|
-
justify-content: center;
|
|
28
|
-
}
|
|
29
|
-
`]}constructor(){super(),this.set="bootstrap",this.icon="alarm",this.size=16}updated(){this.getIcon(),this.style.width=`${this.size}px`,this.style.height=`${this.size}px`}render(){return I``}async getIcon(){const t=new DOMParser;let e;try{if(e=await fetch(`${this.getUrl()}/${this.icon}.svg`).then((t=>t.text())),e.indexOf("</svg>")<0)throw new Error("Not a valid svg.")}catch(t){e="",console.error(t)}const s=t.parseFromString(e,"image/svg+xml").documentElement,i=this.shadowRoot.querySelector("svg");if("svg"===s.tagName)s.setAttribute("id",this.icon),s.setAttribute("width",`${this.size}px`),s.setAttribute("height",`${this.size}px`),s.setAttribute("fill","currentColor"),i&&i.remove(),this.shadowRoot.appendChild(s);else{console.error(`Could not find icon "${this.icon}" in set "${this.set}"`);const e=`\n <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="kemet-error" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" width="${this.size}" height="${this.size}">\n <style type="text/css">\n .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}\n .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EC1C24;}\n </style>\n <g>\n <path class="st0" d="M256,0c70.7,0,134.7,28.7,181,75c46.3,46.3,75,110.3,75,181c0,70.7-28.7,134.7-75,181 c-46.3,46.3-110.3,75-181,75c-70.7,0-134.7-28.7-181-75C28.7,390.7,0,326.7,0,256c0-70.7,28.7-134.7,75-181S185.3,0,256,0z"/>\n <path class="st1" d="M512,256c0-70.7-28.7-134.7-75-181C390.7,28.7,326.7,0,256,0C193,0,135.5,22.8,90.9,60.6l-0.1-0.1 C85.3,65.1,80,69.9,75,75c-5,5.1-9.9,10.3-14.5,15.8l0.1,0.1C22.8,135.5,0,193,0,256c0,70.7,28.7,134.7,75,181 c46.3,46.3,110.3,75,181,75c63,0,120.5-22.8,165.1-60.6l0.1,0.1c5.4-4.6,10.7-9.5,15.8-14.5c5-5,9.9-10.3,14.5-15.8l-0.1-0.1 C489.2,376.6,512,319,512,256z M256,42.9c58.9,0,112.1,23.9,150.7,62.4c38.6,38.6,62.4,91.9,62.4,150.7c0,51.1-18.1,98-48.1,134.8 L121.2,90.9C158,60.9,204.9,42.9,256,42.9z M256,469.1c-58.8,0-112.1-23.9-150.7-62.4C66.7,368.1,42.9,314.9,42.9,256 c0-51.1,18.1-98,48.1-134.8l299.8,299.8C354,451.1,307.1,469.1,256,469.1z"/>\n </g>\n </svg>\n `,s=t.parseFromString(e,"image/svg+xml").documentElement;i&&i.remove(),this.shadowRoot.appendChild(s)}}getUrl(){let t;switch(this.set){case"bootstrap":default:t="https://unpkg.com/bootstrap-icons@latest/icons";break;case"font-awesome-brands":t="https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/brands";break;case"font-awesome-regular":t="https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/regular";break;case"font-awesome-solid":t="https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/solid"}return t}});customElements.get("kemet-accordion-panel")||customElements.define("kemet-accordion-panel",class extends Z{static get styles(){return[r`
|
|
30
|
-
*,
|
|
31
|
-
*::before,
|
|
32
|
-
*::after {
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
:host {
|
|
37
|
-
display: block;
|
|
38
|
-
padding: 1.5rem 1rem;
|
|
39
|
-
border-bottom: 1px solid var(--kemet-color-primary);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.trigger {
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
display: grid;
|
|
45
|
-
gap: 1rem;
|
|
46
|
-
grid-template-columns: 1fr auto;
|
|
47
|
-
width: 100%;
|
|
48
|
-
text-align: left;
|
|
49
|
-
padding: 0;
|
|
50
|
-
border: none;
|
|
51
|
-
background: none;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.body {
|
|
55
|
-
overflow: hidden;
|
|
56
|
-
transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
::slotted([slot='body']) {
|
|
60
|
-
padding: 1rem 0;
|
|
61
|
-
}
|
|
62
|
-
`]}static get properties(){return{opened:{type:Boolean,reflect:!0},maxHeight:{type:String,attribute:"max-height"},slug:{type:String}}}constructor(){super(),this.opened=void 0,this.maxHeight="0px",this.slug="panel"}firstUpdated(){this.focusableSelector="body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",this.bodyElement=this.querySelector('[slot="body"]'),this.bodyElementFirst=this.bodyElement.querySelector(":first-child"),this.bodyElementLast=this.bodyElement.querySelector(":last-child"),this.bodyElementFirst&&(this.bodyElementFirst.style.marginTop=0),this.bodyELementLast&&(this.bodyElementLast.style.marginBottom=0)}updated(t){t.get("opened")||!0!==this.opened||(this.maxHeight=`${this.bodyElement.offsetHeight}px`,Q(this,"kemet-accordion-panel-opened",this)),t.get("opened")&&!1===this.opened&&(this.maxHeight="0px",Q(this,"kemet-accordion-panel-closed",this)),this.a11y(),this.focusableBodyElements()}render(){return I`
|
|
63
|
-
<button
|
|
64
|
-
class="trigger"
|
|
65
|
-
part="trigger"
|
|
66
|
-
@click=${()=>this.toggle()}
|
|
67
|
-
@keydown=${t=>this.handleKeyDown(t)}
|
|
68
|
-
>
|
|
69
|
-
<slot name="trigger"></slot>
|
|
70
|
-
<slot name="icon"></slot>
|
|
71
|
-
</button>
|
|
72
|
-
<section class="body" part="body" style="max-height:${this.maxHeight};">
|
|
73
|
-
<slot name="body"></slot>
|
|
74
|
-
</section>
|
|
75
|
-
`}toggle(){this.opened=!this.opened}focusableBodyElements(){const t=this.bodyElement.querySelectorAll(this.focusableSelector);this.opened?t.forEach((t=>{t.removeAttribute("tabindex")})):t.forEach((t=>{t.setAttribute("tabindex","-1")}))}a11y(){const t=this.shadowRoot.querySelector(".trigger"),e=this.shadowRoot.querySelector(".body");t.setAttribute("id",`${this.slug}-button`),t.setAttribute("aria-controls",`${this.slug}-content`),e.setAttribute("id",`${this.slug}-content`),e.setAttribute("aria-labelledby",`${this.slug}-button`),e.setAttribute("aria-hidden",`${!this.opened}`)}handleKeyDown(t){"Space"!==t.key&&"Enter"!==t.key||this.toggle()}});const tt=r`
|
|
76
|
-
:host {
|
|
77
|
-
--kemet-alert-padding: 1rem;
|
|
78
|
-
--kemet-alert-border-thickness: 4px;
|
|
79
|
-
--kemet-alert-status-color: inherit;
|
|
80
|
-
|
|
81
|
-
display: flex;
|
|
82
|
-
grid-template-columns: auto 1fr auto;
|
|
83
|
-
gap: var(--kemet-alert-gap, var(--kemet-alert-padding));
|
|
84
|
-
align-items: var(--kemet-alert-align-items, center);
|
|
85
|
-
opacity: 0;
|
|
86
|
-
padding: var(--kemet-alert-padding);
|
|
87
|
-
border: var(--kemet-alert-border, 1px solid var(--kemet-color-gray2));
|
|
88
|
-
transition: opacity 300ms ease;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
:host([opened]) {
|
|
92
|
-
opacity: 1;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:host([border-status="top"]) {
|
|
96
|
-
border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
:host([border-status="right"]) {
|
|
100
|
-
border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
:host([border-status="bottom"]) {
|
|
104
|
-
border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
:host([border-status="left"]) {
|
|
108
|
-
border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
:host([status="standard"]) {
|
|
112
|
-
--kemet-alert-status-color: var(--kemet-color-black);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
:host([status="primary"]) {
|
|
116
|
-
--kemet-alert-status-color: var(--kemet-color-primary);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
:host([status="success"]) {
|
|
120
|
-
--kemet-alert-status-color: var(--kemet-color-success);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
:host([status="warning"]) {
|
|
124
|
-
--kemet-alert-status-color: var(--kemet-color-warning);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
:host([status="error"]) {
|
|
128
|
-
--kemet-alert-status-color: var(--kemet-color-error);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
:host([hidden]) {
|
|
132
|
-
display: none;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
:host([reveal]) {
|
|
136
|
-
animation: fadeIn 300ms ease forwards;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
:host([overlay]) {
|
|
140
|
-
position: fixed;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
:host([overlay*="full"]) {
|
|
144
|
-
width: 100%;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
:host([overlay*="top"]) {
|
|
148
|
-
top: 0;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
:host([overlay*="bottom"]) {
|
|
152
|
-
bottom: 0;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
:host([overlay*="left"]) {
|
|
156
|
-
left: 0;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
:host([overlay*="right"]) {
|
|
160
|
-
right: 0;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.close {
|
|
164
|
-
cursor: pointer;
|
|
165
|
-
margin-left: auto;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
::slotted(kemet-icon) {
|
|
169
|
-
color: var(--kemet-alert-status-color);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
@keyframes fadeIn {
|
|
173
|
-
from { opacity: 0; }
|
|
174
|
-
to { opacity: 1; }
|
|
175
|
-
}
|
|
176
|
-
`;customElements.get("kemet-alert")||customElements.define("kemet-alert",class extends Z{static get styles(){return[tt]}static get properties(){return{opened:{type:Boolean,reflect:!0},reveal:{type:Boolean,reflect:!0},closable:{type:Boolean,reflect:!0},borderStatus:{type:String,reflect:!0,attribute:"border-status"},hidden:{type:Boolean,reflect:!0},overlay:{type:String,reflect:!0}}}shouldUpdate(t){return t.has("opened")&&!t.get("opened")&&(this.hidden=!1,this.reveal=!0),!0}firstUpdated(){this.handleMotion()}updated(t){t.get("opened")||!0!==this.opened?Q(this,"kemet-alert-closed",this):Q(this,"kemet-alert-opened",this)}render(){return I`
|
|
177
|
-
<slot name="icon"></slot>
|
|
178
|
-
<div>
|
|
179
|
-
<slot></slot>
|
|
180
|
-
</div>
|
|
181
|
-
<div class="close" part="close">
|
|
182
|
-
${this.makeCloseBtn()}
|
|
183
|
-
</div>
|
|
184
|
-
`}makeCloseBtn(){return this.closable?I`<kemet-icon icon="x-lg" @click=${()=>{this.opened=!1}}></kemet-icon>`:null}handleMotion(){this.addEventListener("transitionend",(()=>{this.opened||(this.hidden=!0)})),this.addEventListener("animationend",(()=>{this.reveal=!1}))}});customElements.get("kemet-accordion")||customElements.define("kemet-accordion",class extends Z{static get styles(){return[r`
|
|
185
|
-
:host {
|
|
186
|
-
display: block;
|
|
187
|
-
}
|
|
188
|
-
`]}static get properties(){return{currentPanel:{type:Number},togglePanels:{type:Boolean,attribute:"toggle-panels"}}}constructor(){super(),this.togglePanels=!1,this.currentPanel=void 0,this.addEventListener("kemet-accordion-panel-opened",this.handlePanelOpened.bind(this))}firstUpdated(){this.onKeyDown=t=>this.handleKeyDown(t)}render(){return I`<slot @slotchange=${t=>this.handleSlotChange(t)}></slot>`}handleSlotChange(){this.panels=this.querySelectorAll("kemet-accordion-panel"),this.panels.forEach((t=>{t.removeEventListener("keydown",this.onKeyDown),t.addEventListener("keydown",this.onKeyDown)}))}handlePanelOpened(t){this.togglePanels&&this.panels.forEach((e=>{e!==t.detail&&(e.opened=!1)}))}navigatePanels(t){switch(t){case"home":this.currentPanel=0;break;case"end":this.currentPanel=this.panels.length-1;break;case"next":this.currentPanel+=1;break;case"prev":this.currentPanel-=1;break;default:this.currentPanelFocus=0}this.currentPanel>this.panels.length-1&&(this.currentPanel=0),this.currentPanel<0&&(this.currentPanel=this.panels.length-1),this.panels[this.currentPanel].shadowRoot.querySelector("button").focus()}handleKeyDown(t){switch(t.key){case"Enter":case"Space":t.preventDefault(),t.target.click();break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),this.navigatePanels("prev");break;case"ArrowRight":case"ArrowDown":t.preventDefault(),this.navigatePanels("next");break;case"End":t.preventDefault(),this.navigatePanels("end");break;case"Home":t.preventDefault(),this.navigatePanels("home")}}expandAll(){this.panels.forEach((t=>{t.opened=!0}))}collapseAll(){this.panels.forEach((t=>{t.opened=!1}))}});customElements.get("kemet-avatar")||customElements.define("kemet-avatar",class extends Z{static get styles(){return[r`
|
|
189
|
-
*,
|
|
190
|
-
*::before,
|
|
191
|
-
*::after {
|
|
192
|
-
box-sizing: border-box;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
:host {
|
|
196
|
-
display: inline-flex;
|
|
197
|
-
color: var(--kemet-avatar-color, var(--kemet-color-white));
|
|
198
|
-
position: relative;
|
|
199
|
-
background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
:host([circle]) {
|
|
203
|
-
border-radius: 50%;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
:host([circle]) > * {
|
|
207
|
-
border-radius: 50%;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
:host([rounded]) {
|
|
211
|
-
border-radius: var(--kemet-avatar-rounded-radius, 1rem);
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
:host([rounded]) > * {
|
|
215
|
-
border-radius: var(--kemet-avatar-rounded-radius, 1rem);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.initials {
|
|
219
|
-
margin: var(--kemet-avatar-initials-margin, 1rem);
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
::slotted(kemet-badge) {
|
|
223
|
-
position: absolute;
|
|
224
|
-
bottom: 0;
|
|
225
|
-
right: 0;
|
|
226
|
-
border-radius: 50%;
|
|
227
|
-
}
|
|
228
|
-
`]}static get properties(){return{size:{type:Number},image:{type:String},label:{type:String},initials:{type:String},circle:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0}}}firstUpdated(){this.makeSize()}render(){return I`
|
|
229
|
-
${this.makeContent()}
|
|
230
|
-
<slot name="status"></slot>
|
|
231
|
-
`}makeSize(){this.size&&(this.style.width=`${this.size}px`,this.style.height=`${this.size}px`)}makeContent(){return this.image?I`<img src=${this.image} alt=${this.label} />`:this.initials?I`<div part="initials" class="initials">${this.initials}</div>`:I`<slot></slot>`}});customElements.get("kemet-avatars")||customElements.define("kemet-avatars",class extends Z{static get styles(){return[r`
|
|
232
|
-
*,
|
|
233
|
-
*::before,
|
|
234
|
-
*::after {
|
|
235
|
-
box-sizing: border-box;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
:host {
|
|
239
|
-
display: inline-flex;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
::slotted(kemet-avatar:not(:first-of-type)) {
|
|
243
|
-
margin-left: var(--kemet-avatars-squeeze, -1.5rem);
|
|
244
|
-
}
|
|
245
|
-
`]}render(){return I`<slot></slot>`}});customElements.get("kemet-badge")||customElements.define("kemet-badge",class extends Z{static get styles(){return[r`
|
|
246
|
-
:host {
|
|
247
|
-
display: inline-flex;
|
|
248
|
-
align-items: center;
|
|
249
|
-
justify-content: center;
|
|
250
|
-
padding: var(--kemet-badge-padding, 10px);
|
|
251
|
-
line-height: 1;
|
|
252
|
-
color: var(--kemet-color-white);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
:host([status='primary']) {
|
|
256
|
-
background-color: var(--kemet-color-primary);
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
:host([status='success']) {
|
|
260
|
-
background-color: var(--kemet-color-success);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
:host([status='standard']) {
|
|
264
|
-
background-color: var(--kemet-color-gray6);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
:host([status='warning']) {
|
|
268
|
-
background-color: var(--kemet-color-warning);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
:host([status='error']) {
|
|
272
|
-
background-color: var(--kemet-color-error);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
:host([circle]) {
|
|
276
|
-
border-radius: 50%;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
:host([pill]) {
|
|
280
|
-
border-radius: 99rem;
|
|
281
|
-
}
|
|
282
|
-
`]}static get properties(){return{status:{type:String,reflect:!0},circle:{type:Boolean,reflect:!0},pill:{type:Boolean,reflect:!0},circlePadding:{type:Number,attribute:"circle-padding"}}}constructor(){super(),this.status="primary",this.pill=!1,this.circle=!1,this.circlePadding=0}render(){return I`<slot @slotchange=${()=>this.handleSlotChange()}></slot>`}handleSlotChange(){this.circle&&(this.style.height=`${this.offsetWidth+this.circlePadding}px`,this.style.width=`${this.offsetWidth+this.circlePadding}px`)}});class et{host;form;options;constructor(t,e){(this.host=t).addController(this),this.options={form:t=>t.closest("form"),name:t=>t.name,value:t=>t.value,disabled:t=>t.disabled,checkValidity:t=>"function"!=typeof t.checkValidity||t.checkValidity(),...e},this.handleFormData=this.handleFormData.bind(this),this.handleFormSubmit=this.handleFormSubmit.bind(this)}hostConnected(){this.form=this.options.form(this.host),this.form&&(this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit))}hostDisconnected(){this.form&&(this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form=void 0)}handleFormData(t){const e=this.options.disabled(this.host),s=this.options.name(this.host),i=this.options.value(this.host);e||"string"!=typeof s||void 0===i||(Array.isArray(i)?i.forEach((e=>{t.formData?.append(s,e.toString())})):t.formData?.append(s,i.toString()))}handleFormSubmit(t){const e=this.options.disabled(this.host),s=this.options.checkValidity;if(this.form=this.options.form(this.host),this.form&&!this.form.noValidate&&!e&&!s(this.host)){t.preventDefault(),t.stopImmediatePropagation();this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios").forEach((t=>{t.checkValidity(),t.checkValidity()||(t.status="error",t.invalid=!0,t.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:t.validity?t.validity:{},element:t}}))),t.checkLimitValidity&&!t.checkLimitValidity()&&(t.status="error",t.invalid=!0,t.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:{passedLimit:!0},element:t}})))}))}}submit(){const t=document.createElement("button");this.form&&(t.type="submit",t.style.position="absolute",t.style.width="0",t.style.height="0",t.style.clip="rect(0 0 0 0)",t.style.clipPath="inset(50%)",t.style.overflow="hidden",t.style.whiteSpace="nowrap",this.form.append(t),t.click(),t.remove())}}customElements.get("kemet-button")||customElements.define("kemet-button",class extends Z{static get styles(){return[r`
|
|
283
|
-
:host {
|
|
284
|
-
cursor: pointer;
|
|
285
|
-
display: inline-flex;
|
|
286
|
-
align-items: center;
|
|
287
|
-
justify-content: center;
|
|
288
|
-
font-size: var(--kemet-button-font-size, inherit);
|
|
289
|
-
color: var(--kemet-button-color, var(--kemet-color-white));
|
|
290
|
-
width: var(--kemet-button-width, auto);
|
|
291
|
-
height: var(--kemet-button-height, auto);
|
|
292
|
-
border: var(--kemet-button-border, 0);
|
|
293
|
-
border-radius: var(--kemet-button-border-radius, 0);
|
|
294
|
-
transition: filter var(--kemet-button-transition-speed, 300ms) ease;
|
|
295
|
-
background-color: var(--kemet-button-background-color, var(--kemet-color-primary));
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
:host(:hover:not([disabled])) {
|
|
299
|
-
filter: brightness(var(--kemet-button-hover-brightness, 1.25));
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
:host([disabled]) {
|
|
303
|
-
opacity: var(--kemet-button-disabled-opacity, 0.5);
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.button {
|
|
307
|
-
cursor: pointer;
|
|
308
|
-
text-decoration: none;
|
|
309
|
-
display: flex;
|
|
310
|
-
gap: var(--kemet-button-gap, 0.5rem);
|
|
311
|
-
align-items: center;
|
|
312
|
-
color: inherit;
|
|
313
|
-
font-size: inherit;
|
|
314
|
-
padding: var(--kemet-button-padding, 1rem 1.25rem);
|
|
315
|
-
border: 0;
|
|
316
|
-
background: none;
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
:host([disabled]) .button {
|
|
320
|
-
cursor: not-allowed;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
:host([type='text']) {
|
|
324
|
-
--kemet-button-color: var(--kemet-color-primary);
|
|
325
|
-
--kemet-button-background-color: none;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
:host([type='text']:hover) {
|
|
329
|
-
text-decoration: var(--kemet-button-hover-decoration, underline);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
:host([type='circle']) {
|
|
333
|
-
--kemet-button-border-radius: 50%;
|
|
334
|
-
--kemet-button-width: var(--kemet-button-circle-size, 50px);
|
|
335
|
-
--kemet-button-height: var(--kemet-button-circle-size, 50px);
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
:host([type='rounded']) {
|
|
339
|
-
--kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
:host([type='pill']) {
|
|
343
|
-
--kemet-button-border-radius: 10rem;
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
:host([outlined]) {
|
|
347
|
-
--kemet-button-color: var(--kemet-color-primary);
|
|
348
|
-
--kemet-button-background-color: var(--kemet-color-white);
|
|
349
|
-
--kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-primary));
|
|
350
|
-
}
|
|
351
|
-
`]}static get properties(){return{active:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},link:{type:String},outlined:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},type:{type:String,reflect:!0}}}constructor(){super(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("mouseover",this.handleMouseOver.bind(this)),this.addEventListener("mouseout",this.handleMouseOut.bind(this)),this.addEventListener("blur",this.handleBlur.bind(this)),this.addEventListener("keyup",(t=>this.handleKeyUp(t))),this.type="standard",this.outline=!1,this.disable=!1,this.formSubmitController=new et(this)}render(){return this.link&&!this.disabled?I`
|
|
352
|
-
<a href=${this.link} class="button" role="button" part="button">
|
|
353
|
-
<slot name="left"></slot>
|
|
354
|
-
<slot></slot>
|
|
355
|
-
<slot name="right"></slot>
|
|
356
|
-
</a>
|
|
357
|
-
`:I`
|
|
358
|
-
<button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled?"true":"false"}>
|
|
359
|
-
<slot name="left"></slot>
|
|
360
|
-
<slot></slot>
|
|
361
|
-
<slot name="right"></slot>
|
|
362
|
-
</button>
|
|
363
|
-
`}handleMouseOver(){this.hover=!0}handleMouseOut(){this.hover=!1}handleClick(){this.hover=!1,this.active=!0,setTimeout((()=>{this.active=!1}),300),this.shadowRoot.querySelector("button")&&this.formSubmitController.submit(this)}handleBlur(){this.focused=!1,this.active=!1,this.hover=!1}handleKeyUp(t){"Tab"===t.key&&(this.focused=!0)}});const st=r`
|
|
364
|
-
*,
|
|
365
|
-
*::before,
|
|
366
|
-
*::after {
|
|
367
|
-
box-sizing: border-box;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
:host {
|
|
371
|
-
--kemet-card-padding: 1rem;
|
|
372
|
-
--kemet-card-border-color: var(--kemet-color-gray4);
|
|
373
|
-
|
|
374
|
-
color: var(--kemet-card-color, var(--kemet-color-black));
|
|
375
|
-
display: inline-flex;
|
|
376
|
-
flex-direction: column;
|
|
377
|
-
max-width: var(--kemet-card-max-width, 360px);
|
|
378
|
-
border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
|
|
379
|
-
border-radius: var(--kemet-card-border-radius, 0);
|
|
380
|
-
background-color: var(--kemet-card-background-color, var(--kemet-color-white));
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
:host([center]) {
|
|
384
|
-
align-items: center;
|
|
385
|
-
text-align: center;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
.body {
|
|
389
|
-
padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
.media {
|
|
393
|
-
position: relative;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
::slotted(*) {
|
|
397
|
-
max-width: 100%;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
::slotted(img) {
|
|
401
|
-
display: flex;
|
|
402
|
-
max-width: 100%;
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
::slotted([slot="header"]) {
|
|
406
|
-
padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
|
|
407
|
-
border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
::slotted([slot="caption"]) {
|
|
411
|
-
color: var(--kemet-card-caption-color, var(--kemet-color-white));
|
|
412
|
-
position: absolute;
|
|
413
|
-
bottom: 0;
|
|
414
|
-
width: 100%;
|
|
415
|
-
padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
|
|
416
|
-
background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
::slotted([slot="footer"]) {
|
|
420
|
-
padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
|
|
421
|
-
border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
|
|
422
|
-
}
|
|
423
|
-
`;customElements.get("kemet-card")||customElements.define("kemet-card",class extends Z{static get styles(){return[st]}static get properties(){return{center:{type:Boolean,reflect:!0}}}render(){return I`
|
|
424
|
-
<slot name="header"></slot>
|
|
425
|
-
<div class="media" part="media">
|
|
426
|
-
<slot name="media"></slot>
|
|
427
|
-
<slot name="caption"></slot>
|
|
428
|
-
</div>
|
|
429
|
-
<div class="body" part="body">
|
|
430
|
-
<slot></slot>
|
|
431
|
-
</div>
|
|
432
|
-
</div>
|
|
433
|
-
<slot name="footer"></slot>
|
|
434
|
-
`}});
|
|
435
|
-
/**
|
|
436
|
-
* @license
|
|
437
|
-
* Copyright 2018 Google LLC
|
|
438
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
439
|
-
*/
|
|
440
|
-
const it=t=>null!=t?t:T
|
|
441
|
-
/**
|
|
442
|
-
* @license
|
|
443
|
-
* Copyright 2017 Google LLC
|
|
444
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
445
|
-
*/,ot=1,rt=2,at=3,nt=4,lt=t=>(...e)=>({_$litDirective$:t,values:e});class dt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
446
|
-
/**
|
|
447
|
-
* @license
|
|
448
|
-
* Copyright 2020 Google LLC
|
|
449
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
450
|
-
*/const ht={},ct=lt(class extends dt{constructor(t){if(super(t),t.type!==at&&t.type!==ot&&t.type!==nt)throw Error("The `live` directive is not allowed on child or event bindings");if(!(t=>void 0===t.strings)(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===O||e===T)return e;const s=t.element,i=t.name;if(t.type===at){if(e===s[i])return O}else if(t.type===nt){if(!!e===s.hasAttribute(i))return O}else if(t.type===ot&&s.getAttribute(i)===e+"")return O;return((t,e=ht)=>{t._$AH=e;
|
|
451
|
-
/**
|
|
452
|
-
* @license
|
|
453
|
-
* Copyright 2020 Google LLC
|
|
454
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
455
|
-
*/})(t),e}});customElements.get("kemet-checkbox")||customElements.define("kemet-checkbox",class extends Z{static get styles(){return[r`
|
|
456
|
-
*,
|
|
457
|
-
*::before,
|
|
458
|
-
*::after {
|
|
459
|
-
box-sizing: border-box;
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
:host {
|
|
463
|
-
display: inline-block;
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
:host([disabled]) {
|
|
467
|
-
opacity: 0.5;
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
label {
|
|
471
|
-
display: inline-flex;
|
|
472
|
-
gap: 0.5rem;
|
|
473
|
-
align-items: center;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
input {
|
|
477
|
-
cursor: pointer;
|
|
478
|
-
margin: 0;
|
|
479
|
-
padding: 0;
|
|
480
|
-
width: var(--kemet-checkbox-size, 18px);
|
|
481
|
-
height: var(--kemet-checkbox-size, 18px);
|
|
482
|
-
position: absolute;
|
|
483
|
-
opacity: 0;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
button {
|
|
487
|
-
margin: 0;
|
|
488
|
-
border: none;
|
|
489
|
-
background: none;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
[part='checkbox'] {
|
|
493
|
-
color: var(--kemet-checkbox-color, var(--kemet-color-primary));
|
|
494
|
-
display: flex;
|
|
495
|
-
align-items: center;
|
|
496
|
-
justify-content: center;
|
|
497
|
-
width: var(--kemet-checkbox-size, 18px);
|
|
498
|
-
height: var(--kemet-checkbox-size, 18px);
|
|
499
|
-
border: var(--kemet-checkbox-border, 1px solid var(--kemet-color-primary));
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
:host([rounded]) [part='checkbox'] {
|
|
503
|
-
border-radius: var(--kemet-checkbox-border-radius, 4px);
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
:host([filled][checked]) [part='checkbox'],
|
|
507
|
-
:host([filled][indeterminate]) [part='checkbox'] {
|
|
508
|
-
border: none;
|
|
509
|
-
background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
[part='mark'] {
|
|
513
|
-
display: flex;
|
|
514
|
-
width: calc(var(--kemet-checkbox-size, 18px) - 4px);
|
|
515
|
-
height: calc(var(--kemet-checkbox-size, 18px) - 4px);
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
:host([filled][checked]) [part='mark'],
|
|
519
|
-
:host([filled][indeterminate]) [part='mark'] {
|
|
520
|
-
color: var(--kemet-checkbox-filled-color, var(--kemet-color-white));
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
[part='message'] {
|
|
524
|
-
display: block;
|
|
525
|
-
margin-top: 0.5rem;
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
:host([status='error']) [part='message'] {
|
|
529
|
-
color: var(--kemet-color-error);
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
:host([status='warning']) [part='message'] {
|
|
533
|
-
color: var(--kemet-color-error);
|
|
534
|
-
}
|
|
535
|
-
`]}static get properties(){return{label:{type:String},checked:{type:Boolean,reflect:!0},indeterminate:{type:Boolean,reflect:!0},name:{type:String},value:{type:String},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0},filled:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},message:{type:String}}}constructor(){super(),this.label="",this.name="checkbox",this.disabled=!1,this.required=!1,this.rounded=!1,this.filled=!1,this.status="standard",this.formSubmitController=new et(this)}firstUpdated(){this.input=this.shadowRoot.querySelector("input")}render(){return I`
|
|
536
|
-
<label part="label">
|
|
537
|
-
<input
|
|
538
|
-
type="checkbox"
|
|
539
|
-
name=${it(this.name)}
|
|
540
|
-
.value=${this.value}
|
|
541
|
-
.indeterminate=${ct(this.indeterminate)}
|
|
542
|
-
.checked=${ct(this.checked)}
|
|
543
|
-
.disabled=${this.disabled}
|
|
544
|
-
.required=${this.required}
|
|
545
|
-
aria-checked=${this.checked?"true":"false"}
|
|
546
|
-
@click=${()=>this.handleClick()}
|
|
547
|
-
@blur=${()=>this.handleBlur()}
|
|
548
|
-
@focus=${()=>this.handleFocus()}
|
|
549
|
-
@change=${()=>this.handleChange()}
|
|
550
|
-
/>
|
|
551
|
-
<button part="checkbox" aria-label=${this.label}>
|
|
552
|
-
${this.makeCheckMark()}
|
|
553
|
-
</button>
|
|
554
|
-
<span part="text">${this.label}</span>
|
|
555
|
-
</label>
|
|
556
|
-
${this.makeMessage()}
|
|
557
|
-
`}click(){this.input.click()}handleClick(){this.checked=!this.checked,this.indeterminate=!1,Q(this,"kemet-checkbox-change",this)}handleBlur(){this.focused=!1,Q(this,"kemet-checkbox-focused",!1)}handleFocus(){this.focused=!0,Q(this,"kemet-checkbox-focused",!0)}handleChange(){this.value=this.checked,this.input.checkValidity()&&(this.status="standard")}makeMessage(){return"error"===this.status||"warning"===this.status?I`<span part="message">${this.message}</span>`:null}makeCheckMark(){return this.checked?I`
|
|
558
|
-
<span part="mark">
|
|
559
|
-
<svg viewBox="0 0 16 16">
|
|
560
|
-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|
561
|
-
<g stroke="currentColor" stroke-width="2">
|
|
562
|
-
<g transform="translate(3.428571, 3.428571)">
|
|
563
|
-
<path d="M0,5.71428571 L3.42857143,9.14285714"></path>
|
|
564
|
-
<path d="M9.14285714,0 L3.42857143,9.14285714"></path>
|
|
565
|
-
</g>
|
|
566
|
-
</g>
|
|
567
|
-
</g>
|
|
568
|
-
</svg>
|
|
569
|
-
</span>
|
|
570
|
-
`:!this.checked&&this.indeterminate?I`
|
|
571
|
-
<span part="mark">
|
|
572
|
-
<svg viewBox="0 0 16 16">
|
|
573
|
-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|
574
|
-
<g stroke="currentColor" stroke-width="2">
|
|
575
|
-
<g transform="translate(2.285714, 6.857143)">
|
|
576
|
-
<path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
|
|
577
|
-
</g>
|
|
578
|
-
</g>
|
|
579
|
-
</g>
|
|
580
|
-
</svg>
|
|
581
|
-
</span>
|
|
582
|
-
`:null}checkValidity(){return this.input.checkValidity()}});class pt extends Z{static get styles(){return[r`
|
|
583
|
-
:host {
|
|
584
|
-
display: inline-block;
|
|
585
|
-
}
|
|
586
|
-
`]}static get properties(){return{current:{type:Number}}}firstUpdated(){this.carousel=this.closest("kemet-carousel")}updated(){this.current=this.carousel.index+1}render(){return I`${this.current}`}}customElements.get("kemet-carousel-current")||customElements.define("kemet-carousel-current",pt);class ut extends Z{static get styles(){return[r`
|
|
587
|
-
:host {
|
|
588
|
-
cursor: pointer;
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
:host([disabled]) {
|
|
592
|
-
cursor: not-allowed;
|
|
593
|
-
}
|
|
594
|
-
`]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
|
|
595
|
-
<span tabindex="0" @keyup=${()=>this.first()} @click=${()=>this.first()}>
|
|
596
|
-
<slot></slot>
|
|
597
|
-
</span>
|
|
598
|
-
`}first(){this.disabled||Q(this,"kemet-carousel-first",this)}}customElements.get("kemet-carousel-first")||customElements.define("kemet-carousel-first",ut);class mt extends Z{static get styles(){return[r`
|
|
599
|
-
:host {
|
|
600
|
-
cursor: pointer;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
:host([disabled]) {
|
|
604
|
-
cursor: not-allowed;
|
|
605
|
-
}
|
|
606
|
-
`]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
|
|
607
|
-
<span tabindex="0" @keyup=${()=>this.last()} @click=${()=>this.last()}>
|
|
608
|
-
<slot></slot>
|
|
609
|
-
</span>
|
|
610
|
-
`}last(){this.disabled||Q(this,"kemet-carousel-last",this)}}customElements.get("kemet-carousel-last")||customElements.define("kemet-carousel-last",mt);customElements.get("kemet-carousel-next")||customElements.define("kemet-carousel-next",class extends Z{static get styles(){return[r`
|
|
611
|
-
:host {
|
|
612
|
-
cursor: pointer;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
:host([disabled]) {
|
|
616
|
-
cursor: not-allowed;
|
|
617
|
-
}
|
|
618
|
-
`]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
|
|
619
|
-
<span tabindex="0" @keyup=${()=>this.next()} @click=${()=>this.next()}>
|
|
620
|
-
<slot></slot>
|
|
621
|
-
</span>
|
|
622
|
-
`}next(){this.disabled||Q(this,"kemet-carousel-next",this)}});customElements.get("kemet-carousel-slide")||customElements.define("kemet-carousel-slide",class extends Z{static get styles(){return[r`
|
|
623
|
-
:host,
|
|
624
|
-
:host *,
|
|
625
|
-
:host *::before,
|
|
626
|
-
*::after {
|
|
627
|
-
box-sizing: border-box;
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
:host {
|
|
631
|
-
flex: 0 0 auto;
|
|
632
|
-
}
|
|
633
|
-
`]}static get properties(){return{selected:{type:Boolean,reflect:!0},"aria-hidden":{type:String,reflect:!0}}}constructor(){super(),this.selected=!1,this["aria-hidden"]="true"}render(){return I`
|
|
634
|
-
<slot></slot>
|
|
635
|
-
`}});class ft extends Z{static get styles(){return[r`
|
|
636
|
-
:host {
|
|
637
|
-
display: inline-block;
|
|
638
|
-
}
|
|
639
|
-
`]}static get properties(){return{total:{type:Number}}}firstUpdated(){this.carousel=this.closest("kemet-carousel")}updated(){this.total=this.carousel.total}render(){return I`${this.total}`}}customElements.get("kemet-carousel-total")||customElements.define("kemet-carousel-total",ft);class gt extends Z{static get styles(){return[r`
|
|
640
|
-
:host {
|
|
641
|
-
cursor: pointer;
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
:host([disabled]) {
|
|
645
|
-
cursor: not-allowed;
|
|
646
|
-
}
|
|
647
|
-
`]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
|
|
648
|
-
<span tabindex="0" @keyup=${()=>this.prev()} @click=${()=>this.prev()}>
|
|
649
|
-
<slot></slot>
|
|
650
|
-
</span>
|
|
651
|
-
`}prev(){this.disabled||Q(this,"kemet-carousel-prev",this)}}customElements.get("kemet-carousel-prev")||customElements.define("kemet-carousel-prev",gt);customElements.get("kemet-carousel-link")||customElements.define("kemet-carousel-link",class extends Z{static get properties(){return{slide:{type:Number,reflect:!0},selected:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}}}static get styles(){return[r`
|
|
652
|
-
:host([selected]) {
|
|
653
|
-
color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
:host(:not([selected])) {
|
|
657
|
-
cursor: pointer;
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
:host([disabled]) {
|
|
661
|
-
cursor: not-allowed;
|
|
662
|
-
}
|
|
663
|
-
`]}render(){return I`
|
|
664
|
-
<span tabindex="0" @keyup=${()=>this.changed()} @click=${()=>this.changed()}>
|
|
665
|
-
<slot></slot>
|
|
666
|
-
</span>
|
|
667
|
-
`}changed(){this.disabled||Q(this,"kemet-carousel-link",this)}});const vt=r`
|
|
668
|
-
:host,
|
|
669
|
-
*,
|
|
670
|
-
*::before,
|
|
671
|
-
*::after {
|
|
672
|
-
box-sizing: border-box;
|
|
673
|
-
}
|
|
674
|
-
|
|
675
|
-
:host {
|
|
676
|
-
position: relative;
|
|
677
|
-
display: grid;
|
|
678
|
-
grid-template-columns: minmax(0, 1fr);
|
|
679
|
-
align-items: center;
|
|
680
|
-
width: var(--kemet-carousel-width, 100%);
|
|
681
|
-
height: var(--kemet-carousel-height, auto);
|
|
682
|
-
overflow: visible;
|
|
683
|
-
}
|
|
684
|
-
|
|
685
|
-
:host([arrows]) {
|
|
686
|
-
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
.toolbar {
|
|
690
|
-
display: flex;
|
|
691
|
-
gap: var(--kemet-carousel-toolbar-gap, 1rem);
|
|
692
|
-
align-items: center;
|
|
693
|
-
justify-content: var(--kemet-carousel-toolbar-justify-content, center);
|
|
694
|
-
line-height: 1;
|
|
695
|
-
padding: var(--kemet-carousel-toolbar-padding, 1rem);
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
:host([inner]) .toolbar {
|
|
699
|
-
width: var(--kemet-carousel-toolbar-inner-width, 100%);
|
|
700
|
-
position: absolute;
|
|
701
|
-
bottom: var(--kemet-carousel-toolbar-inner-bottom, 0);
|
|
702
|
-
top: var(--kemet-carousel-toolbar-inner-top, auto);
|
|
703
|
-
color: var(--kemet-carousel-toolbar-inner-color, var(--kemet-color-white));
|
|
704
|
-
background-color: var(--kemet-carousel-toolbar-inner-background-color, rgba(0, 0, 0, 0.4));
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
.slides {
|
|
708
|
-
overflow: hidden;
|
|
709
|
-
position: relative;
|
|
710
|
-
padding: 1rem 0;
|
|
711
|
-
border: var(--kemet-carousel-slides-border, 1px solid var(--kemet-color-gray1));
|
|
712
|
-
}
|
|
713
|
-
|
|
714
|
-
.slider {
|
|
715
|
-
display: flex;
|
|
716
|
-
flex-wrap: nowrap;
|
|
717
|
-
transition: transform var(--kemet-carousel-transition-speed, 300ms) ease;
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
::slotted([slot='next']),
|
|
721
|
-
::slotted([slot='prev']) {
|
|
722
|
-
opacity: var(--kemet-carousel-arrows-opacity, 0.25);
|
|
723
|
-
transition: opacity var(--kemet-carousel-arrows-transition-speed, 300ms) ease-in-out;
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
:host(:hover) ::slotted([slot='next']),
|
|
727
|
-
:host(:hover) ::slotted([slot='prev']) {
|
|
728
|
-
opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
|
|
729
|
-
}
|
|
730
|
-
`;customElements.get("kemet-carousel")||customElements.define("kemet-carousel",class extends Z{static get styles(){return[vt]}static get properties(){return{index:{type:Number,reflect:!0},total:{type:Number},sliderWidth:{type:String},sliderTranslateX:{type:String},inner:{type:Boolean,reflect:!0},arrows:{type:Boolean,reflect:!0},options:{type:Object},breakpoints:{type:Object}}}constructor(){super(),this.index=0,this.total=0,this.sliderWidth="auto",this.sliderTranslateX="0",this.inner=!1,this.arrows=!1,this.options={perView:1,perMove:1,gap:12,slideshow:0,rewind:!0,center:!1},this.breakpoints={768:{perView:2,gap:24,rewind:!1},1280:{perView:2.5,center:!0}},this.addEventListener("kemet-carousel-first",this.handleFirst.bind(this)),this.addEventListener("kemet-carousel-last",this.handleLast.bind(this)),this.addEventListener("kemet-carousel-next",this.handleNext.bind(this)),this.addEventListener("kemet-carousel-prev",this.handlePrev.bind(this)),this.addEventListener("kemet-carousel-link",this.handleLink.bind(this))}firstUpdated(){this.slides=[],this.links=[],this.containerElement=this.shadowRoot.querySelector('[part="container"]'),this.slidesElement=this.shadowRoot.querySelector('[part="slides"]'),this.sliderElement=this.shadowRoot.querySelector('[part="slider"]'),this.toolbarElement=this.shadowRoot.querySelector('[part="toolbar"]'),this.toolbarSlotElement=this.querySelector('[slot="toolbar"]'),this.informationElement=this.querySelector("kemet-carousel-information"),window.addEventListener("resize",(()=>{this.setSlideSize(),this.setToolbarSize(),this.updateIndex(this.index)})),this.sliderElement.addEventListener("transitionend",this.handleTransitionEnd.bind(this)),this.swipeMove=t=>{t.preventDefault();const e=t.touches?t.touches[0].pageX:t.pageX,s=this.slides[this.index];this.sliderTranslateX=e-this.startX-s.offsetLeft+"px"},this.handleSlideShow=()=>{this.getOption("slideshow")>0&&(this.updateIndex(this.index+1),clearTimeout(this.handleSlideShow))},this.setSlideSize(),this.goToSlide(this.index)}updated(t){this.setSlideSize(),this.setToolbarSize(),t.has("index")&&(this.updateIndex(this.index),setTimeout(this.handleSlideShow,1e3*this.getOption("slideshow")))}render(){return I`
|
|
731
|
-
<slot name="prev" @slotchange=${this.handleArrows}></slot>
|
|
732
|
-
<div class="container" part="container">
|
|
733
|
-
<section
|
|
734
|
-
class="slides"
|
|
735
|
-
part="slides"
|
|
736
|
-
@mousedown=${this.swipeStart}
|
|
737
|
-
@mouseup=${this.swipeEnd}
|
|
738
|
-
@touchstart=${this.swipeStart}
|
|
739
|
-
@touchend=${this.swipeEnd}
|
|
740
|
-
@mouseleave=${this.swipeLeave}
|
|
741
|
-
>
|
|
742
|
-
<div class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
|
|
743
|
-
<slot name="slides" @slotchange="${this.handleSlotChange}"></slot>
|
|
744
|
-
</div>
|
|
745
|
-
</section>
|
|
746
|
-
${this.makeToolbar()}
|
|
747
|
-
</div>
|
|
748
|
-
<slot name="next" @slotchange=${this.handleArrows}></slot>
|
|
749
|
-
`}swipeStart(t){this.startX=t.touches?t.touches[0].pageX:t.pageX,this.addEventListener("mousemove",this.swipeMove),this.addEventListener("touchmove",this.swipeMove)}swipeEnd(t){this.updateIndex(this.swipeUpdate(t)),this.removeEventListener("mousemove",this.swipeMove,!1),this.removeEventListener("touchmove",this.swipeMove,!1)}swipeUpdate(t){const e=t.changedTouches?t.changedTouches[0].pageX:t.pageX,s=this.startX>e?"right":"left",i=this.slidesElement.offsetWidth/3,o=this.startX-e,r=Math.abs(o)>i;let{index:a}=this;return r&&"right"===s&&(a=this.index>=this.slides.length-1?this.index:this.index+1),r&&"left"===s&&(a=this.index<1?0:this.index-1),a}swipeLeave(){this.updateIndex(this.index),this.removeEventListener("mousemove",this.swipeMove,!1),this.removeEventListener("touchmove",this.swipeMove,!1)}setSlideSize(){this.slideWidth=this.containerElement.offsetWidth/this.getOption("perView"),this.slides.forEach((t=>{t.style.marginLeft=this.getOption("gap")/2+"px",t.style.marginRight=this.getOption("gap")/2+"px",t.style.width=this.slideWidth-this.getOption("gap")+"px"})),this.sliderWidth=this.slideWidth*this.slides.length+"px"}setToolbarSize(){if(this.inner&&this.toolbarElement){const t=this.slidesElement.offsetWidth;this.toolbarElement.style.width=`${t}px`}}makeToolbar(){return this.toolbarSlotElement?I`
|
|
750
|
-
<section class="toolbar" part="toolbar">
|
|
751
|
-
<slot name="toolbar"></slot>
|
|
752
|
-
</section>
|
|
753
|
-
`:null}handleSlotChange(){const t=this.querySelectorAll("kemet-carousel-slide"),e=this.querySelectorAll("kemet-carousel-link");t.forEach((t=>{this.slides.push(t)})),this.updateInformation(),this.total=t.length,t[this.index].selected=!0,e.forEach((t=>{this.links.push(t)}))}handleArrows(){this.arrows=!0}handleFirst(){this.updateIndex(0)}handleLast(){this.updateIndex(this.slides.length-1)}handleNext(){let t=this.index+this.getOption("perMove");t>=this.slides.length&&(t=this.getOption("rewind")?0:this.index),this.updateIndex(t)}handlePrev(){let t=this.index-this.getOption("perMove");t<0&&(t=this.getOption("rewind")?this.slides.length-1:this.index),this.updateIndex(t)}updateIndex(t){let e=this.slides[this.index],s=this.links[t];this.links.forEach((t=>{t.selected=!1})),s||([s]=this.links),s&&(s.selected=!0),e&&(e.setAttribute("aria-hidden","true"),t>-1&&t<this.slides.length?this.index=t:(console.warn("An invalid index number was entered. The kemet-carousel has been reset to the first slide."),this.index=0),this.goToSlide(this.index),e=this.slides[this.index],e.setAttribute("aria-hidden","false"),this.slides.forEach((t=>{t.selected=!1})),e.selected=!0,Q(this,"kemet-carousel-change-start",this),this.updateInformation())}updateInformation(){this.informationSlot=this.slides[this.index].querySelector('[slot="information"]'),this.informationElement&&(this.informationSlot?this.informationElement.innerHTML=this.informationSlot.outerHTML:this.informationElement.innerHTML="")}goToSlide(t){if(!0===this.getOption("center")){const e=this.slidesElement.offsetWidth/2,s=this.slideWidth*t;this.sliderTranslateX=s-(s-e)-this.slideWidth/2-s+"px"}else this.sliderTranslateX=this.slideWidth*t*-1+"px"}handleTransitionEnd(){const t=this.querySelector("kemet-carousel-current");t&&(t.current=this.index+1),Q(this,"kemet-carousel-change-finished",this)}handleLink(t){this.updateIndex(t.detail.slide)}getOption(t){const e=Object.keys(this.breakpoints);let s=this.options[t];return e.forEach((e=>(window.matchMedia(`(min-width: ${e}px)`).matches&&void 0!==this.breakpoints[e][t]&&(s=this.breakpoints[e][t]),s))),s}});customElements.get("kemet-combo")||customElements.define("kemet-combo",class extends Z{static get styles(){return[r`
|
|
754
|
-
:host {
|
|
755
|
-
opacity: 0;
|
|
756
|
-
width: var(--kemet-combo-width, calc(100% - 2px));
|
|
757
|
-
margin: var(--kemet-combo-margin, 1rem auto);
|
|
758
|
-
pointer-events: none;
|
|
759
|
-
display: block;
|
|
760
|
-
position: relative;
|
|
761
|
-
transition: opacity 0.3s ease-in-out;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
:host([show]) {
|
|
765
|
-
opacity: 1;
|
|
766
|
-
pointer-events: auto;
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
ul {
|
|
770
|
-
width: 100%;
|
|
771
|
-
max-height: var(--kemet-combo-max-height, calc(5 * 3rem));
|
|
772
|
-
position: absolute;
|
|
773
|
-
z-index: 1;
|
|
774
|
-
list-style: none;
|
|
775
|
-
margin: 0;
|
|
776
|
-
padding: 0;
|
|
777
|
-
overflow-y: scroll;
|
|
778
|
-
border: var(--kemet-combo-border, 1px solid var(--kemet-color-primary));
|
|
779
|
-
border-radius: var(--kemet-combo-border-radius, var(--kemet-border-radius));
|
|
780
|
-
background-color: var(--kemet-combo-background-color, var(--kemet-color-white));
|
|
781
|
-
box-shadow: var(--kemet-combo-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
|
|
782
|
-
}
|
|
783
|
-
li {
|
|
784
|
-
line-height: 3rem;
|
|
785
|
-
padding: 0 1.5rem;
|
|
786
|
-
cursor: pointer;
|
|
787
|
-
}
|
|
788
|
-
li:hover,
|
|
789
|
-
li:focus {
|
|
790
|
-
color: var(--kemet-combo-hover-color, var(--kemet-color-white));
|
|
791
|
-
outline: none;
|
|
792
|
-
background-color: var(--kemet-combo-hover-background-color, var(--kemet-color-primary));
|
|
793
|
-
}
|
|
794
|
-
`]}static get properties(){return{slug:{type:String},options:{type:Array},filteredOptions:{type:Array},show:{type:Boolean,reflect:!0}}}constructor(){super(),this.options=[]}firstUpdated(){this.field=this.closest("kemet-field"),this.input=this.field.querySelector('[slot="input"]'),this.slug=this.field.slug||"slug",this.input.addEventListener("kemet-input-input",this.handleInput.bind(this)),this.input.addEventListener("keydown",(t=>this.handleInputKeyDown(t)))}render(){return I`
|
|
795
|
-
<div
|
|
796
|
-
role="combobox"
|
|
797
|
-
part="combobox"
|
|
798
|
-
aria-expanded=${this.show}
|
|
799
|
-
aria-controls="${this.slug}-listbox"
|
|
800
|
-
aria-haspopup="listbox"
|
|
801
|
-
id="${this.slug}-combobox"
|
|
802
|
-
aria-label="${this.field?.label}"
|
|
803
|
-
>
|
|
804
|
-
<ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox" part="listbox">
|
|
805
|
-
${this.makeOptions()}
|
|
806
|
-
</ul>
|
|
807
|
-
</div>
|
|
808
|
-
`}makeOptions(){if(this.input){this.filteredOptions=this.options.filter((t=>-1!==t.toLowerCase().indexOf(this.input.value?.toLowerCase())));return this.filteredOptions.map(((t,e)=>I`<li
|
|
809
|
-
id="${this.slug}-option-${e}"
|
|
810
|
-
role="option"
|
|
811
|
-
tabindex="0"
|
|
812
|
-
aria-selected="false"
|
|
813
|
-
@click=${t=>this.handleSelection(t)}
|
|
814
|
-
@keydown=${t=>this.handleOptionKeyDown(t)}
|
|
815
|
-
>
|
|
816
|
-
${t}
|
|
817
|
-
</li>`))}return null}handleInput(t){this.makeOptions(),t.detail.length>0?this.show=!0:this.show=!1}handleSelection(t){this.input.value=t.target.innerText,this.show=!1,Q(this,"kemet-combo-section",{element:t.target,text:t.target.innerText,id:t.target.getAttribute("id")})}handleOptionKeyDown(t){if(t.preventDefault(),"ArrowDown"===t.code){const e=t.target.nextElementSibling;e?e.focus():this.shadowRoot.querySelector("li").focus()}if("ArrowUp"===t.code){const e=t.target.previousElementSibling;e?e.focus():this.shadowRoot.querySelector("li:last-child").focus()}"Escape"!==t.code&&"Tab"!==t.code||(this.show=!1,this.input.focus()),"Enter"!==t.code&&"Space"!==t.code||this.handleSelection(t)}handleInputKeyDown(t){"ArrowDown"===t.code&&this.shadowRoot.querySelector("li").focus(),"Escape"===t.code&&(this.show=!1)}});customElements.get("kemet-count")||customElements.define("kemet-count",class extends Z{static get styles(){return[r`
|
|
818
|
-
:host {
|
|
819
|
-
display: block;
|
|
820
|
-
font-size: var(--kemet-count-font-size, 90%);
|
|
821
|
-
margin-top: 0.8rem;
|
|
822
|
-
}
|
|
823
|
-
`]}static get properties(){return{message:{type:String},remaining:{type:Number},limit:{type:Number},validateImmediately:{type:Boolean,attribute:"validate-immediately"}}}firstUpdated(){this.field=this.closest("kemet-field"),this.inputSlot=this.field.querySelector('[slot="input"]'),this.remaining=this.limit-this.field.length,this.field.addEventListener("kemet-field-input",(t=>{this.remaining=this.limit-t.detail;const e=this.input||this.textarea;e&&(this.remaining<0?(e.validity.passedLimit=!0,this.validateImmediately&&(this.inputSlot.status="error",this.inputSlot.invalid=!0,Q(this,"kemet-count-status",{status:"error",validity:e.validity,element:this.inputSlot}))):(this.inputSlot.status="standard",e.checkValidity(),Q(this,"kemet-count-status",{status:"standard",validity:e.validity,element:this.inputSlot})))})),this.input=this.inputSlot.shadowRoot.querySelector("input"),this.textarea=this.inputSlot.shadowRoot.querySelector("textarea")}render(){return I`${this.remaining} ${this.message}`}});customElements.get("kemet-draggable")||customElements.define("kemet-draggable",class extends Z{static get styles(){return r`
|
|
824
|
-
:host {
|
|
825
|
-
display: inline-block;
|
|
826
|
-
}
|
|
827
|
-
|
|
828
|
-
#draggable {
|
|
829
|
-
position: absolute;
|
|
830
|
-
}
|
|
831
|
-
`}static get properties(){return{memory:{type:String},top:{type:String},left:{type:String},measure:{type:Boolean}}}constructor(){super(),this.top="auto",this.left="auto",this.measure=!1}firstUpdated(){this.position1=0,this.position2=0,this.position3=0,this.position4=0,this.mouseMove=t=>this.drag(t),this.mouseUp=()=>this.stopDrag(),this.draggableElement=this.shadowRoot.getElementById("draggable");const t=JSON.parse(localStorage.getItem(this.memory));t&&(this.top=t.top,this.left=t.left),this.measure&&this.measureContent()}render(){return I`
|
|
832
|
-
<div id="draggable" @mousedown=${t=>this.startDrag(t)} style="top:${this.top}; left:${this.left}">
|
|
833
|
-
<slot></slot>
|
|
834
|
-
</div>
|
|
835
|
-
`}startDrag(t){t&&(t.preventDefault(),this.position3=t.clientX,this.position4=t.clientY),document.addEventListener("mouseup",this.mouseUp),document.addEventListener("mousemove",this.mouseMove),Q(this,"kemet-draggable-start",this)}drag(t){t.preventDefault(),this.position1=this.position3-t.clientX,this.position2=this.position4-t.clientY,this.position3=t.clientX,this.position4=t.clientY,this.top=this.draggableElement.offsetTop-this.position2+"px",this.left=this.draggableElement.offsetLeft-this.position1+"px"}stopDrag(){if(document.removeEventListener("mouseup",this.mouseUp),document.removeEventListener("mousemove",this.mouseMove),this.memory){const t={top:this.top,left:this.left};localStorage.setItem(this.memory,JSON.stringify(t))}Q(this,"kemet-draggable-stop",this)}measureContent(){this.style.width=`${this.draggableElement.offsetWidth}px`,this.style.height=`${this.draggableElement.offsetHeight}px`}});const bt=`${document.documentElement.scrollHeight}px`,kt=r`
|
|
836
|
-
*,
|
|
837
|
-
*::before,
|
|
838
|
-
*::after {
|
|
839
|
-
box-sizing: border-box;
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
:host {
|
|
843
|
-
width: 100%;
|
|
844
|
-
}
|
|
845
|
-
|
|
846
|
-
.off-canvas {
|
|
847
|
-
position: relative;
|
|
848
|
-
overflow: hidden;
|
|
849
|
-
}
|
|
850
|
-
|
|
851
|
-
.off-canvas__nav {
|
|
852
|
-
position: fixed;
|
|
853
|
-
top: 0;
|
|
854
|
-
left: 0;
|
|
855
|
-
z-index: 100;
|
|
856
|
-
visibility: hidden;
|
|
857
|
-
height: 100%;
|
|
858
|
-
transition: all 0.5s;
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
.off-canvas__nav::after {
|
|
862
|
-
position: absolute;
|
|
863
|
-
top: 0;
|
|
864
|
-
right: 0;
|
|
865
|
-
width: 100%;
|
|
866
|
-
height: 100%;
|
|
867
|
-
background: rgba(0, 0, 0, 0.2);
|
|
868
|
-
content: '';
|
|
869
|
-
opacity: 1;
|
|
870
|
-
transition: opacity 0.5s;
|
|
871
|
-
}
|
|
872
|
-
|
|
873
|
-
:host([opened]) .off-canvas__nav::after {
|
|
874
|
-
width: 0;
|
|
875
|
-
height: 0;
|
|
876
|
-
opacity: 0;
|
|
877
|
-
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
|
|
878
|
-
}
|
|
879
|
-
|
|
880
|
-
.off-canvas__pusher {
|
|
881
|
-
position: relative;
|
|
882
|
-
left: 0;
|
|
883
|
-
z-index: 99;
|
|
884
|
-
height: 100%;
|
|
885
|
-
transition: transform 0.5s;
|
|
886
|
-
}
|
|
887
|
-
|
|
888
|
-
:host([overlay]) .off-canvas__pusher::after {
|
|
889
|
-
position: absolute;
|
|
890
|
-
top: 0;
|
|
891
|
-
right: 0;
|
|
892
|
-
width: 0;
|
|
893
|
-
height: 0;
|
|
894
|
-
background: var(--kemet-drawer-overlay-color, rgba(0, 0, 0, 0.2));
|
|
895
|
-
content: '';
|
|
896
|
-
opacity: 0;
|
|
897
|
-
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
:host([opened]) .off-canvas__pusher::after {
|
|
901
|
-
width: 100%;
|
|
902
|
-
height: 100%;
|
|
903
|
-
opacity: 1;
|
|
904
|
-
transition: opacity 0.5s;
|
|
905
|
-
transform: scale(2);
|
|
906
|
-
}
|
|
907
|
-
|
|
908
|
-
.off-canvas__content {
|
|
909
|
-
position: relative;
|
|
910
|
-
/* overflow-y: scroll; */
|
|
911
|
-
min-height: 100vh;
|
|
912
|
-
}
|
|
913
|
-
|
|
914
|
-
.off-canvas__wrapper {
|
|
915
|
-
position: relative;
|
|
916
|
-
}
|
|
917
|
-
|
|
918
|
-
::slotted([slot="content"]) {
|
|
919
|
-
min-height: 100vh;
|
|
920
|
-
}
|
|
921
|
-
|
|
922
|
-
/* -------------------------------------- */
|
|
923
|
-
/* custom properties */
|
|
924
|
-
/* -------------------------------------- */
|
|
925
|
-
|
|
926
|
-
.off-canvas__nav {
|
|
927
|
-
width: var(--kemet-drawer-width, 300px);
|
|
928
|
-
height: var(--kemet-drawer-height, 100%);
|
|
929
|
-
color: var(--kemet-drawer-color, #fafafa);
|
|
930
|
-
background: var(--kemet-drawer-background-color, #202020);
|
|
931
|
-
}
|
|
932
|
-
`,yt=r`
|
|
933
|
-
/* slide */
|
|
934
|
-
:host([effect='slide']) .off-canvas__nav {
|
|
935
|
-
visibility: visible;
|
|
936
|
-
transform: translate3d(-100%, 0, 0);
|
|
937
|
-
}
|
|
938
|
-
|
|
939
|
-
:host([effect='slide'][opened]) .off-canvas__nav {
|
|
940
|
-
visibility: visible;
|
|
941
|
-
transform: translate3d(0, 0, 0);
|
|
942
|
-
}
|
|
943
|
-
|
|
944
|
-
:host([effect='slide']) .off-canvas__nav:after {
|
|
945
|
-
display: none;
|
|
946
|
-
}
|
|
947
|
-
|
|
948
|
-
:host([effect='slide'][side='right']) .off-canvas__nav {
|
|
949
|
-
transform: translate3d(100vw, 0, 0);
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
:host([effect='slide'][side='right'][opened]) .off-canvas__nav {
|
|
953
|
-
transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
|
|
954
|
-
}
|
|
955
|
-
|
|
956
|
-
:host([effect='slide'][side='top']) .off-canvas__nav {
|
|
957
|
-
width: 100vw;
|
|
958
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
959
|
-
transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
|
|
960
|
-
}
|
|
961
|
-
|
|
962
|
-
:host([effect='slide'][side='top'][opened]) .off-canvas__nav {
|
|
963
|
-
transform: translate3d(0, 0, 0);
|
|
964
|
-
}
|
|
965
|
-
|
|
966
|
-
:host([effect='slide'][side='bottom']) .off-canvas__nav {
|
|
967
|
-
width: 100vw;
|
|
968
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
969
|
-
transform: translate3d(0, ${o(bt)}, 0);
|
|
970
|
-
}
|
|
971
|
-
|
|
972
|
-
:host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {
|
|
973
|
-
transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
|
|
974
|
-
}
|
|
975
|
-
|
|
976
|
-
/* reveal */
|
|
977
|
-
:host([effect='reveal'][opened]) .off-canvas__pusher {
|
|
978
|
-
transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);
|
|
979
|
-
}
|
|
980
|
-
|
|
981
|
-
:host([effect='reveal']) .off-canvas__nav {
|
|
982
|
-
z-index: 1;
|
|
983
|
-
}
|
|
984
|
-
|
|
985
|
-
:host([effect='reveal'][opened]) .off-canvas__nav {
|
|
986
|
-
visibility: visible;
|
|
987
|
-
transition: transform 0.5s;
|
|
988
|
-
}
|
|
989
|
-
|
|
990
|
-
:host([effect='reveal']) .off-canvas__nav::after {
|
|
991
|
-
display: none;
|
|
992
|
-
}
|
|
993
|
-
|
|
994
|
-
:host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {
|
|
995
|
-
transform: translate3d(0, 0, 0);
|
|
996
|
-
}
|
|
997
|
-
|
|
998
|
-
:host([effect='reveal'][side='right']) .off-canvas__nav {
|
|
999
|
-
transform: translate3d(100vw, 0, 0);
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
|
-
:host([effect='reveal'][side='right'][opened]) .off-canvas__nav {
|
|
1003
|
-
transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
|
|
1004
|
-
}
|
|
1005
|
-
|
|
1006
|
-
:host([effect='reveal'][side='top']) .off-canvas__nav {
|
|
1007
|
-
width: 100vw;
|
|
1008
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
1009
|
-
transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
|
|
1010
|
-
}
|
|
1011
|
-
|
|
1012
|
-
:host([effect='reveal'][side='top'][opened]) .off-canvas__nav {
|
|
1013
|
-
transform: translate3d(0, 0, 0);
|
|
1014
|
-
}
|
|
1015
|
-
|
|
1016
|
-
:host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {
|
|
1017
|
-
transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);
|
|
1018
|
-
}
|
|
1019
|
-
|
|
1020
|
-
:host([effect='reveal'][side='bottom']) .off-canvas__nav {
|
|
1021
|
-
width: 100vw;
|
|
1022
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
1023
|
-
transform: translate3d(0, ${o(bt)}, 0);
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
:host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {
|
|
1027
|
-
transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
|
|
1028
|
-
}
|
|
1029
|
-
|
|
1030
|
-
:host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {
|
|
1031
|
-
transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
|
|
1032
|
-
}
|
|
1033
|
-
|
|
1034
|
-
/* push */
|
|
1035
|
-
:host([effect='push'][opened]) .off-canvas__pusher {
|
|
1036
|
-
transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);
|
|
1037
|
-
}
|
|
1038
|
-
|
|
1039
|
-
:host([effect='push']) .off-canvas__nav {
|
|
1040
|
-
transform: translate3d(-100%, 0, 0);
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
:host([effect='push'][opened]) .off-canvas__nav {
|
|
1044
|
-
visibility: visible;
|
|
1045
|
-
transition: transform 0.5s;
|
|
1046
|
-
transform: translate3d(0, 0, 0);
|
|
1047
|
-
}
|
|
1048
|
-
|
|
1049
|
-
:host([effect='push']) .off-canvas__nav::after {
|
|
1050
|
-
display: none;
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
:host([effect='push'][side='right'][opened]) .off-canvas__pusher {
|
|
1054
|
-
transform: translate3d(calc(var(--kemet-drawer-width, 300px) * -1), 0, 0);
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
|
-
:host([effect='push'][side='right']) .off-canvas__nav {
|
|
1058
|
-
transform: translate3d(100vw, 0, 0);
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
|
-
:host([effect='push'][side='right'][opened]) .off-canvas__nav {
|
|
1062
|
-
transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
:host([effect='push'][side='top']) .off-canvas__nav {
|
|
1066
|
-
width: 100vw;
|
|
1067
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
1068
|
-
transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
:host([effect='push'][side='top'][opened]) .off-canvas__nav {
|
|
1072
|
-
transform: translate3d(0, 0, 0);
|
|
1073
|
-
}
|
|
1074
|
-
|
|
1075
|
-
:host([effect='push'][side='top'][opened]) .off-canvas__pusher {
|
|
1076
|
-
transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);
|
|
1077
|
-
}
|
|
1078
|
-
|
|
1079
|
-
:host([effect='push'][side='bottom']) .off-canvas__nav {
|
|
1080
|
-
width: 100vw;
|
|
1081
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
1082
|
-
transform: translate3d(0, ${o(bt)}, 0);
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
|
-
:host([effect='push'][side='bottom'][opened]) .off-canvas__nav {
|
|
1086
|
-
transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
|
-
:host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {
|
|
1090
|
-
transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
/* scale */
|
|
1094
|
-
:host([effect='scale']) .off-canvas__pusher {
|
|
1095
|
-
transform-style: preserve-3d;
|
|
1096
|
-
}
|
|
1097
|
-
|
|
1098
|
-
:host([effect='scale'][opened]) .off-canvas__pusher {
|
|
1099
|
-
transform: translate3d(0, 0, 0) scale(0.95);
|
|
1100
|
-
}
|
|
1101
|
-
|
|
1102
|
-
:host([effect='scale']) .off-canvas__nav {
|
|
1103
|
-
opacity: 1;
|
|
1104
|
-
transform: translate3d(-100%, 0, 0);
|
|
1105
|
-
}
|
|
1106
|
-
|
|
1107
|
-
:host([effect='scale'][opened]) .off-canvas__nav {
|
|
1108
|
-
visibility: visible;
|
|
1109
|
-
transition: transform 0.5s;
|
|
1110
|
-
transform: translate3d(0, 0, 0);
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
:host([effect='scale']) .off-canvas__nav::after {
|
|
1114
|
-
display: none;
|
|
1115
|
-
}
|
|
1116
|
-
|
|
1117
|
-
:host([effect='scale'][side='right']) .off-canvas__nav {
|
|
1118
|
-
transform: translate3d(100vw, 0, 0);
|
|
1119
|
-
}
|
|
1120
|
-
|
|
1121
|
-
:host([effect='scale'][side='right'][opened]) .off-canvas__nav {
|
|
1122
|
-
transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
|
-
:host([effect='scale'][side='top']) .off-canvas__nav {
|
|
1126
|
-
width: 100vw;
|
|
1127
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
1128
|
-
transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
|
|
1129
|
-
}
|
|
1130
|
-
|
|
1131
|
-
:host([effect='scale'][side='top'][opened]) .off-canvas__nav {
|
|
1132
|
-
transform: translate3d(0, 0, 0);
|
|
1133
|
-
}
|
|
1134
|
-
|
|
1135
|
-
:host([effect='scale'][side='bottom']) .off-canvas__nav {
|
|
1136
|
-
width: 100vw;
|
|
1137
|
-
height: var(--kemet-drawer-height, 100vh);
|
|
1138
|
-
transform: translate3d(0, ${o(bt)}, 0);
|
|
1139
|
-
}
|
|
1140
|
-
|
|
1141
|
-
:host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {
|
|
1142
|
-
transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
|
|
1143
|
-
}
|
|
1144
|
-
`;customElements.get("kemet-drawer")||customElements.define("kemet-drawer",class extends Z{static get styles(){return[kt,yt]}static get properties(){return{opened:{type:Boolean,reflect:!0},effect:{type:String,reflect:!0},side:{type:String,reflect:!0},overlay:{type:Boolean,reflect:!0}}}constructor(){super(),this.opened=void 0,this.effect="slide",this.side="left",this.overlay=!1}firstUpdated(){this.addEventListener("click",(t=>{this.opened&&"kemet-drawer"===t.target.tagName.toLowerCase()&&(this.opened=!1)}))}updated(t){t.get("opened")||!0!==this.opened||Q(this,"kemet-drawer-opened",this),t.get("opened")&&!1===this.opened&&Q(this,"kemet-drawer-closed",this)}render(){return I`
|
|
1145
|
-
<section class="off-canvas" part="container">
|
|
1146
|
-
<nav class="off-canvas__nav" part="drawer" title="Drawer">
|
|
1147
|
-
<slot name="navigation"></slot>
|
|
1148
|
-
</nav>
|
|
1149
|
-
<div class="off-canvas__pusher" part="pusher">
|
|
1150
|
-
<main class="off-canvas__content" part="content">
|
|
1151
|
-
<div class="off-canvas__wrapper" part="wrapper">
|
|
1152
|
-
<slot name="content"></slot>
|
|
1153
|
-
</div>
|
|
1154
|
-
</main>
|
|
1155
|
-
</div>
|
|
1156
|
-
</section>
|
|
1157
|
-
`}});const xt=r`
|
|
1158
|
-
:host {
|
|
1159
|
-
--kemet-fab-size: 50px;
|
|
1160
|
-
|
|
1161
|
-
display: inline-block;
|
|
1162
|
-
position: relative;
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
button {
|
|
1166
|
-
color: var(--kemet-fab-color, var(--kemet-color-white));
|
|
1167
|
-
font-size: inherit;
|
|
1168
|
-
display: inline-flex;
|
|
1169
|
-
padding: 0;
|
|
1170
|
-
position: relative;
|
|
1171
|
-
min-height: var(--kemet-fab-size);
|
|
1172
|
-
min-width: var(--kemet-fab-size);
|
|
1173
|
-
max-width: var(--kemet-fab-size);
|
|
1174
|
-
align-items: center;
|
|
1175
|
-
justify-content: flex-start;
|
|
1176
|
-
transition: all 0.4s ease;
|
|
1177
|
-
border: none;
|
|
1178
|
-
background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
|
|
1179
|
-
}
|
|
1180
|
-
|
|
1181
|
-
:host([outlined]) button {
|
|
1182
|
-
color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
|
|
1183
|
-
border: var(--kemet-fab-outlined-border, 1px solid var(--kemet-color-primary));
|
|
1184
|
-
background-color: transparent;
|
|
1185
|
-
}
|
|
1186
|
-
|
|
1187
|
-
:host([pill]) button {
|
|
1188
|
-
border-radius: var(--kemet-fab-pill-radius, 10rem);
|
|
1189
|
-
}
|
|
1190
|
-
|
|
1191
|
-
button::before {
|
|
1192
|
-
content: '';
|
|
1193
|
-
position: absolute;
|
|
1194
|
-
top: 0;
|
|
1195
|
-
left: 0;
|
|
1196
|
-
right: 0;
|
|
1197
|
-
bottom: 0;
|
|
1198
|
-
z-index: -1;
|
|
1199
|
-
width: 100%;
|
|
1200
|
-
height: 100%;
|
|
1201
|
-
transition: background-color 0.3s ease-in-out;
|
|
1202
|
-
background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
|
|
1203
|
-
}
|
|
1204
|
-
|
|
1205
|
-
:host([pill]) button::before {
|
|
1206
|
-
border-radius: var(--kemet-fab-pill-radius, 10rem);
|
|
1207
|
-
}
|
|
1208
|
-
|
|
1209
|
-
:host([outlined]) button::before {
|
|
1210
|
-
border: var(--kemet-fab-outline-border, 1px solid var(--kemet-color-primary));
|
|
1211
|
-
background-color: transparent;
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
:host([expanded]) button {
|
|
1215
|
-
max-width: 99rem;
|
|
1216
|
-
padding: 0 1.35rem 0 0.25rem;
|
|
1217
|
-
}
|
|
1218
|
-
|
|
1219
|
-
:host([disabled]) button {
|
|
1220
|
-
opacity: 0.5;
|
|
1221
|
-
cursor: not-allowed;
|
|
1222
|
-
}
|
|
1223
|
-
|
|
1224
|
-
.icon {
|
|
1225
|
-
width: var(--kemet-fab-size);
|
|
1226
|
-
height: var(--kemet-fab-size);
|
|
1227
|
-
display: flex;
|
|
1228
|
-
flex: 0 0 auto;
|
|
1229
|
-
align-items: center;
|
|
1230
|
-
justify-content: center;
|
|
1231
|
-
}
|
|
1232
|
-
|
|
1233
|
-
.text {
|
|
1234
|
-
color: var(--kemet-fab-color, var(--kemet-color-white));
|
|
1235
|
-
z-index: 1;
|
|
1236
|
-
white-space: nowrap;
|
|
1237
|
-
pointer-events: none;
|
|
1238
|
-
opacity: 0;
|
|
1239
|
-
transition: opacity 0.2s ease-in-out;
|
|
1240
|
-
}
|
|
1241
|
-
|
|
1242
|
-
:host([outlined]) .text {
|
|
1243
|
-
color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
|
|
1244
|
-
}
|
|
1245
|
-
|
|
1246
|
-
:host([expanded]) .text {
|
|
1247
|
-
opacity: 1;
|
|
1248
|
-
}
|
|
1249
|
-
`;customElements.get("kemet-fab")||customElements.define("kemet-fab",class extends Z{static get styles(){return[xt]}static get properties(){return{expanded:{type:Boolean,reflect:!0},outlined:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},pill:{type:Boolean,reflect:!0},expandPoint:{type:Number,attribute:"expand-point"},collapsePoint:{type:Number,attribute:"collapse-point"}}}constructor(){super(),this.outlined=!1,this.disabled=!1,this.expanded=!1}firstUpdated(){window.addEventListener("scroll",this.handleScroll.bind(this)),this.addEventListener("mouseover",this.handleMouseOver.bind(this)),this.addEventListener("mouseout",this.handleMouseOut.bind(this))}render(){return I`
|
|
1250
|
-
<button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled?"true":"false"}>
|
|
1251
|
-
<span class="icon" part="icon">
|
|
1252
|
-
<slot name="icon"></slot>
|
|
1253
|
-
</span>
|
|
1254
|
-
<span class="text" part="text">
|
|
1255
|
-
<slot></slot>
|
|
1256
|
-
</span>
|
|
1257
|
-
</button>
|
|
1258
|
-
`}handleMouseOver(){this.disabled||(this.expanded=!0)}handleMouseOut(){this.disabled||(this.expanded=!1)}handleScroll(){window.scrollY>this.expandPoint&&(this.expanded=!0),window.scrollY<this.expandPoint&&(this.expanded=!1),window.scrollY>this.collapsePoint&&(this.expanded=!1),window.scrollY<this.collapsePoint&&(this.expanded=!0)}});customElements.get("kemet-field")||customElements.define("kemet-field",class extends Z{static get styles(){return[r`
|
|
1259
|
-
*,
|
|
1260
|
-
*::before,
|
|
1261
|
-
*::after {
|
|
1262
|
-
box-sizing: border-box;
|
|
1263
|
-
}
|
|
1264
|
-
|
|
1265
|
-
:host {
|
|
1266
|
-
display: block;
|
|
1267
|
-
}
|
|
1268
|
-
|
|
1269
|
-
:host([disabled]) {
|
|
1270
|
-
opacity: 0.5;
|
|
1271
|
-
}
|
|
1272
|
-
|
|
1273
|
-
label {
|
|
1274
|
-
position: relative;
|
|
1275
|
-
display: block;
|
|
1276
|
-
}
|
|
1277
|
-
|
|
1278
|
-
label span {
|
|
1279
|
-
color: inherit;
|
|
1280
|
-
display: inline-flex;
|
|
1281
|
-
gap: 0.5rem;
|
|
1282
|
-
align-items: center;
|
|
1283
|
-
margin-bottom: 0.8rem;
|
|
1284
|
-
}
|
|
1285
|
-
|
|
1286
|
-
:host([status='error']) kemet-icon {
|
|
1287
|
-
color: var(--kemet-color-error);
|
|
1288
|
-
}
|
|
1289
|
-
|
|
1290
|
-
:host([status='success']) kemet-icon {
|
|
1291
|
-
color: var(--kemet-color-success);
|
|
1292
|
-
}
|
|
1293
|
-
|
|
1294
|
-
:host([status='warning']) kemet-icon {
|
|
1295
|
-
color: var(--kemet-color-warning);
|
|
1296
|
-
}
|
|
1297
|
-
|
|
1298
|
-
.message {
|
|
1299
|
-
font-size: 0.9rem;
|
|
1300
|
-
line-height: 1;
|
|
1301
|
-
display: block;
|
|
1302
|
-
margin-top: 0.8rem;
|
|
1303
|
-
}
|
|
1304
|
-
|
|
1305
|
-
:host([status='error']) .message {
|
|
1306
|
-
color: var(--kemet-color-error);
|
|
1307
|
-
}
|
|
1308
|
-
|
|
1309
|
-
:host([status='success']) .message {
|
|
1310
|
-
color: var(--kemet-color-success);
|
|
1311
|
-
}
|
|
1312
|
-
|
|
1313
|
-
:host([status='warning']) .message {
|
|
1314
|
-
color: var(--kemet-color-warning);
|
|
1315
|
-
}
|
|
1316
|
-
`]}static get properties(){return{slug:{type:String},label:{type:String},message:{type:String},focused:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},filled:{type:Boolean,reflect:!0},length:{type:Number},disabled:{type:Boolean,reflect:!0},errorIcon:{type:String,attribute:"error-icon"},successIcon:{type:String,attribute:"success-icon"}}}constructor(){super(),this.status="standard",this.errorIcon="exclamation-triangle-fill",this.successIcon="check-lg",this.addEventListener("kemet-input-focused",(t=>this.handleFocused(t))),this.addEventListener("kemet-input-status",(t=>this.handleStatus(t))),this.addEventListener("kemet-input-input",(t=>this.handleInput(t))),this.addEventListener("kemet-count-status",(t=>this.handleStatus(t))),this.addEventListener("kemet-combo-selection",(t=>this.handleSelection(t)))}firstUpdated(){this.slotInput=this.querySelector('[slot="input"]'),this.slotCombo=this.querySelector('[slot="combo"]'),this.slotInput.value?this.length=this.slotInput.value.length:this.length=0}render(){return I`
|
|
1317
|
-
<label for="${this.slug}" id="${this.slug}-label" part="label">
|
|
1318
|
-
<span part="text">${this.label}${this.makeStatusIcon()}</span>
|
|
1319
|
-
<slot name="input"></slot>
|
|
1320
|
-
</label>
|
|
1321
|
-
${this.makeStatusMessage()}
|
|
1322
|
-
<slot name="component"></slot>
|
|
1323
|
-
`}makeStatusIcon(){return"error"===this.status||"warning"===this.status?I`<kemet-icon icon="${this.errorIcon}" size="16"></kemet-icon>`:"success"===this.status?I`<kemet-icon icon="${this.successIcon}" size="16"></kemet-icon>`:null}makeStatusMessage(){return"standard"!==this.status?I`<span class="message" part="message">${this.message}</span>`:null}handleFocused(t){this.focused=t.detail,!this.focused&&this.slotCombo&&this.slotCombo.options.length<1&&(this.slotCombo.show=!1)}handleStatus(t){this.status=t.detail.status}handleInput(t){Q(this,"kemet-field-input",t.detail.length),""===t.detail?this.filled=!1:this.filled=!0}handleSelection(t){this.slotInput.setAttribute("aria-activedescendant",t.detail)}});customElements.get("kemet-flipcard-trigger")||customElements.define("kemet-flipcard-trigger",class extends Z{static get styles(){return[r`
|
|
1324
|
-
:host {
|
|
1325
|
-
cursor: pointer;
|
|
1326
|
-
}
|
|
1327
|
-
`]}firstUpdated(){this.keyCodes={ENTER:13,SPACE:32}}render(){return I`
|
|
1328
|
-
<slot tabindex="0" @click=${()=>this.trigger()} @keypress=${t=>this.handleKeyup(t)}></slot>
|
|
1329
|
-
`}trigger(){Q(this,"kemet-flipcard-flipped",this)}handleKeyup(t){t.preventDefault(),t.keyCode===this.keyCodes.ENTER&&this.trigger()}});customElements.get("kemet-flipcard")||window.customElements.define("kemet-flipcard",class extends Z{static get styles(){return r`
|
|
1330
|
-
*,
|
|
1331
|
-
::after,
|
|
1332
|
-
::before {
|
|
1333
|
-
box-sizing: border-box;
|
|
1334
|
-
}
|
|
1335
|
-
|
|
1336
|
-
:host {
|
|
1337
|
-
display: inline-block;
|
|
1338
|
-
width: var(--kemet-flipcard-width, 100%);
|
|
1339
|
-
height: var(--kemet-flipcard-height, auto);
|
|
1340
|
-
aspect-ratio: var(--kemet-flipcard-ratio, 16/9);
|
|
1341
|
-
perspective: 1000px;
|
|
1342
|
-
}
|
|
1343
|
-
|
|
1344
|
-
section {
|
|
1345
|
-
position: relative;
|
|
1346
|
-
width: 100%;
|
|
1347
|
-
height: 100%;
|
|
1348
|
-
transition: transform 0.8s;
|
|
1349
|
-
transform-style: preserve-3d;
|
|
1350
|
-
}
|
|
1351
|
-
|
|
1352
|
-
.front,
|
|
1353
|
-
.back {
|
|
1354
|
-
position: absolute;
|
|
1355
|
-
display: flex;
|
|
1356
|
-
width: 100%;
|
|
1357
|
-
height: 100%;
|
|
1358
|
-
backface-visibility: hidden;
|
|
1359
|
-
/* overflow: hidden; */
|
|
1360
|
-
border-radius: var(--kemet-flipcard-border-radius, 0);
|
|
1361
|
-
border: var(--kemet-flipcard-border, 2px solid var(--kemet-color-primary));
|
|
1362
|
-
}
|
|
1363
|
-
|
|
1364
|
-
:host([rounded]) .front,
|
|
1365
|
-
:host([rounded]) .back {
|
|
1366
|
-
border-radius: var(--kemet-border-radius);
|
|
1367
|
-
}
|
|
1368
|
-
|
|
1369
|
-
.front {
|
|
1370
|
-
color: var(--kemet-flipcard-front-color, #202020);
|
|
1371
|
-
background-color: var(--kemet-flipcard-front-background-color, #fafafa);
|
|
1372
|
-
}
|
|
1373
|
-
|
|
1374
|
-
:host([flipped]) .front {
|
|
1375
|
-
z-index: -1;
|
|
1376
|
-
}
|
|
1377
|
-
|
|
1378
|
-
.back {
|
|
1379
|
-
color: var(--kemet-flipcard-back-color, #202020);
|
|
1380
|
-
background-color: var(--kemet-flipcard-back-background-color, #fafafa)
|
|
1381
|
-
}
|
|
1382
|
-
|
|
1383
|
-
:host([axis="horizontal"]) .back {
|
|
1384
|
-
transform: rotateY(180deg);
|
|
1385
|
-
}
|
|
1386
|
-
|
|
1387
|
-
:host([flipped][axis="horizontal"]) section {
|
|
1388
|
-
transform: rotateY(180deg);
|
|
1389
|
-
}
|
|
1390
|
-
|
|
1391
|
-
:host([axis="vertical"]) .back {
|
|
1392
|
-
transform: rotateX(180deg);
|
|
1393
|
-
}
|
|
1394
|
-
|
|
1395
|
-
:host([flipped][axis="vertical"]) section {
|
|
1396
|
-
transform: rotateX(180deg);
|
|
1397
|
-
}
|
|
1398
|
-
|
|
1399
|
-
:host([flip-on-hover]) section {
|
|
1400
|
-
cursor: pointer;
|
|
1401
|
-
}
|
|
1402
|
-
|
|
1403
|
-
::slotted([slot="front"]),
|
|
1404
|
-
::slotted([slot="back"]) {
|
|
1405
|
-
display: inline-block;
|
|
1406
|
-
margin: auto;
|
|
1407
|
-
position: relative;
|
|
1408
|
-
width: 100%;
|
|
1409
|
-
height: 100%;
|
|
1410
|
-
}
|
|
1411
|
-
`}static get properties(){return{axis:{type:String,reflect:!0},flipped:{type:Boolean,reflect:!0},flipOnHover:{type:Boolean,attribute:"flip-on-hover"},height:{type:String},measure:{type:Boolean}}}constructor(){super(),this.axis="horizontal",this.flipped=!1,this.flipOnHover=!1,this.height="auto",this.measure=!1,this.addEventListener("kemet-flipcard-flipped",(()=>{this.flipped=!this.flipped}))}firstUpdated(){this.frontChildren=this.shadowRoot.querySelector('[name="front"]').assignedNodes({flatten:!0}),this.backChildren=this.shadowRoot.querySelector('[name="back"]').assignedNodes({flatten:!0}),[this.frontElement]=this.frontChildren,[this.backElement]=this.backChildren,window.addEventListener("resize",this.determineHeight.bind(this))}updated(){this.determineHeight()}render(){return I`
|
|
1412
|
-
<section
|
|
1413
|
-
tabindex="0"
|
|
1414
|
-
part="wrapper"
|
|
1415
|
-
@blur=${()=>{this.flipOnHover&&(this.flipped=!1)}}
|
|
1416
|
-
@focus=${()=>{this.flipOnHover&&(this.flipped=!0)}}
|
|
1417
|
-
@mouseover=${()=>{this.flipOnHover&&(this.flipped=!0)}}
|
|
1418
|
-
@mouseout=${()=>{this.flipOnHover&&(this.flipped=!1)}}>
|
|
1419
|
-
<div id="front" class="front" part="front">
|
|
1420
|
-
<slot name="front" @slotchange="${()=>this.determineHeight()}"></slot>
|
|
1421
|
-
</div>
|
|
1422
|
-
<div id="back" class="back" part="back">
|
|
1423
|
-
<slot name="back" @slotchange="${()=>this.determineHeight()}"></slot>
|
|
1424
|
-
</div>
|
|
1425
|
-
</section>
|
|
1426
|
-
`}determineHeight(){setTimeout((()=>{this.measure?(this.frontElement.offsetHeight>this.backElement.offsetHeight?this.height=`${this.frontElement.offsetHeight}px`:this.height=`${this.backElement.offsetHeight}px`,this.style.height=this.height):this.style.removeProperty("height")}),0)}});customElements.get("kemet-input")||customElements.define("kemet-input",class extends Z{static get styles(){return[r`
|
|
1427
|
-
:host {
|
|
1428
|
-
position: relative;
|
|
1429
|
-
display: block;
|
|
1430
|
-
}
|
|
1431
|
-
|
|
1432
|
-
input {
|
|
1433
|
-
display: block;
|
|
1434
|
-
font-size: 1rem;
|
|
1435
|
-
width: 100%;
|
|
1436
|
-
height: var(--kemet-input-height, 50px);
|
|
1437
|
-
padding: var(--kemet-input-padding, 0.5rem 1rem);
|
|
1438
|
-
border: var(--kemet-input-border, 1px solid var(--kemet-color-primary));
|
|
1439
|
-
appearance: none;
|
|
1440
|
-
box-sizing: border-box;
|
|
1441
|
-
}
|
|
1442
|
-
|
|
1443
|
-
input[type='color'] {
|
|
1444
|
-
min-width: 10rem;
|
|
1445
|
-
}
|
|
1446
|
-
|
|
1447
|
-
input[type='search']::-webkit-search-decoration,
|
|
1448
|
-
input[type='search']::-webkit-search-cancel-button,
|
|
1449
|
-
input[type='search']::-webkit-search-results-button,
|
|
1450
|
-
input[type='search']::-webkit-search-results-decoration {
|
|
1451
|
-
display: none;
|
|
1452
|
-
}
|
|
1453
|
-
|
|
1454
|
-
:host([status='error']) input {
|
|
1455
|
-
border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));
|
|
1456
|
-
}
|
|
1457
|
-
|
|
1458
|
-
:host([status='success']) input {
|
|
1459
|
-
border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
|
|
1460
|
-
}
|
|
1461
|
-
|
|
1462
|
-
:host([status='warning']) input {
|
|
1463
|
-
border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
|
|
1464
|
-
}
|
|
1465
|
-
|
|
1466
|
-
:host([disabled]) input {
|
|
1467
|
-
opacity: 0.5;
|
|
1468
|
-
}
|
|
1469
|
-
|
|
1470
|
-
:host([icon-left]) input {
|
|
1471
|
-
padding-left: var(--kemet-input-icon-left-padding, 3rem);
|
|
1472
|
-
}
|
|
1473
|
-
|
|
1474
|
-
:host([icon-right]) input {
|
|
1475
|
-
padding-right: var(--kemet-input-icon-right-padding, 3rem);
|
|
1476
|
-
}
|
|
1477
|
-
|
|
1478
|
-
:host([rounded]) input {
|
|
1479
|
-
border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
|
|
1480
|
-
}
|
|
1481
|
-
|
|
1482
|
-
:host([filled]) input {
|
|
1483
|
-
border: var(--kemet-input-border-filled, none);
|
|
1484
|
-
color: var(--kemet-input-color-filled, var(--kemet-color-white));
|
|
1485
|
-
background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
|
|
1486
|
-
}
|
|
1487
|
-
|
|
1488
|
-
:host([filled]) kemet-icon,
|
|
1489
|
-
:host([filled]) input::placeholder {
|
|
1490
|
-
color: var(--kemet-input-color-filled, var(--kemet-color-white));
|
|
1491
|
-
}
|
|
1492
|
-
|
|
1493
|
-
:host([status='error'][filled]) input {
|
|
1494
|
-
background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
|
|
1495
|
-
}
|
|
1496
|
-
|
|
1497
|
-
:host([status='success'][filled]) input {
|
|
1498
|
-
background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
|
|
1499
|
-
}
|
|
1500
|
-
|
|
1501
|
-
:host([status='warning'][filled]) input {
|
|
1502
|
-
background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
|
|
1503
|
-
}
|
|
1504
|
-
|
|
1505
|
-
kemet-icon {
|
|
1506
|
-
color: var(--kemet-color-primary);
|
|
1507
|
-
position: absolute;
|
|
1508
|
-
top: 50%;
|
|
1509
|
-
transform: translateY(-50%);
|
|
1510
|
-
}
|
|
1511
|
-
|
|
1512
|
-
kemet-icon.left {
|
|
1513
|
-
left: 1rem;
|
|
1514
|
-
}
|
|
1515
|
-
|
|
1516
|
-
kemet-icon.right {
|
|
1517
|
-
right: 1rem;
|
|
1518
|
-
}
|
|
1519
|
-
|
|
1520
|
-
kemet-icon.eye,
|
|
1521
|
-
kemet-icon.search {
|
|
1522
|
-
cursor: pointer;
|
|
1523
|
-
}
|
|
1524
|
-
|
|
1525
|
-
:host([status='error']) kemet-icon {
|
|
1526
|
-
color: var(--kemet-color-error);
|
|
1527
|
-
}
|
|
1528
|
-
|
|
1529
|
-
:host([status='warning']) kemet-icon {
|
|
1530
|
-
color: var(--kemet-color-error);
|
|
1531
|
-
}
|
|
1532
|
-
|
|
1533
|
-
:host([status='success']) kemet-icon {
|
|
1534
|
-
color: var(--kemet-color-success);
|
|
1535
|
-
}
|
|
1536
|
-
`]}static get properties(){return{slug:{type:String},name:{type:String},placeholder:{type:String},minlength:{type:String},maxlength:{type:String},min:{type:String},max:{type:String},step:{type:String},autocomplete:{type:String},pattern:{type:String},inputmode:{type:String},autofocus:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean},required:{type:Boolean,reflect:!0},type:{type:String},value:{type:String},invalid:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},validateOnBlur:{type:Boolean,attribute:"validate-on-blur"},ariaAutoComplete:{type:String,attribute:"aria-autocomplete"},ariaControls:{type:String,attribute:"aria-controls"},ariaActiveDescendant:{type:String,attribute:"aria-activedescendant"},rounded:{type:Boolean,reflect:!0},filled:{type:Boolean,reflect:!0},iconRight:{type:String,reflect:!0,attribute:"icon-right"},iconLeft:{type:String,reflect:!0,attribute:"icon-left"},iconSize:{type:Number},validity:{type:Object},isPasswordVisible:{type:Boolean},inputType:{type:String},focused:{type:Boolean,reflect:!0}}}constructor(){super(),this.name="input",this.type="text",this.value="",this.status="standard",this.iconSize=20,this.validateOnBlur=!1,this.isPasswordVisible=!1,this.focused=!1,this.formSubmitController=new et(this)}firstUpdated(){this.input=this.shadowRoot.querySelector("input"),this.field=this.closest("kemet-field"),this.form=this.closest("form"),this.slug=this.field?this.field.slug:"input",this.field&&this.field.addEventListener("fmc-password-status",(t=>this.handleStatus(t)))}render(){return I`
|
|
1537
|
-
<div>
|
|
1538
|
-
${this.makeIconLeft()}
|
|
1539
|
-
<input
|
|
1540
|
-
part="input"
|
|
1541
|
-
id=${this.slug}
|
|
1542
|
-
name=${this.name}
|
|
1543
|
-
placeholder=${it(this.placeholder)}
|
|
1544
|
-
minlength=${it(this.minlength)}
|
|
1545
|
-
maxlength=${it(this.maxlength)}
|
|
1546
|
-
min=${it(this.min)}
|
|
1547
|
-
max=${it(this.max)}
|
|
1548
|
-
step=${it(this.step)}
|
|
1549
|
-
autocomplete=${it(this.autocomplete)}
|
|
1550
|
-
aria-autocomplete=${it(this.ariaAutoComplete)}
|
|
1551
|
-
aria-controls=${it(this.ariaControls)}
|
|
1552
|
-
aria-activedescendant=${it(this.ariaActiveDescendant)}
|
|
1553
|
-
pattern=${it(this.pattern)}
|
|
1554
|
-
inputmode=${it(this.inputmode)}
|
|
1555
|
-
aria-invalid=${this.invalid?"true":"false"}
|
|
1556
|
-
?autofocus=${this.autofocus}
|
|
1557
|
-
?disabled=${this.disabled}
|
|
1558
|
-
?readonly=${this.readonly}
|
|
1559
|
-
?required=${this.required}
|
|
1560
|
-
.type="${"password"===this.type&&this.isPasswordVisible?"text":this.type}"
|
|
1561
|
-
.value=${ct(this.value)}
|
|
1562
|
-
@change=${this.handleChange}
|
|
1563
|
-
@input=${this.handleInput}
|
|
1564
|
-
@invalid=${this.handleInvalid}
|
|
1565
|
-
@focus=${this.handleFocus}
|
|
1566
|
-
@blur=${this.handleBlur}
|
|
1567
|
-
/>
|
|
1568
|
-
${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}
|
|
1569
|
-
</div>
|
|
1570
|
-
`}makeIconRight(){return this.iconRight?I`
|
|
1571
|
-
<kemet-icon class="right" icon="${this.iconRight}" size="${this.iconSize?this.iconSize:20}"></kemet-icon>
|
|
1572
|
-
`:null}makeIconLeft(){return this.iconLeft?I`
|
|
1573
|
-
<kemet-icon class="left" icon="${this.iconLeft}" size="${this.iconSize?this.iconSize:16}"></kemet-icon>
|
|
1574
|
-
`:null}makeIconClear(){return"search"===this.type&&""!==this.value?I`
|
|
1575
|
-
<kemet-icon class="search right" icon="x-lg" size="${this.iconSize}" @click=${()=>this.handleClear()}></kemet-icon>
|
|
1576
|
-
`:null}makeVisibilityToggle(){return"password"===this.type?I`<kemet-icon
|
|
1577
|
-
class="eye right"
|
|
1578
|
-
icon="${this.setPasswordIcon()}"
|
|
1579
|
-
@click=${()=>this.togglePasswordVisibility()}
|
|
1580
|
-
></kemet-icon>`:null}setPasswordIcon(){return this.isPasswordVisible?"eye":"eye-slash"}handleFocus(){this.focused=!0,Q(this,"kemet-input-focused",!0)}handleBlur(){this.validateOnBlur&&this.form&&!this.form.noValidate&&(this.input.checkValidity(),this.validity=this.input.validity),this.focused=!1,Q(this,"kemet-input-focused",!1)}handleChange(){this.value=this.input.value,this.input.checkValidity()&&this.checkLimitValidity()&&"success"!==this.status&&(this.invalid=!1,this.status="standard",this.validity=this.input.validity,Q(this,"kemet-input-status",{status:"standard",validity:this.input.validity,element:this}))}handleInput(){this.value=this.input.value,Q(this,"kemet-input-input",this.value)}handleInvalid(){this.validity=this.input.validity,this.validateOnBlur&&(this.invalid=!0,this.status="error",Q(this,"kemet-input-status",{status:"error",validity:this.input.validity,element:this}))}handleStatus(t){this.status=t.detail.status}togglePasswordVisibility(){this.isPasswordVisible=!this.isPasswordVisible}handleClear(){this.value="",Q(this,"kemet-input-input",this.value)}checkLimitValidity(){if(this.field){const t=this.field.querySelector("kemet-count");if(t)return this.value.length<t.limit}return!0}checkValidity(){return this.input.checkValidity()}focus(){this.input.focus()}});const wt=r`
|
|
1581
|
-
:host {
|
|
1582
|
-
color: inherit;
|
|
1583
|
-
display: none;
|
|
1584
|
-
}
|
|
1585
|
-
|
|
1586
|
-
:host([show]) {
|
|
1587
|
-
display: block;
|
|
1588
|
-
}
|
|
1589
|
-
|
|
1590
|
-
p {
|
|
1591
|
-
margin: 1.6rem 0;
|
|
1592
|
-
}
|
|
1593
|
-
|
|
1594
|
-
.status {
|
|
1595
|
-
display: grid;
|
|
1596
|
-
align-items: center;
|
|
1597
|
-
grid-template-columns: 1fr auto;
|
|
1598
|
-
line-height: 1;
|
|
1599
|
-
margin-top: 0.8rem;
|
|
1600
|
-
}
|
|
1601
|
-
|
|
1602
|
-
.status > span {
|
|
1603
|
-
text-transform: capitalize;
|
|
1604
|
-
}
|
|
1605
|
-
|
|
1606
|
-
.status--weak,
|
|
1607
|
-
.status--better {
|
|
1608
|
-
color: var(--kemet-color-error);
|
|
1609
|
-
}
|
|
1610
|
-
|
|
1611
|
-
.status--strong {
|
|
1612
|
-
color: var(--kemet-color-success);
|
|
1613
|
-
}
|
|
1614
|
-
|
|
1615
|
-
.indicator {
|
|
1616
|
-
display: flex;
|
|
1617
|
-
gap: 0.4rem;
|
|
1618
|
-
margin: 0;
|
|
1619
|
-
list-style: none;
|
|
1620
|
-
}
|
|
1621
|
-
|
|
1622
|
-
.indicator li {
|
|
1623
|
-
width: 1.6rem;
|
|
1624
|
-
height: 0.2rem;
|
|
1625
|
-
background-color: var(--fds-color--gray2);
|
|
1626
|
-
}
|
|
1627
|
-
|
|
1628
|
-
.status--weak .indicator li:nth-child(1) {
|
|
1629
|
-
background-color: var(--kemet-color-error);
|
|
1630
|
-
}
|
|
1631
|
-
|
|
1632
|
-
.status--better .indicator li:nth-child(1),
|
|
1633
|
-
.status--better .indicator li:nth-child(2) {
|
|
1634
|
-
background-color: var(--kemet-color-error);
|
|
1635
|
-
}
|
|
1636
|
-
|
|
1637
|
-
.status--strong .indicator li {
|
|
1638
|
-
background-color: var(--kemet-color-success);
|
|
1639
|
-
}
|
|
1640
|
-
|
|
1641
|
-
.rules {
|
|
1642
|
-
color: var(--kemet-color-primary);
|
|
1643
|
-
list-style: none;
|
|
1644
|
-
font-size: 90%;
|
|
1645
|
-
padding-left: 2rem;
|
|
1646
|
-
}
|
|
1647
|
-
|
|
1648
|
-
.rules li {
|
|
1649
|
-
position: relative;
|
|
1650
|
-
}
|
|
1651
|
-
|
|
1652
|
-
.rules kemet-icon {
|
|
1653
|
-
color: var(--kemet-color-success);
|
|
1654
|
-
position: absolute;
|
|
1655
|
-
left: -2.4rem;
|
|
1656
|
-
}
|
|
1657
|
-
`;customElements.get("kemet-password")||customElements.define("kemet-password",class extends Z{static get styles(){return[wt]}static get properties(){return{rules:{type:Array},show:{type:Boolean,reflect:!0},value:{type:String},message:{type:String},strength:{type:String},icon:{type:String},iconSize:{type:Number}}}constructor(){super(),this.rules=[{pattern:"(?=.{8,}$)",message:"At least 8 characters long"},{pattern:"(?=.*[a-z])(?=.*[A-Z])",message:"Uppercase and lowercase"},{pattern:"(?=.*[0-9])",message:"At least one number (0-9)"}],this.message="Please make sure you meet all the requirements.",this.icon="check2",this.iconSize=16}firstUpdated(){this.field=this.closest("kemet-field"),this.input=this.field.querySelector('[slot="input"]'),this.slug=this.field.slug,this.input.addEventListener("kemet-input-input",this.handleInput.bind(this))}render(){return I`
|
|
1658
|
-
<div role="alert" aria-live="assertive">
|
|
1659
|
-
<div class="status status--${this.strength}" part="status">
|
|
1660
|
-
<span>${this.strength}</span>
|
|
1661
|
-
<ul class="indicator" part="indicator">
|
|
1662
|
-
<li></li>
|
|
1663
|
-
<li></li>
|
|
1664
|
-
<li></li>
|
|
1665
|
-
</ul>
|
|
1666
|
-
</div>
|
|
1667
|
-
<p class="message" part="message">${this.message}</p>
|
|
1668
|
-
<ul class="rules" part="rules">
|
|
1669
|
-
${this.makeRules()}
|
|
1670
|
-
</ul>
|
|
1671
|
-
</div>
|
|
1672
|
-
`}makeRules(){if(this.input){return this.rules.map(((t,e)=>{const s=new RegExp(t.pattern).test(this.input.value);return this.rules[e].meetsCriteria=s,I`<li>${this.makeCheckIcon(s)} ${t.message}</li>`}))}return null}makeCheckIcon(t){return t?I`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`:null}handleInput(t){this.value=t.detail,this.setStrength(),this.visibility()}setStrength(){setTimeout((()=>{const t=this.rules.length,e=this.rules.filter((t=>t.meetsCriteria)).length,s=Math.round(e/t*100)/100;s<=.33&&(this.strength="weak",this.status="error"),s>.33&&s<=.67&&(this.strength="better",this.status="error"),s>.67&&(this.strength="strong",this.status="success"),Q(this,"kemet-password-status",{status:this.status,validity:{meetsPasswordCriteria:"success"===this.status},element:this})}),1)}visibility(){this.value.length>0?this.show=!0:this.show=!1}});customElements.get("kemet-modal-close")||customElements.define("kemet-modal-close",class extends Z{static get styles(){return[r`
|
|
1673
|
-
:host {
|
|
1674
|
-
position: absolute;
|
|
1675
|
-
top: -0.5rem;
|
|
1676
|
-
right: -0.5rem;
|
|
1677
|
-
border: 2px solid white;
|
|
1678
|
-
border-radius: 50%;
|
|
1679
|
-
cursor: pointer;
|
|
1680
|
-
}
|
|
1681
|
-
`]}render(){return I`
|
|
1682
|
-
<slot @keyup=${()=>this.close()} @click=${()=>this.close()}></slot>
|
|
1683
|
-
`}close(){Q(this,"kemet-modal-close-press",this)}});const $t=r`
|
|
1684
|
-
*,
|
|
1685
|
-
*::before,
|
|
1686
|
-
*::after {
|
|
1687
|
-
box-sizing: border-box;
|
|
1688
|
-
}
|
|
1689
|
-
|
|
1690
|
-
:host {
|
|
1691
|
-
position: fixed;
|
|
1692
|
-
display: flex;
|
|
1693
|
-
top: 0;
|
|
1694
|
-
left: 0;
|
|
1695
|
-
z-index: 99;
|
|
1696
|
-
width: 100%;
|
|
1697
|
-
height: 100vh;
|
|
1698
|
-
visibility: hidden;
|
|
1699
|
-
backface-visibility: hidden;
|
|
1700
|
-
}
|
|
1701
|
-
|
|
1702
|
-
:host([opened]) {
|
|
1703
|
-
visibility: visible;
|
|
1704
|
-
}
|
|
1705
|
-
|
|
1706
|
-
.content {
|
|
1707
|
-
position: relative;
|
|
1708
|
-
z-index: 3;
|
|
1709
|
-
margin: auto;
|
|
1710
|
-
min-width: var(--kemet-modal-content-min-width, 0);
|
|
1711
|
-
max-width: var(--kemet-modal-content-max-width, none);
|
|
1712
|
-
}
|
|
1713
|
-
|
|
1714
|
-
:host([mobile]) .content {
|
|
1715
|
-
min-width: var(--kemet-modal-content-mobile-min-width, 100%);
|
|
1716
|
-
min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
|
|
1717
|
-
padding: var(--kemet-modal-content-mobile-padding, 1rem);
|
|
1718
|
-
}
|
|
1719
|
-
|
|
1720
|
-
.overlay {
|
|
1721
|
-
position: fixed;
|
|
1722
|
-
width: 100%;
|
|
1723
|
-
height: 100%;
|
|
1724
|
-
visibility: hidden;
|
|
1725
|
-
top: 0;
|
|
1726
|
-
left: 0;
|
|
1727
|
-
z-index: 1;
|
|
1728
|
-
opacity: 0;
|
|
1729
|
-
background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
|
|
1730
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1731
|
-
}
|
|
1732
|
-
|
|
1733
|
-
:host([opened]) .overlay {
|
|
1734
|
-
opacity: 1;
|
|
1735
|
-
visibility: visible;
|
|
1736
|
-
}
|
|
1737
|
-
`,Et=r`
|
|
1738
|
-
/* fadein-scaleup */
|
|
1739
|
-
:host([effect="fadein-scaleup"]) .content {
|
|
1740
|
-
transform: scale(0.7);
|
|
1741
|
-
opacity: 0;
|
|
1742
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1743
|
-
}
|
|
1744
|
-
|
|
1745
|
-
:host([effect="fadein-scaleup"][opened]) .content {
|
|
1746
|
-
transform: scale(1);
|
|
1747
|
-
opacity: 1;
|
|
1748
|
-
}
|
|
1749
|
-
|
|
1750
|
-
/* slide-right */
|
|
1751
|
-
:host([effect="slide-right"]) .content {
|
|
1752
|
-
transform: translateX(20%);
|
|
1753
|
-
opacity: 0;
|
|
1754
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
|
1755
|
-
}
|
|
1756
|
-
|
|
1757
|
-
:host([effect="slide-right"][opened]) .content {
|
|
1758
|
-
transform: translateX(0);
|
|
1759
|
-
opacity: 1;
|
|
1760
|
-
}
|
|
1761
|
-
|
|
1762
|
-
/* slide-bottom */
|
|
1763
|
-
:host([effect="slide-bottom"]) .content {
|
|
1764
|
-
transform: translateY(20%);
|
|
1765
|
-
opacity: 0;
|
|
1766
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1767
|
-
}
|
|
1768
|
-
|
|
1769
|
-
:host([effect="slide-bottom"][opened]) .content {
|
|
1770
|
-
transform: translateY(0);
|
|
1771
|
-
opacity: 1;
|
|
1772
|
-
}
|
|
1773
|
-
|
|
1774
|
-
/* newspaper */
|
|
1775
|
-
:host([effect="newspaper"]) .content {
|
|
1776
|
-
transform: scale(0) rotate(720deg);
|
|
1777
|
-
opacity: 0;
|
|
1778
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1779
|
-
}
|
|
1780
|
-
|
|
1781
|
-
:host([effect="newspaper"][opened]) .content {
|
|
1782
|
-
transform: scale(1) rotate(0deg);
|
|
1783
|
-
opacity: 1;
|
|
1784
|
-
}
|
|
1785
|
-
|
|
1786
|
-
/* fall */
|
|
1787
|
-
:host([effect="fall"]) {
|
|
1788
|
-
perspective: 1300px;
|
|
1789
|
-
}
|
|
1790
|
-
|
|
1791
|
-
:host([effect="fall"]) .content {
|
|
1792
|
-
transform-style: preserve-3d;
|
|
1793
|
-
transform: translateZ(600px) rotateX(20deg);
|
|
1794
|
-
opacity: 0;
|
|
1795
|
-
}
|
|
1796
|
-
|
|
1797
|
-
:host([effect="fall"][opened]) .content {
|
|
1798
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
|
|
1799
|
-
transform: translateZ(0px) rotateX(0deg);
|
|
1800
|
-
opacity: 1;
|
|
1801
|
-
}
|
|
1802
|
-
|
|
1803
|
-
/* side-fall */
|
|
1804
|
-
:host([effect="side-fall"]) {
|
|
1805
|
-
perspective: 1300px;
|
|
1806
|
-
}
|
|
1807
|
-
|
|
1808
|
-
:host([effect="side-fall"]) .content {
|
|
1809
|
-
transform-style: preserve-3d;
|
|
1810
|
-
transform: translate(30%) translateZ(600px) rotate(10deg);
|
|
1811
|
-
opacity: 0;
|
|
1812
|
-
}
|
|
1813
|
-
|
|
1814
|
-
:host([effect="side-fall"][opened]) .content {
|
|
1815
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
|
|
1816
|
-
transform: translate(0%) translateZ(0) rotate(0deg);
|
|
1817
|
-
opacity: 1;
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
|
-
/* flip-horizontal */
|
|
1821
|
-
:host([effect="flip-horizontal"]) {
|
|
1822
|
-
perspective: 1300px;
|
|
1823
|
-
}
|
|
1824
|
-
|
|
1825
|
-
:host([effect="flip-horizontal"]) .content {
|
|
1826
|
-
transform-style: preserve-3d;
|
|
1827
|
-
transform: rotateY(-70deg);
|
|
1828
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1829
|
-
opacity: 0;
|
|
1830
|
-
}
|
|
1831
|
-
|
|
1832
|
-
:host([effect="flip-horizontal"][opened]) .content {
|
|
1833
|
-
transform: rotateY(0deg);
|
|
1834
|
-
opacity: 1;
|
|
1835
|
-
}
|
|
1836
|
-
|
|
1837
|
-
/* flip-vertical */
|
|
1838
|
-
:host([effect="flip-vertical"]) {
|
|
1839
|
-
perspective: 1300px;
|
|
1840
|
-
}
|
|
1841
|
-
|
|
1842
|
-
:host([effect="flip-vertical"]) .content {
|
|
1843
|
-
transform-style: preserve-3d;
|
|
1844
|
-
transform: rotateX(-70deg);
|
|
1845
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1846
|
-
opacity: 0;
|
|
1847
|
-
}
|
|
1848
|
-
|
|
1849
|
-
:host([effect="flip-vertical"][opened]) .content {
|
|
1850
|
-
transform: rotateX(0deg);
|
|
1851
|
-
opacity: 1;
|
|
1852
|
-
}
|
|
1853
|
-
|
|
1854
|
-
/* sign-3d */
|
|
1855
|
-
:host([effect="sign-3d"]) {
|
|
1856
|
-
perspective: 1300px;
|
|
1857
|
-
}
|
|
1858
|
-
|
|
1859
|
-
:host([effect="sign-3d"]) .content {
|
|
1860
|
-
transform-style: preserve-3d;
|
|
1861
|
-
transform: rotateX(-60deg);
|
|
1862
|
-
transform-origin: 50% 0;
|
|
1863
|
-
opacity: 0;
|
|
1864
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1865
|
-
}
|
|
1866
|
-
|
|
1867
|
-
:host([effect="sign-3d"][opened]) .content {
|
|
1868
|
-
transform: rotateX(0deg);
|
|
1869
|
-
opacity: 1;
|
|
1870
|
-
}
|
|
1871
|
-
|
|
1872
|
-
/* super-scaled */
|
|
1873
|
-
:host([effect="super-scaled"]) .content {
|
|
1874
|
-
transform: scale(2);
|
|
1875
|
-
opacity: 0;
|
|
1876
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1877
|
-
}
|
|
1878
|
-
|
|
1879
|
-
:host([effect="super-scaled"][opened]) .content {
|
|
1880
|
-
transform: scale(1);
|
|
1881
|
-
opacity: 1;
|
|
1882
|
-
}
|
|
1883
|
-
|
|
1884
|
-
/* slit */
|
|
1885
|
-
:host([effect="slit"]) {
|
|
1886
|
-
perspective: 1300px;
|
|
1887
|
-
}
|
|
1888
|
-
|
|
1889
|
-
:host([effect="slit"]) .content {
|
|
1890
|
-
transform-style: preserve-3d;
|
|
1891
|
-
transform: translateZ(-3000px) rotateY(90deg);
|
|
1892
|
-
opacity: 0;
|
|
1893
|
-
}
|
|
1894
|
-
|
|
1895
|
-
:host([effect="slit"][opened]) .content {
|
|
1896
|
-
animation: slit .7s forwards ease-out;
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
|
-
@keyframes slit {
|
|
1900
|
-
50% {
|
|
1901
|
-
transform: translateZ(-250px) rotateY(89deg);
|
|
1902
|
-
opacity: 1;
|
|
1903
|
-
animation-timing-function: ease-in;}
|
|
1904
|
-
100% {
|
|
1905
|
-
transform: translateZ(0) rotateY(0deg);
|
|
1906
|
-
opacity: 1;
|
|
1907
|
-
}
|
|
1908
|
-
}
|
|
1909
|
-
|
|
1910
|
-
/* rotate-bottom */
|
|
1911
|
-
:host([effect="rotate-bottom"]) {
|
|
1912
|
-
perspective: 1300px;
|
|
1913
|
-
}
|
|
1914
|
-
|
|
1915
|
-
:host([effect="rotate-bottom"]) .content {
|
|
1916
|
-
transform-style: preserve-3d;
|
|
1917
|
-
transform: translateY(100%) rotateX(90deg);
|
|
1918
|
-
transform-origin: 0 100%;
|
|
1919
|
-
opacity: 0;
|
|
1920
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
|
|
1921
|
-
}
|
|
1922
|
-
|
|
1923
|
-
:host([effect="rotate-bottom"][opened]) .content {
|
|
1924
|
-
transform: translateY(0%) rotateX(0deg);
|
|
1925
|
-
opacity: 1;
|
|
1926
|
-
}
|
|
1927
|
-
|
|
1928
|
-
/* rotate-left */
|
|
1929
|
-
:host([effect="rotate-left"]) {
|
|
1930
|
-
perspective: 1300px;
|
|
1931
|
-
}
|
|
1932
|
-
|
|
1933
|
-
:host([effect="rotate-left"]) .content {
|
|
1934
|
-
transform-style: preserve-3d;
|
|
1935
|
-
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
|
|
1936
|
-
transform-origin: 0 100%;
|
|
1937
|
-
opacity: 0;
|
|
1938
|
-
transition: all var(--kemet-modal-transition-speed, 0.3s);
|
|
1939
|
-
}
|
|
1940
|
-
|
|
1941
|
-
:host([effect="rotate-left"][opened]) .content {
|
|
1942
|
-
transform: translateZ(0px) translateX(0%) rotateY(0deg);
|
|
1943
|
-
opacity: 1;
|
|
1944
|
-
}
|
|
1945
|
-
`;customElements.get("kemet-modal")||customElements.define("kemet-modal",class extends Z{static get styles(){return[$t,Et]}static get properties(){return{opened:{type:Boolean,reflect:!0},effect:{type:String,reflect:!0},closeOnClick:{type:Boolean,attribute:"close-on-click"},breakpoint:{type:String},mobile:{type:Boolean,reflect:!0}}}constructor(){super(),this.opened=!1,this.closeOnClick=!1,this.breakpoint="600px",this.addEventListener("kemet-modal-close-pressed",(()=>{this.opened=!1}))}firstUpdated(){this.focusableSelector="body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",this.focusableElements=this.querySelectorAll(this.focusableSelector),this.addEventListener("keyup",(t=>{"Escape"===t.key&&(this.opened=!1)})),this.addEventListener("click",(t=>{this.opened&&this.closeOnClick&&"kemet-modal"===t.target.tagName.toLowerCase()&&(this.opened=!1)})),window.addEventListener("resize",(()=>{this.isMobile()})),this.focusableElements.forEach((t=>{t.addEventListener("keydown",(t=>this.handleFocusableDown(t)))}))}updated(t){t.get("opened")||!0!==this.opened||(setTimeout((()=>{this.focusableElements[0]?.focus()}),100),Q(this,"kemet-modal-opened",this)),t.get("opened")&&!1===this.opened&&Q(this,"kemet-modal-closed",this),this.isMobile()}render(){return I`
|
|
1946
|
-
<div class="content" part="content">
|
|
1947
|
-
<slot></slot>
|
|
1948
|
-
</div>
|
|
1949
|
-
<div class="overlay" part="overlay"></div>
|
|
1950
|
-
`}isMobile(){const t=window.matchMedia(`(max-width: ${this.breakpoint})`);this.mobile=t.matches}handleFocusableDown(t){const e=this.focusableElements[0],s=this.focusableElements[this.focusableElements.length-1];"Tab"===t.key&&(t.shiftKey&&document.activeElement===e?(t.preventDefault(),s.focus()):t.shiftKey||document.activeElement!==s||(t.preventDefault(),e.focus()))}});const St=13,_t=32;window.customElements.define("kemet-popover-close",class extends Z{static get styles(){return[r`
|
|
1951
|
-
button {
|
|
1952
|
-
font: inherit;
|
|
1953
|
-
color: inherit;
|
|
1954
|
-
cursor: pointer;
|
|
1955
|
-
border: 0;
|
|
1956
|
-
background: transparent;
|
|
1957
|
-
}
|
|
1958
|
-
`]}render(){return I`
|
|
1959
|
-
<button @click=${()=>this.close()} @keyup=${t=>this.handleKeyboard(t)}>
|
|
1960
|
-
<slot></slot>
|
|
1961
|
-
</button>
|
|
1962
|
-
`}close(){Q(this,"kemet-popover-close-btn",this)}handleKeyboard(t){t.preventDefault(),t.keyCode!==_t&&t.keyCode!==St||this.close()}});const At=r`
|
|
1963
|
-
#tooltip {
|
|
1964
|
-
display: flex;
|
|
1965
|
-
position: absolute;
|
|
1966
|
-
}
|
|
1967
|
-
|
|
1968
|
-
#tooltip polygon {
|
|
1969
|
-
fill: var(--kemet-popover-background-color, #202020);
|
|
1970
|
-
}
|
|
1971
|
-
|
|
1972
|
-
:host([position="top"]) #tooltip {
|
|
1973
|
-
left: 50%;
|
|
1974
|
-
transform: translateX(-50%);
|
|
1975
|
-
}
|
|
1976
|
-
|
|
1977
|
-
:host([position="right"]) #tooltip {
|
|
1978
|
-
right: 100%;
|
|
1979
|
-
top: 50%;
|
|
1980
|
-
transform-origin: top;
|
|
1981
|
-
transform: translateY(-50%);
|
|
1982
|
-
}
|
|
1983
|
-
|
|
1984
|
-
:host([position="bottom"]) #tooltip {
|
|
1985
|
-
bottom: 100%;
|
|
1986
|
-
left: 50%;
|
|
1987
|
-
transform-origin: left;
|
|
1988
|
-
transform: translateX(-50%);
|
|
1989
|
-
}
|
|
1990
|
-
|
|
1991
|
-
:host([position="left"]) #tooltip {
|
|
1992
|
-
left: 100%;
|
|
1993
|
-
top: 50%;
|
|
1994
|
-
transform-origin: top;
|
|
1995
|
-
transform: translateY(-50%);
|
|
1996
|
-
}
|
|
1997
|
-
|
|
1998
|
-
/* svg */
|
|
1999
|
-
#tooltip svg {
|
|
2000
|
-
position: relative;
|
|
2001
|
-
}
|
|
2002
|
-
|
|
2003
|
-
:host([position="right"]) svg {
|
|
2004
|
-
transform: rotate(90deg);
|
|
2005
|
-
right: -8px;
|
|
2006
|
-
}
|
|
2007
|
-
|
|
2008
|
-
:host([position="bottom"]) svg {
|
|
2009
|
-
transform: rotate(180deg);
|
|
2010
|
-
right: -8px;
|
|
2011
|
-
}
|
|
2012
|
-
|
|
2013
|
-
:host([position="left"]) svg {
|
|
2014
|
-
transform: rotate(270deg);
|
|
2015
|
-
right: 8px;
|
|
2016
|
-
}
|
|
2017
|
-
`,Ct=r`
|
|
2018
|
-
#custom-tooltip {
|
|
2019
|
-
display: flex;
|
|
2020
|
-
position: absolute;
|
|
2021
|
-
z-index: 3;
|
|
2022
|
-
}
|
|
2023
|
-
|
|
2024
|
-
:host([position="top"]) #custom-tooltip {
|
|
2025
|
-
left: 50%;
|
|
2026
|
-
transform: translateX(-50%);
|
|
2027
|
-
}
|
|
2028
|
-
|
|
2029
|
-
:host([position="right"]) #custom-tooltip {
|
|
2030
|
-
right: 100%;
|
|
2031
|
-
top: 50%;
|
|
2032
|
-
transform-origin: top;
|
|
2033
|
-
transform: translateY(-50%);
|
|
2034
|
-
}
|
|
2035
|
-
|
|
2036
|
-
:host([position="bottom"]) #custom-tooltip {
|
|
2037
|
-
bottom: 100%;
|
|
2038
|
-
left: 50%;
|
|
2039
|
-
transform-origin: left;
|
|
2040
|
-
transform: translateX(-50%);
|
|
2041
|
-
}
|
|
2042
|
-
|
|
2043
|
-
:host([position="left"]) #custom-tooltip {
|
|
2044
|
-
left: 100%;
|
|
2045
|
-
top: 50%;
|
|
2046
|
-
transform-origin: top;
|
|
2047
|
-
transform: translateY(-50%);
|
|
2048
|
-
}
|
|
2049
|
-
|
|
2050
|
-
::slotted([slot="custom-tooltip"]) {
|
|
2051
|
-
display: flex;
|
|
2052
|
-
}
|
|
2053
|
-
`,zt=r`
|
|
2054
|
-
:host([effect="fade"]) #content {
|
|
2055
|
-
opacity: 0;
|
|
2056
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s);
|
|
2057
|
-
}
|
|
2058
|
-
|
|
2059
|
-
:host([effect="fade"][opened]) #content {
|
|
2060
|
-
opacity: 1;
|
|
2061
|
-
}
|
|
2062
|
-
`,Lt=r`
|
|
2063
|
-
:host([effect="scale"]) #content {
|
|
2064
|
-
opacity: 0;
|
|
2065
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s);
|
|
2066
|
-
}
|
|
2067
|
-
|
|
2068
|
-
:host([effect="scale"][opened]) #content {
|
|
2069
|
-
opacity: 1;
|
|
2070
|
-
}
|
|
2071
|
-
|
|
2072
|
-
:host([effect="scale"][position="top"]) #content,
|
|
2073
|
-
:host([effect="scale"][position="bottom"]) #content {
|
|
2074
|
-
transform: translateX(-50%) scale(0.7);
|
|
2075
|
-
}
|
|
2076
|
-
|
|
2077
|
-
:host([effect="scale"][position="top"][opened]) #content,
|
|
2078
|
-
:host([effect="scale"][position="bottom"][opened]) #content {
|
|
2079
|
-
transform: translateX(-50%) scale(1);
|
|
2080
|
-
}
|
|
2081
|
-
|
|
2082
|
-
:host([effect="scale"][position="left"]) #content,
|
|
2083
|
-
:host([effect="scale"][position="right"]) #content {
|
|
2084
|
-
transform: translateY(-50%) scale(0.7);
|
|
2085
|
-
}
|
|
2086
|
-
|
|
2087
|
-
:host([effect="scale"][position="left"][opened]) #content,
|
|
2088
|
-
:host([effect="scale"][position="right"][opened]) #content {
|
|
2089
|
-
transform: translateY(-50%) scale(1);
|
|
2090
|
-
}
|
|
2091
|
-
`,Bt=r`
|
|
2092
|
-
:host([effect="slide"]) #content {
|
|
2093
|
-
opacity: 0;
|
|
2094
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
|
2095
|
-
}
|
|
2096
|
-
|
|
2097
|
-
:host([effect="slide"][opened]) #content {
|
|
2098
|
-
opacity: 1;
|
|
2099
|
-
}
|
|
2100
|
-
|
|
2101
|
-
:host([effect="slide"][position="top"]) #content {
|
|
2102
|
-
transform: translateX(-50%) translateY(20%);
|
|
2103
|
-
}
|
|
2104
|
-
|
|
2105
|
-
:host([effect="slide"][position="top"][opened]) #content {
|
|
2106
|
-
transform: translateX(-50%) translateY(0);
|
|
2107
|
-
}
|
|
2108
|
-
|
|
2109
|
-
:host([effect="slide"][position="bottom"]) #content {
|
|
2110
|
-
transform: translateX(-50%) translateY(-20%);
|
|
2111
|
-
}
|
|
2112
|
-
|
|
2113
|
-
:host([effect="slide"][position="bottom"][opened]) #content {
|
|
2114
|
-
transform: translateX(-50%) translateY(0);
|
|
2115
|
-
}
|
|
2116
|
-
|
|
2117
|
-
:host([effect="slide"][position="right"]) #content {
|
|
2118
|
-
transform: translateY(-50%) translateX(-20%);
|
|
2119
|
-
}
|
|
2120
|
-
|
|
2121
|
-
:host([effect="slide"][position="right"][opened]) #content {
|
|
2122
|
-
transform: translateY(-50%) translateX(0);
|
|
2123
|
-
}
|
|
2124
|
-
|
|
2125
|
-
:host([effect="slide"][position="left"]) #content {
|
|
2126
|
-
transform: translateY(-50%) translateX(20%);
|
|
2127
|
-
}
|
|
2128
|
-
|
|
2129
|
-
:host([effect="slide"][position="left"][opened]) #content {
|
|
2130
|
-
transform: translateY(-50%) translateX(0);
|
|
2131
|
-
}
|
|
2132
|
-
`,It=r`
|
|
2133
|
-
:host([effect="fall"]) {
|
|
2134
|
-
perspective: 1300px;
|
|
2135
|
-
}
|
|
2136
|
-
|
|
2137
|
-
:host([effect="fall"]) #content {
|
|
2138
|
-
transform-style: preserve-3d;
|
|
2139
|
-
opacity: 0;
|
|
2140
|
-
}
|
|
2141
|
-
|
|
2142
|
-
:host([effect="fall"][opened]) #content {
|
|
2143
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;
|
|
2144
|
-
opacity: 1;
|
|
2145
|
-
}
|
|
2146
|
-
|
|
2147
|
-
:host([effect="fall"][position="top"]) #content {
|
|
2148
|
-
transform: translateX(-50%) translateZ(600px) rotateX(20deg);
|
|
2149
|
-
}
|
|
2150
|
-
|
|
2151
|
-
:host([effect="fall"][position="top"][opened]) #content {
|
|
2152
|
-
transform: translateX(-50%) translateZ(0px) rotateX(0deg);
|
|
2153
|
-
}
|
|
2154
|
-
|
|
2155
|
-
:host([effect="fall"][position="bottom"]) #content {
|
|
2156
|
-
transform: translateX(-50%) translateZ(600px) rotateX(20deg);
|
|
2157
|
-
}
|
|
2158
|
-
|
|
2159
|
-
:host([effect="fall"][position="bottom"][opened]) #content {
|
|
2160
|
-
transform: translateX(-50%) translateZ(0px) rotateX(0deg);
|
|
2161
|
-
}
|
|
2162
|
-
|
|
2163
|
-
:host([effect="fall"][position="right"]) #content {
|
|
2164
|
-
transform: translateY(-50%) translateZ(600px) rotateX(20deg);
|
|
2165
|
-
}
|
|
2166
|
-
|
|
2167
|
-
:host([effect="fall"][position="right"][opened]) #content {
|
|
2168
|
-
transform: translateY(-50%) translateZ(0px) rotateX(0deg);
|
|
2169
|
-
}
|
|
2170
|
-
|
|
2171
|
-
:host([effect="fall"][position="left"]) #content {
|
|
2172
|
-
transform: translateY(-50%) translateZ(600px) rotateX(20deg);
|
|
2173
|
-
}
|
|
2174
|
-
|
|
2175
|
-
:host([effect="fall"][position="left"][opened]) #content {
|
|
2176
|
-
transform: translateY(-50%) translateZ(0px) rotateX(0deg);
|
|
2177
|
-
}
|
|
2178
|
-
`,Ot=r`
|
|
2179
|
-
:host([effect="flip-horizontal"]) {
|
|
2180
|
-
perspective: 1300px;
|
|
2181
|
-
}
|
|
2182
|
-
|
|
2183
|
-
:host([effect="flip-horizontal"]) #content {
|
|
2184
|
-
transform-style: preserve-3d;
|
|
2185
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s);
|
|
2186
|
-
opacity: 0;
|
|
2187
|
-
}
|
|
2188
|
-
|
|
2189
|
-
:host([effect="flip-horizontal"][opened]) #content {
|
|
2190
|
-
opacity: 1;
|
|
2191
|
-
}
|
|
2192
|
-
|
|
2193
|
-
:host([effect="flip-horizontal"][position="top"]) #content {
|
|
2194
|
-
transform: translateX(-50%) rotateY(-70deg);
|
|
2195
|
-
}
|
|
2196
|
-
|
|
2197
|
-
:host([effect="flip-horizontal"][position="top"][opened]) #content {
|
|
2198
|
-
transform: translateX(-50%) rotateY(0deg);
|
|
2199
|
-
}
|
|
2200
|
-
|
|
2201
|
-
:host([effect="flip-horizontal"][position="bottom"]) #content {
|
|
2202
|
-
transform: translateX(-50%) rotateY(-70deg);
|
|
2203
|
-
}
|
|
2204
|
-
|
|
2205
|
-
:host([effect="flip-horizontal"][position="bottom"][opened]) #content {
|
|
2206
|
-
transform: translateX(-50%) rotateY(0deg);
|
|
2207
|
-
}
|
|
2208
|
-
|
|
2209
|
-
:host([effect="flip-horizontal"][position="right"]) #content {
|
|
2210
|
-
transform: translateY(-50%) rotateY(-70deg);
|
|
2211
|
-
}
|
|
2212
|
-
|
|
2213
|
-
:host([effect="flip-horizontal"][position="right"][opened]) #content {
|
|
2214
|
-
transform: translateY(-50%) rotateY(0deg);
|
|
2215
|
-
}
|
|
2216
|
-
|
|
2217
|
-
:host([effect="flip-horizontal"][position="left"]) #content {
|
|
2218
|
-
transform: translateY(-50%) rotateY(-70deg);
|
|
2219
|
-
}
|
|
2220
|
-
|
|
2221
|
-
:host([effect="flip-horizontal"][position="left"][opened]) #content {
|
|
2222
|
-
transform: translateY(-50%) rotateY(0deg);
|
|
2223
|
-
}
|
|
2224
|
-
`,Tt=r`
|
|
2225
|
-
:host([effect="flip-vertical"]) {
|
|
2226
|
-
perspective: 1300px;
|
|
2227
|
-
}
|
|
2228
|
-
|
|
2229
|
-
:host([effect="flip-vertical"]) #content {
|
|
2230
|
-
transform-style: preserve-3d;
|
|
2231
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s);
|
|
2232
|
-
opacity: 0;
|
|
2233
|
-
}
|
|
2234
|
-
|
|
2235
|
-
:host([effect="flip-vertical"][opened]) #content {
|
|
2236
|
-
opacity: 1;
|
|
2237
|
-
}
|
|
2238
|
-
|
|
2239
|
-
:host([effect="flip-vertical"][position="top"]) #content {
|
|
2240
|
-
transform: translateX(-50%) rotateX(-70deg);
|
|
2241
|
-
}
|
|
2242
|
-
|
|
2243
|
-
:host([effect="flip-vertical"][position="top"][opened]) #content {
|
|
2244
|
-
transform: translateX(-50%) rotateX(0deg);
|
|
2245
|
-
}
|
|
2246
|
-
|
|
2247
|
-
:host([effect="flip-vertical"][position="bottom"]) #content {
|
|
2248
|
-
transform: translateX(-50%) rotateX(-70deg);
|
|
2249
|
-
}
|
|
2250
|
-
|
|
2251
|
-
:host([effect="flip-vertical"][position="bottom"][opened]) #content {
|
|
2252
|
-
transform: translateX(-50%) rotateX(0deg);
|
|
2253
|
-
}
|
|
2254
|
-
|
|
2255
|
-
:host([effect="flip-vertical"][position="right"]) #content {
|
|
2256
|
-
transform: translateY(-50%) rotateX(-70deg);
|
|
2257
|
-
}
|
|
2258
|
-
|
|
2259
|
-
:host([effect="flip-vertical"][position="right"][opened]) #content {
|
|
2260
|
-
transform: translateY(-50%) rotateX(0deg);
|
|
2261
|
-
}
|
|
2262
|
-
|
|
2263
|
-
:host([effect="flip-vertical"][position="left"]) #content {
|
|
2264
|
-
transform: translateY(-50%) rotateX(-70deg);
|
|
2265
|
-
}
|
|
2266
|
-
|
|
2267
|
-
:host([effect="flip-vertical"][position="left"][opened]) #content {
|
|
2268
|
-
transform: translateY(-50%) rotateX(0deg);
|
|
2269
|
-
}
|
|
2270
|
-
`,Pt=r`
|
|
2271
|
-
:host([effect="sign"]) {
|
|
2272
|
-
perspective: 1300px;
|
|
2273
|
-
}
|
|
2274
|
-
|
|
2275
|
-
:host([effect="sign"]) #content {
|
|
2276
|
-
transform-style: preserve-3d;
|
|
2277
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s);
|
|
2278
|
-
opacity: 0;
|
|
2279
|
-
}
|
|
2280
|
-
|
|
2281
|
-
:host([effect="sign"][opened]) #content {
|
|
2282
|
-
opacity: 1;
|
|
2283
|
-
}
|
|
2284
|
-
|
|
2285
|
-
:host([effect="sign"][position="top"]) #content {
|
|
2286
|
-
transform-origin: 0 100%;
|
|
2287
|
-
transform: translateX(-50%) rotateX(90deg);
|
|
2288
|
-
}
|
|
2289
|
-
|
|
2290
|
-
:host([effect="sign"][position="top"][opened]) #content {
|
|
2291
|
-
transform: translateX(-50%) rotateX(0deg);
|
|
2292
|
-
}
|
|
2293
|
-
|
|
2294
|
-
:host([effect="sign"][position="bottom"]) #content {
|
|
2295
|
-
transform-origin: 100% 0;
|
|
2296
|
-
transform: translateX(-50%) rotateX(90deg);
|
|
2297
|
-
}
|
|
2298
|
-
|
|
2299
|
-
:host([effect="sign"][position="bottom"][opened]) #content {
|
|
2300
|
-
transform: translateX(-50%) rotateX(0deg);
|
|
2301
|
-
}
|
|
2302
|
-
|
|
2303
|
-
:host([effect="sign"][position="right"]) #content {
|
|
2304
|
-
transform-origin: 0 100%;
|
|
2305
|
-
transform: translateY(-50%) rotateY(90deg);
|
|
2306
|
-
}
|
|
2307
|
-
|
|
2308
|
-
:host([effect="sign"][position="right"][opened]) #content {
|
|
2309
|
-
transform: translateY(-50%) rotateY(0deg);
|
|
2310
|
-
}
|
|
2311
|
-
|
|
2312
|
-
:host([effect="sign"][position="left"]) #content {
|
|
2313
|
-
transform-origin: 100% 0;
|
|
2314
|
-
transform: translateY(-50%) rotateY(90deg);
|
|
2315
|
-
}
|
|
2316
|
-
|
|
2317
|
-
:host([effect="sign"][position="left"][opened]) #content {
|
|
2318
|
-
transform: translateY(-50%) rotateY(0deg);
|
|
2319
|
-
}
|
|
2320
|
-
`,Dt=r`
|
|
2321
|
-
:host([effect="super-scaled"]) #content {
|
|
2322
|
-
opacity: 0;
|
|
2323
|
-
transition: all var(--kemet-popover-transition-speed, 0.3s);
|
|
2324
|
-
}
|
|
2325
|
-
|
|
2326
|
-
:host([effect="super-scaled"][opened]) #content {
|
|
2327
|
-
opacity: 1;
|
|
2328
|
-
}
|
|
2329
|
-
|
|
2330
|
-
:host([effect="super-scaled"][position="top"]) #content,
|
|
2331
|
-
:host([effect="super-scaled"][position="bottom"]) #content {
|
|
2332
|
-
transform: translateX(-50%) scale(2);
|
|
2333
|
-
}
|
|
2334
|
-
|
|
2335
|
-
:host([effect="super-scaled"][position="top"][opened]) #content,
|
|
2336
|
-
:host([effect="super-scaled"][position="bottom"][opened]) #content {
|
|
2337
|
-
transform: translateX(-50%) scale(1);
|
|
2338
|
-
}
|
|
2339
|
-
|
|
2340
|
-
:host([effect="super-scaled"][position="left"]) #content,
|
|
2341
|
-
:host([effect="super-scaled"][position="right"]) #content {
|
|
2342
|
-
transform: translateY(-50%) scale(2);
|
|
2343
|
-
}
|
|
2344
|
-
|
|
2345
|
-
:host([effect="super-scaled"][position="left"][opened]) #content,
|
|
2346
|
-
:host([effect="super-scaled"][position="right"][opened]) #content {
|
|
2347
|
-
transform: translateY(-50%) scale(1);
|
|
2348
|
-
}
|
|
2349
|
-
`,Mt=13,Ut=32,Xt=27;customElements.get("kemet-popover")||customElements.define("kemet-popover",class extends Z{static get styles(){return[r`
|
|
2350
|
-
:host {
|
|
2351
|
-
display: inline-block;
|
|
2352
|
-
position: relative;
|
|
2353
|
-
z-index: unset;
|
|
2354
|
-
}
|
|
2355
|
-
|
|
2356
|
-
#trigger {
|
|
2357
|
-
display: inline-block;
|
|
2358
|
-
cursor: pointer;
|
|
2359
|
-
}
|
|
2360
|
-
|
|
2361
|
-
::slotted([slot="trigger"]) {
|
|
2362
|
-
position: relative;
|
|
2363
|
-
/* z-index: 2; */
|
|
2364
|
-
}
|
|
2365
|
-
|
|
2366
|
-
#content {
|
|
2367
|
-
visibility: hidden;
|
|
2368
|
-
pointer-events: none;
|
|
2369
|
-
width: var(--kemet-popover-width, 100%);
|
|
2370
|
-
height: var(--kemet-popover-height, auto);
|
|
2371
|
-
position: absolute;
|
|
2372
|
-
z-index: -1;
|
|
2373
|
-
}
|
|
2374
|
-
|
|
2375
|
-
:host([opened]) #content {
|
|
2376
|
-
visibility: visible;
|
|
2377
|
-
z-index: 9;
|
|
2378
|
-
pointer-events: auto;
|
|
2379
|
-
}
|
|
2380
|
-
|
|
2381
|
-
::slotted([slot="content"]) {
|
|
2382
|
-
color: var(--kemet-popover-color, #fafafa);
|
|
2383
|
-
display: block;
|
|
2384
|
-
position: relative;
|
|
2385
|
-
z-index: 2;
|
|
2386
|
-
cursor: default;
|
|
2387
|
-
width: 100%;
|
|
2388
|
-
padding: 1rem;
|
|
2389
|
-
box-sizing: border-box;
|
|
2390
|
-
background-color: var(--kemet-popover-background-color, #202020);
|
|
2391
|
-
transform: translate(var(--kemet-popover-content-offset-x, 0), var(--kemet-popover-content-offset-y, 0));
|
|
2392
|
-
}
|
|
2393
|
-
|
|
2394
|
-
:host([position="top"]) #content {
|
|
2395
|
-
bottom: calc(100% + var(--kemet-popover-gap, 1rem));
|
|
2396
|
-
left: 50%;
|
|
2397
|
-
transform: translateX(-50%);
|
|
2398
|
-
}
|
|
2399
|
-
|
|
2400
|
-
:host([position="right"]) #content {
|
|
2401
|
-
left: calc(100% + var(--kemet-popover-gap, 1rem));
|
|
2402
|
-
top: 50%;
|
|
2403
|
-
transform: translateY(-50%);
|
|
2404
|
-
}
|
|
2405
|
-
|
|
2406
|
-
:host([position="bottom"]) #content {
|
|
2407
|
-
top: calc(100% + var(--kemet-popover-gap, 1rem));
|
|
2408
|
-
left: 50%;
|
|
2409
|
-
transform: translateX(-50%);
|
|
2410
|
-
}
|
|
2411
|
-
|
|
2412
|
-
:host([position="left"]) #content {
|
|
2413
|
-
right: calc(100% + var(--kemet-popover-gap, 1rem));
|
|
2414
|
-
top: 50%;
|
|
2415
|
-
transform: translateY(-50%);
|
|
2416
|
-
}
|
|
2417
|
-
|
|
2418
|
-
#overlay {
|
|
2419
|
-
display: none;
|
|
2420
|
-
}
|
|
2421
|
-
|
|
2422
|
-
:host([opened]) #overlay {
|
|
2423
|
-
display: block;
|
|
2424
|
-
position: fixed;
|
|
2425
|
-
top: 0;
|
|
2426
|
-
right: 0;
|
|
2427
|
-
bottom: 0;
|
|
2428
|
-
left: 0;
|
|
2429
|
-
z-index: 1;
|
|
2430
|
-
width: 100%;
|
|
2431
|
-
height: 100%;
|
|
2432
|
-
min-height: 100vh;
|
|
2433
|
-
}
|
|
2434
|
-
`,At,Ct,zt,Lt,Bt,It,Ot,Tt,Pt,Dt]}static get properties(){return{opened:{type:Boolean,reflect:!0},effect:{string:String,reflect:!0},position:{type:String,reflect:!0},tooltip:{type:Boolean},customTooltip:{type:Boolean,attribute:"custom-tooltip"},fireOn:{type:String,attribute:"fire-on"},clickOutside:{type:Boolean,attribute:"click-outside"},smart:{type:Boolean}}}constructor(){super(),this.opened=!1,this.effect=null,this.position="top",this.tooltip=!1,this.customTooltip=!1,this.fireOn="hover",this.clickOutside=!1,this.smart=!0,this.addEventListener("kemet-popover-close-btn",this.close.bind(this))}firstUpdated(){this.focusableSelector="body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popover-close",this.focusableElements=this.querySelectorAll(this.focusableSelector),this.contentElement=this.shadowRoot.querySelector('slot[name="content"]').assignedNodes({flatten:!0})[0],window.addEventListener("resize",(()=>{this.smartContent()})),"click"===this.fireOn&&this.focusableElements.forEach((t=>{t.addEventListener("keydown",(t=>this.handleFocusableDown(t)))}))}updated(t){t.get("opened")||!0!==this.opened||Q(this,"kemet-popover-opened",this),t.get("opened")&&!1===this.opened&&Q(this,"kemet-popover-closed",this),this.smartContent()}render(){return I`
|
|
2435
|
-
<div
|
|
2436
|
-
id="trigger"
|
|
2437
|
-
part="trigger"
|
|
2438
|
-
tabIndex="0"
|
|
2439
|
-
@click=${"click"===this.fireOn?t=>this.toggle(t):null}
|
|
2440
|
-
@keyup=${"click"===this.fireOn?t=>this.handleKeyUp(t):null}
|
|
2441
|
-
@mouseover=${"click"!==this.fireOn?()=>this.open():null}
|
|
2442
|
-
@focus=${"click"!==this.fireOn?()=>this.open():null}
|
|
2443
|
-
@mouseout=${"click"!==this.fireOn?()=>this.close():null}
|
|
2444
|
-
@blur=${"click"!==this.fireOn?()=>this.close():null}>
|
|
2445
|
-
<slot name="trigger"></slot>
|
|
2446
|
-
<div id="content" part="content">
|
|
2447
|
-
<slot name="content"></slot>
|
|
2448
|
-
${this.makeTooltip()}
|
|
2449
|
-
</div>
|
|
2450
|
-
</div>
|
|
2451
|
-
${this.makeOverlay()}
|
|
2452
|
-
`}open(){this.opened=!0}close(){this.opened=!1}toggle(t){const e="trigger"===t.target.getAttribute("slot"),s="trigger"===t.target.getAttribute("part");(e||s)&&(this.opened?this.close():this.open())}handleKeyUp(t){t.preventDefault(),t.keyCode===Xt&&this.close(),t.keyCode!==Mt&&t.keyCode!==Ut||this.toggle()}handleFocusableDown(t){const e=this.focusableElements[0],s=this.focusableElements[this.focusableElements.length-1];"Tab"===t.key&&(t.shiftKey&&document.activeElement===e?(t.preventDefault(),s.focus()):t.shiftKey||document.activeElement!==s||(t.preventDefault(),e.focus()))}makeTooltip(){return this.customTooltip?I`
|
|
2453
|
-
<div id="custom-tooltip" part="custom-tooltip">
|
|
2454
|
-
<slot name="custom-tooltip"></slot>
|
|
2455
|
-
</div>
|
|
2456
|
-
`:this.tooltip?I`
|
|
2457
|
-
<div id="tooltip" part="tooltip">
|
|
2458
|
-
<svg width="29px" height="14px" enable-background="new 0 0 29 14" viewBox="0 0 29 14">
|
|
2459
|
-
<polygon points="0.15,0 14.5,14.35 28.85,0 "/>
|
|
2460
|
-
</svg>
|
|
2461
|
-
</div>
|
|
2462
|
-
`:null}makeOverlay(){return this.clickOutside?I`
|
|
2463
|
-
<div id="overlay" @keyup=${()=>this.close()} @click=${()=>this.close()}></div>
|
|
2464
|
-
`:null}smartContent(){if(this.smart){this.contentElement.style.removeProperty("left"),this.contentElement.style.removeProperty("right"),this.contentElement.style.removeProperty("top"),this.contentElement.style.removeProperty("bottom");const t=this.contentElement.getBoundingClientRect(),e=24,s=t.left<0,i=window.innerWidth-t.right<0,o=t.top<0,r=t.bottom>window.innerHeight;"top"===this.position&&o&&this.setPosition(t),"right"===this.position&&i&&this.setPosition(t),"bottom"===this.position&&r&&this.setPosition(t),"left"===this.position&&s&&this.setPosition(t),s?this.contentElement.style.left=`${Math.abs(t.left-e)}px`:this.contentElement.style.removeProperty("left"),i?this.contentElement.style.right=`${Math.abs(window.innerWidth-t.right-e)}px`:this.contentElement.style.removeProperty("right"),o?this.contentElement.style.top=`${Math.abs(t.top-e)}px`:this.contentElement.style.removeProperty("top"),r?this.contentElement.style.bottom=`${Math.abs(t.bottom-window.innerHeight-e)}px`:this.contentElement.style.removeProperty("bottom")}}setPosition(t){t.top>0?this.position="top":t.right<window.innerWidth?this.position="right":t.bottom<window.innerHeight&&(this.position="bottom")}});customElements.get("kemet-radio")||customElements.define("kemet-radio",class extends Z{static get styles(){return[r`
|
|
2465
|
-
*,
|
|
2466
|
-
*::before,
|
|
2467
|
-
*::after {
|
|
2468
|
-
box-sizing: border-box;
|
|
2469
|
-
}
|
|
2470
|
-
|
|
2471
|
-
:host {
|
|
2472
|
-
display: inline-block;
|
|
2473
|
-
}
|
|
2474
|
-
|
|
2475
|
-
:host([disabled]) {
|
|
2476
|
-
opacity: 0.5;
|
|
2477
|
-
}
|
|
2478
|
-
|
|
2479
|
-
label {
|
|
2480
|
-
cursor: pointer;
|
|
2481
|
-
display: inline-flex;
|
|
2482
|
-
gap: 0.5rem;
|
|
2483
|
-
align-items: center;
|
|
2484
|
-
margin-right: 0.5rem;
|
|
2485
|
-
}
|
|
2486
|
-
|
|
2487
|
-
input {
|
|
2488
|
-
cursor: pointer;
|
|
2489
|
-
margin: 0;
|
|
2490
|
-
padding: 0;
|
|
2491
|
-
width: var(--kemet-radio-size, 18px);
|
|
2492
|
-
height: var(--kemet-radio-size, 18px);
|
|
2493
|
-
position: absolute;
|
|
2494
|
-
opacity: 0;
|
|
2495
|
-
}
|
|
2496
|
-
|
|
2497
|
-
button {
|
|
2498
|
-
display: inline-flex;
|
|
2499
|
-
align-items: center;
|
|
2500
|
-
justify-content: center;
|
|
2501
|
-
width: var(--kemet-radio-size, 18px);
|
|
2502
|
-
height: var(--kemet-radio-size, 18px);
|
|
2503
|
-
padding: 0;
|
|
2504
|
-
border-radius: 50%;
|
|
2505
|
-
background: none;
|
|
2506
|
-
border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
|
|
2507
|
-
}
|
|
2508
|
-
|
|
2509
|
-
[part='dot'] {
|
|
2510
|
-
display: inline-flex;
|
|
2511
|
-
border-radius: 50%;
|
|
2512
|
-
width: var(--kemet-radio-size, 18px);
|
|
2513
|
-
height: var(--kemet-radio-size, 18px);
|
|
2514
|
-
background: var(--kemet-radio-dot-color, var(--kemet-color-primary));
|
|
2515
|
-
border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
|
|
2516
|
-
box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));
|
|
2517
|
-
}
|
|
2518
|
-
|
|
2519
|
-
:host([filled]) [part='dot'] {
|
|
2520
|
-
background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));
|
|
2521
|
-
box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));
|
|
2522
|
-
}
|
|
2523
|
-
`]}static get properties(){return{label:{type:String},checked:{type:Boolean,reflect:!0},name:{type:String},value:{type:String},disabled:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},filled:{type:Boolean,reflect:!0}}}constructor(){super(),this.label="",this.name=this.closest("kemet-radios").name||"radio-button",this.disabled=!1}firstUpdated(){this.input=this.shadowRoot.querySelector("input"),this.setAttribute("role","radio"),this.checked?this.setAttribute("aria-checked","true"):this.setAttribute("aria-checked","false")}render(){return I`
|
|
2524
|
-
<label part="label">
|
|
2525
|
-
<input
|
|
2526
|
-
type="radio"
|
|
2527
|
-
name=${it(this.name)}
|
|
2528
|
-
.value=${this.value}
|
|
2529
|
-
.checked=${ct(this.checked)}
|
|
2530
|
-
.disabled=${this.disabled}
|
|
2531
|
-
@blur=${()=>this.handleBlur()}
|
|
2532
|
-
@focus=${()=>this.handleFocus()}
|
|
2533
|
-
/>
|
|
2534
|
-
<button part="button" aria-label=${this.label}>${this.makeDot()}</button>
|
|
2535
|
-
<span part="text">${this.label}</span>
|
|
2536
|
-
</label>
|
|
2537
|
-
`}click(){this.input.click()}blur(){this.input.blur()}focus(){this.input.focus()}handleBlur(){this.focused=!1,Q(this,"kemet-radio-focused",!1)}handleFocus(){this.focused=!0,Q(this,"kemet-radio-focused",!0)}makeDot(){return this.checked?I`
|
|
2538
|
-
<span part="dot"></span>
|
|
2539
|
-
`:null}});customElements.get("kemet-radios")||customElements.define("kemet-radios",class extends Z{static get styles(){return[r`
|
|
2540
|
-
*,
|
|
2541
|
-
*::before,
|
|
2542
|
-
*::after {
|
|
2543
|
-
box-sizing: border-box;
|
|
2544
|
-
}
|
|
2545
|
-
|
|
2546
|
-
:host {
|
|
2547
|
-
display: block;
|
|
2548
|
-
}
|
|
2549
|
-
|
|
2550
|
-
fieldset {
|
|
2551
|
-
border: 0;
|
|
2552
|
-
margin: 0;
|
|
2553
|
-
padding: 0;
|
|
2554
|
-
display: flex;
|
|
2555
|
-
gap: 0.5rem;
|
|
2556
|
-
}
|
|
2557
|
-
|
|
2558
|
-
legend {
|
|
2559
|
-
margin-bottom: 1rem;
|
|
2560
|
-
}
|
|
2561
|
-
|
|
2562
|
-
:host([axis='vertical']) fieldset {
|
|
2563
|
-
flex-direction: column;
|
|
2564
|
-
}
|
|
2565
|
-
|
|
2566
|
-
[part='message'] {
|
|
2567
|
-
display: block;
|
|
2568
|
-
margin-top: 0.5rem;
|
|
2569
|
-
}
|
|
2570
|
-
|
|
2571
|
-
:host([status='error']) [part='message'] {
|
|
2572
|
-
color: var(--kemet-color-error);
|
|
2573
|
-
}
|
|
2574
|
-
|
|
2575
|
-
:host([status='warning']) [part='message'] {
|
|
2576
|
-
color: var(--kemet-color-error);
|
|
2577
|
-
}
|
|
2578
|
-
`]}static get properties(){return{legend:{type:String},axis:{type:String,reflect:!0},value:{type:String},name:{type:String},status:{type:String,reflect:!0},message:{type:String},required:{type:Boolean}}}constructor(){super(),this.legend="",this.axis="horizontal",this.name="radios",this.status="standard",this.formSubmitController=new et(this)}firstUpdated(){this.radios=this.querySelectorAll("kemet-radio"),this.setAttribute("role","radiogroup")}render(){return I`
|
|
2579
|
-
<fieldset part="fieldset">
|
|
2580
|
-
${""!==this.legend?I`<legend part="legend">${this.legend}</legend>`:null}
|
|
2581
|
-
<slot @click=${t=>this.handleClick(t)} @keydown=${t=>this.handleKeyDown(t)} @slotchange=${()=>this.handleSlotChange()}></slot>
|
|
2582
|
-
</fieldset>
|
|
2583
|
-
${this.makeMessage()}
|
|
2584
|
-
`}handleClick(t){const{target:e}=t;this.radios.forEach((t=>{t.checked=!1,t.tabIndex=t===e?0:-1,t.setAttribute("aria-checked","false")})),e.disabled||(e.checked=!0,e.setAttribute("aria-checked","true"),this.value=e.value,this.status="standard",Q(this,"kemet-radios-change",e))}handleKeyDown(t){const e=Array.from(this.radios),s=["ArrowRight","ArrowDown"].includes(t.key)?1:-1;let i=(e.findIndex((t=>t.checked))??e[0])+s;["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)&&(i<0&&(i=e.length-1),i>e.length-1&&(i=0),this.radios.forEach((t=>{t.checked=!1,t.tabIndex=-1})),this.radios[i].focus(),this.radios[i].checked=!0,this.radios[i].tabIndex=0)}handleSlotChange(){const t=Array.from(this.radios).find((t=>t.checked));this.radios.forEach((t=>{t.tabIndex=-1,t.input.tabIndex=-1})),t&&(t.tabIndex=0)}makeMessage(){return"error"===this.status||"warning"===this.status?I`<span part="message">${this.message}</span>`:null}checkValidity(){return!this.required||!!this.value}});
|
|
2585
|
-
/**
|
|
2586
|
-
* @license
|
|
2587
|
-
* Copyright 2017 Google LLC
|
|
2588
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
2589
|
-
*/
|
|
2590
|
-
class Nt extends dt{constructor(t){if(super(t),this.it=T,t.type!==rt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===T||null==t)return this.ft=void 0,this.it=t;if(t===O)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.ft;this.it=t;const e=[t];return e.raw=e,this.ft={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Nt.directiveName="unsafeHTML",Nt.resultType=1;const qt=lt(Nt);customElements.get("kemet-rotator")||customElements.define("kemet-rotator",class extends Z{static get styles(){return r`
|
|
2591
|
-
:host {
|
|
2592
|
-
display: flex;
|
|
2593
|
-
}
|
|
2594
|
-
|
|
2595
|
-
.rotator__slide {
|
|
2596
|
-
pointer-events: none;
|
|
2597
|
-
}
|
|
2598
|
-
|
|
2599
|
-
.rotator__slide--active {
|
|
2600
|
-
pointer-events: auto;
|
|
2601
|
-
}
|
|
2602
|
-
|
|
2603
|
-
/* fade effect */
|
|
2604
|
-
:host([effect="fade"]) .rotator {
|
|
2605
|
-
display: inline-flex;
|
|
2606
|
-
flex-wrap: nowrap;
|
|
2607
|
-
flex-direction: row;
|
|
2608
|
-
}
|
|
2609
|
-
|
|
2610
|
-
:host([effect="fade"]) .rotator__slide {
|
|
2611
|
-
width: 100%;
|
|
2612
|
-
flex: none;
|
|
2613
|
-
opacity: 0;
|
|
2614
|
-
box-sizing: border-box;
|
|
2615
|
-
transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
|
|
2616
|
-
}
|
|
2617
|
-
|
|
2618
|
-
:host([effect="fade"]) .rotator__slide:not(:first-child) {
|
|
2619
|
-
margin-left: -100%; /* this is the bulk of the overlay trick */
|
|
2620
|
-
}
|
|
2621
|
-
|
|
2622
|
-
:host([effect="fade"]) .rotator__slide--active {
|
|
2623
|
-
opacity: 1;
|
|
2624
|
-
}
|
|
2625
|
-
|
|
2626
|
-
/* flip effect */
|
|
2627
|
-
:host([effect="flip"]) .rotator {
|
|
2628
|
-
display: flex;
|
|
2629
|
-
position: relative;
|
|
2630
|
-
|
|
2631
|
-
perspective: 500;
|
|
2632
|
-
}
|
|
2633
|
-
|
|
2634
|
-
:host([effect="flip"]) .rotator__slide {
|
|
2635
|
-
display: block;
|
|
2636
|
-
width: auto;
|
|
2637
|
-
position: absolute;
|
|
2638
|
-
top: -20px;
|
|
2639
|
-
left: 0;
|
|
2640
|
-
|
|
2641
|
-
opacity: 0;
|
|
2642
|
-
|
|
2643
|
-
transform: rotateX(90deg);
|
|
2644
|
-
transform-origin: 0% 0%;
|
|
2645
|
-
transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
|
|
2646
|
-
}
|
|
2647
|
-
|
|
2648
|
-
:host([effect="flip"]) .rotator__slide--active {
|
|
2649
|
-
top: 0;
|
|
2650
|
-
opacity: 1;
|
|
2651
|
-
|
|
2652
|
-
transform: rotateX(0deg);
|
|
2653
|
-
}
|
|
2654
|
-
|
|
2655
|
-
:host([effect="flip"]) .rotator__slide--prev {
|
|
2656
|
-
top: 40px;;
|
|
2657
|
-
transform: rotateX(-90deg);
|
|
2658
|
-
}
|
|
2659
|
-
`}static get properties(){return{activeSlide:{type:Number},width:{type:String},height:{type:String},messages:{type:Array},effect:{type:String,reflect:!0},rotationSpeed:{type:Number,attribute:"rotation-speed"}}}constructor(){super(),this.activeSlide=0,this.messages=[],this.effect="fade",this.rotationSpeed=3,this.width="auto",this.height="auto"}firstUpdated(){this.prevSlide=null,window.addEventListener("resize",this.setDimensions.bind(this))}updated(t){const e=!!t.get("width"),s=!!t.get("height");this.setDimensions(),e||s||setTimeout((()=>{this.rotationSpeed>0&&this.nextSlide()}),1e3*this.rotationSpeed)}render(){const t="flip"===this.effect?`width:${this.width};`:"",e="flip"===this.effect?`height:${this.height};`:"";return I`
|
|
2660
|
-
<span class="rotator" style="${t} ${e}">
|
|
2661
|
-
${this.makeMessages()}
|
|
2662
|
-
</span>
|
|
2663
|
-
`}makeMessages(){return this.messages.map(((t,e)=>{const s=this.activeSlide===e?"rotator__slide--active":"",i=this.prevSlide===e?"rotator__slide--prev":"";return I`
|
|
2664
|
-
<span class="rotator__slide ${s} ${i}">
|
|
2665
|
-
${qt(t)}
|
|
2666
|
-
</span>
|
|
2667
|
-
`}))}setDimensions(){if("flip"===this.effect){this.width=`${this.offsetWidth}px`;const t=this.shadowRoot.querySelectorAll(".rotator__slide");let e=0;t.forEach((t=>{t.offsetHeight>e&&(e=t.offsetHeight)})),this.height=`${e}px`}}nextSlide(){this.activeSlide<this.messages.length-1?(this.activeSlide+=1,this.prevSlide=this.activeSlide-1):(this.activeSlide=0,this.prevSlide=this.messages.length-1)}});customElements.get("kemet-scroll-link")||customElements.define("kemet-scroll-link",class extends Z{static get styles(){return r`
|
|
2668
|
-
:host {
|
|
2669
|
-
cursor: pointer;
|
|
2670
|
-
display: inline-block;
|
|
2671
|
-
}
|
|
2672
|
-
`}static get properties(){return{element:{type:Object},target:{type:Object},xOffset:{type:Number,attribute:"x-offset",reflect:!0},yOffset:{type:Number,attribute:"y-offset",reflect:!0}}}constructor(){super(),this.element=this.element||window,this.target=this.target||document.querySelector("body"),this.xOffset=0,this.yOffset=0}firstUpdated(){this.keyCodes={ENTER:13,SPACE:32},this.isSmoothSupported="scrollBehavior"in document.documentElement.style}render(){return I`
|
|
2673
|
-
<div tabindex="0" @click=${()=>this.handleScroll()} @keyup=${t=>this.handleKeyup(t)}>
|
|
2674
|
-
<slot></slot>
|
|
2675
|
-
</div>
|
|
2676
|
-
`}handleKeyup(t){t.keyCode!==this.keyCodes.ENTER&&t.keyCode!==this.keyCodes.SPACE||this.handleScroll()}handleScroll(){const t=this.target.offsetTop+this.yOffset,e=this.target.offsetLeft+this.xOffset;this.isSmoothSupported?this.element.scrollTo({top:t,left:e,behavior:"smooth"}):this.element.scrollTo(e,t)}});customElements.get("kemet-scroll-nav")||customElements.define("kemet-scroll-nav",class extends Z{static get styles(){return[r`
|
|
2677
|
-
:host {
|
|
2678
|
-
display: block;
|
|
2679
|
-
box-sizing: border-box;
|
|
2680
|
-
padding: var(--kemet-scroll-nav-padding, 1rem 2rem);
|
|
2681
|
-
background-color: var(--kemet-scroll-nav-background, #fafafa);
|
|
2682
|
-
transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
|
|
2683
|
-
}
|
|
2684
|
-
|
|
2685
|
-
:host([transform]),
|
|
2686
|
-
:host([effect="resize"]) {
|
|
2687
|
-
position: fixed;
|
|
2688
|
-
top: 0;
|
|
2689
|
-
width: 100%;
|
|
2690
|
-
}
|
|
2691
|
-
|
|
2692
|
-
:host([effect="resize"]) {
|
|
2693
|
-
height: var(--kemet-scroll-nav-resize-height, 400px);
|
|
2694
|
-
}
|
|
2695
|
-
|
|
2696
|
-
:host([transform][effect="resize"]) {
|
|
2697
|
-
height: var(--kemet-scroll-nav-resize-height-transformed, 100px);
|
|
2698
|
-
}
|
|
2699
|
-
`]}static get properties(){return{effect:{type:String,reflect:!0},transform:{type:Boolean,reflect:!0},offset:{type:Number}}}constructor(){super(),this.effect="sticky",this.transform=!1,this.offset=0}render(){return I`
|
|
2700
|
-
<slot></slot>
|
|
2701
|
-
`}firstUpdated(){const t=this.offsetTop,e=this.offsetHeight;window.addEventListener("scroll",(()=>{this.handleScroll(t,e)}))}handleScroll(t,e){const s="sticky"===this.effect?t+this.offset:e+this.offset;window.pageYOffset>=s?this.transform=!0:this.transform=!1}});customElements.get("kemet-scroll-snap-paginator")||customElements.define("kemet-scroll-snap-paginator",class extends Z{static get styles(){return r`
|
|
2702
|
-
:host {
|
|
2703
|
-
margin: auto;
|
|
2704
|
-
padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);
|
|
2705
|
-
}
|
|
2706
|
-
|
|
2707
|
-
nav {
|
|
2708
|
-
display: flex;
|
|
2709
|
-
gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);
|
|
2710
|
-
}
|
|
2711
|
-
|
|
2712
|
-
:host([center]) nav {
|
|
2713
|
-
justify-content: center;
|
|
2714
|
-
}
|
|
2715
|
-
|
|
2716
|
-
.link {
|
|
2717
|
-
cursor: pointer;
|
|
2718
|
-
color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));
|
|
2719
|
-
}
|
|
2720
|
-
`}static get properties(){return{slides:{type:Array},icon:{type:String},size:{type:Number},center:{type:Boolean,reflect:!0},hideFocusedLinks:{type:Boolean,attribute:"hide-focused-links"},useNumberPages:{type:Boolean,reflect:!0,attribute:"use-number-pages"},useLabelPages:{type:Boolean,reflect:!0,attribute:"use-label-pages"}}}constructor(){super(),this.slides=[],this.icon="circle-fill",this.size=16,this.hideFocusedLinks=!1,this.useNumberPages=!1,this.useLabelPages=!1}updated(){const t=this.closest("kemet-scroll-snap");t&&t.addEventListener("kemet-scroll-snap-make-slides",(t=>{this.slides=t.detail}))}render(){return I`
|
|
2721
|
-
<nav part="nav">${this.makePagination()}</nav>
|
|
2722
|
-
`}makePagination(){let t=0;return this.slides?this.slides.map((e=>(t=t+=1,e.focused?I`
|
|
2723
|
-
<span part="span">${this.pageDisplay(e,t)}</span>
|
|
2724
|
-
`:I`
|
|
2725
|
-
<span
|
|
2726
|
-
class="link"
|
|
2727
|
-
tabindex="0"
|
|
2728
|
-
role="button"
|
|
2729
|
-
@keyup="${t=>this.handleKeyboardInput(t,e.id)}"
|
|
2730
|
-
@click=${()=>this.slideLink(e.id)}
|
|
2731
|
-
aria-label="${e.label}">
|
|
2732
|
-
${this.pageDisplay(e,t)}
|
|
2733
|
-
</span>
|
|
2734
|
-
`))):null}pageDisplay(t,e){return this.useNumberPages?e:this.useLabelPages?t.label:I`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`}slideLink(t){Q(this,"kemet-scroll-snap-focus",t)}handleKeyboardInput(t,e){"Enter"!==t.code&&"Space"!==t.code||this.slideLink(e)}});customElements.get("kemet-scroll-snap-slide")||customElements.define("kemet-scroll-snap-slide",class extends Z{static get styles(){return r`
|
|
2735
|
-
:host {
|
|
2736
|
-
display: block;
|
|
2737
|
-
flex: 0 0 auto;
|
|
2738
|
-
width: var(--kemet-scroll-snap-slide-width, 100%);
|
|
2739
|
-
scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
|
|
2740
|
-
}
|
|
2741
|
-
`}static get properties(){return{focused:{type:Boolean,reflect:!0},index:{type:String,reflect:!0},label:{type:String,reflect:!0}}}updated(){this.addTabIndex()}render(){return I`
|
|
2742
|
-
<slot></slot>
|
|
2743
|
-
`}addTabIndex(){this.setAttribute("tabindex","0")}});customElements.get("kemet-scroll-snap")||customElements.define("kemet-scroll-snap",class extends Z{static get styles(){return r`
|
|
2744
|
-
*,
|
|
2745
|
-
*::after,
|
|
2746
|
-
*::before {
|
|
2747
|
-
box-sizing: border-box;
|
|
2748
|
-
}
|
|
2749
|
-
|
|
2750
|
-
:host {
|
|
2751
|
-
display: flex;
|
|
2752
|
-
flex-direction: column;
|
|
2753
|
-
width: 100%;
|
|
2754
|
-
}
|
|
2755
|
-
|
|
2756
|
-
:host([axis='horizontal']) {
|
|
2757
|
-
margin: auto;
|
|
2758
|
-
max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);
|
|
2759
|
-
}
|
|
2760
|
-
|
|
2761
|
-
:host([pagination="left"]),
|
|
2762
|
-
:host([pagination="right"]) {
|
|
2763
|
-
flex-direction: row;
|
|
2764
|
-
}
|
|
2765
|
-
|
|
2766
|
-
:host([pagination="none"]) ::slotted([slot="pagination"]) {
|
|
2767
|
-
display: none;
|
|
2768
|
-
}
|
|
2769
|
-
|
|
2770
|
-
:host([pagination="top"]) ::slotted([slot="pagination"]),
|
|
2771
|
-
:host([pagination="left"]) ::slotted([slot="pagination"]) {
|
|
2772
|
-
order: -1;
|
|
2773
|
-
}
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
::slotted([slot="slides"]) {
|
|
2777
|
-
display: flex;
|
|
2778
|
-
gap: var(--kemet-scroll-snap-gap, 1.5rem);
|
|
2779
|
-
scroll-snap-type: x mandatory;
|
|
2780
|
-
overflow-x: scroll;
|
|
2781
|
-
}
|
|
2782
|
-
|
|
2783
|
-
/* vertical */
|
|
2784
|
-
:host([axis="vertical"]) {
|
|
2785
|
-
height: var(--kemet-scroll-snap-vertical-height, 100vh);
|
|
2786
|
-
}
|
|
2787
|
-
|
|
2788
|
-
:host([axis="vertical"]) ::slotted([slot="slides"]) {
|
|
2789
|
-
flex-direction: column;
|
|
2790
|
-
overflow-x: hidden;
|
|
2791
|
-
scroll-snap-type: y mandatory;
|
|
2792
|
-
padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);
|
|
2793
|
-
}
|
|
2794
|
-
`}static get properties(){return{axis:{type:String,reflect:!0},pagination:{type:String,reflect:!0}}}constructor(){super(),this.axis="horizontal",this.pagination="bottom",this.addEventListener("kemet-scroll-snap-focus",(t=>{this.focusSlide(t.detail)}))}firstUpdated(){this.isTouchDevice="ontouchstart"in document.documentElement,this.slides=[],this.setFocusedSlides()}updated(){this.setVerticalAttribute()}render(){return I`
|
|
2795
|
-
<slot name="slides"></slot>
|
|
2796
|
-
<slot name="pagination"></slot>
|
|
2797
|
-
`}setFocusedSlides(){const t=this.querySelectorAll("kemet-scroll-snap-slide"),e=this.querySelector('[slot="slides"]'),s=new IntersectionObserver((t=>{t.forEach((t=>{const{target:e}=t;t.intersectionRatio>=.5?e.focused=!0:e.focused=!1})),this.makeSlides()}),{root:e,rootMargin:"0px",threshold:.5});t.forEach((t=>{s.observe(t)}))}makeSlides(){const t=[];this.querySelectorAll("kemet-scroll-snap-slide").forEach(((e,s)=>{const i=e;i.index=s,t.push({id:s,focused:i.focused,label:i.label})})),this.slides=t,Q(this,"kemet-scroll-snap-make-slides",this.slides)}focusSlide(t){this.querySelector(`kemet-scroll-snap-slide[index="${t}"]`).scrollIntoView({behavior:"smooth",block:"nearest"})}setVerticalAttribute(){"vertical"===this.axis&&document.querySelector("html").setAttribute("kemet-scroll-snap-axis","vertical")}});customElements.get("kemet-option")||customElements.define("kemet-option",class extends Z{static get properties(){return{label:{type:String},value:{type:String},disabled:{type:Boolean},selected:{type:Boolean}}}constructor(){super(),this.value=""}render(){return I`<slot></slot>`}});customElements.get("kemet-select")||customElements.define("kemet-select",class extends Z{static get styles(){return[r`
|
|
2798
|
-
:host {
|
|
2799
|
-
position: relative;
|
|
2800
|
-
display: block;
|
|
2801
|
-
}
|
|
2802
|
-
|
|
2803
|
-
select {
|
|
2804
|
-
display: block;
|
|
2805
|
-
font-size: 1rem;
|
|
2806
|
-
width: 100%;
|
|
2807
|
-
padding: var(--kemet-select-padding, 1rem);
|
|
2808
|
-
border: var(--kemet-select-border, 1px solid var(--kemet-color-primary));
|
|
2809
|
-
appearance: none;
|
|
2810
|
-
box-sizing: border-box;
|
|
2811
|
-
background-color: transparent;
|
|
2812
|
-
}
|
|
2813
|
-
|
|
2814
|
-
:host([status='error']) select {
|
|
2815
|
-
border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));
|
|
2816
|
-
}
|
|
2817
|
-
|
|
2818
|
-
:host([status='success']) select {
|
|
2819
|
-
border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));
|
|
2820
|
-
}
|
|
2821
|
-
|
|
2822
|
-
:host([status='warning']) select {
|
|
2823
|
-
border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));
|
|
2824
|
-
}
|
|
2825
|
-
|
|
2826
|
-
:host([disabled]) select {
|
|
2827
|
-
opacity: 0.5;
|
|
2828
|
-
}
|
|
2829
|
-
|
|
2830
|
-
:host([rounded]) select {
|
|
2831
|
-
border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));
|
|
2832
|
-
}
|
|
2833
|
-
|
|
2834
|
-
:host([filled]) select {
|
|
2835
|
-
border: var(--kemet-select-border-filled, none);
|
|
2836
|
-
color: var(--kemet-select-color-filled, var(--kemet-color-white));
|
|
2837
|
-
background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));
|
|
2838
|
-
}
|
|
2839
|
-
|
|
2840
|
-
:host([filled]) kemet-icon {
|
|
2841
|
-
color: var(--kemet-select-color-filled, var(--kemet-color-white));
|
|
2842
|
-
}
|
|
2843
|
-
|
|
2844
|
-
:host([status='error'][filled]) select {
|
|
2845
|
-
background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));
|
|
2846
|
-
}
|
|
2847
|
-
|
|
2848
|
-
:host([status='success'][filled]) select {
|
|
2849
|
-
background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));
|
|
2850
|
-
}
|
|
2851
|
-
|
|
2852
|
-
:host([status='warning'][filled]) select {
|
|
2853
|
-
background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));
|
|
2854
|
-
}
|
|
2855
|
-
|
|
2856
|
-
kemet-icon {
|
|
2857
|
-
position: absolute;
|
|
2858
|
-
right: var(--kemet-select-icon-right, 1rem);
|
|
2859
|
-
top: 50%;
|
|
2860
|
-
transform: translateY(-50%);
|
|
2861
|
-
}
|
|
2862
|
-
`]}static get properties(){return{slug:{type:String},name:{type:String},value:{type:String},options:{type:Array},status:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},multiple:{type:Boolean},icon:{type:String},iconSize:{type:Number,attribute:"icon-size"},filled:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0}}}constructor(){super(),this.name="select",this.icon="chevron-down",this.iconSize=16,this.formSubmitController=new et(this),this.control=this.closest("kemet-field")}firstUpdated(){this.select=this.shadowRoot.querySelector("select"),this.selectedOption=this.querySelector("[selected]"),this.value=this.selectedOption?this.selectedOption.value:""}render(){return I`
|
|
2863
|
-
<select
|
|
2864
|
-
part="select"
|
|
2865
|
-
id=${this.slug}
|
|
2866
|
-
name=${this.name}
|
|
2867
|
-
?required=${this.required}
|
|
2868
|
-
?disabled=${this.disabled}
|
|
2869
|
-
?multiple=${this.multiple}
|
|
2870
|
-
@change=${this.handleChange}
|
|
2871
|
-
@focus=${this.handleFocus}
|
|
2872
|
-
@blur=${this.handleBlur}
|
|
2873
|
-
@invalid=${this.handleInvalid}
|
|
2874
|
-
>
|
|
2875
|
-
${this.makeOptions()}
|
|
2876
|
-
</select>
|
|
2877
|
-
${this.makeIcon()}
|
|
2878
|
-
<slot @slotchange=${()=>this.makeOptions()}></slot>
|
|
2879
|
-
`}makeOptions(){return this.options=[],this.optionElements=this.querySelectorAll("kemet-option"),this.optionElements.forEach((t=>{this.options=this.options.concat({label:t.label,value:t.value,disabled:t.disabled,selected:t.selected})})),this.options.map((t=>I`<option value=${t.value} ?disabled=${t.disabled} ?selected=${t.selected}>
|
|
2880
|
-
${t.label}
|
|
2881
|
-
</option>`))}makeIcon(){return this.icon||""!==this.icon?I`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`:null}handleFocus(){this.hasFocus=!0,Q(this,"kemet-input-focused",!0)}handleBlur(){this.hasFocus=!1,Q(this,"kemet-input-focused",!1),this.select.checkValidity(),this.select.checkValidity()||(this.invalid=!0,this.status="error",this.control.status="error",Q(this,"kemet-input-status",{status:"error",validity:this.select.validity,element:this}))}handleChange(){this.value=this.select.value,this.select.checkValidity()&&(this.invalid=!1,this.status="standard",Q(this,"kemet-input-status",{status:"standard",validity:this.select.validity,element:this}))}handleInvalid(){this.invalid=!0,this.status="error",Q(this,"kemet-input-status",{status:"error",validity:this.select.validity,element:this})}checkValidity(){this.select.checkValidity()}});customElements.get("kemet-sortable-item")||customElements.define("kemet-sortable-item",class extends Z{static get styles(){return[r`
|
|
2882
|
-
:host {
|
|
2883
|
-
cursor: grab;
|
|
2884
|
-
display: block;
|
|
2885
|
-
padding: 1rem;
|
|
2886
|
-
border: 1px solid var(--kemet-color-primary);
|
|
2887
|
-
}
|
|
2888
|
-
|
|
2889
|
-
:host([ghost]) {
|
|
2890
|
-
opacity: 0.5;
|
|
2891
|
-
border-style: dashed;
|
|
2892
|
-
}
|
|
2893
|
-
`]}static get properties(){return{ghost:{type:Boolean,reflect:!0}}}firstUpdated(){this.draggable=!0}render(){return I`<slot></slot>`}});"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var Rt={exports:{}};!function(t){function e(){var t={dragEvents:"ondragstart"in document.documentElement,draggable:"draggable"in document.documentElement,touchEvents:"ontouchstart"in document.documentElement,userAgentSupportingNativeDnD:void 0},e=!!window.chrome||/chrome/i.test(navigator.userAgent);return t.userAgentSupportingNativeDnD=!(/iPad|iPhone|iPod|Android/.test(navigator.userAgent)||e&&t.touchEvents),t}function s(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}function i(t){if(t&&Object.keys(t).forEach((function(e){_[e]=t[e]})),!_.forceApply){var i=e();if(i.userAgentSupportingNativeDnD&&i.draggable&&i.dragEvents)return!1}return E=s(),_.holdToDrag?n("touchstart",w,!1):n("touchstart",o,!1),!0}function o(t){if(!S){var e=r(t);if(e)try{S=new T(t,_,e,a)}catch(e){throw a(_,t,3),e}}}function r(t){var e=t.target;do{if(!1!==e.draggable&&e.getAttribute&&"true"===e.getAttribute("draggable"))return e}while((e=e.parentNode)&&e!==document.body)}function a(t,e,s){if(0===s&&t.defaultActionOverride)try{t.defaultActionOverride(e),e.defaultPrevented}catch(t){}S=null}function n(t,e,s){void 0===s&&(s=!0),document.addEventListener(t,e,!!E&&{passive:s})}function l(t,e){document.removeEventListener(t,e)}function d(t){return 0===t.length?0:t.reduce((function(t,e){return e+t}),0)/t.length}function h(t){return t&&t.tagName}function c(t,e){for(var s=0;s<t.changedTouches.length;s++)if(t.changedTouches[s].identifier===e)return!0;return!1}function p(t,e,s,i,o,r,a){void 0===a&&(a=null);var n=e.changedTouches[0],l=new Event(s,{bubbles:!0,cancelable:i});l.dataTransfer=r,l.relatedTarget=a,l.screenX=n.screenX,l.screenY=n.screenY,l.clientX=n.clientX,l.clientY=n.clientY,l.pageX=n.pageX,l.pageY=n.pageY;var d=t.getBoundingClientRect();return l.offsetX=l.clientX-d.left,l.offsetY=l.clientY-d.top,l}function u(t,e,s){for(var i=[],o=[],r=0;r<e.touches.length;r++){var a=e.touches[r];i.push(a[t+"X"]),o.push(a[t+"Y"])}s.x=d(i),s.y=d(o)}function m(t,e){if(1===t.nodeType){for(var s=getComputedStyle(t),i=0;i<s.length;i++){var o=s[i];e.style.setProperty(o,s.getPropertyValue(o),s.getPropertyPriority(o))}e.style.pointerEvents="none",e.removeAttribute("id"),e.removeAttribute("class"),e.removeAttribute("draggable")}if(t.hasChildNodes())for(i=0;i<t.childNodes.length;i++)m(t.childNodes[i],e.childNodes[i])}function f(t){var e=t.cloneNode(!0);return m(t,e),e.style.position="absolute",e.style.left="0px",e.style.top="0px",e.style.zIndex="999999",e.classList.add(B),e.classList.add(O),e}function g(t){return z.map((function(e){var s=t.style[e+"transform"];return s&&"none"!==s?s.replace(/translate\(\D*\d+[^,]*,\D*\d+[^,]*\)\s*/g,""):""}))}function v(t,e,s,i,o){void 0===o&&(o=!0);var r=e.x,a=e.y;i&&(r+=i.x,a+=i.y),o&&(r-=parseInt(t.offsetWidth,10)/2,a-=parseInt(t.offsetHeight,10)/2);for(var n="translate3d("+r+"px,"+a+"px, 0)",l=0;l<z.length;l++){var d=z[l]+"transform";t.style[d]=n+" "+s[l]}}function b(t,e,s,i){var o=getComputedStyle(t);if("hidden"!==o.visibility&&"none"!==o.display){e.classList.add(I);var r=getComputedStyle(e),a=parseFloat(r.transitionDuration);if(isNaN(a)||0===a)i();else{var n=t.getBoundingClientRect(),l={x:n.left,y:n.top};l.x+=document.body.scrollLeft||document.documentElement.scrollLeft,l.y+=document.body.scrollTop||document.documentElement.scrollTop,l.x-=parseInt(o.marginLeft,10),l.y-=parseInt(o.marginTop,10);var d=parseFloat(r.transitionDelay),h=Math.round(1e3*(a+d));v(e,l,s,void 0,!1),setTimeout(i,h)}}else i()}function k(t,e){return t?t===A[0]?C[0]:0===t.indexOf(A[1])||t===A[7]?C[1]:0===t.indexOf(A[4])?C[3]:t===A[6]?C[2]:C[1]:3===e.nodeType&&"A"===e.tagName?C[3]:C[1]}function y(t,e,s,i,o,r,a){void 0===r&&(r=!0),void 0===a&&(a=null);var n=p(e,s,t,r,document.defaultView,o,a),l=!e.dispatchEvent(n);return i.g=0,l}function x(t,e){if(!t||t===A[7])return e;if(e===C[1]){if(0===t.indexOf(C[1]))return C[1]}else if(e===C[3]){if(0===t.indexOf(C[3])||t.indexOf("Link")>-1)return C[3]}else if(e===C[2]&&(0===t.indexOf(C[2])||t.indexOf("Move")>-1))return C[2];return C[0]}function w(t){var e=t.target,s=function(){r.off(),a.off(),n.off(),clearTimeout(i)},i=setTimeout((function(){r.off(),a.off(),n.off(),o(t)}),_.holdToDrag),r=$(e,"touchend",s,this),a=$(e,"touchcancel",s,this),n=$(window,"scroll",s,this)}function $(t,e,s,i){return i&&(s=s.bind(i)),t.addEventListener(e,s),{off:function(){return t.removeEventListener(e,s)}}}var E,S,_={iterationInterval:150},A=["none","copy","copyLink","copyMove","link","linkMove","move","all"],C=["none","copy","move","link"],z=["","-webkit-"],L="dnd-poly-",B=L+"drag-image",I=L+"snapback",O=L+"icon",T=function(){function t(t,e,s,i){this.h=t,this.i=e,this.j=s,this.k=i,this.l=0,this.m=null,this.o=null,this.p=t,this.q=t.changedTouches[0],this.s=this.t.bind(this),this.u=this.v.bind(this),n("touchmove",this.s,!1),n("touchend",this.u,!1),n("touchcancel",this.u,!1)}return t.prototype.A=function(){var t=this;this.l=1,this.B=C[0],this.C={D:{},F:void 0,g:3,G:[]},this.H={x:null,y:null},this.I={x:null,y:null};var e=this.j;if(this.J=new P(this.C,(function(s,i,o){e=s,"number"!=typeof i&&"number"!=typeof o||(t.K={x:i||0,y:o||0})})),this.C.g=2,this.J.dropEffect=C[0],y("dragstart",this.j,this.p,this.C,this.J))return this.l=3,this.L(),!1;if(u("page",this.p,this.I),this.M=f(e),this.N=g(this.M),!this.K)if(this.i.dragImageOffset)this.K={x:this.i.dragImageOffset.x,y:this.i.dragImageOffset.y};else if(this.i.dragImageCenterOnTouch){var s=getComputedStyle(e);this.K={x:0-parseInt(s.marginLeft,10),y:0-parseInt(s.marginTop,10)}}else{var i=e.getBoundingClientRect();s=getComputedStyle(e),this.K={x:i.left-this.q.clientX-parseInt(s.marginLeft,10)+i.width/2,y:i.top-this.q.clientY-parseInt(s.marginTop,10)+i.height/2}}return v(this.M,this.I,this.N,this.K,this.i.dragImageCenterOnTouch),document.body.appendChild(this.M),this.O=setInterval((function(){t.P||(t.P=!0,t.R(),t.P=!1)}),this.i.iterationInterval),!0},t.prototype.L=function(){this.O&&(clearInterval(this.O),this.O=null),l("touchmove",this.s),l("touchend",this.u),l("touchcancel",this.u),this.M&&(this.M.parentNode.removeChild(this.M),this.M=null),this.k(this.i,this.p,this.l)},t.prototype.t=function(t){var e=this;if(!1!==c(t,this.q.identifier)){if(this.p=t,0===this.l){var s=void 0;if(this.i.dragStartConditionOverride)try{s=this.i.dragStartConditionOverride(t)}catch(t){s=!1}else s=1===t.touches.length;return s?void(!0===this.A()&&(this.h.preventDefault(),t.preventDefault())):void this.L()}if(t.preventDefault(),u("client",t,this.H),u("page",t,this.I),this.i.dragImageTranslateOverride)try{var i=!1;if(this.i.dragImageTranslateOverride(t,{x:this.H.x,y:this.H.y},this.m,(function(t,s){e.M&&(i=!0,e.H.x+=t,e.H.y+=s,e.I.x+=t,e.I.y+=s,v(e.M,e.I,e.N,e.K,e.i.dragImageCenterOnTouch))})),i)return}catch(t){}v(this.M,this.I,this.N,this.K,this.i.dragImageCenterOnTouch)}},t.prototype.v=function(t){if(!1!==c(t,this.q.identifier)){if(this.i.dragImageTranslateOverride)try{this.i.dragImageTranslateOverride(void 0,void 0,void 0,(function(){}))}catch(t){}if(0===this.l)return void this.L();t.preventDefault(),this.l="touchcancel"===t.type?3:2}},t.prototype.R=function(){var t=this,e=this.B;this.C.g=3,this.J.dropEffect=C[0];var s=y("drag",this.j,this.p,this.C,this.J);if(s&&(this.B=C[0]),s||2===this.l||3===this.l)return this.S(this.l)?void b(this.j,this.M,this.N,(function(){t.T()})):void this.T();var i=document.elementFromPoint(this.H.x,this.H.y),o=this.o;i!==this.m&&i!==this.o&&(this.m=i,null!==this.o&&(this.C.g=3,this.J.dropEffect=C[0],y("dragexit",this.o,this.p,this.C,this.J,!1)),null===this.m?this.o=this.m:(this.C.g=3,this.J.dropEffect=k(this.C.F,this.j),y("dragenter",this.m,this.p,this.C,this.J)?(this.o=this.m,this.B=x(this.J.effectAllowed,this.J.dropEffect)):this.m!==document.body&&(this.o=document.body))),o!==this.o&&h(o)&&(this.C.g=3,this.J.dropEffect=C[0],y("dragleave",o,this.p,this.C,this.J,!1,this.o)),h(this.o)&&(this.C.g=3,this.J.dropEffect=k(this.C.F,this.j),!1===y("dragover",this.o,this.p,this.C,this.J)?this.B=C[0]:this.B=x(this.J.effectAllowed,this.J.dropEffect)),e!==this.B&&this.M.classList.remove(L+e);var r=L+this.B;!1===this.M.classList.contains(r)&&this.M.classList.add(r)},t.prototype.S=function(t){var e=this.B===C[0]||null===this.o||3===t;return e?h(this.o)&&(this.C.g=3,this.J.dropEffect=C[0],y("dragleave",this.o,this.p,this.C,this.J,!1)):h(this.o)&&(this.C.g=1,this.J.dropEffect=this.B,!0===y("drop",this.o,this.p,this.C,this.J)?this.B=this.J.dropEffect:this.B=C[0]),e},t.prototype.T=function(){this.C.g=3,this.J.dropEffect=this.B,y("dragend",this.j,this.p,this.C,this.J,!1),this.l=2,this.L()},t}(),P=function(){function t(t,e){this.U=t,this.V=e,this.W=C[0]}return Object.defineProperty(t.prototype,"types",{get:function(){if(0!==this.U.g)return Object.freeze(this.U.G)},enumerable:!0,configurable:!0}),t.prototype.setData=function(t,e){if(2===this.U.g){if(t.indexOf(" ")>-1)throw new Error("illegal arg: type contains space");this.U.D[t]=e,-1===this.U.G.indexOf(t)&&this.U.G.push(t)}},t.prototype.getData=function(t){if(1===this.U.g||2===this.U.g)return this.U.D[t]||""},t.prototype.clearData=function(t){if(2===this.U.g){if(t&&this.U.D[t]){delete this.U.D[t];var e=this.U.G.indexOf(t);return void(e>-1&&this.U.G.splice(e,1))}this.U.D={},this.U.G=[]}},t.prototype.setDragImage=function(t,e,s){2===this.U.g&&this.V(t,e,s)},Object.defineProperty(t.prototype,"effectAllowed",{get:function(){return this.U.F},set:function(t){2===this.U.g&&A.indexOf(t)>-1&&(this.U.F=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropEffect",{get:function(){return this.W},set:function(t){0!==this.U.g&&A.indexOf(t)>-1&&(this.W=t)},enumerable:!0,configurable:!0}),t}();t.polyfill=i,Object.defineProperty(t,"__esModule",{value:!0})}(Rt.exports);customElements.get("kemet-sortable")||customElements.define("kemet-sortable",class extends Z{static get styles(){return[r`
|
|
2894
|
-
:host {
|
|
2895
|
-
display: flex;
|
|
2896
|
-
gap: 1rem;
|
|
2897
|
-
flex-direction: column;
|
|
2898
|
-
}
|
|
2899
|
-
`]}firstUpdated(){Rt.exports.polyfill(),this.addEventListener("dragstart",(t=>this.handleDragStart(t)),!1),this.addEventListener("dragenter",(t=>{t.preventDefault()}))}render(){return I`<slot></slot>`}handleDragStart(t){this.sortableItem=t.target,this.addEventListener("dragover",(t=>this.handleDragOver(t)),!1),this.addEventListener("dragend",(t=>this.handleDragEnd(t)),!1),setTimeout((()=>{this.sortableItem.ghost=!0}),0)}handleDragOver(t){t.preventDefault();const{target:e}=t;if(e&&"KEMET-SORTABLE-ITEM"===e.tagName){const s=(t=>{const e=t.target.getBoundingClientRect();return{x:t.pageX-e.left,y:t.pageY-e.top}})(t),i=(t=>{const e=t.getBoundingClientRect();return(e.bottom-e.top)/2})(t.target);s.y>i?this.insertBefore(this.sortableItem,e.nextSibling):this.insertBefore(this.sortableItem,e)}}handleDragEnd(t){t.preventDefault(),this.sortableItem.ghost=!1,Q(this,"kemet-sortable-drag-end",{event:t,current:this.sortableItem,all:this.querySelectorAll("kemet-sortable-item")})}});customElements.get("kemet-svg")||customElements.define("kemet-svg",class extends Z{static get styles(){return r`
|
|
2900
|
-
:host {
|
|
2901
|
-
display: inline-block;
|
|
2902
|
-
}
|
|
2903
|
-
|
|
2904
|
-
svg {
|
|
2905
|
-
width: 100%;
|
|
2906
|
-
height: 100%;
|
|
2907
|
-
}
|
|
2908
|
-
`}static get properties(){return{set:{type:String},svg:{type:String},size:{type:Number},ratio:{type:String},viewBox:{type:String}}}constructor(){super(),this.set="svgs",this.ratio="none",this.viewBox="0 0 128 128"}updated(){this.setSize(),this.getIcon()}render(){return I`
|
|
2909
|
-
<svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}"></svg>
|
|
2910
|
-
`}setSize(){this.size&&(this.style.width=`${this.size}px`,this.style.height=`${this.size}px`)}getIcon(){let t;const e=document.kemetSVGs[this.set];e.forEach(((s,i)=>{const o=s.getAttribute("id");o&&o===this.svg&&(t=e[i])})),t?this.fillSVG(t):console.error(`Could not find svg "${this.svg}" in set "${this.set}".`)}fillSVG(t){const e=t.cloneNode(!0),s=this.shadowRoot.querySelector("svg"),i=s.querySelector("g");i&&i.remove(),s.appendChild(e)}});customElements.get("kemet-svgs")||customElements.define("kemet-svgs",class extends Z{static get styles(){return r`
|
|
2911
|
-
:host {
|
|
2912
|
-
display: none;
|
|
2913
|
-
}
|
|
2914
|
-
`}static get properties(){return{set:{type:String}}}constructor(){super(),this.set="svgs"}firstUpdated(){this.slotElement=this.shadowRoot.querySelector("slot"),document.kemetSVGs=document.kemetSVGs||{},this.populateIcons(),this.slotElement.addEventListener("slotchange",this.populateIcons())}render(){return I`<slot></slot>`}populateIcons(){const t=this.slotElement.assignedElements()[0],e=t?t.querySelectorAll("defs > g"):null;e&&(document.kemetSVGs[this.set]=e)}});customElements.define("kemet-tab-panel",class extends Z{static get styles(){return r`
|
|
2915
|
-
:host {
|
|
2916
|
-
width: 100%;
|
|
2917
|
-
flex: 0 0 auto;
|
|
2918
|
-
}
|
|
2919
|
-
|
|
2920
|
-
::slotted(img) {
|
|
2921
|
-
max-width: 100%;
|
|
2922
|
-
}
|
|
2923
|
-
|
|
2924
|
-
:host(.fade) {
|
|
2925
|
-
opacity: 0;
|
|
2926
|
-
pointer-events: none;
|
|
2927
|
-
transition: opacity var(--kemet-tab-panel-fade-speed, 0.5s) ease;
|
|
2928
|
-
}
|
|
2929
|
-
|
|
2930
|
-
:host(.fade[selected]) {
|
|
2931
|
-
opacity: 1;
|
|
2932
|
-
pointer-events: auto;
|
|
2933
|
-
}
|
|
2934
|
-
|
|
2935
|
-
:host(.fade.push) {
|
|
2936
|
-
margin-left: -100%;
|
|
2937
|
-
}
|
|
2938
|
-
|
|
2939
|
-
:host(.vertical) {
|
|
2940
|
-
display: none;
|
|
2941
|
-
}
|
|
2942
|
-
|
|
2943
|
-
:host(.vertical[selected]) {
|
|
2944
|
-
display: block;
|
|
2945
|
-
}
|
|
2946
|
-
`}static get properties(){return{selected:{type:Boolean,reflect:!0},panel:{type:String}}}constructor(){super(),this.selected=!1}updated(){this.a11y()}render(){return I`
|
|
2947
|
-
<slot></slot>
|
|
2948
|
-
`}a11y(){this.setAttribute("role","tabpanel"),this.selected?this.setAttribute("tabindex","0"):this.setAttribute("tabindex","-1")}});customElements.define("kemet-tab",class extends Z{static get styles(){return r`
|
|
2949
|
-
:host {
|
|
2950
|
-
cursor: pointer;
|
|
2951
|
-
display: inline-flex;
|
|
2952
|
-
flex: 0 0 auto;
|
|
2953
|
-
align-items: center;
|
|
2954
|
-
justify-content: center;
|
|
2955
|
-
white-space: nowrap;
|
|
2956
|
-
padding: var(--kemet-tab-padding, 1rem);
|
|
2957
|
-
}
|
|
2958
|
-
|
|
2959
|
-
:host([selected]) {
|
|
2960
|
-
cursor: auto;
|
|
2961
|
-
color: var(--kemet-tab-color, var(--kemet-color-primary));
|
|
2962
|
-
}
|
|
2963
|
-
|
|
2964
|
-
kemet-icon {
|
|
2965
|
-
cursor: pointer;
|
|
2966
|
-
margin-left: 0.5rem;
|
|
2967
|
-
}
|
|
2968
|
-
`}static get properties(){return{selected:{type:Boolean,reflect:!0},link:{type:String},closable:{type:Boolean}}}constructor(){super(),this.selected=!1}firstUpdated(){this.addEventListener("click",this.select.bind(this))}updated(){this.a11y()}render(){return I`
|
|
2969
|
-
<slot></slot>
|
|
2970
|
-
${this.makeCloseable()}
|
|
2971
|
-
`}select(){Q(this,"kemet-tab-selected",this)}a11y(){this.setAttribute("role","tab"),this.selected?(this.setAttribute("aria-selected","true"),this.setAttribute("tabindex","0")):(this.setAttribute("aria-selected","false"),this.setAttribute("tabindex","-1"))}makeCloseable(){return this.closable?I`<kemet-icon icon="x-lg" @click=${()=>this.handleClosable()}></kemet-icon>`:null}handleClosable(){Q(this,"kemet-tab-close",this)}});const Yt=r`
|
|
2972
|
-
:host {
|
|
2973
|
-
--kemet-tabs-ink-size: 6px;
|
|
2974
|
-
--kemet-tabs-ink-radius: 6px;
|
|
2975
|
-
--kemet-tabs-divider-size: 1px;
|
|
2976
|
-
--kemet-tabs-spacer: 1rem;
|
|
2977
|
-
|
|
2978
|
-
display: flex;
|
|
2979
|
-
flex-direction: column;
|
|
2980
|
-
overflow: hidden;
|
|
2981
|
-
position: relative;
|
|
2982
|
-
}
|
|
2983
|
-
|
|
2984
|
-
:host([placement='bottom']) {
|
|
2985
|
-
flex-direction: column-reverse;
|
|
2986
|
-
}
|
|
2987
|
-
|
|
2988
|
-
:host([placement='left']) {
|
|
2989
|
-
flex-direction: row;
|
|
2990
|
-
}
|
|
2991
|
-
|
|
2992
|
-
:host([placement='right']) {
|
|
2993
|
-
flex-direction: row-reverse;
|
|
2994
|
-
}
|
|
2995
|
-
|
|
2996
|
-
:host([placement='left']),
|
|
2997
|
-
:host([placement='right']) {
|
|
2998
|
-
overflow: unset;
|
|
2999
|
-
}
|
|
3000
|
-
|
|
3001
|
-
/* panels */
|
|
3002
|
-
|
|
3003
|
-
[part='panels'] > div {
|
|
3004
|
-
display: flex;
|
|
3005
|
-
}
|
|
3006
|
-
|
|
3007
|
-
:host([panel-effect='slide']) [part='panels'] {
|
|
3008
|
-
transition: transform var(--kemet-tabs-transition-speed, 0.5s) linear;
|
|
3009
|
-
}
|
|
3010
|
-
|
|
3011
|
-
:host([panel-effect='fade']) [part='panels'] {
|
|
3012
|
-
transform: none !important;
|
|
3013
|
-
}
|
|
3014
|
-
|
|
3015
|
-
:host([panel-effect='fade']) [part='panels'] > div {
|
|
3016
|
-
flex-flow: row nowrap;
|
|
3017
|
-
}
|
|
3018
|
-
|
|
3019
|
-
:host([placement='left']) [part='panels'],
|
|
3020
|
-
:host([placement='right']) [part='panels'] {
|
|
3021
|
-
transform: none !important;
|
|
3022
|
-
position: relative;
|
|
3023
|
-
width: 100%;
|
|
3024
|
-
}
|
|
3025
|
-
|
|
3026
|
-
:host([placement='top']) [part='panels'] > div {
|
|
3027
|
-
margin-top: var(--kemet-tabs-spacer);
|
|
3028
|
-
}
|
|
3029
|
-
|
|
3030
|
-
:host([placement='right']) [part='panels'] > div {
|
|
3031
|
-
margin-right: var(--kemet-tabs-spacer);
|
|
3032
|
-
}
|
|
3033
|
-
|
|
3034
|
-
:host([placement='bottom']) [part='panels'] > div {
|
|
3035
|
-
margin-bottom: var(--kemet-tabs-spacer);
|
|
3036
|
-
}
|
|
3037
|
-
|
|
3038
|
-
:host([placement='left']) [part='panels'] > div {
|
|
3039
|
-
margin-left: var(--kemet-tabs-spacer);
|
|
3040
|
-
}
|
|
3041
|
-
|
|
3042
|
-
/* tablist */
|
|
3043
|
-
|
|
3044
|
-
[part='tablist'] {
|
|
3045
|
-
display: flex;
|
|
3046
|
-
}
|
|
3047
|
-
|
|
3048
|
-
:host([placement='left']) [part='tablist'],
|
|
3049
|
-
:host([placement='right']) [part='tablist'] {
|
|
3050
|
-
display: flex;
|
|
3051
|
-
flex-direction: column;
|
|
3052
|
-
align-items: start;
|
|
3053
|
-
}
|
|
3054
|
-
|
|
3055
|
-
:host([tabs-align='center']) [part='tablist'] {
|
|
3056
|
-
justify-content: center;
|
|
3057
|
-
}
|
|
3058
|
-
|
|
3059
|
-
:host([tabs-align='between']) [part='tablist'] {
|
|
3060
|
-
justify-content: space-between;
|
|
3061
|
-
}
|
|
3062
|
-
|
|
3063
|
-
:host([tabs-align='evenly']) [part='tablist'] {
|
|
3064
|
-
justify-content: space-evenly;
|
|
3065
|
-
}
|
|
3066
|
-
|
|
3067
|
-
:host([tabs-align='around']) [part='tablist'] {
|
|
3068
|
-
justify-content: space-around
|
|
3069
|
-
}
|
|
3070
|
-
|
|
3071
|
-
:host([tabs-align='start']) [part='tablist'] {
|
|
3072
|
-
justify-content: flex-start;
|
|
3073
|
-
}
|
|
3074
|
-
|
|
3075
|
-
:host([tabs-align='end']) [part='tablist'] {
|
|
3076
|
-
justify-content: flex-end;
|
|
3077
|
-
}
|
|
3078
|
-
|
|
3079
|
-
:host([overflow]) [part='tablist'] {
|
|
3080
|
-
justify-content: start;
|
|
3081
|
-
}
|
|
3082
|
-
|
|
3083
|
-
/* divider */
|
|
3084
|
-
|
|
3085
|
-
[part='divider'] {
|
|
3086
|
-
height: var(--kemet-tabs-divider-size);
|
|
3087
|
-
background-color: var(--kemet-tabs-divider-color, var(--kemet-color-gray4));
|
|
3088
|
-
}
|
|
3089
|
-
|
|
3090
|
-
:host([placement='left']) [part='divider'],
|
|
3091
|
-
:host([placement='right']) [part='divider'] {
|
|
3092
|
-
width: var(--kemet-tabs-divider-size);
|
|
3093
|
-
height: auto;
|
|
3094
|
-
}
|
|
3095
|
-
|
|
3096
|
-
/* ink */
|
|
3097
|
-
|
|
3098
|
-
[part='ink'] {
|
|
3099
|
-
height: var(--kemet-tabs-ink-size);
|
|
3100
|
-
border-top-left-radius: var(--kemet-tabs-ink-radius);
|
|
3101
|
-
border-top-right-radius: var(--kemet-tabs-ink-radius);
|
|
3102
|
-
transition: all 300ms ease;
|
|
3103
|
-
background-color: var(--kemet-tabs-ink-color, var(--kemet-color-primary));
|
|
3104
|
-
}
|
|
3105
|
-
|
|
3106
|
-
:host([placement='right']) [part='ink'] {
|
|
3107
|
-
width: var(--kemet-tabs-ink-size);
|
|
3108
|
-
border-top-right-radius: var(--kemet-tabs-ink-radius);
|
|
3109
|
-
border-bottom-right-radius: var(--kemet-tabs-ink-radius);
|
|
3110
|
-
border-top-left-radius: 0px;
|
|
3111
|
-
border-bottom-left-radius: 0px;
|
|
3112
|
-
}
|
|
3113
|
-
|
|
3114
|
-
:host([placement='left']) [part='ink'] {
|
|
3115
|
-
width: var(--kemet-tabs-ink-size);
|
|
3116
|
-
border-top-right-radius: 0px;
|
|
3117
|
-
border-bottom-right-radius: 0px;
|
|
3118
|
-
border-top-left-radius: var(--kemet-tabs-ink-radius);
|
|
3119
|
-
border-bottom-left-radius: var(--kemet-tabs-ink-radius);
|
|
3120
|
-
}
|
|
3121
|
-
|
|
3122
|
-
:host([placement='bottom']) [part='ink'] {
|
|
3123
|
-
border-top-right-radius: 0px;
|
|
3124
|
-
border-bottom-right-radius: var(--kemet-tabs-ink-radius);
|
|
3125
|
-
border-top-left-radius: 0px;
|
|
3126
|
-
border-bottom-left-radius: var(--kemet-tabs-ink-radius);
|
|
3127
|
-
}
|
|
3128
|
-
|
|
3129
|
-
/* links */
|
|
3130
|
-
|
|
3131
|
-
:host([overflow]) [part='links'] {
|
|
3132
|
-
overflow-x: auto;
|
|
3133
|
-
margin: 0 2rem;
|
|
3134
|
-
scroll-behavior: smooth;
|
|
3135
|
-
}
|
|
3136
|
-
|
|
3137
|
-
:host([overflow]) [part='links']::-webkit-scrollbar {
|
|
3138
|
-
display: none;
|
|
3139
|
-
width: 0;
|
|
3140
|
-
background: transparent;
|
|
3141
|
-
}
|
|
3142
|
-
|
|
3143
|
-
:host([placement='bottom']) [part='links'] {
|
|
3144
|
-
display: flex;
|
|
3145
|
-
flex-direction: column-reverse;
|
|
3146
|
-
}
|
|
3147
|
-
|
|
3148
|
-
/* icon */
|
|
3149
|
-
|
|
3150
|
-
[icon*='chevron'] {
|
|
3151
|
-
cursor: pointer;
|
|
3152
|
-
position: absolute;
|
|
3153
|
-
top: 1rem;
|
|
3154
|
-
}
|
|
3155
|
-
|
|
3156
|
-
[icon='chevron-left'] {
|
|
3157
|
-
left: 0;
|
|
3158
|
-
}
|
|
3159
|
-
|
|
3160
|
-
[icon='chevron-right'] {
|
|
3161
|
-
right: 0;
|
|
3162
|
-
}
|
|
3163
|
-
|
|
3164
|
-
:host([placement='bottom']) [icon*='chevron'] {
|
|
3165
|
-
top: auto;
|
|
3166
|
-
bottom: 1rem;
|
|
3167
|
-
}
|
|
3168
|
-
`;customElements.get("kemet-tabs")||customElements.define("kemet-tabs",class extends Z{static get styles(){return[Yt]}static get properties(){return{selected:{type:String,reflect:!0},selectedIndex:{type:Number},panelPosition:{type:Number},panelEffect:{type:String,reflect:!0,attribute:"panel-effect"},swipe:{type:Boolean},placement:{type:String,reflect:!0},divider:{type:Boolean},tabsAlign:{type:String,reflect:!0,attribute:"tabs-align"},ink:{type:Object},hideInk:{type:Boolean,attribute:"hide-ink"},overflow:{type:Boolean,reflect:!0}}}constructor(){super(),this.selectedIndex=0,this.panelPosition=0,this.panelEffect="none",this.placement="top",this.tabsAlign="center",this.hideInk=!1,this.addEventListener("kemet-tab-selected",this.tabSelectedChange.bind(this)),this.addEventListener("kemet-tab-close",this.handleTabClose.bind(this)),window.addEventListener("resize",this.handleResize.bind(this))}firstUpdated(){this.tabs=[],this.panels=[],this.xDown=null,this.yDown=null,this.links=this.shadowRoot.getElementById("links")}render(){return I`
|
|
3169
|
-
${this.makeLeftArrow()}
|
|
3170
|
-
${this.makeRightArrow()}
|
|
3171
|
-
<div id="links" part="links">
|
|
3172
|
-
<div part='tablist' role="tablist">
|
|
3173
|
-
<slot name="tab" @slotchange=${()=>this.handleLinksSlotChange()}></slot>
|
|
3174
|
-
</div>
|
|
3175
|
-
${this.makeInk("links")}
|
|
3176
|
-
</div>
|
|
3177
|
-
${this.makeInk("host")}
|
|
3178
|
-
${this.makeDivider()}
|
|
3179
|
-
<section id="panels" part="panels" style="transform:translateX(${this.panelPosition}px);">
|
|
3180
|
-
<div>
|
|
3181
|
-
<slot name="panel" @slotchange=${()=>this.handlePanelsSlotChange()}></slot>
|
|
3182
|
-
</div>
|
|
3183
|
-
</section>
|
|
3184
|
-
`}updated(){this.determineFade()}handleLinksSlotChange(){const t=this.querySelectorAll("kemet-tab");let e=0;t.forEach((t=>{t.index=e,e+=1,this.tabs=this.tabs.concat(t),t.addEventListener("keydown",(t=>this.handleTabKeydown(t)))})),this.tabs.length>0&&(this.tabs[0].selected=!0),setTimeout((()=>{this.selectTab()}),1),this.determineOverflow()}handlePanelsSlotChange(){const t=this.querySelectorAll("kemet-tab-panel"),e=this.shadowRoot.getElementById("panels");let s=0;t.forEach((t=>{t.index=s,s+=1,this.panels=this.panels.concat(t)})),this.panels.length>0&&(this.panels[0].selected=!0),this.swipe&&(e.addEventListener("touchstart",(t=>this.handleTouchStart(t)),!1),e.addEventListener("touchmove",(t=>this.handleTouchMove(t)),!1)),this.selectPanel()}handleLeftArrow(){const t=this.tabs.find((t=>t.selected))||this.tabs[0],e=t.previousElementSibling,s=this.tabs.findIndex((t=>t.selected));this.selected?this.selected=e?e.link:t.link:this.selectedIndex=s>0?s-1:0,e&&(this.links.scrollLeft=e.offsetLeft-20),this.selectTab(),this.selectPanel()}handleRightArrow(){const t=this.tabs.find((t=>t.selected))||this.tabs[this.tabs.length-1],e=t.nextElementSibling,s=this.tabs.findIndex((t=>t.selected));this.selected?this.selected=e?e.link:t.link:this.selectedIndex=s<this.tabs.length-1?s+1:this.tabs.length-1,e&&(this.links.scrollLeft=e.offsetLeft-20),this.selectTab(),this.selectPanel()}handleTabClose(t){const e=t.detail,s=this.panels[e.index];this.selected=this.tabs[0].link,this.selectedIndex=0,s.remove(),e.remove()}makeInk(t){return this.hideInk?null:"top"!==this.placement&&"bottom"!==this.placement||!this.ink||"links"!==t?"left"!==this.placement&&"right"!==this.placement||!this.ink||"host"!==t?null:I`<div part="ink" style="height:${this.ink.height}; transform:translateY(${this.ink.positionY})"></div>`:I`<div part="ink" style="width:${this.ink.width}; transform:translateX(${this.ink.positionX})"></div>`}makeDivider(){return this.divider?I`<div part="divider"></div>`:null}makeLeftArrow(){return this.overflow?I`<kemet-icon icon='chevron-left' size="20" @click=${()=>this.handleLeftArrow()}></kemet-icon>`:null}makeRightArrow(){return this.overflow?I`<kemet-icon icon='chevron-right' size="20" @click=${()=>this.handleRightArrow()}></kemet-icon>`:null}selectTab(){const t=this.links?parseInt(window.getComputedStyle(this.links).marginLeft.replace("px",""),10):0,e=this.overflow?t:0;this.selected?this.tabs.forEach((t=>{const s=t.getAttribute("link");s===this.selected?(t.selected=!0,this.selected=s,this.ink={width:`${t.offsetWidth}px`,height:`${t.offsetHeight}px`,positionX:t.offsetLeft-e+"px",positionY:`${t.offsetTop}px`},this.links.scrollLeft=t.offsetLeft-e):t.selected=!1})):this.tabs.forEach((t=>{this.selectedIndex===t.index?(t.selected=!0,this.ink={width:`${t.offsetWidth}px`,height:`${t.offsetHeight}px`,positionX:t.offsetLeft-e+"px",positionY:`${t.offsetTop}px`},this.links.scrollLeft=t.offsetLeft-e):t.selected=!1}))}selectPanel(){this.selected?this.panels.forEach((t=>{const e=t.getAttribute("panel");"fade"===this.panelEffect&&0!==t.index&&t.classList.add("push"),"left"!==this.placement&&"right"!==this.placement||t.classList.add("vertical"),e===this.selected?(t.selected=!0,this.animatePanel(e,null)):t.selected=!1})):this.panels.forEach((t=>{"fade"===this.panelEffect&&0!==t.index&&t.classList.add("push"),"left"!==this.placement&&"right"!==this.placement||t.classList.add("vertical"),this.selectedIndex===t.index?(t.selected=!0,this.animatePanel(null,t.index)):t.selected=!1}))}dispatchTabChange(){Q(this,"kemet-tab-changed",this.selected)}tabSelectedChange(t){this.selected?this.selected=t.detail.getAttribute("link"):this.selectedIndex=t.detail.index,this.selectTab(),this.selectPanel(),this.dispatchTabChange()}determineFade(){this.panels.forEach((t=>{"fade"===this.panelEffect&&t.classList.add("fade")}))}determineOverflow(){const t=this.offsetWidth,e=this.querySelectorAll("kemet-tab");let s=0;e.forEach((t=>{s+=t.offsetWidth})),s>t&&("top"===this.placement||"bottom"===this.placement)?this.overflow=!0:this.overflow=!1}handleResize(){if(this.tabs&&this.panels){const t=this.links?parseInt(window.getComputedStyle(this.links).marginLeft.replace("px",""),10):0,e=this.overflow?t:0,s=this.tabs.find((t=>t.selected));s&&(this.ink={width:`${s.offsetWidth}px`,height:`${s.offsetHeight}px`,positionX:s.offsetLeft-e+"px",positionY:`${s.offsetTop}px`}),this.determineOverflow(),this.selected?this.animatePanel(this.selected,null):this.animatePanel(null,this.selectedIndex)}}animatePanel(t,e){if(t){const e=this.querySelector(`[panel="${t}"]`);e&&(this.panelPosition=-1*e.offsetLeft)}else this.panels[e]&&(this.panelPosition=-1*this.panels[e].offsetLeft)}handleTabKeydown(t){if(this.selected){switch(t.key){case"Home":this.selected=this.tabs[0].getAttribute("link");break;case"End":this.selected=this.tabs[this.tabs.length-1].getAttribute("link");break;case"ArrowRight":const t=this.querySelector("kemet-tab[selected]").nextElementSibling,e=!!t&&t.getAttribute("link");e&&(this.selected=e);break;case"ArrowLeft":const s=this.querySelector("kemet-tab[selected]").previousElementSibling,i=!!s&&s.getAttribute("link");i&&(this.selected=i)}this.tabs.find((t=>t.link===this.selected)).focus()}else{switch(t.key){case"Home":this.selectedIndex=0;break;case"End":this.selectedIndex=this.tabs.length-1;break;case"ArrowRight":this.selectedIndex<this.tabs.length-1?this.selectedIndex+=1:this.selectedIndex=this.tabs.length-1;break;case"ArrowLeft":this.selectedIndex<1?this.selectedIndex=0:this.selectedIndex-=1}this.tabs[this.selectedIndex].focus()}}handleTouchStart(t){this.xDown=t.touches[0].clientX,this.yDown=t.touches[0].clientY}handleTouchMove(t){if(!this.xDown||!this.yDown)return;const e=t.touches[0].clientX,s=t.touches[0].clientY,i=this.xDown-e,o=this.yDown-s,r=this.querySelector("kemet-tab-panel[selected]").nextElementSibling,a=!!r&&r.getAttribute("panel"),n=this.querySelector("kemet-tab-panel[selected]").previousElementSibling,l=!!n&&n.getAttribute("panel");Math.abs(i)>Math.abs(o)&&(i>0?this.selected?a&&(this.selected=a):this.selectedIndex<this.tabs.length&&(this.selectedIndex+=1):this.selected?l&&(this.selected=l):this.selectedIndex>0&&(this.selectedIndex-=1),this.selectTab(),this.selectPanel()),this.xDown=null,this.yDown=null}});customElements.get("kemet-toggle")||customElements.define("kemet-toggle",class extends Z{static get styles(){return[r`
|
|
3185
|
-
:host {
|
|
3186
|
-
--kemet-toggle-width: 3.5rem;
|
|
3187
|
-
--kemet-toggle-height: 2rem;
|
|
3188
|
-
--kemet-toggle-handle-diameter: 1.6rem;
|
|
3189
|
-
--kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
|
|
3190
|
-
|
|
3191
|
-
display: flex;
|
|
3192
|
-
align-items: center;
|
|
3193
|
-
}
|
|
3194
|
-
|
|
3195
|
-
:host([disabled]) {
|
|
3196
|
-
opacity: 0.5;
|
|
3197
|
-
}
|
|
3198
|
-
|
|
3199
|
-
label {
|
|
3200
|
-
cursor: pointer;
|
|
3201
|
-
display: flex;
|
|
3202
|
-
align-items: center;
|
|
3203
|
-
gap: 1rem;
|
|
3204
|
-
font-size: inherit;
|
|
3205
|
-
color: inherit;
|
|
3206
|
-
}
|
|
3207
|
-
|
|
3208
|
-
:host([disabled]) label {
|
|
3209
|
-
cursor: not-allowed;
|
|
3210
|
-
}
|
|
3211
|
-
|
|
3212
|
-
input {
|
|
3213
|
-
display: none;
|
|
3214
|
-
}
|
|
3215
|
-
|
|
3216
|
-
[part='control'] {
|
|
3217
|
-
position: relative;
|
|
3218
|
-
display: inline-flex;
|
|
3219
|
-
margin: 0;
|
|
3220
|
-
width: var(--kemet-toggle-width);
|
|
3221
|
-
height: var(--kemet-toggle-height);
|
|
3222
|
-
}
|
|
3223
|
-
|
|
3224
|
-
[part='control'] > span {
|
|
3225
|
-
transition: 300ms ease-in-out;
|
|
3226
|
-
}
|
|
3227
|
-
|
|
3228
|
-
[part='track'] {
|
|
3229
|
-
width: var(--kemet-toggle-width);
|
|
3230
|
-
height: var(--kemet-toggle-height);
|
|
3231
|
-
border: var(--kemet-toggle-track-border, none);
|
|
3232
|
-
border-radius: var(--kemet-toggle-height);
|
|
3233
|
-
background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
|
|
3234
|
-
box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
|
|
3235
|
-
}
|
|
3236
|
-
|
|
3237
|
-
:host([squared]) [part='track'] {
|
|
3238
|
-
border-radius: 0;
|
|
3239
|
-
}
|
|
3240
|
-
|
|
3241
|
-
[part='handle'] {
|
|
3242
|
-
position: absolute;
|
|
3243
|
-
top: var(--kemet-toggle-handle-margin);
|
|
3244
|
-
left: var(--kemet-toggle-handle-margin);
|
|
3245
|
-
width: var(--kemet-toggle-handle-diameter);
|
|
3246
|
-
height: var(--kemet-toggle-handle-diameter);
|
|
3247
|
-
transform: translateX(0);
|
|
3248
|
-
border: var(--kemet-toggle-handle-border, none);
|
|
3249
|
-
border-radius: var(--kemet-toggle-handle-diameter);
|
|
3250
|
-
background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
|
|
3251
|
-
box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
|
|
3252
|
-
}
|
|
3253
|
-
|
|
3254
|
-
:host([squared]) [part='handle'] {
|
|
3255
|
-
border-radius: 0;
|
|
3256
|
-
}
|
|
3257
|
-
|
|
3258
|
-
:host([checked]) [part='handle'] {
|
|
3259
|
-
transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
|
|
3260
|
-
}
|
|
3261
|
-
|
|
3262
|
-
.option {
|
|
3263
|
-
font-size: 90%;
|
|
3264
|
-
}
|
|
3265
|
-
`]}static get properties(){return{name:{type:String},checked:{type:Boolean,reflect:!0},disabled:{type:Boolean},label:{type:String},show:{type:Boolean},squared:{type:Boolean},optionChecked:{type:String,attribute:"option-checked"},optionUnchecked:{type:String,attribute:"option-unchecked"}}}constructor(){super(),this.name="toggle-switch",this.disabled=!1,this.checked=!1,this.show=!1,this.squared=!1,this.label="",this.optionChecked="on",this.optionUnchecked="off",this.value=this.checked?this.optionChecked:this.optionUnchecked,this.formSubmitController=new et(this)}render(){return I`
|
|
3266
|
-
<label part="label">
|
|
3267
|
-
${this.makeUncheckedOption()}
|
|
3268
|
-
<span part="control">
|
|
3269
|
-
<span part="track"></span>
|
|
3270
|
-
<span part="handle"></span>
|
|
3271
|
-
</span>
|
|
3272
|
-
<input
|
|
3273
|
-
role="switch"
|
|
3274
|
-
type="checkbox"
|
|
3275
|
-
name="${this.name}"
|
|
3276
|
-
aria-label="${this.label}"
|
|
3277
|
-
aria-checked=${this.checked?"true":"false"}
|
|
3278
|
-
?disabled=${this.disabled}
|
|
3279
|
-
?checked=${this.checked}
|
|
3280
|
-
@change=${this.handleChange}
|
|
3281
|
-
/>
|
|
3282
|
-
${this.makeCheckedOption()}
|
|
3283
|
-
<span part="text">${this.label}</span>
|
|
3284
|
-
</label>
|
|
3285
|
-
`}handleChange(){this.checked=!this.checked,this.value=this.checked?this.optionChecked:this.optionUnchecked,Q(this,"kemet-toggle-change",!0)}makeUncheckedOption(){return this.show?I`<span class="option" part="unchecked">${this.optionUnchecked}</span>`:null}makeCheckedOption(){return this.show?I`<span class="option" part="checked">${this.optionChecked}</span>`:null}});customElements.get("kemet-textarea")||customElements.define("kemet-textarea",class extends Z{static get styles(){return[r`
|
|
3286
|
-
:host {
|
|
3287
|
-
position: relative;
|
|
3288
|
-
display: block;
|
|
3289
|
-
}
|
|
3290
|
-
|
|
3291
|
-
textarea {
|
|
3292
|
-
display: block;
|
|
3293
|
-
width: 100%;
|
|
3294
|
-
padding: var(--kemet-textarea-padding, 1rem);
|
|
3295
|
-
border: var(--kemet-textarea-border, 1px solid var(--kemet-color-primary));
|
|
3296
|
-
appearance: none;
|
|
3297
|
-
box-sizing: border-box;
|
|
3298
|
-
}
|
|
3299
|
-
|
|
3300
|
-
:host([status='error']) textarea {
|
|
3301
|
-
border: var(--kemet-textarea-border-color-error, 1px solid var(--kemet-color-error));
|
|
3302
|
-
}
|
|
3303
|
-
|
|
3304
|
-
:host([status='success']) textarea {
|
|
3305
|
-
border: var(--kemet-textarea-border-color-success, 1px solid var(--kemet-color-success));
|
|
3306
|
-
}
|
|
3307
|
-
|
|
3308
|
-
:host([status='warning']) textarea {
|
|
3309
|
-
border: var(--kemet-textarea-border-color-warning, 1px solid var(--kemet-color-warning));
|
|
3310
|
-
}
|
|
3311
|
-
|
|
3312
|
-
:host([disabled]) textarea {
|
|
3313
|
-
opacity: 0.5;
|
|
3314
|
-
}
|
|
3315
|
-
|
|
3316
|
-
:host([icon-left]) textarea {
|
|
3317
|
-
padding-left: var(--kemet-textarea-icon-left-padding, 3rem);
|
|
3318
|
-
}
|
|
3319
|
-
|
|
3320
|
-
:host([icon-right]) textarea {
|
|
3321
|
-
padding-right: var(--kemet-textarea-icon-right-padding, 3rem);
|
|
3322
|
-
}
|
|
3323
|
-
|
|
3324
|
-
:host([rounded]) textarea {
|
|
3325
|
-
border-radius: var(--kemet-textarea-border-radius-rounded, var(--kemet-border-radius));
|
|
3326
|
-
}
|
|
3327
|
-
|
|
3328
|
-
:host([filled]) textarea {
|
|
3329
|
-
border: var(--kemet-textarea-border-filled, none);
|
|
3330
|
-
color: var(--kemet-textarea-color-filled, var(--kemet-color-white));
|
|
3331
|
-
background-color: var(--kemet-textarea-background-color-filled, var(--kemet-color-primary));
|
|
3332
|
-
}
|
|
3333
|
-
|
|
3334
|
-
:host([filled]) textarea::placeholder {
|
|
3335
|
-
color: var(--kemet-textarea-color-filled, var(--kemet-color-white));
|
|
3336
|
-
}
|
|
3337
|
-
|
|
3338
|
-
:host([status='error'][filled]) textarea {
|
|
3339
|
-
background-color: var(--kemet-textarea-background-color-error, var(--kemet-color-error));
|
|
3340
|
-
}
|
|
3341
|
-
|
|
3342
|
-
:host([status='success'][filled]) textarea {
|
|
3343
|
-
background-color: var(--kemet-textarea-background-color-success, var(--kemet-color-success));
|
|
3344
|
-
}
|
|
3345
|
-
|
|
3346
|
-
:host([status='warning'][filled]) textarea {
|
|
3347
|
-
background-color: var(--kemet-textarea-background-color-warning, var(--kemet-color-warning));
|
|
3348
|
-
}
|
|
3349
|
-
`]}static get properties(){return{slug:{type:String},name:{type:String},placeholder:{type:String},minlength:{type:String},maxlength:{type:String},inputmode:{type:String},autofocus:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean},required:{type:Boolean,reflect:!0},value:{type:String},invalid:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},rows:{type:Number},validateOnBlur:{type:Boolean,attribute:"validate-on-blur"},filled:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0}}}constructor(){super(),this.slug="textarea",this.name="textarea",this.value="",this.status="standard",this.rows=4,this.formSubmitController=new et(this)}firstUpdated(){this.form=this.closest("form"),this.control=this.closest("kemet-field"),this.textarea=this.shadowRoot.querySelector("textarea")}render(){return I`
|
|
3350
|
-
<textarea
|
|
3351
|
-
part="textarea"
|
|
3352
|
-
id=${this.slug}
|
|
3353
|
-
name=${this.name}
|
|
3354
|
-
.value=${ct(this.value)}
|
|
3355
|
-
?disabled=${this.disabled}
|
|
3356
|
-
?readonly=${this.readonly}
|
|
3357
|
-
?required=${this.required}
|
|
3358
|
-
placeholder=${it(this.placeholder)}
|
|
3359
|
-
rows=${it(this.rows)}
|
|
3360
|
-
minlength=${it(this.minlength)}
|
|
3361
|
-
maxlength=${it(this.maxlength)}
|
|
3362
|
-
autocorrect=${it(this.autocorrect)}
|
|
3363
|
-
?autofocus=${this.autofocus}
|
|
3364
|
-
spellcheck=${it(this.spellcheck)}
|
|
3365
|
-
inputmode=${it(this.inputmode)}
|
|
3366
|
-
@change=${this.handleChange}
|
|
3367
|
-
@input=${this.handleInput}
|
|
3368
|
-
@focus=${this.handleFocus}
|
|
3369
|
-
@blur=${this.handleBlur}
|
|
3370
|
-
@invalid=${this.handleInvalid}
|
|
3371
|
-
></textarea>
|
|
3372
|
-
`}handleFocus(){this.hasFocus=!0,this.dispatchEvent(new CustomEvent("kemet-input-focused",{bubbles:!0,composed:!0,detail:!0}))}handleBlur(){this.hasFocus=!1,this.dispatchEvent(new CustomEvent("kemet-input-focused",{bubbles:!0,composed:!0,detail:!1})),this.validateOnBlur&&this.form&&!this.form.noValidate&&(this.textarea.checkValidity(),this.validity=this.textarea.validity)}handleChange(){this.value=this.textarea.value,this.textarea.checkValidity()&&this.checkLimitValidity()&&(this.invalid=!1,this.status="standard",this.validity=this.textarea.validity,this.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"standard",validity:this.textarea.validity,element:this}})))}handleInput(){this.value=this.textarea.value,this.dispatchEvent(new CustomEvent("kemet-input-input",{bubbles:!0,composed:!0,detail:this.value}))}handleInvalid(){this.validity=this.textarea.validity,this.validateOnBlur&&(this.invalid=!0,this.status="error",this.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:this.textarea.validity,element:this}})))}checkLimitValidity(){if(this.control){const t=this.control.querySelector("kemet-count");if(t)return this.value.length<t.limit}return!0}checkValidity(){return this.textarea.checkValidity()}focus(){return this.textarea.focus()}});const Ht=r`
|
|
3373
|
-
:host {
|
|
3374
|
-
--kemet-tracker-step-dot-size: 50px;
|
|
3375
|
-
--kemet-tracker-step-dot-size-mobile: 25px;
|
|
3376
|
-
--kemet-tracker-step-dot-gap: 4px;
|
|
3377
|
-
--kemet-tracker-step-standard-line-weight: 1px;
|
|
3378
|
-
--kemet-tracker-step-completed-line-weight: 3px;
|
|
3379
|
-
--kemet-tracker-step-dot-transition: all 300ms ease-in-out;
|
|
3380
|
-
|
|
3381
|
-
position: relative;
|
|
3382
|
-
width: 100%;
|
|
3383
|
-
text-align: center;
|
|
3384
|
-
}
|
|
3385
|
-
|
|
3386
|
-
.dot {
|
|
3387
|
-
font-size: var(--kemet-tracker-step-dot-font-size, 90%);
|
|
3388
|
-
color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
|
|
3389
|
-
display: flex;
|
|
3390
|
-
align-items: center;
|
|
3391
|
-
justify-content: center;
|
|
3392
|
-
margin: 0 auto;
|
|
3393
|
-
position: relative;
|
|
3394
|
-
z-index: 1;
|
|
3395
|
-
width: var(--kemet-tracker-step-dot-size);
|
|
3396
|
-
height: var(--kemet-tracker-step-dot-size);
|
|
3397
|
-
border-radius: 100%;
|
|
3398
|
-
transition: var(--kemet-tracker-step-dot-transition);
|
|
3399
|
-
background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));
|
|
3400
|
-
}
|
|
3401
|
-
|
|
3402
|
-
.dot::after {
|
|
3403
|
-
content: "";
|
|
3404
|
-
width: unset;
|
|
3405
|
-
height: unset;
|
|
3406
|
-
position: absolute;
|
|
3407
|
-
top: var(--kemet-tracker-step-dot-gap);
|
|
3408
|
-
left: var(--kemet-tracker-step-dot-gap);
|
|
3409
|
-
right: var(--kemet-tracker-step-dot-gap);
|
|
3410
|
-
bottom: var(--kemet-tracker-step-dot-gap);
|
|
3411
|
-
z-index: -1;
|
|
3412
|
-
border-radius: 100%;
|
|
3413
|
-
transition: var(--kemet-tracker-step-dot-transition);
|
|
3414
|
-
border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));
|
|
3415
|
-
background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
|
|
3416
|
-
}
|
|
3417
|
-
|
|
3418
|
-
:host([completed]) .dot {
|
|
3419
|
-
color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
|
|
3420
|
-
}
|
|
3421
|
-
|
|
3422
|
-
:host([completed]) .dot::after {
|
|
3423
|
-
border: 0;
|
|
3424
|
-
background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
|
|
3425
|
-
}
|
|
3426
|
-
|
|
3427
|
-
:host([current]) .dot.animate {
|
|
3428
|
-
color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
|
|
3429
|
-
}
|
|
3430
|
-
|
|
3431
|
-
:host([current]) .dot.animate::after {
|
|
3432
|
-
border: 0;
|
|
3433
|
-
background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
|
|
3434
|
-
}
|
|
3435
|
-
|
|
3436
|
-
:host([mobile]) .dot {
|
|
3437
|
-
width: var(--kemet-tracker-step-dot-size-mobile);
|
|
3438
|
-
height: var(--kemet-tracker-step-dot-size-mobile);
|
|
3439
|
-
}
|
|
3440
|
-
|
|
3441
|
-
.line {
|
|
3442
|
-
display: block;
|
|
3443
|
-
position: absolute;
|
|
3444
|
-
left: 50%;
|
|
3445
|
-
right: 0;
|
|
3446
|
-
bottom: 0;
|
|
3447
|
-
width: 100%;
|
|
3448
|
-
|
|
3449
|
-
/* standard */
|
|
3450
|
-
top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
|
|
3451
|
-
height: var(--kemet-tracker-step-standard-line-weight);
|
|
3452
|
-
background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));
|
|
3453
|
-
}
|
|
3454
|
-
|
|
3455
|
-
.line.completed {
|
|
3456
|
-
width: 100%;
|
|
3457
|
-
transform: scaleX(0);
|
|
3458
|
-
transform-origin: left center;
|
|
3459
|
-
top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
|
|
3460
|
-
height: var(--kemet-tracker-step-completed-line-weight);
|
|
3461
|
-
background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));
|
|
3462
|
-
animation-name: grow;
|
|
3463
|
-
animation-delay: 1s;
|
|
3464
|
-
animation-duration: 600ms;
|
|
3465
|
-
animation-fill-mode: forwards;
|
|
3466
|
-
}
|
|
3467
|
-
|
|
3468
|
-
:host([mobile]) .line {
|
|
3469
|
-
top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
|
|
3470
|
-
}
|
|
3471
|
-
|
|
3472
|
-
:host([mobile]) .line.completed {
|
|
3473
|
-
top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
|
|
3474
|
-
}
|
|
3475
|
-
|
|
3476
|
-
@keyframes grow {
|
|
3477
|
-
from { transform: scaleX(0); }
|
|
3478
|
-
to { transform: scaleX(1); }
|
|
3479
|
-
}
|
|
3480
|
-
`;customElements.get("kemet-tracker-step")||customElements.define("kemet-tracker-step",class extends Z{static get styles(){return[Ht]}static get properties(){return{step:{type:Number},completed:{type:Boolean,reflect:!0},current:{type:Boolean,reflect:!0},last:{type:Boolean,reflect:!0},mobile:{type:Boolean,reflect:!0},hideDotContent:{type:Boolean,reflect:!0,attribute:"hide-dot-content"},completedSize:{type:Number}}}constructor(){super(),this.completedSize=16}firstUpdated(){this.tracker=this.closest("kemet-tracker")}render(){return I`
|
|
3481
|
-
${this.makeLine()}
|
|
3482
|
-
${this.makeCompletedLine()}
|
|
3483
|
-
<div class="dot" part="dot">${this.makeDotContent()}</div>
|
|
3484
|
-
${this.makeSlotContent()}
|
|
3485
|
-
`}makeLine(){return this.last?null:I`<div class="line" part="line"></div>`}makeCompletedLine(){return this.completed&&!this.last?I`<div class="line completed" part="completed-line" @animationend=${()=>this.handleCompletedLineEnd()}></div>`:null}makeDotContent(){return!this.completed||this.mobile||this.hideDotContent?this.mobile||this.hideDotContent?null:I`
|
|
3486
|
-
<span>${this.step}/${this.tracker?.total}</span>
|
|
3487
|
-
`:I`
|
|
3488
|
-
<kemet-icon icon="check2" size=${this.completedSize}></kemet-icon>
|
|
3489
|
-
`}makeSlotContent(){return this.mobile?null:I`<slot></slot>`}handleCompletedLineEnd(){const t=this.tracker.querySelector("[current]").shadowRoot.querySelector(".dot");t&&t.classList.add("animate")}});customElements.get("kemet-tracker")||customElements.define("kemet-tracker",class extends Z{static get styles(){return[r`
|
|
3490
|
-
:host {
|
|
3491
|
-
display: flex;
|
|
3492
|
-
justify-content: center;
|
|
3493
|
-
align-items: flex-start;
|
|
3494
|
-
}
|
|
3495
|
-
`]}static get properties(){return{total:{type:Number},breakpoint:{type:String}}}constructor(){super(),this.breakpoint="767px"}firstUpdated(){this.steps=this.querySelectorAll("kemet-tracker-step"),this.isMobile(),window.addEventListener("resize",(()=>{this.isMobile()}))}render(){return I`<slot @slotchange=${()=>this.handleSlotChange()}></slot>`}handleSlotChange(){this.total=this.steps.length,this.steps.forEach(((t,e)=>{t.step=e+1,t.step===this.total&&(t.last=!0)}))}isMobile(){const t=window.matchMedia(`(max-width: ${this.breakpoint})`);this.steps.forEach((e=>{e.mobile=t.matches}))}});const Vt=r`
|
|
3496
|
-
.lds-ripple {
|
|
3497
|
-
display: inline-block;
|
|
3498
|
-
position: relative;
|
|
3499
|
-
width: 80px;
|
|
3500
|
-
height: 80px;
|
|
3501
|
-
}
|
|
3502
|
-
|
|
3503
|
-
.lds-ripple div {
|
|
3504
|
-
position: absolute;
|
|
3505
|
-
border: 4px solid var(--kemet-upload-file-ripple-color);
|
|
3506
|
-
opacity: 1;
|
|
3507
|
-
border-radius: 50%;
|
|
3508
|
-
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
3509
|
-
}
|
|
3510
|
-
|
|
3511
|
-
.lds-ripple div:nth-child(2) {
|
|
3512
|
-
animation-delay: -0.5s;
|
|
3513
|
-
}
|
|
3514
|
-
|
|
3515
|
-
@keyframes lds-ripple {
|
|
3516
|
-
0% {
|
|
3517
|
-
top: 36px;
|
|
3518
|
-
left: 36px;
|
|
3519
|
-
width: 0;
|
|
3520
|
-
height: 0;
|
|
3521
|
-
opacity: 0;
|
|
3522
|
-
}
|
|
3523
|
-
4.9% {
|
|
3524
|
-
top: 36px;
|
|
3525
|
-
left: 36px;
|
|
3526
|
-
width: 0;
|
|
3527
|
-
height: 0;
|
|
3528
|
-
opacity: 0;
|
|
3529
|
-
}
|
|
3530
|
-
5% {
|
|
3531
|
-
top: 36px;
|
|
3532
|
-
left: 36px;
|
|
3533
|
-
width: 0;
|
|
3534
|
-
height: 0;
|
|
3535
|
-
opacity: 1;
|
|
3536
|
-
}
|
|
3537
|
-
100% {
|
|
3538
|
-
top: 0px;
|
|
3539
|
-
left: 0px;
|
|
3540
|
-
width: 72px;
|
|
3541
|
-
height: 72px;
|
|
3542
|
-
opacity: 0;
|
|
3543
|
-
}
|
|
3544
|
-
}
|
|
3545
|
-
`,Ft=(t,e=2)=>{if(0===t)return"0 Bytes";const s=e<0?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,i)).toFixed(s))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`};customElements.get("kemet-upload-file")||customElements.define("kemet-upload-file",class extends Z{static get styles(){return[r`
|
|
3546
|
-
:host {
|
|
3547
|
-
--kemet-upload-file-ripple-color: var(--kemet-color-primary);
|
|
3548
|
-
|
|
3549
|
-
color: var(--kemet-upload-file-color, var(--kemet-color-gray7));
|
|
3550
|
-
display: grid;
|
|
3551
|
-
gap: 1rem;
|
|
3552
|
-
grid-template-columns: auto 1fr auto;
|
|
3553
|
-
align-items: center;
|
|
3554
|
-
padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
|
|
3555
|
-
border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
|
|
3556
|
-
}
|
|
3557
|
-
|
|
3558
|
-
:host([status='error']) {
|
|
3559
|
-
border: 1px solid var(--kemet-color-error);
|
|
3560
|
-
}
|
|
3561
|
-
|
|
3562
|
-
:host([status='complete']) {
|
|
3563
|
-
border: 1px solid var(--kemet-color-success);
|
|
3564
|
-
}
|
|
3565
|
-
|
|
3566
|
-
h3 {
|
|
3567
|
-
margin: 0;
|
|
3568
|
-
}
|
|
3569
|
-
|
|
3570
|
-
.percentage {
|
|
3571
|
-
font-size: clamp(2rem, 3vw, 2.5rem);
|
|
3572
|
-
align-self: center;
|
|
3573
|
-
justify-self: center;
|
|
3574
|
-
}
|
|
3575
|
-
|
|
3576
|
-
.indicator {
|
|
3577
|
-
transform: scale(0.8);
|
|
3578
|
-
}
|
|
3579
|
-
|
|
3580
|
-
:host([status='complete']) .message,
|
|
3581
|
-
:host([status='complete']) .indicator {
|
|
3582
|
-
color: var(--kemet-color-success);
|
|
3583
|
-
}
|
|
3584
|
-
|
|
3585
|
-
:host([status='error']) .message,
|
|
3586
|
-
:host([status='error']) .indicator {
|
|
3587
|
-
color: var(--kemet-color-error);
|
|
3588
|
-
}
|
|
3589
|
-
`,Vt]}static get properties(){return{name:{type:String},loaded:{type:Number},size:{type:Number},type:{type:String},status:{type:String,reflect:!0},percent:{type:Number},message:{type:String}}}constructor(){super(),this.loaded=0,this.size=0,this.percent=0}updated(){this.percent=this.calculatePercent()}render(){return I`
|
|
3590
|
-
<div class="percentage" part="percentage">
|
|
3591
|
-
<span>${this.percent}%</span>
|
|
3592
|
-
</div>
|
|
3593
|
-
<div>
|
|
3594
|
-
<h3 part="filename">${this.name}</h3>
|
|
3595
|
-
<span part="loaded">${Ft(this.loaded)} / ${Ft(this.size)}</span>
|
|
3596
|
-
${this.message?I`<div class="message" part="message">${this.message}</div>`:null}
|
|
3597
|
-
</div>
|
|
3598
|
-
<div class="indicator" part="indicator">
|
|
3599
|
-
${this.getStatusIcon()}
|
|
3600
|
-
</div>
|
|
3601
|
-
`}calculatePercent(){const t=Math.round(100*this.loaded/this.size);return t>100?100:t}getStatusIcon(){return"uploading"===this.status?I`<div class="lds-ripple"><div></div><div></div></div>`:"complete"===this.status?I`<kemet-icon icon="check-circle" size="48"></kemet-icon>`:"error"===this.status?I`<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`:null}});customElements.get("kemet-upload")||customElements.define("kemet-upload",class extends Z{static get styles(){return[r`
|
|
3602
|
-
:host {
|
|
3603
|
-
color: var(--kemet-upload-color, var(--kemet-color-white));
|
|
3604
|
-
display: grid;
|
|
3605
|
-
grid-template-columns: 1fr 1fr;
|
|
3606
|
-
height: var(--kemet-upload-height, 364px);
|
|
3607
|
-
border: var(--kemet-upload-border, 1rem solid var(--kemet-color-white));
|
|
3608
|
-
background-color: var(--kemet-upload-background-color, var(--kemet-color-primary));
|
|
3609
|
-
}
|
|
3610
|
-
|
|
3611
|
-
:host([mobile]) {
|
|
3612
|
-
display: block;
|
|
3613
|
-
height: auto;
|
|
3614
|
-
}
|
|
3615
|
-
|
|
3616
|
-
input {
|
|
3617
|
-
display: none;
|
|
3618
|
-
}
|
|
3619
|
-
|
|
3620
|
-
.button {
|
|
3621
|
-
cursor: pointer;
|
|
3622
|
-
font-size: 1rem;
|
|
3623
|
-
display: block;
|
|
3624
|
-
color: var(--kemet-color-white);
|
|
3625
|
-
padding: 0.5rem 1rem;
|
|
3626
|
-
border: 1px solid var(--kemet-color-white);
|
|
3627
|
-
background-color: transparent;
|
|
3628
|
-
}
|
|
3629
|
-
|
|
3630
|
-
.upload {
|
|
3631
|
-
display: flex;
|
|
3632
|
-
align-items: center;
|
|
3633
|
-
justify-content: center;
|
|
3634
|
-
margin: 1rem;
|
|
3635
|
-
flex-direction: column;
|
|
3636
|
-
border: 2px dashed var(--kemet-color-white);
|
|
3637
|
-
}
|
|
3638
|
-
|
|
3639
|
-
:host([over]) .upload {
|
|
3640
|
-
background-color: green;
|
|
3641
|
-
}
|
|
3642
|
-
|
|
3643
|
-
:host([mobile]) .upload {
|
|
3644
|
-
height: 280px;
|
|
3645
|
-
}
|
|
3646
|
-
|
|
3647
|
-
.files {
|
|
3648
|
-
display: flex;
|
|
3649
|
-
gap: 1rem;
|
|
3650
|
-
flex-direction: column;
|
|
3651
|
-
padding: 0 1rem;
|
|
3652
|
-
overflow: auto;
|
|
3653
|
-
background-color: var(--kemet-color-white);
|
|
3654
|
-
}
|
|
3655
|
-
|
|
3656
|
-
:host([mobile]) .files {
|
|
3657
|
-
padding: 0;
|
|
3658
|
-
max-height: 280px;
|
|
3659
|
-
}
|
|
3660
|
-
|
|
3661
|
-
.heading {
|
|
3662
|
-
font-size: 1.25rem;
|
|
3663
|
-
margin: 0 0 2rem 0;
|
|
3664
|
-
}
|
|
3665
|
-
|
|
3666
|
-
:host([no-drag-drop]) .heading {
|
|
3667
|
-
display: none;
|
|
3668
|
-
}
|
|
3669
|
-
|
|
3670
|
-
::slotted(:first-child) {
|
|
3671
|
-
margin-top: 1rem;
|
|
3672
|
-
}
|
|
3673
|
-
`]}static get properties(){return{slug:{type:String},accept:{type:String},multiple:{type:Boolean},over:{type:Boolean,reflect:!0},heading:{type:String},mobile:{type:Boolean,reflect:!0},breakpoint:{type:String,reflect:!0},noDragDrop:{type:Boolean,reflect:!0,attribute:"no-drag-drop"},maxSize:{type:Number,attribute:"max-size"},buttonLabel:{type:String,attribute:"button-label"}}}constructor(){super(),this.slug="upload",this.breakpoint="600px",this.buttonLabel="Browse Files",this.heading="Drag & Drop Files"}firstUpdated(){this.fileInputElement=this.shadowRoot.querySelector('[type="file"]'),this.upload=this.shadowRoot.querySelector(".upload"),["dragenter","dragover","dragleave","drop"].forEach((t=>{this.upload.addEventListener(t,(t=>(t=>{t.preventDefault(),t.stopPropagation()})(t)),!1)})),["dragenter","dragover"].forEach((t=>{this.upload.addEventListener(t,(()=>{this.over=!0}),!1)})),["dragleave","drop"].forEach((t=>{this.upload.addEventListener(t,(()=>{this.over=!1}),!1)})),this.isMobile(),this.hasDragDrop(),window.addEventListener("resize",(()=>{this.isMobile()})),this.upload.addEventListener("drop",(t=>this.handleDrop(t)),!1)}render(){return I`
|
|
3674
|
-
<div class="upload" part="upload">
|
|
3675
|
-
<kemet-icon icon="cloud-arrow-up" size="128"></kemet-icon>
|
|
3676
|
-
<input
|
|
3677
|
-
type="file"
|
|
3678
|
-
id=${this.slug}
|
|
3679
|
-
?multiple=${this.multiple}
|
|
3680
|
-
accept=${it(this.accept)?this.accept:null}
|
|
3681
|
-
@change=${t=>this.handleChange(t)}
|
|
3682
|
-
/>
|
|
3683
|
-
<h3 class="heading" part="heading">${this.heading}</h3>
|
|
3684
|
-
<label class="button" part="button" for=${this.slug}>${this.buttonLabel}</label>
|
|
3685
|
-
</div>
|
|
3686
|
-
<div class="files" part="files">
|
|
3687
|
-
<slot></slot>
|
|
3688
|
-
</div>
|
|
3689
|
-
`}handleChange(t){Q(this,"kemet-upload-change",{event:t,files:this.fileInputElement.files,fileElement:this.fileInputElement})}handleDrop(t){Q(this,"kemet-upload-change",{event:t,files:t?.dataTransfer.files||[],fileElement:this.fileInputElement})}isMobile(){const t=window.matchMedia(`(max-width: ${this.breakpoint})`);this.mobile=t.matches}hasDragDrop(){"draggable"in document.createElement("span")?this.noDragDrop=!1:this.noDragDrop=!0}});export{pt as KemetCarouselCurrent,ut as KemetCarouselFirst,mt as KemetCarouselLast,gt as KemetCarouselPrev,ft as KemetCarouselTotal};
|