npm - kemet-ui - Versions diffs - 5.0.3 → 5.0.5 - Mend

kemet-ui 5.0.3 → 5.0.5

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.

Files changed (102) hide show

package/custom-elements.json +2191 -2199
package/dist/{constants-Dj9X-JwG.d.ts → constants-BsAfWV-a.d.ts} +4 -4
package/dist/elements/accordion/index.js.map +1 -1
package/dist/elements/accordion-panel/index.js.map +1 -1
package/dist/elements/alert/index.d.ts +1 -1
package/dist/elements/alert/index.js +4 -4
package/dist/elements/alert/index.js.map +1 -1
package/dist/elements/alert/styles.css.js +4 -4
package/dist/elements/alert/styles.css.js.map +1 -1
package/dist/elements/avatar/index.d.ts +1 -1
package/dist/elements/avatar/index.js.map +1 -1
package/dist/elements/avatars/index.js.map +1 -1
package/dist/elements/badge/index.d.ts +1 -1
package/dist/elements/badge/index.js +1 -1
package/dist/elements/badge/index.js.map +1 -1
package/dist/elements/badge/styles.css.js +1 -1
package/dist/elements/badge/styles.css.js.map +1 -1
package/dist/elements/button/index.d.ts +1 -1
package/dist/elements/button/index.js +4 -4
package/dist/elements/button/index.js.map +1 -1
package/dist/elements/button/styles.css.js +4 -4
package/dist/elements/button/styles.css.js.map +1 -1
package/dist/elements/card/index.d.ts +1 -1
package/dist/elements/card/index.js.map +1 -1
package/dist/elements/checkbox/index.d.ts +1 -1
package/dist/elements/checkbox/index.js +5 -6
package/dist/elements/checkbox/index.js.map +1 -1
package/dist/elements/checkbox/styles.css.js +1 -1
package/dist/elements/checkbox/styles.css.js.map +1 -1
package/dist/elements/combo/index.d.ts +1 -1
package/dist/elements/combo/index.js.map +1 -1
package/dist/elements/count/index.d.ts +1 -1
package/dist/elements/count/index.js.map +1 -1
package/dist/elements/dialog/index.d.ts +1 -1
package/dist/elements/dialog/index.js.map +1 -1
package/dist/elements/dialog-close/index.js.map +1 -1
package/dist/elements/drawer/index.js.map +1 -1
package/dist/elements/fab/index.d.ts +1 -1
package/dist/elements/fab/index.js +1 -1
package/dist/elements/fab/index.js.map +1 -1
package/dist/elements/fab/styles.css.js +1 -1
package/dist/elements/fab/styles.css.js.map +1 -1
package/dist/elements/field/index.d.ts +1 -1
package/dist/elements/field/index.js +24 -15
package/dist/elements/field/index.js.map +1 -1
package/dist/elements/field/styles.css.js +15 -6
package/dist/elements/field/styles.css.js.map +1 -1
package/dist/elements/flipcard/index.d.ts +1 -1
package/dist/elements/flipcard/index.js.map +1 -1
package/dist/elements/flipcard-trigger/index.js.map +1 -1
package/dist/elements/icon/index.js.map +1 -1
package/dist/elements/input/index.d.ts +1 -1
package/dist/elements/input/index.js +17 -9
package/dist/elements/input/index.js.map +1 -1
package/dist/elements/input/styles.css.js +2 -2
package/dist/elements/input/styles.css.js.map +1 -1
package/dist/elements/input-combo/index.d.ts +1 -1
package/dist/elements/input-combo/index.js +2 -2
package/dist/elements/input-combo/index.js.map +1 -1
package/dist/elements/input-combo/styles.css.js +2 -2
package/dist/elements/input-combo/styles.css.js.map +1 -1
package/dist/elements/input-file/index.js.map +1 -1
package/dist/elements/input-files/index.js.map +1 -1
package/dist/elements/input-otp/index.js.map +1 -1
package/dist/elements/loader/index.js.map +1 -1
package/dist/elements/password/index.d.ts +1 -1
package/dist/elements/password/index.js.map +1 -1
package/dist/elements/radio/index.js +2 -8
package/dist/elements/radio/index.js.map +1 -1
package/dist/elements/radio/styles.css.js +1 -1
package/dist/elements/radio/styles.css.js.map +1 -1
package/dist/elements/radios/index.d.ts +1 -2
package/dist/elements/radios/index.js +5 -23
package/dist/elements/radios/index.js.map +1 -1
package/dist/elements/rotator/index.js.map +1 -1
package/dist/elements/select/index.d.ts +2 -1
package/dist/elements/select/index.js +15 -7
package/dist/elements/select/index.js.map +1 -1
package/dist/elements/select/styles.css.js +2 -2
package/dist/elements/select/styles.css.js.map +1 -1
package/dist/elements/sortable/index.js.map +1 -1
package/dist/elements/sortable-item/index.js.map +1 -1
package/dist/elements/tab/index.js.map +1 -1
package/dist/elements/tab-panel/index.js.map +1 -1
package/dist/elements/tabs/index.d.ts +1 -1
package/dist/elements/tabs/index.js.map +1 -1
package/dist/elements/textarea/index.d.ts +1 -1
package/dist/elements/textarea/index.js +16 -8
package/dist/elements/textarea/index.js.map +1 -1
package/dist/elements/textarea/styles.css.js +3 -3
package/dist/elements/textarea/styles.css.js.map +1 -1
package/dist/elements/timer/index.js.map +1 -1
package/dist/elements/timer-display/index.js.map +1 -1
package/dist/elements/toggle/index.js +4 -5
package/dist/elements/toggle/index.js.map +1 -1
package/dist/elements/tracker/index.js.map +1 -1
package/dist/elements/tracker-step/index.js.map +1 -1
package/dist/elements/typewriter/index.js.map +1 -1
package/dist/wrappers/react.d.ts +1 -1
package/dist/wrappers/react.js +68 -65
package/dist/wrappers/react.js.map +1 -1
package/package.json +1 -1

package/dist/elements/input-combo/styles.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public /\n --kemet-input-combo-height: 50px;\n --kemet-input-combo-color: var(--kemet-color-font-base);\n --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);\n --kemet-input-combo-padding-y: 0.5rem;\n --kemet-input-combo-padding-x: 1rem;\n --kemet-input-combo-icon-gap: 3rem;\n --kemet-input-combo-font-color: var(--kemet-input-combo-color);\n --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);\n --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);\n\n / private */\n --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);\n --_kemet-input-combo-background-color: transparent;\n --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);\n --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);\n\n position: relative;\n display: block;\n}\n\ninput {\n color: var(--kemet-input-combo-font-color);\n display: block;\n font-size: 1rem;\n width: 100%;\n height: var(--kemet-input-combo-height);\n border: var(--kemet-input-combo-border);\n appearance: none;\n box-sizing: border-box;\n background-color: var(--_kemet-input-combo-background-color);\n border-radius: var(--_kemet-input-combo-border-radius);\n padding-left: var(--_kemet-input-combo-icon-left-padding);\n padding-right: var(--_kemet-input-combo-icon-right-padding);\n padding-top: var(--kemet-input-combo-padding-y);\n padding-bottom: var(--kemet-input-combo-padding-y);\n}\n\n:host([polarity=dark]) {\n --kemet-input-combo-color: var(--kemet-color-font-inverse-base);\n --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([icon-right]) {\n --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([appearance=brand]) {\n --kemet-input-combo-color: var(--kemet-color-brand-primary-~~base~~);\n}\n\n:host([appearance=error]) {\n --kemet-input-combo-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n --kemet-input-combo-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n --kemet-input-combo-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n --kemet-input-combo-color: var(--kemet-color-font-link);\n}\n\n:host([appearance=brand][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-~~base~~);\n}\n\n:host([appearance=error][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n --kemet-input-combo-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);\n --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n color: var(--kemet-input-combo-font-color);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n right: 1rem;\n}\n\n\ndiv {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n}\n\nul {\n display: flex;\n gap: 0.5rem;\n margin: 0;\n padding: 0;\n list-style: none;\n flex-wrap: wrap;\n}\n\nli {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n padding: 0.25rem 0.5rem;\n color: var(--kemet-input-combo-chip-font-color);\n background-color: var(--kemet-input-combo-chip-background-color);\n}\n\n:host([rounded]) li {\n border-radius: var(--_kemet-input-combo-border-radius);\n}\n\nbutton {\n color: inherit;\n cursor: pointer;\n font-size: 1.25rem;\n padding: 0;\n border: 0;\n background-color: transparent\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
1	+ {"version":3,"sources":["../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public /\n --kemet-input-combo-height: 50px;\n --kemet-input-combo-color: var(--kemet-color-font-base);\n --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);\n --kemet-input-combo-padding-y: 0.5rem;\n --kemet-input-combo-padding-x: 1rem;\n --kemet-input-combo-icon-gap: 3rem;\n --kemet-input-combo-font-color: var(--kemet-input-combo-color);\n --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);\n --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);\n\n / private */\n --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);\n --_kemet-input-combo-background-color: transparent;\n --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);\n --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);\n\n position: relative;\n display: block;\n}\n\ninput {\n color: var(--kemet-input-combo-font-color);\n display: block;\n font-size: 1rem;\n width: 100%;\n height: var(--kemet-input-combo-height);\n border: var(--kemet-input-combo-border);\n appearance: none;\n box-sizing: border-box;\n background-color: var(--_kemet-input-combo-background-color);\n border-radius: var(--_kemet-input-combo-border-radius);\n padding-left: var(--_kemet-input-combo-icon-left-padding);\n padding-right: var(--_kemet-input-combo-icon-right-padding);\n padding-top: var(--kemet-input-combo-padding-y);\n padding-bottom: var(--kemet-input-combo-padding-y);\n}\n\n:host([polarity=dark]) {\n --kemet-input-combo-color: var(--kemet-color-font-inverse-base);\n --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([icon-right]) {\n --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([appearance=brand]) {\n --kemet-input-combo-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n --kemet-input-combo-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n --kemet-input-combo-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n --kemet-input-combo-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n --kemet-input-combo-color: var(--kemet-color-font-link);\n}\n\n:host([appearance=brand][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n --_kemet-input-combo-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n --kemet-input-combo-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);\n --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n color: var(--kemet-input-combo-font-color);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n right: 1rem;\n}\n\n\ndiv {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n}\n\nul {\n display: flex;\n gap: 0.5rem;\n margin: 0;\n padding: 0;\n list-style: none;\n flex-wrap: wrap;\n}\n\nli {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n padding: 0.25rem 0.5rem;\n color: var(--kemet-input-combo-chip-font-color);\n background-color: var(--kemet-input-combo-chip-background-color);\n}\n\n:host([rounded]) li {\n border-radius: var(--_kemet-input-combo-border-radius);\n}\n\nbutton {\n color: inherit;\n cursor: pointer;\n font-size: 1.25rem;\n padding: 0;\n border: 0;\n background-color: transparent\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/input-file/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/input-file/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/input-file/styles.css.ts","../../../src/elements/input-file/loaders.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport loaderStyles from './loaders.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n if (bytes === 0) return '0 Bytes';\n\n const k = 1024;\n const dm = decimals < 0 ? 0 : decimals;\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / k i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/\n * @since 1.3.0\n * @status stable\n \n @tagname kemet-input-file\n * @summary Displays a file to be uploaded.\n * @ssrsafe yes\n \n @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete \| uploading \| error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n \n @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n \n @fires kemet-input-file-mounted - Fired when the input file is mounted to the DOM\n * @detail {HTMLElement} element - The input file element\n /\n\n@customElement('kemet-input-file')\nexport default class InputFile extends LitElement {\n static styles = [styles, loaderStyles];\n\n @property({ type: String })\n name!: string;\n\n @property({ type: Number })\n loaded: number = 0;\n\n @property({ type: Number })\n size: number = 0;\n\n @property({ type: String })\n type!: string;\n\n @property({ type: String, reflect: true })\n status!: string;\n\n @property({ type: Number })\n percent: number = 0;\n\n @property({ type: String })\n message!: string;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n firstUpdated() {\n emitEvent(this, 'kemet-input-file-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n updated() {\n this.percent = this.calculatePercent();\n }\n\n render() {\n return html`\n <div class=\"percentage\" part=\"percentage\">\n <span>${this.percent}%</span>\n </div>\n <div>\n <h3 part=\"filename\">${this.name}</h3>\n <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n </div>\n <div class=\"indicator\" part=\"indicator\">\n ${this.getStatusIcon()}\n </div>\n `;\n }\n\n calculatePercent() {\n const percent = Math.round((this.loaded 100.0) / this.size);\n return percent > 100 ? 100 : percent;\n }\n\n getStatusIcon() {\n if (this.status === 'uploading') {\n return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n }\n\n if (this.status === 'complete') {\n return html`<kemet-icon name=\"check-circle\" size=\"48\"></kemet-icon>`;\n }\n\n if (this.status === 'error') {\n return html`<kemet-icon name=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n }\n\n return null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-file': InputFile\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/*\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-upload-file-ripple-color: var(--kemet-color-font-active);\n --kemet-upload-file-color: inherit;\n --kemet-upload-file-padding: 0.5rem 1rem;\n --kemet-upload-file-border: 1px solid;\n\n color: var(--kemet-upload-file-color);\n display: grid;\n gap: 1rem;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 100%;\n max-height: 50%;\n padding: var(--kemet-upload-file-padding);\n border: var(--kemet-upload-file-border);\n}\n\n:host([status=error]) {\n border: 1px solid var(--kemet-color-font-error);\n}\n\n:host([status=complete]) {\n border: 1px solid var(--kemet-color-font-success);\n}\n\nh3 {\n margin: 0;\n}\n\n.percentage {\n font-size: clamp(2rem, 3vw, 2.5rem);\n align-self: center;\n justify-self: center;\n}\n\n.indicator {\n transform: scale(0.8);\n}\n\n:host([status=complete]) .message,\n:host([status=complete]) .indicator {\n color: rgb(var(--kemet-color-success));\n}\n\n:host([status=error]) .message,\n:host([status=error]) .indicator {\n color: rgb(var(--kemet-color-error));\n}\n`;\n","import { css } from 'lit';\n\nexport default css`.lds-ripple {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.lds-ripple div {\n position: absolute;\n border: 4px solid var(--kemet-upload-file-ripple-color);\n opacity: 1;\n border-radius: var(--kemet-border-radius-circle);\n animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.lds-ripple div:nth-child(2) {\n animation-delay: -0.5s;\n}\n\n@keyframes lds-ripple {\n 0% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 0;\n }\n 4.9% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 0;\n }\n 5% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 1;\n }\n 100% {\n top: 0px;\n left: 0px;\n width: 72px;\n height: 72px;\n opacity: 0;\n }\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;;;ACAjC,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFf,SAAS,OAAAA,YAAW;AAEpB,IAAO,sBAAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,~~SAAS~~,~~MAAM~~,~~QAAQ~~,UAAU,MAAM,WAAW,SAAS;~~AACnF~~,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AJEA,IAAM,cAAc,CAAC,OAAe,WAAW,MAAM;AACnD,MAAI,UAAU,EAAG,QAAO;AAExB,QAAM,IAAI;AACV,QAAM,KAAK,WAAW,IAAI,IAAI;AAC9B,QAAM,QAAQ,CAAC,SAAS,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAEtE,QAAM,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC;AAElD,SAAO,GAAG,YAAY,QAAQ,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAChE;AAmCA,IAAqB,YAArB,cAAuC,WAAW;AAAA,EAAlD;AAAA;AAOE,kBAAiB;AAGjB,gBAAe;AASf,mBAAkB;AASlB,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,4BAA4B;AAAA,MAC1C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,UAAU;AACR,SAAK,UAAU,KAAK,iBAAiB;AAAA,EACvC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,KAAK,OAAO;AAAA;AAAA;AAAA,8BAGE,KAAK,IAAI;AAAA,8BACT,YAAY,KAAK,MAAM,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC;AAAA,UACxE,KAAK,UAAU,2CAA2C,KAAK,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,UAGrF,KAAK,cAAc,CAAC;AAAA;AAAA;AAAA,EAG5B;AAAA,EAEA,mBAAmB;AACjB,UAAM,UAAU,KAAK,MAAO,KAAK,SAAS,MAAS,KAAK,IAAI;AAC5D,WAAO,UAAU,MAAM,MAAM;AAAA,EAC/B;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,WAAW,aAAa;AAC/B,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,WAAW,YAAY;AAC9B,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,WAAW,SAAS;AAC3B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AACF;AAjFqB,UACZ,SAAS,CAAC,oBAAQ,mBAAY;AAGrC;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,UAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,UAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,UAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,UAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,UAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,UAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,UAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxBtB,UAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,UA4BnB;AA5BmB,YAArB;AAAA,EADC,cAAc,kBAAkB;AAAA,GACZ;","names":["css"]}
1	+ {"version":3,"sources":["../../../src/elements/input-file/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/input-file/styles.css.ts","../../../src/elements/input-file/loaders.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport loaderStyles from './loaders.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n if (bytes === 0) return '0 Bytes';\n\n const k = 1024;\n const dm = decimals < 0 ? 0 : decimals;\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / k i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/\n * @since 1.3.0\n * @status stable\n \n @tagname kemet-input-file\n * @summary Displays a file to be uploaded.\n * @ssrsafe yes\n \n @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete \| uploading \| error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n \n @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n \n @fires kemet-input-file-mounted - Fired when the input file is mounted to the DOM\n * @detail {HTMLElement} element - The input file element\n /\n\n@customElement('kemet-input-file')\nexport default class InputFile extends LitElement {\n static styles = [styles, loaderStyles];\n\n @property({ type: String })\n name!: string;\n\n @property({ type: Number })\n loaded: number = 0;\n\n @property({ type: Number })\n size: number = 0;\n\n @property({ type: String })\n type!: string;\n\n @property({ type: String, reflect: true })\n status!: string;\n\n @property({ type: Number })\n percent: number = 0;\n\n @property({ type: String })\n message!: string;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n firstUpdated() {\n emitEvent(this, 'kemet-input-file-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n updated() {\n this.percent = this.calculatePercent();\n }\n\n render() {\n return html`\n <div class=\"percentage\" part=\"percentage\">\n <span>${this.percent}%</span>\n </div>\n <div>\n <h3 part=\"filename\">${this.name}</h3>\n <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n </div>\n <div class=\"indicator\" part=\"indicator\">\n ${this.getStatusIcon()}\n </div>\n `;\n }\n\n calculatePercent() {\n const percent = Math.round((this.loaded 100.0) / this.size);\n return percent > 100 ? 100 : percent;\n }\n\n getStatusIcon() {\n if (this.status === 'uploading') {\n return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n }\n\n if (this.status === 'complete') {\n return html`<kemet-icon name=\"check-circle\" size=\"48\"></kemet-icon>`;\n }\n\n if (this.status === 'error') {\n return html`<kemet-icon name=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n }\n\n return null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-file': InputFile\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/*\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-upload-file-ripple-color: var(--kemet-color-font-active);\n --kemet-upload-file-color: inherit;\n --kemet-upload-file-padding: 0.5rem 1rem;\n --kemet-upload-file-border: 1px solid;\n\n color: var(--kemet-upload-file-color);\n display: grid;\n gap: 1rem;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 100%;\n max-height: 50%;\n padding: var(--kemet-upload-file-padding);\n border: var(--kemet-upload-file-border);\n}\n\n:host([status=error]) {\n border: 1px solid var(--kemet-color-font-error);\n}\n\n:host([status=complete]) {\n border: 1px solid var(--kemet-color-font-success);\n}\n\nh3 {\n margin: 0;\n}\n\n.percentage {\n font-size: clamp(2rem, 3vw, 2.5rem);\n align-self: center;\n justify-self: center;\n}\n\n.indicator {\n transform: scale(0.8);\n}\n\n:host([status=complete]) .message,\n:host([status=complete]) .indicator {\n color: rgb(var(--kemet-color-success));\n}\n\n:host([status=error]) .message,\n:host([status=error]) .indicator {\n color: rgb(var(--kemet-color-error));\n}\n`;\n","import { css } from 'lit';\n\nexport default css`.lds-ripple {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.lds-ripple div {\n position: absolute;\n border: 4px solid var(--kemet-upload-file-ripple-color);\n opacity: 1;\n border-radius: var(--kemet-border-radius-circle);\n animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.lds-ripple div:nth-child(2) {\n animation-delay: -0.5s;\n}\n\n@keyframes lds-ripple {\n 0% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 0;\n }\n 4.9% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 0;\n }\n 5% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 1;\n }\n 100% {\n top: 0px;\n left: 0px;\n width: 72px;\n height: 72px;\n opacity: 0;\n }\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n"],"mappings":"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","names":["css"]}

package/dist/elements/input-files/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/input-files/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetInputFileElement from '../input-file';\nimport styles from './styles.css.ts';\n\n\nexport interface InterfaceUploadChangeDetails {\n event: Event \| DragEvent;\n files: FileList;\n fileElement: HTMLKemetInputFileElement;\n}\n\nconst preventDefaults = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n};\n\n/*\n @since 1.3.0\n * @status stable\n \n @tagname kemet-input-files\n * @summary An interface for inputing files.\n * @ssrsafe yes\n \n @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n @event kemet-input-files-change - Fires when files have been added\n \n @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n \n @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n \n @fires kemet-input-files-mounted - Fired when the input files is mounted to the DOM\n * @detail {HTMLElement} element - The input files element\n /\n\n@customElement('kemet-input-files')\nexport default class InputFiles extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n slug: string = 'upload';\n\n @property({ type: String })\n accept!: string;\n\n @property({ type: Boolean })\n multiple!: boolean;\n\n @property({ type: Boolean, reflect: true })\n over!: boolean;\n\n @property({ type: String })\n heading: string = 'Drag & Drop Files';\n\n @property({ type: Boolean, reflect: true })\n mobile!: boolean;\n\n @property({ type: String, reflect: true })\n breakpoint: string = '600px';\n\n @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n noDragDrop!: boolean;\n\n @property({ type: Number, attribute: 'max-size' })\n maxSize!: number;\n\n @property({ type: String, attribute: 'button-label' })\n buttonLabel: string = 'Browse Files';\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n fileInputElement!: HTMLInputElement;\n\n @state()\n upload!: HTMLElement;\n\n firstUpdated() {\n this.fileInputElement = this.shadowRoot?.querySelector('[type=\"file\"]') as HTMLInputElement;\n this.upload = this.shadowRoot?.querySelector('.upload') as HTMLElement;\n\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.upload?.addEventListener(eventName, event => preventDefaults(event), false);\n });\n\n ['dragenter', 'dragover'].forEach((eventName) => {\n this.upload?.addEventListener(eventName, () => { this.over = true; }, false);\n });\n\n ['dragleave', 'drop'].forEach((eventName) => {\n this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n });\n\n this.isMobile();\n this.hasDragDrop();\n\n window.addEventListener('resize', () => { this.isMobile(); });\n this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n\n emitEvent(this, 'kemet-input-files-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n return html`\n <div class=\"upload\" part=\"upload\">\n <kemet-icon name=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n <input\n type=\"file\"\n id=${this.slug}\n ?multiple=${this.multiple}\n accept=${ifDefined(this.accept) ? this.accept : null}\n @change=${(event: Event) => this.handleChange(event)}\n />\n <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n </div>\n <div class=\"files\" part=\"files\">\n <slot></slot>\n </div>\n `;\n }\n\n handleChange(event: Event) {\n emitEvent(this, 'kemet-input-files-change', {\n event,\n files: this.fileInputElement.files,\n fileElement: this.fileInputElement,\n });\n }\n\n handleDrop(event: DragEvent) {\n emitEvent(this, 'kemet-input-files-change', {\n event,\n files: event?.dataTransfer?.files \|\| [],\n fileElement: this.fileInputElement,\n });\n }\n\n isMobile() {\n const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n this.mobile = mediaQuery.matches;\n }\n\n hasDragDrop() {\n this.noDragDrop = !('draggable' in document.createElement('span'));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-files': InputFiles\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-upload-color: inherit;\n --kemet-upload-height: 364px;\n --kemet-upload-border: 0;\n --kemet-upload-background-color: transparent;\n\n color: var(--kemet-upload-color);\n display: grid;\n grid-template-columns: 1fr 1fr;\n height: var(--kemet-upload-height);\n border: var(--kemet-upload-border);\n background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n display: flex;\n gap: 2rem;\n flex-direction: column;\n height: auto;\n}\n\ninput {\n display: none;\n}\n\n.button {\n cursor: pointer;\n font-size: 1rem;\n display: block;\n color: inherit;\n padding: 0.5rem 1rem;\n border: 1px solid;\n background-color: transparent;\n}\n\n.upload {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: var(--kemet-upload-margin);\n flex-direction: column;\n border: 2px dashed;\n}\n\n:host([over]) .upload {\n background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n height: 280px;\n}\n\n.files {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n padding: 0 1rem;\n overflow: auto;\n}\n\n:host([mobile]) .files {\n padding: 0;\n}\n\n.heading {\n font-size: 1.25rem;\n margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n display: none;\n}\n`;\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/elements/input-files/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetInputFileElement from '../input-file';\nimport styles from './styles.css.ts';\n\n\nexport interface InterfaceUploadChangeDetails {\n event: Event \| DragEvent;\n files: FileList;\n fileElement: HTMLKemetInputFileElement;\n}\n\nconst preventDefaults = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n};\n\n/*\n @since 1.3.0\n * @status stable\n \n @tagname kemet-input-files\n * @summary An interface for inputing files.\n * @ssrsafe yes\n \n @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n @event kemet-input-files-change - Fires when files have been added\n \n @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n \n @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n \n @fires kemet-input-files-mounted - Fired when the input files is mounted to the DOM\n * @detail {HTMLElement} element - The input files element\n /\n\n@customElement('kemet-input-files')\nexport default class InputFiles extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n slug: string = 'upload';\n\n @property({ type: String })\n accept!: string;\n\n @property({ type: Boolean })\n multiple!: boolean;\n\n @property({ type: Boolean, reflect: true })\n over!: boolean;\n\n @property({ type: String })\n heading: string = 'Drag & Drop Files';\n\n @property({ type: Boolean, reflect: true })\n mobile!: boolean;\n\n @property({ type: String, reflect: true })\n breakpoint: string = '600px';\n\n @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n noDragDrop!: boolean;\n\n @property({ type: Number, attribute: 'max-size' })\n maxSize!: number;\n\n @property({ type: String, attribute: 'button-label' })\n buttonLabel: string = 'Browse Files';\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n fileInputElement!: HTMLInputElement;\n\n @state()\n upload!: HTMLElement;\n\n firstUpdated() {\n this.fileInputElement = this.shadowRoot?.querySelector('[type=\"file\"]') as HTMLInputElement;\n this.upload = this.shadowRoot?.querySelector('.upload') as HTMLElement;\n\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.upload?.addEventListener(eventName, event => preventDefaults(event), false);\n });\n\n ['dragenter', 'dragover'].forEach((eventName) => {\n this.upload?.addEventListener(eventName, () => { this.over = true; }, false);\n });\n\n ['dragleave', 'drop'].forEach((eventName) => {\n this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n });\n\n this.isMobile();\n this.hasDragDrop();\n\n window.addEventListener('resize', () => { this.isMobile(); });\n this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n\n emitEvent(this, 'kemet-input-files-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n return html`\n <div class=\"upload\" part=\"upload\">\n <kemet-icon name=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n <input\n type=\"file\"\n id=${this.slug}\n ?multiple=${this.multiple}\n accept=${ifDefined(this.accept) ? this.accept : null}\n @change=${(event: Event) => this.handleChange(event)}\n />\n <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n </div>\n <div class=\"files\" part=\"files\">\n <slot></slot>\n </div>\n `;\n }\n\n handleChange(event: Event) {\n emitEvent(this, 'kemet-input-files-change', {\n event,\n files: this.fileInputElement.files,\n fileElement: this.fileInputElement,\n });\n }\n\n handleDrop(event: DragEvent) {\n emitEvent(this, 'kemet-input-files-change', {\n event,\n files: event?.dataTransfer?.files \|\| [],\n fileElement: this.fileInputElement,\n });\n }\n\n isMobile() {\n const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n this.mobile = mediaQuery.matches;\n }\n\n hasDragDrop() {\n this.noDragDrop = !('draggable' in document.createElement('span'));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-files': InputFiles\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-upload-color: inherit;\n --kemet-upload-height: 364px;\n --kemet-upload-border: 0;\n --kemet-upload-background-color: transparent;\n\n color: var(--kemet-upload-color);\n display: grid;\n grid-template-columns: 1fr 1fr;\n height: var(--kemet-upload-height);\n border: var(--kemet-upload-border);\n background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n display: flex;\n gap: 2rem;\n flex-direction: column;\n height: auto;\n}\n\ninput {\n display: none;\n}\n\n.button {\n cursor: pointer;\n font-size: 1rem;\n display: block;\n color: inherit;\n padding: 0.5rem 1rem;\n border: 1px solid;\n background-color: transparent;\n}\n\n.upload {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: var(--kemet-upload-margin);\n flex-direction: column;\n border: 2px dashed;\n}\n\n:host([over]) .upload {\n background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n height: 280px;\n}\n\n.files {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n padding: 0 1rem;\n overflow: auto;\n}\n\n:host([mobile]) .files {\n padding: 0;\n}\n\n.heading {\n font-size: 1.25rem;\n margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n display: none;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ADTN,SAAS,iBAAiB;;;AEFnB,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHYf,IAAM,kBAAkB,CAAC,UAAiB;AACxC,QAAM,eAAe;AACrB,QAAM,gBAAgB;AACxB;AAwCA,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,gBAAe;AAYf,mBAAkB;AAMlB,sBAAqB;AASrB,uBAAsB;AAMtB,eAAc;AAAA;AAAA,EAQd,eAAe;AACb,SAAK,mBAAmB,KAAK,YAAY,cAAc,eAAe;AACtE,SAAK,SAAS,KAAK,YAAY,cAAc,SAAS;AAEtD,KAAC,aAAa,YAAY,aAAa,MAAM,EAAE,QAAQ,CAAC,cAAc;AACpE,WAAK,QAAQ,iBAAiB,WAAW,WAAS,gBAAgB,KAAK,GAAG,KAAK;AAAA,IACjF,CAAC;AAED,KAAC,aAAa,UAAU,EAAE,QAAQ,CAAC,cAAc;AAC/C,WAAK,QAAQ,iBAAiB,WAAW,MAAM;AAAE,aAAK,OAAO;AAAA,MAAM,GAAG,KAAK;AAAA,IAC7E,CAAC;AAED,KAAC,aAAa,MAAM,EAAE,QAAQ,CAAC,cAAc;AAC3C,WAAK,OAAO,iBAAiB,WAAW,MAAM;AAAE,aAAK,OAAO;AAAA,MAAO,GAAG,KAAK;AAAA,IAC7E,CAAC;AAED,SAAK,SAAS;AACd,SAAK,YAAY;AAEjB,WAAO,iBAAiB,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAG,CAAC;AAC5D,SAAK,OAAO,iBAAiB,QAAQ,WAAS,KAAK,WAAW,KAAK,GAAG,KAAK;AAE3E,cAAU,MAAM,6BAA6B;AAAA,MAC3C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKI,KAAK,IAAI;AAAA,sBACF,KAAK,QAAQ;AAAA,mBAChB,UAAU,KAAK,MAAM,IAAI,KAAK,SAAS,IAAI;AAAA,oBAC1C,CAAC,UAAiB,KAAK,aAAa,KAAK,CAAC;AAAA;AAAA,6CAEjB,KAAK,OAAO;AAAA,kDACP,KAAK,IAAI,IAAI,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM7E;AAAA,EAEA,aAAa,OAAc;AACzB,cAAU,MAAM,4BAA4B;AAAA,MAC1C;AAAA,MACA,OAAO,KAAK,iBAAiB;AAAA,MAC7B,aAAa,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AAAA,EAEA,WAAW,OAAkB;AAC3B,cAAU,MAAM,4BAA4B;AAAA,MAC1C;AAAA,MACA,OAAO,OAAO,cAAc,SAAS,CAAC;AAAA,MACtC,aAAa,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AAAA,EAEA,WAAW;AACT,UAAM,aAAa,OAAO,WAAW,eAAe,KAAK,UAAU,GAAG;AACtE,SAAK,SAAS,WAAW;AAAA,EAC3B;AAAA,EAEA,cAAc;AACZ,SAAK,aAAa,EAAE,eAAe,SAAS,cAAc,MAAM;AAAA,EAClE;AACF;AAzHqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GATR,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,WAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,WAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,WAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAxBlD,WAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GA3B9B,WA4BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA9BlC,WA+BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjCtB,WAkCnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GApCtB,WAqCnB;AAGA;AAAA,EADC,MAAM;AAAA,GAvCY,WAwCnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1CY,WA2CnB;AA3CmB,aAArB;AAAA,EADC,cAAc,mBAAmB;AAAA,GACb;","names":[]}

package/dist/elements/input-otp/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from '../../utilities/decorators';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/*\n @since 4.1.0\n * @status stable\n \n @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n \n @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n \n * @csspart input - The input elements.\n \n @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n \n @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n \n /\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n static styles = [styles];\n\n @property({ type: Number })\n digits: number = 6;\n\n @property({ type: String, reflect: true })\n value: string = '';\n\n @property()\n pattern!: string;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n autoFocus: boolean = true;\n\n @state()\n values: string[] = [];\n\n @state()\n lastInput!: string;\n\n @state()\n completed: boolean = false;\n\n @queryAll('input')\n inputElements!: NodeListOf<HTMLInputElement>;\n\n firstUpdated() {\n emitEvent(this, 'kemet-input-otp-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n updated() {\n this.determineCompleted();\n }\n\n render() {\n return this.makeInputs();\n }\n\n determineCompleted() {\n const hasBlankValues = this.values.includes('');\n if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n emitEvent(this, 'kemet-input-otp-completed', {\n detail: { value: this.value, element: this },\n bubbles: true,\n composed: true,\n });\n this.completed = true;\n }\n }\n\n makeInputs() {\n return Array.from(\n { length: this.digits },\n (_, index) => html`\n <label>\n <span>Enter digit ${index + 1}</span>\n <input\n part=\"input\"\n id=\"${index}\"\n maxlength=\"1\"\n @input=${this.handleInput}\n @keydown=${this.handleKeyDown}\n @paste=${this.handlePaste}\n />\n </label>\n `\n );\n }\n\n eatCharacters(inputValue: string) {\n const regex = new RegExp(this.pattern);\n return inputValue.replace(regex, '');\n }\n\n handleInput(event: InputEvent) {\n const input = event.target as HTMLInputElement;\n const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n const nextInput = this.inputElements[currentIndex + 1];\n\n if (this.pattern) {\n input.value = this.eatCharacters(input.value);\n }\n\n this.values[currentIndex] = input.value;\n this.value = this.values.join('');\n this.lastInput = input.value;\n\n const fullDigits = this.values.length === this.digits && !!input.value;\n\n if (!fullDigits) {\n this.completed = false;\n }\n\n if (nextInput && this.autoFocus && !!input.value) {\n nextInput.focus();\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n }\n\n handlePaste(event: ClipboardEvent) {\n event.preventDefault();\n const pasteData = event.clipboardData?.getData('text') ?? '';\n\n // Trim and limit to number of digits\n const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n const charactersArray = charactersString.split('');\n\n // Fill the inputs and values array one by one\n charactersArray.forEach((character, index) => {\n const input = this.inputElements[index];\n if (input && !!character) {\n input.value = character;\n this.values[index] = character;\n }\n });\n\n const lastFilled = this.inputElements[charactersArray.length - 1];\n lastFilled?.focus();\n this.value = this.values.join('');\n this.determineCompleted();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-otp': KemetInputOtp\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/*\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-otp-input-font-color: var(--kemet-color-font-base);\n --kemet-otp-input-min-width: 3rem;\n --kemet-otp-input-font-size: 2rem;\n --kemet-otp-input-border: 1px solid;\n --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n display: flex;\n aspect-ratio: 4/3;\n}\n\nspan {\n position: absolute;\n margin: -1px;\n width: 1px;\n height: 1px;\n display: block;\n overflow: hidden;\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n\n[part=\"input\"] {\n color: var(--kemet-otp-input-font-color);\n text-align: center;\n width: 100%;\n height: 100%;\n font-size: var(--kemet-otp-input-font-size);\n border: var(--kemet-otp-input-border);\n border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHkCf,IAAqB,gBAArB,cAA2C,WAAW;AAAA,EAAtD;AAAA;AAIE,kBAAiB;AAGjB,iBAAgB;AAShB,eAAc;AAGd,qBAAqB;AAGrB,kBAAmB,CAAC;AAMpB,qBAAqB;AAAA;AAAA,EAKrB,eAAe;AACb,cAAU,MAAM,2BAA2B;AAAA,MACzC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,UAAU;AACR,SAAK,mBAAmB;AAAA,EAC1B;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEA,qBAAqB;AACnB,UAAM,iBAAiB,KAAK,OAAO,SAAS,EAAE;AAC9C,QAAI,KAAK,OAAO,WAAW,KAAK,UAAU,CAAC,kBAAkB,CAAC,KAAK,WAAW;AAC5E,gBAAU,MAAM,6BAA6B;AAAA,QAC3C,QAAQ,EAAE,OAAO,KAAK,OAAO,SAAS,KAAK;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC;AACD,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO,MAAM;AAAA,MACX,EAAE,QAAQ,KAAK,OAAO;AAAA,MACtB,CAAC,GAAG,UAAU;AAAA;AAAA,8BAEU,QAAQ,CAAC;AAAA;AAAA;AAAA,kBAGrB,KAAK;AAAA;AAAA,qBAEF,KAAK,WAAW;AAAA,uBACd,KAAK,aAAa;AAAA,qBACpB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,IAIjC;AAAA,EACF;AAAA,EAEA,cAAc,YAAoB;AAChC,UAAM,QAAQ,IAAI,OAAO,KAAK,OAAO;AACrC,WAAO,WAAW,QAAQ,OAAO,EAAE;AAAA,EACrC;AAAA,EAEA,YAAY,OAAmB;AAC7B,UAAM,QAAQ,MAAM;AACpB,UAAM,eAAe,SAAS,MAAM,aAAa,IAAI,KAAK,GAAG;AAC7D,UAAM,YAAY,KAAK,cAAc,eAAe,CAAC;AAErD,QAAI,KAAK,SAAS;AAChB,YAAM,QAAQ,KAAK,cAAc,MAAM,KAAK;AAAA,IAC9C;AAEA,SAAK,OAAO,YAAY,IAAI,MAAM;AAClC,SAAK,QAAQ,KAAK,OAAO,KAAK,EAAE;AAChC,SAAK,YAAY,MAAM;AAEvB,UAAM,aAAa,KAAK,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,MAAM;AAEjE,QAAI,CAAC,YAAY;AACf,WAAK,YAAY;AAAA,IACnB;AAEA,QAAI,aAAa,KAAK,aAAa,CAAC,CAAC,MAAM,OAAO;AAChD,gBAAU,MAAM;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,cAAc,OAAsB;AAClC,SAAK,YAAY,MAAM;AAAA,EACzB;AAAA,EAEA,YAAY,OAAuB;AACjC,UAAM,eAAe;AACrB,UAAM,YAAY,MAAM,eAAe,QAAQ,MAAM,KAAK;AAG1D,UAAM,mBAAmB,KAAK,cAAc,UAAU,KAAK,EAAE,MAAM,GAAG,KAAK,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC;AACrG,UAAM,kBAAkB,iBAAiB,MAAM,EAAE;AAGjD,oBAAgB,QAAQ,CAAC,WAAW,UAAU;AAC5C,YAAM,QAAQ,KAAK,cAAc,KAAK;AACtC,UAAI,SAAS,CAAC,CAAC,WAAW;AACxB,cAAM,QAAQ;AACd,aAAK,OAAO,KAAK,IAAI;AAAA,MACvB;AAAA,IACF,CAAC;AAED,UAAM,aAAa,KAAK,cAAc,gBAAgB,SAAS,CAAC;AAChE,gBAAY,MAAM;AAClB,SAAK,QAAQ,KAAK,OAAO,KAAK,EAAE;AAChC,SAAK,mBAAmB;AAAA,EAC1B;AACF;AA1IqB,cACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,cAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,cAOnB;AAGA;AAAA,EADC,SAAS;AAAA,GATS,cAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,cAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,cAgBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAlBY,cAmBnB;AAGA;AAAA,EADC,MAAM;AAAA,GArBY,cAsBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAxBY,cAyBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA3BY,cA4BnB;AAGA;AAAA,EADC,SAAS,OAAO;AAAA,GA9BE,cA+BnB;AA/BmB,gBAArB;AAAA,EADC,cAAc,iBAAiB;AAAA,GACX;","names":[]}
1	+ {"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from '../../utilities/decorators';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/*\n @since 4.1.0\n * @status stable\n \n @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n \n @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n \n * @csspart input - The input elements.\n \n @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n \n @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n \n /\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n static styles = [styles];\n\n @property({ type: Number })\n digits: number = 6;\n\n @property({ type: String, reflect: true })\n value: string = '';\n\n @property()\n pattern!: string;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n autoFocus: boolean = true;\n\n @state()\n values: string[] = [];\n\n @state()\n lastInput!: string;\n\n @state()\n completed: boolean = false;\n\n @queryAll('input')\n inputElements!: NodeListOf<HTMLInputElement>;\n\n firstUpdated() {\n emitEvent(this, 'kemet-input-otp-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n updated() {\n this.determineCompleted();\n }\n\n render() {\n return this.makeInputs();\n }\n\n determineCompleted() {\n const hasBlankValues = this.values.includes('');\n if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n emitEvent(this, 'kemet-input-otp-completed', {\n detail: { value: this.value, element: this },\n bubbles: true,\n composed: true,\n });\n this.completed = true;\n }\n }\n\n makeInputs() {\n return Array.from(\n { length: this.digits },\n (_, index) => html`\n <label>\n <span>Enter digit ${index + 1}</span>\n <input\n part=\"input\"\n id=\"${index}\"\n maxlength=\"1\"\n @input=${this.handleInput}\n @keydown=${this.handleKeyDown}\n @paste=${this.handlePaste}\n />\n </label>\n `\n );\n }\n\n eatCharacters(inputValue: string) {\n const regex = new RegExp(this.pattern);\n return inputValue.replace(regex, '');\n }\n\n handleInput(event: InputEvent) {\n const input = event.target as HTMLInputElement;\n const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n const nextInput = this.inputElements[currentIndex + 1];\n\n if (this.pattern) {\n input.value = this.eatCharacters(input.value);\n }\n\n this.values[currentIndex] = input.value;\n this.value = this.values.join('');\n this.lastInput = input.value;\n\n const fullDigits = this.values.length === this.digits && !!input.value;\n\n if (!fullDigits) {\n this.completed = false;\n }\n\n if (nextInput && this.autoFocus && !!input.value) {\n nextInput.focus();\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n }\n\n handlePaste(event: ClipboardEvent) {\n event.preventDefault();\n const pasteData = event.clipboardData?.getData('text') ?? '';\n\n // Trim and limit to number of digits\n const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n const charactersArray = charactersString.split('');\n\n // Fill the inputs and values array one by one\n charactersArray.forEach((character, index) => {\n const input = this.inputElements[index];\n if (input && !!character) {\n input.value = character;\n this.values[index] = character;\n }\n });\n\n const lastFilled = this.inputElements[charactersArray.length - 1];\n lastFilled?.focus();\n this.value = this.values.join('');\n this.determineCompleted();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-otp': KemetInputOtp\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/*\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-otp-input-font-color: var(--kemet-color-font-base);\n --kemet-otp-input-min-width: 3rem;\n --kemet-otp-input-font-size: 2rem;\n --kemet-otp-input-border: 1px solid;\n --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n display: flex;\n aspect-ratio: 4/3;\n}\n\nspan {\n position: absolute;\n margin: -1px;\n width: 1px;\n height: 1px;\n display: block;\n overflow: hidden;\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n\n[part=\"input\"] {\n color: var(--kemet-otp-input-font-color);\n text-align: center;\n width: 100%;\n height: 100%;\n font-size: var(--kemet-otp-input-font-size);\n border: var(--kemet-otp-input-border);\n border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/loader/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/loader/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/loader/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumVariants {\n NO_BORDER = 'no-border',\n BORDER_TOP = 'border-top',\n DOUBLE_BORDER = 'double-border',\n DOUBLE_SPINNERS = 'double-spinners',\n THREE_DOTS = 'three-dots',\n FULL_CIRCLE = 'full-circle',\n SPINNER = 'spinner',\n MESH = 'mesh',\n}\n\n/*\n @since 5.0.0\n * @status stable\n \n @tagname kemet-loader\n * @summary Displays animations for a loading state.\n \n @prop {string} variant - The style of loader to display\n * @prop {number} size - How large to make the loader.\n * @ssrsafe yes\n \n @csspart loader - The main loader container\n \n @cssproperty --kemet-loader-color - The color of the loader.\n * @cssproperty --kemet-loader-thickness - The thickness of the loader.\n * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.\n * @cssproperty --kemet-loader-size - The size of the loader.\n \n @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM\n * @detail {HTMLElement} element - The loader element\n /\n@customElement('kemet-loader')\nexport default class KemetLoader extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true })\n variant: EnumVariants = EnumVariants.NO_BORDER;\n\n @property({ type: Number })\n size: number = 48;\n\n firstUpdated() {\n emitEvent(this, 'kemet-loader-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n }\n\n render() {\n if (\n this.variant === EnumVariants.THREE_DOTS \|\|\n this.variant === EnumVariants.FULL_CIRCLE \|\|\n this.variant === EnumVariants.MESH\n ) {\n this.style.setProperty('--kemet-loader-dot-size', `${this.size}px`);\n return html`\n <div part=\"loader\">\n ${this.makeLoader()}\n </div>\n `;\n }\n\n if (this.variant === EnumVariants.SPINNER) {\n this.style.setProperty('--kemet-loader-size', `${this.size}px`);\n return html`\n <div part=\"loader\">\n ${this.makeLoader()}\n </div>\n `;\n }\n\n return html`\n <div style=\"width: ${this.size}px; height: ${this.size}px;\" part=\"loader\">\n ${this.makeLoader()}\n </div>\n `;\n }\n\n makeLoader() {\n switch (this.variant) {\n case EnumVariants.NO_BORDER:\n return html`\n <div class=\"nb-spinner\"></div>\n `;\n case EnumVariants.BORDER_TOP:\n return html`\n <div class=\"bt-spinner\"></div>\n `;\n case EnumVariants.DOUBLE_BORDER:\n return html`\n <div class=\"db-spinner\"></div>\n `;\n case EnumVariants.DOUBLE_SPINNERS:\n return html`\n <div class=\"dbl-spinner\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n <div class=\"dbl-spinner dbl-spinner--2\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n `;\n case EnumVariants.THREE_DOTS:\n return html`\n <div class=\"dot-loader\"></div>\n <div class=\"dot-loader dot-loader--2\"></div>\n <div class=\"dot-loader dot-loader--3\"></div>\n `;\n case EnumVariants.FULL_CIRCLE:\n return html`\n <div class=\"circle-loader\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n `;\n case EnumVariants.SPINNER:\n return html`\n <div class=\"ml-loader\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n `;\n case EnumVariants.MESH:\n return html`\n <div class=\"mesh-loader\">\n <div class=\"set-one\">\n <div class=\"circle\"></div>\n <div class=\"circle\"></div>\n </div>\n <div class=\"set-two\">\n <div class=\"circle\"></div>\n <div class=\"circle\"></div>\n </div>\n </div>\n `;\n }\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n /\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-loader-color: var(--kemet-color-brand-primary-base);\n --kemet-loader-thickness: 4px;\n --kemet-loader-dot-size: 24px;\n --kemet-loader-size: 48px;\n\n / private variables /\n --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) 0.5);\n --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n:host([variant=three-dots]) > div {\n display: inline-flex;\n gap: var(--_kemet-loader-three-dot-gap);\n align-items: center;\n justify-content: center;\n}\n\n/* NO BORDER SPINNER /\n.nb-spinner {\n width: 100%;\n height: 100%;\n margin: 0;\n background: transparent;\n border-top: var(--kemet-loader-thickness) solid;\n border-right: var(--kemet-loader-thickness) solid transparent;\n border-radius: 50%;\n animation: 1s spin linear infinite;\n}\n\n/ BORDER TOP SPINNER /\n.bt-spinner {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: transparent;\n border: var(--kemet-loader-thickness) solid;\n border-top-color: var(--kemet-loader-color);\n animation: 1s spin linear infinite;\n}\n\n/ DOUBLE BORDER SPINNER /\n.db-spinner {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: transparent;\n border: var(--kemet-loader-thickness) solid #222;\n border-top-color: var(--kemet-loader-color);\n border-bottom-color: var(--kemet-loader-color);\n animation: 1s spin linear infinite;\n}\n\n/ DOUBLE SPINNER /\n.double-spinner {\n position: relative;\n}\n\n.dbl-spinner {\n position: absolute;\n border-radius: 50%;\n background-color: transparent;\n border: var(--kemet-loader-thickness) solid transparent;\n border-top: var(--kemet-loader-thickness) solid;\n border-left: var(--kemet-loader-thickness) solid;\n animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n border: var(--kemet-loader-thickness) solid transparent;\n border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n animation: 1s spin linear infinite;\n}\n\n\n/ 3 DOT LOADER /\n.dot-loader {\n width: var(--kemet-loader-dot-size);\n height: var(--kemet-loader-dot-size);\n border-radius: 50%;\n background-color: var(--kemet-loader-color);\n position: relative;\n animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/ CIRCLE DOT LOADER /\n.circle-loader {\n position: relative;\n display: flex;\n align-self: center;\n justify-self: center;\n width: calc(var(--_kemet-loader-circle-radius) 2 + var(--kemet-loader-dot-size));\n height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n height: var(--kemet-loader-dot-size);\n width: var(--kemet-loader-dot-size);\n background-color: var(--kemet-loader-color);\n border-radius: 50%;\n position: absolute;\n animation: 0.8s opaque ease-in-out infinite both;\n transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n top: 50%;\n left: calc(50% + var(--_kemet-loader-circle-radius));\n animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n top: calc(50% + var(--_kemet-loader-circle-radius));\n left: 50%;\n animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n top: 50%;\n left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER /\n.mesh-loader {\n overflow: hidden;\n height: inherit;\n width: inherit;\n}\n\n.mesh-loader .circle {\n width: var(--kemet-loader-dot-size);\n height: var(--kemet-loader-dot-size);\n position: absolute;\n background: var(--kemet-loader-color);\n border-radius: 50%;\n margin: calc(var(--kemet-loader-dot-size) / -2);\n animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n animation-delay: 0s;\n}\n\n.mesh-loader > div {\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.mesh-loader > div:last-child {\n transform: rotate(90deg);\n}\n\n\n/ SPINNER 13 /\n.ml-loader {\n position: relative;\n width: calc(var(--_kemet-loader-spinner-radius) 2);\n height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n width: var(--_kemet-loader-spinner-bar-width);\n height: var(--_kemet-loader-spinner-bar-height);\n border-radius: 10px;\n background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n transform: rotate(360deg);\n animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinBack {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-720deg);\n transform: rotate(-720deg);\n }\n}\n\n@keyframes spinBorder {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n border-width: 15px;\n }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n border-width: 3px;\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n border-width: 15px;\n }\n}\n\n@keyframes grow {\n 0%, 40%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n 40% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes pulsate {\n 0% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n 5% {\n -webkit-transform: rotate(45deg) scale(0.9);\n transform: rotate(45deg) scale(0.9);\n }\n 10% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n 15% {\n -webkit-transform: rotate(45deg) scale(1);\n transform: rotate(45deg) scale(1);\n }\n 50% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n 100% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n}\n\n@keyframes opaque {\n 0% {\n opacity: 0.1;\n }\n 40% {\n opacity: 1;\n }\n 80% {\n opacity: 0.1;\n }\n 100% {\n opacity: 0.1;\n }\n}\n\n@keyframes mesh {\n 0% {\n -webkit-transform-origin: 50% -100%;\n transform-origin: 50% -100%;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 50% {\n -webkit-transform-origin: 50% -100%;\n transform-origin: 50% -100%;\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n 50.1% {\n -webkit-transform-origin: 50% 200%;\n transform-origin: 50% 200%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform-origin: 50% 200%;\n transform-origin: 50% 200%;\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHCO,IAAK,eAAL,kBAAKA,kBAAL;AACL,EAAAA,cAAA,eAAY;AACZ,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,mBAAgB;AAChB,EAAAA,cAAA,qBAAkB;AAClB,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,iBAAc;AACd,EAAAA,cAAA,aAAU;AACV,EAAAA,cAAA,UAAO;AARG,SAAAA;AAAA,GAAA;AAiCZ,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAIE,mBAAwB;AAGxB,gBAAe;AAAA;AAAA,EAEf,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QACE,KAAK,YAAY,iCACjB,KAAK,YAAY,mCACjB,KAAK,YAAY,mBACjB;AACA,WAAK,MAAM,YAAY,2BAA2B,GAAG,KAAK,IAAI,IAAI;AAClE,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,QAAI,KAAK,YAAY,yBAAsB;AACzC,WAAK,MAAM,YAAY,uBAAuB,GAAG,KAAK,IAAI,IAAI;AAC9D,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,WAAO;AAAA,2BACgB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,UAClD,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,EAGzB;AAAA,EAEA,aAAa;AACX,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA,mDACoC,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,kEAClB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA;AAAA,MAE7F,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYX;AAAA,EACF;AACF;AAvHqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAPmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":["EnumVariants"]}
1	+ {"version":3,"sources":["../../../src/elements/loader/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/loader/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumVariants {\n NO_BORDER = 'no-border',\n BORDER_TOP = 'border-top',\n DOUBLE_BORDER = 'double-border',\n DOUBLE_SPINNERS = 'double-spinners',\n THREE_DOTS = 'three-dots',\n FULL_CIRCLE = 'full-circle',\n SPINNER = 'spinner',\n MESH = 'mesh',\n}\n\n/*\n @since 5.0.0\n * @status stable\n \n @tagname kemet-loader\n * @summary Displays animations for a loading state.\n \n @prop {string} variant - The style of loader to display\n * @prop {number} size - How large to make the loader.\n * @ssrsafe yes\n \n @csspart loader - The main loader container\n \n @cssproperty --kemet-loader-color - The color of the loader.\n * @cssproperty --kemet-loader-thickness - The thickness of the loader.\n * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.\n * @cssproperty --kemet-loader-size - The size of the loader.\n \n @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM\n * @detail {HTMLElement} element - The loader element\n /\n@customElement('kemet-loader')\nexport default class KemetLoader extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true })\n variant: EnumVariants = EnumVariants.NO_BORDER;\n\n @property({ type: Number })\n size: number = 48;\n\n firstUpdated() {\n emitEvent(this, 'kemet-loader-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n }\n\n render() {\n if (\n this.variant === EnumVariants.THREE_DOTS \|\|\n this.variant === EnumVariants.FULL_CIRCLE \|\|\n this.variant === EnumVariants.MESH\n ) {\n this.style.setProperty('--kemet-loader-dot-size', `${this.size}px`);\n return html`\n <div part=\"loader\">\n ${this.makeLoader()}\n </div>\n `;\n }\n\n if (this.variant === EnumVariants.SPINNER) {\n this.style.setProperty('--kemet-loader-size', `${this.size}px`);\n return html`\n <div part=\"loader\">\n ${this.makeLoader()}\n </div>\n `;\n }\n\n return html`\n <div style=\"width: ${this.size}px; height: ${this.size}px;\" part=\"loader\">\n ${this.makeLoader()}\n </div>\n `;\n }\n\n makeLoader() {\n switch (this.variant) {\n case EnumVariants.NO_BORDER:\n return html`\n <div class=\"nb-spinner\"></div>\n `;\n case EnumVariants.BORDER_TOP:\n return html`\n <div class=\"bt-spinner\"></div>\n `;\n case EnumVariants.DOUBLE_BORDER:\n return html`\n <div class=\"db-spinner\"></div>\n `;\n case EnumVariants.DOUBLE_SPINNERS:\n return html`\n <div class=\"dbl-spinner\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n <div class=\"dbl-spinner dbl-spinner--2\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n `;\n case EnumVariants.THREE_DOTS:\n return html`\n <div class=\"dot-loader\"></div>\n <div class=\"dot-loader dot-loader--2\"></div>\n <div class=\"dot-loader dot-loader--3\"></div>\n `;\n case EnumVariants.FULL_CIRCLE:\n return html`\n <div class=\"circle-loader\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n `;\n case EnumVariants.SPINNER:\n return html`\n <div class=\"ml-loader\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n `;\n case EnumVariants.MESH:\n return html`\n <div class=\"mesh-loader\">\n <div class=\"set-one\">\n <div class=\"circle\"></div>\n <div class=\"circle\"></div>\n </div>\n <div class=\"set-two\">\n <div class=\"circle\"></div>\n <div class=\"circle\"></div>\n </div>\n </div>\n `;\n }\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n /\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-loader-color: var(--kemet-color-brand-primary-base);\n --kemet-loader-thickness: 4px;\n --kemet-loader-dot-size: 24px;\n --kemet-loader-size: 48px;\n\n / private variables /\n --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) 0.5);\n --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n:host([variant=three-dots]) > div {\n display: inline-flex;\n gap: var(--_kemet-loader-three-dot-gap);\n align-items: center;\n justify-content: center;\n}\n\n/* NO BORDER SPINNER /\n.nb-spinner {\n width: 100%;\n height: 100%;\n margin: 0;\n background: transparent;\n border-top: var(--kemet-loader-thickness) solid;\n border-right: var(--kemet-loader-thickness) solid transparent;\n border-radius: 50%;\n animation: 1s spin linear infinite;\n}\n\n/ BORDER TOP SPINNER /\n.bt-spinner {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: transparent;\n border: var(--kemet-loader-thickness) solid;\n border-top-color: var(--kemet-loader-color);\n animation: 1s spin linear infinite;\n}\n\n/ DOUBLE BORDER SPINNER /\n.db-spinner {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: transparent;\n border: var(--kemet-loader-thickness) solid #222;\n border-top-color: var(--kemet-loader-color);\n border-bottom-color: var(--kemet-loader-color);\n animation: 1s spin linear infinite;\n}\n\n/ DOUBLE SPINNER /\n.double-spinner {\n position: relative;\n}\n\n.dbl-spinner {\n position: absolute;\n border-radius: 50%;\n background-color: transparent;\n border: var(--kemet-loader-thickness) solid transparent;\n border-top: var(--kemet-loader-thickness) solid;\n border-left: var(--kemet-loader-thickness) solid;\n animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n border: var(--kemet-loader-thickness) solid transparent;\n border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n animation: 1s spin linear infinite;\n}\n\n\n/ 3 DOT LOADER /\n.dot-loader {\n width: var(--kemet-loader-dot-size);\n height: var(--kemet-loader-dot-size);\n border-radius: 50%;\n background-color: var(--kemet-loader-color);\n position: relative;\n animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/ CIRCLE DOT LOADER /\n.circle-loader {\n position: relative;\n display: flex;\n align-self: center;\n justify-self: center;\n width: calc(var(--_kemet-loader-circle-radius) 2 + var(--kemet-loader-dot-size));\n height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n height: var(--kemet-loader-dot-size);\n width: var(--kemet-loader-dot-size);\n background-color: var(--kemet-loader-color);\n border-radius: 50%;\n position: absolute;\n animation: 0.8s opaque ease-in-out infinite both;\n transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n top: 50%;\n left: calc(50% + var(--_kemet-loader-circle-radius));\n animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n top: calc(50% + var(--_kemet-loader-circle-radius));\n left: 50%;\n animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n top: 50%;\n left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER /\n.mesh-loader {\n overflow: hidden;\n height: inherit;\n width: inherit;\n}\n\n.mesh-loader .circle {\n width: var(--kemet-loader-dot-size);\n height: var(--kemet-loader-dot-size);\n position: absolute;\n background: var(--kemet-loader-color);\n border-radius: 50%;\n margin: calc(var(--kemet-loader-dot-size) / -2);\n animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n animation-delay: 0s;\n}\n\n.mesh-loader > div {\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.mesh-loader > div:last-child {\n transform: rotate(90deg);\n}\n\n\n/ SPINNER 13 /\n.ml-loader {\n position: relative;\n width: calc(var(--_kemet-loader-spinner-radius) 2);\n height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n width: var(--_kemet-loader-spinner-bar-width);\n height: var(--_kemet-loader-spinner-bar-height);\n border-radius: 10px;\n background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n transform: rotate(360deg);\n animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinBack {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-720deg);\n transform: rotate(-720deg);\n }\n}\n\n@keyframes spinBorder {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n border-width: 15px;\n }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n border-width: 3px;\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n border-width: 15px;\n }\n}\n\n@keyframes grow {\n 0%, 40%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n 40% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes pulsate {\n 0% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n 5% {\n -webkit-transform: rotate(45deg) scale(0.9);\n transform: rotate(45deg) scale(0.9);\n }\n 10% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n 15% {\n -webkit-transform: rotate(45deg) scale(1);\n transform: rotate(45deg) scale(1);\n }\n 50% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n 100% {\n -webkit-transform: rotate(45deg) scale(0.8);\n transform: rotate(45deg) scale(0.8);\n }\n}\n\n@keyframes opaque {\n 0% {\n opacity: 0.1;\n }\n 40% {\n opacity: 1;\n }\n 80% {\n opacity: 0.1;\n }\n 100% {\n opacity: 0.1;\n }\n}\n\n@keyframes mesh {\n 0% {\n -webkit-transform-origin: 50% -100%;\n transform-origin: 50% -100%;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 50% {\n -webkit-transform-origin: 50% -100%;\n transform-origin: 50% -100%;\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n 50.1% {\n -webkit-transform-origin: 50% 200%;\n transform-origin: 50% 200%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform-origin: 50% 200%;\n transform-origin: 50% 200%;\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n"],"mappings":"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","names":["EnumVariants"]}

package/dist/elements/password/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as lit from 'lit';
 import { LitElement, TemplateResult } from 'lit';
-import { e as EnumAppearances, H as HTMLKemetFieldElement, c as HTMLKemetInputElement, f as HTMLKemetTextareaElement } from '../../constants-Dj9X-JwG.js';
+import { E as EnumAppearances, H as HTMLKemetFieldElement, c as HTMLKemetInputElement, f as HTMLKemetTextareaElement } from '../../constants-BsAfWV-a.js';
 import 'lit-html';
 import '../../form-controller-3q581XcZ.js';

package/dist/elements/password/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/password/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/password/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\n\ninterface InterfaceOptions {\n pattern: string;\n message: string;\n meetsCriteria?: boolean;\n}\n\nexport interface InterfacePasswordStrengthChangeDetails {\n appearance: EnumAppearances;\n meetsPasswordCriteria: boolean;\n element: KemetPassword;\n}\n\n/*\n @since 1.2.0\n * @status stable\n \n @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n * @ssrsafe yes\n \n @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak \| Better \| Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n \n @event kemet-password-strength-change - Fires when there's a change in strength.\n \n @csspart strength - Indicates password strength.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n \n /\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n static styles = [styles];\n\n @property({ type: Array })\n rules: InterfaceOptions[] = [\n { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n { pattern: '(?=.[a-z])(?=.[A-Z])', message: 'Uppercase and lowercase' },\n { pattern: '(?=.[0-9])', message: 'At least one number (0-9)' },\n ];\n\n @property({ type: Boolean, reflect: true })\n show: boolean = false;\n\n @property({ type: String })\n value!: string;\n\n @property({ type: String })\n message: string = 'Please make sure you meet all the requirements.';\n\n @property({ type: String })\n strength!: string;\n\n @property({ type: String })\n icon: string = 'check2';\n\n @property({ type: Number })\n iconSize: number = 18;\n\n @state()\n appearance?: EnumAppearances;\n\n @state()\n field!: HTMLKemetFieldElement;\n\n @state()\n input!: HTMLKemetInputElement \| HTMLKemetTextareaElement;\n\n firstUpdated() {\n // elements\n this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n this.input = this.field.querySelector('[slot=\"input\"]') as HTMLKemetInputElement \| HTMLKemetTextareaElement;\n\n // events listeners\n this.input?.addEventListener('kemet-input-input', this.handleInput.bind(this));\n }\n\n render() {\n return html`\n <div role=\"alert\" aria-live=\"assertive\">\n <div class=\"${this.strength}\" part=\"strength\">\n <span>${this.strength}</span>\n <ul part=\"indicator\">\n <li></li>\n <li></li>\n <li></li>\n </ul>\n </div>\n <p part=\"message\">${this.message}</p>\n <ul part=\"rules\">\n ${this.makeRules()}\n </ul>\n </div>\n `;\n }\n\n /\n Makes the list of rules\n * @private\n * @returns {TemplateResult<1>[]} the criteria rules\n /\n makeRules(): TemplateResult<1>[] {\n if (this.input) {\n return this.rules.map((rule) => {\n const regExp = new RegExp(rule.pattern);\n const meetsCriteria = regExp.test(this.input.value);\n rule.meetsCriteria = meetsCriteria;\n return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n });\n }\n\n return [];\n }\n\n /\n Makes the check icon if the criteria has been met\n * @param {boolean} meetsCriteria\n * @private\n * @returns {TemplateResult} an icon component\n /\n makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n if (meetsCriteria) {\n return html`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;\n }\n\n return html``;\n }\n\n /\n Handles the kemet-input-input event\n * @param {} event\n @private\n /\n handleInput(event: Event) {\n this.value = (event as CustomEvent).detail.value;\n this.setStrength();\n this.visibility();\n }\n\n /\n Determines the strength of the password\n * @private\n /\n setStrength() {\n // We use a setTimeout here because makeRules adds the meetsCriteria\n // property to the rules. We need that to be set by render() before\n // setting the Strength because the percentage calc is based on it\n setTimeout(() => {\n const totalRules = this.rules.length;\n const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n const metRulesPercentage = Math.round((metRules / totalRules) 100) / 100;\n\n if (metRulesPercentage <= 0.33) {\n this.strength = 'weak';\n this.appearance = EnumAppearances.Error;\n }\n\n if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n this.strength = 'better';\n this.appearance = EnumAppearances.Error;\n }\n\n if (metRulesPercentage > 0.67) {\n this.strength = 'strong';\n this.appearance = EnumAppearances.Success;\n }\n\n emitEvent(this, 'kemet-password-strength-change', {\n appearance: this.appearance,\n meetsPasswordCriteria: this.appearance === EnumAppearances.Success,\n element: this,\n });\n }, 1);\n }\n\n /*\n Determines whether to show or hide the component\n * @private\n /\n visibility() {\n this.show = this.value.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-password': KemetPassword\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n color: inherit;\n display: none;\n}\n\n:host([show]) {\n display: block;\n}\n\np {\n margin: 1.6rem 0;\n}\n\n[part=strength] {\n display: grid;\n align-items: center;\n grid-template-columns: 1fr auto;\n line-height: 1;\n margin-top: 0.8rem;\n}\n\n[part=strength] > span {\n text-transform: capitalize;\n}\n\n.weak {\n color: var(--kemet-color-font-error);\n}\n\n.better {\n color: var(--kemet-color-font-warning);\n}\n\n.strong {\n color: var(--kemet-color-font-success);\n}\n\n[part=indicator] {\n display: flex;\n gap: 0.4rem;\n margin: 0;\n list-style: none;\n}\n\n[part=indicator] li {\n width: 1.6rem;\n height: 0.2rem;\n}\n\n.weak [part=indicator] li:nth-child(1) {\n background-color: var(--kemet-color-font-error);\n}\n\n.better [part=indicator] li:nth-child(1),\n.better [part=indicator] li:nth-child(2) {\n background-color: var(--kemet-color-font-warning);\n}\n\n.strong [part=indicator] li {\n background-color: var(--kemet-color-font-success);\n}\n\n[part=rules] {\n color: inherit;\n line-height: 1.5;\n list-style: none;\n font-size: 90%;\n padding-left: 2rem;\n}\n\n[part=rules] li {\n position: relative;\n}\n\n[part=rules] kemet-icon {\n color: var(--kemet-color-font-success);\n position: absolute;\n left: -2rem;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6C;;;ACA5D,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH6Cf,IAAqB,gBAArB,cAA2C,WAAW;AAAA,EAAtD;AAAA;AAIE,iBAA4B;AAAA,MAC1B,EAAE,SAAS,cAAc,SAAS,6BAA6B;AAAA,MAC/D,EAAE,SAAS,0BAA0B,SAAS,0BAA0B;AAAA,MACxE,EAAE,SAAS,eAAe,SAAS,4BAA4B;AAAA,IACjE;AAGA,gBAAgB;AAMhB,mBAAkB;AAMlB,gBAAe;AAGf,oBAAmB;AAAA;AAAA,EAWnB,eAAe;AAEb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,QAAQ,KAAK,MAAM,cAAc,gBAAgB;AAGtD,SAAK,OAAO,iBAAiB,qBAAqB,KAAK,YAAY,KAAK,IAAI,CAAC;AAAA,EAC/E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,sBAEW,KAAK,QAAQ;AAAA,kBACjB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOH,KAAK,OAAO;AAAA;AAAA,YAE5B,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAI1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAiC;AAC/B,QAAI,KAAK,OAAO;AACd,aAAO,KAAK,MAAM,IAAI,CAAC,SAAS;AAC9B,cAAM,SAAS,IAAI,OAAO,KAAK,OAAO;AACtC,cAAM,gBAAgB,OAAO,KAAK,KAAK,MAAM,KAAK;AAClD,aAAK,gBAAgB;AACrB,eAAO,WAAW,KAAK,cAAc,aAAa,CAAC,IAAI,KAAK,OAAO;AAAA,MACrE,CAAC;AAAA,IACH;AAEA,WAAO,CAAC;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,cAAc,eAAwC;AACpD,QAAI,eAAe;AACjB,aAAO,wBAAwB,KAAK,IAAI,SAAS,KAAK,QAAQ;AAAA,IAChE;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAc;AACxB,SAAK,QAAS,MAAsB,OAAO;AAC3C,SAAK,YAAY;AACjB,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc;AAIZ,eAAW,MAAM;AACf,YAAM,aAAa,KAAK,MAAM;AAC9B,YAAM,WAAW,KAAK,MAAM,OAAO,UAAQ,KAAK,aAAa,EAAE;AAC/D,YAAM,qBAAqB,KAAK,MAAO,WAAW,aAAc,GAAG,IAAI;AAEvE,UAAI,sBAAsB,MAAM;AAC9B,aAAK,WAAW;AAChB,aAAK;AAAA,MACP;AAEA,UAAI,qBAAqB,QAAQ,sBAAsB,MAAM;AAC3D,aAAK,WAAW;AAChB,aAAK;AAAA,MACP;AAEA,UAAI,qBAAqB,MAAM;AAC7B,aAAK,WAAW;AAChB,aAAK;AAAA,MACP;AAEA,gBAAU,MAAM,kCAAkC;AAAA,QAChD,YAAY,KAAK;AAAA,QACjB,uBAAuB,KAAK;AAAA,QAC5B,SAAS;AAAA,MACX,CAAC;AAAA,IACH,GAAG,CAAC;AAAA,EACN;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa;AACX,SAAK,OAAO,KAAK,MAAM,SAAS;AAAA,EAClC;AACF;AAvJqB,cACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GAHN,cAInB;AAOA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAVvB,cAWnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAbP,cAcnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhBP,cAiBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnBP,cAoBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtBP,cAuBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzBP,cA0BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA5BY,cA6BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA/BY,cAgCnB;AAGA;AAAA,EADC,MAAM;AAAA,GAlCY,cAmCnB;AAnCmB,gBAArB;AAAA,EADC,cAAc,gBAAgB;AAAA,GACV;","names":[]}
1	+ {"version":3,"sources":["../../../src/elements/password/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/password/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\n\ninterface InterfaceOptions {\n pattern: string;\n message: string;\n meetsCriteria?: boolean;\n}\n\nexport interface InterfacePasswordStrengthChangeDetails {\n appearance: EnumAppearances;\n meetsPasswordCriteria: boolean;\n element: KemetPassword;\n}\n\n/*\n @since 1.2.0\n * @status stable\n \n @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n * @ssrsafe yes\n \n @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak \| Better \| Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n \n @event kemet-password-strength-change - Fires when there's a change in strength.\n \n @csspart strength - Indicates password strength.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n \n /\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n static styles = [styles];\n\n @property({ type: Array })\n rules: InterfaceOptions[] = [\n { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n { pattern: '(?=.[a-z])(?=.[A-Z])', message: 'Uppercase and lowercase' },\n { pattern: '(?=.[0-9])', message: 'At least one number (0-9)' },\n ];\n\n @property({ type: Boolean, reflect: true })\n show: boolean = false;\n\n @property({ type: String })\n value!: string;\n\n @property({ type: String })\n message: string = 'Please make sure you meet all the requirements.';\n\n @property({ type: String })\n strength!: string;\n\n @property({ type: String })\n icon: string = 'check2';\n\n @property({ type: Number })\n iconSize: number = 18;\n\n @state()\n appearance?: EnumAppearances;\n\n @state()\n field!: HTMLKemetFieldElement;\n\n @state()\n input!: HTMLKemetInputElement \| HTMLKemetTextareaElement;\n\n firstUpdated() {\n // elements\n this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n this.input = this.field.querySelector('[slot=\"input\"]') as HTMLKemetInputElement \| HTMLKemetTextareaElement;\n\n // events listeners\n this.input?.addEventListener('kemet-input-input', this.handleInput.bind(this));\n }\n\n render() {\n return html`\n <div role=\"alert\" aria-live=\"assertive\">\n <div class=\"${this.strength}\" part=\"strength\">\n <span>${this.strength}</span>\n <ul part=\"indicator\">\n <li></li>\n <li></li>\n <li></li>\n </ul>\n </div>\n <p part=\"message\">${this.message}</p>\n <ul part=\"rules\">\n ${this.makeRules()}\n </ul>\n </div>\n `;\n }\n\n /\n Makes the list of rules\n * @private\n * @returns {TemplateResult<1>[]} the criteria rules\n /\n makeRules(): TemplateResult<1>[] {\n if (this.input) {\n return this.rules.map((rule) => {\n const regExp = new RegExp(rule.pattern);\n const meetsCriteria = regExp.test(this.input.value);\n rule.meetsCriteria = meetsCriteria;\n return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n });\n }\n\n return [];\n }\n\n /\n Makes the check icon if the criteria has been met\n * @param {boolean} meetsCriteria\n * @private\n * @returns {TemplateResult} an icon component\n /\n makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n if (meetsCriteria) {\n return html`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;\n }\n\n return html``;\n }\n\n /\n Handles the kemet-input-input event\n * @param {} event\n @private\n /\n handleInput(event: Event) {\n this.value = (event as CustomEvent).detail.value;\n this.setStrength();\n this.visibility();\n }\n\n /\n Determines the strength of the password\n * @private\n /\n setStrength() {\n // We use a setTimeout here because makeRules adds the meetsCriteria\n // property to the rules. We need that to be set by render() before\n // setting the Strength because the percentage calc is based on it\n setTimeout(() => {\n const totalRules = this.rules.length;\n const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n const metRulesPercentage = Math.round((metRules / totalRules) 100) / 100;\n\n if (metRulesPercentage <= 0.33) {\n this.strength = 'weak';\n this.appearance = EnumAppearances.Error;\n }\n\n if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n this.strength = 'better';\n this.appearance = EnumAppearances.Error;\n }\n\n if (metRulesPercentage > 0.67) {\n this.strength = 'strong';\n this.appearance = EnumAppearances.Success;\n }\n\n emitEvent(this, 'kemet-password-strength-change', {\n appearance: this.appearance,\n meetsPasswordCriteria: this.appearance === EnumAppearances.Success,\n element: this,\n });\n }, 1);\n }\n\n /*\n Determines whether to show or hide the component\n * @private\n /\n visibility() {\n this.show = this.value.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-password': KemetPassword\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n color: inherit;\n display: none;\n}\n\n:host([show]) {\n display: block;\n}\n\np {\n margin: 1.6rem 0;\n}\n\n[part=strength] {\n display: grid;\n align-items: center;\n grid-template-columns: 1fr auto;\n line-height: 1;\n margin-top: 0.8rem;\n}\n\n[part=strength] > span {\n text-transform: capitalize;\n}\n\n.weak {\n color: var(--kemet-color-font-error);\n}\n\n.better {\n color: var(--kemet-color-font-warning);\n}\n\n.strong {\n color: var(--kemet-color-font-success);\n}\n\n[part=indicator] {\n display: flex;\n gap: 0.4rem;\n margin: 0;\n list-style: none;\n}\n\n[part=indicator] li {\n width: 1.6rem;\n height: 0.2rem;\n}\n\n.weak [part=indicator] li:nth-child(1) {\n background-color: var(--kemet-color-font-error);\n}\n\n.better [part=indicator] li:nth-child(1),\n.better [part=indicator] li:nth-child(2) {\n background-color: var(--kemet-color-font-warning);\n}\n\n.strong [part=indicator] li {\n background-color: var(--kemet-color-font-success);\n}\n\n[part=rules] {\n color: inherit;\n line-height: 1.5;\n list-style: none;\n font-size: 90%;\n padding-left: 2rem;\n}\n\n[part=rules] li {\n position: relative;\n}\n\n[part=rules] kemet-icon {\n color: var(--kemet-color-font-success);\n position: absolute;\n left: -2rem;\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/radio/index.js CHANGED Viewed

@@ -66,7 +66,7 @@ input {
   opacity: 0;
 }
-button {
+[part=button] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -112,12 +112,6 @@ var KemetRadio = class extends LitElement {
     const radiosElement = this.closest("kemet-radios");
     this.name = radiosElement.name || "radio-button";
     this.input = this.shadowRoot?.querySelector("input");
-    this.setAttribute("role", "radio");
-    if (this.checked) {
-      this.setAttribute("aria-checked", "true");
-    } else {
-      this.setAttribute("aria-checked", "false");
-    }
     emitEvent(this, "kemet-radio-mounted", {
       bubbles: true,
       composed: true,
@@ -139,7 +133,7 @@ var KemetRadio = class extends LitElement {
           @blur=${() => this.handleBlur()}
           @focus=${() => this.handleFocus()}
         />
-        <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
+        <button part="button">${this.makeDot()}</button>
         <span part="text">${this.label}</span>
       </label>
     `;

package/dist/elements/radio/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/radio/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/radio/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetRadiosElements from '../radios';\nimport styles from './styles.css.ts'\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-radio\n * @summary An enhanced radio button.\n * @ssrsafe yes\n \n @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n \n @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n \n @event kemet-radio-focus - Fires when the checkbox receives focus\n * @event kemet-radio-blur - Fires when the checkbox loses focus\n \n @fires kemet-radio-mounted - Fired when the radio is mounted to the DOM\n * @detail {HTMLElement} element - The radio element\n \n /\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n label: string = '';\n\n @property({ type: Boolean, reflect: true })\n checked: boolean = false;\n\n @property({ type: String })\n name: string = '';\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean = false;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n input: HTMLInputElement = undefined as any;\n\n firstUpdated() {\n const radiosElement = this.closest('kemet-radios') as HTMLKemetRadiosElements;\n\n this.name = radiosElement.name \|\| 'radio-button';\n this.input = this.shadowRoot?.querySelector('input') as HTMLInputElement;\n this.setAttribute('role', 'radio');\n\n if (this.checked) {\n this.setAttribute('aria-checked', 'true');\n } else {\n this.setAttribute('aria-checked', 'false');\n }\n\n emitEvent(this, 'kemet-radio-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n return html`\n <label part=\"label\">\n <input\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n @blur=${() => this.handleBlur()}\n @focus=${() => this.handleFocus()}\n />\n <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n <span part=\"text\">${this.label}</span>\n </label>\n `;\n }\n\n /*\n Simulates a click on the input element.\n * @public\n * @method click\n * @returns {void}\n /\n click() {\n this.input.click();\n }\n\n /\n Calls blur on the input element.\n * @public\n * @method blur\n * @returns {void}\n /\n blur(): void {\n this.input.blur();\n }\n\n /\n Calls focus on the input element.\n * @public\n * @method focus\n * @returns {void}\n /\n focus(): void {\n this.input.focus();\n }\n\n handleBlur() {\n this.focused = false;\n emitEvent(this, 'kemet-radio-blur', { element: this });\n }\n\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-radio-focus', { element: this });\n }\n\n makeDot() {\n if (this.checked) {\n return html`\n <span part=\"dot\"></span>\n `;\n }\n\n return null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radio': KemetRadio\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-radio-size: 18px;\n --kemet-radio-border: 1px solid var(--kemet-color-font-active);\n --kemet-radio-dot-color: var(--kemet-color-font-active);\n --kemet-radio-dot-border: none;\n --kemet-radio-dot-border-width: 3px;\n --kemet-radio-dot-ring-color: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-color-filled: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-border-width: 4px;\n --kemet-radio-dot-border-color: var(--kemet-color-font-active);\n\n display: inline-block;\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\nlabel {\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n margin-right: 0.5rem;\n}\n\ninput {\n cursor: pointer;\n margin: 0;\n padding: 0;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n position: absolute;\n opacity: 0;\n}\n\nbutton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n padding: 0;\n border-radius: var(--kemet-border-radius-circle);\n background: none;\n border: var(--kemet-radio-border);\n}\n\n[part=dot] {\n display: inline-flex;\n border-radius: var(--kemet-border-radius-circle);\n width: calc(var(--kemet-radio-size) - 2px);\n height: calc(var(--kemet-radio-size) - 2px);\n background: var(--kemet-radio-dot-color);\n border: var(--kemet-radio-dot-border);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n}\n\n:host([filled]) [part=dot] {\n background: var(--kemet-radio-dot-color-filled);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n}\n`;\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/elements/radio/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/radio/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetRadiosElements from '../radios';\nimport styles from './styles.css.ts'\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-radio\n * @summary An enhanced radio button.\n * @ssrsafe yes\n \n @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n * @prop {'light' \| 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n \n @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n \n @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n \n @event kemet-radio-focus - Fires when the checkbox receives focus\n * @event kemet-radio-blur - Fires when the checkbox loses focus\n \n @fires kemet-radio-mounted - Fired when the radio is mounted to the DOM\n * @detail {HTMLElement} element - The radio element\n \n /\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n label: string = '';\n\n @property({ type: Boolean, reflect: true })\n checked: boolean = false;\n\n @property({ type: String })\n name: string = '';\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean = false;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' \| 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n input: HTMLInputElement = undefined as any;\n\n firstUpdated() {\n const radiosElement = this.closest('kemet-radios') as HTMLKemetRadiosElements;\n\n this.name = radiosElement.name \|\| 'radio-button';\n this.input = this.shadowRoot?.querySelector('input') as HTMLInputElement;\n\n emitEvent(this, 'kemet-radio-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n return html`\n <label part=\"label\">\n <input\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n @blur=${() => this.handleBlur()}\n @focus=${() => this.handleFocus()}\n />\n <button part=\"button\">${this.makeDot()}</button>\n <span part=\"text\">${this.label}</span>\n </label>\n `;\n }\n\n /*\n Simulates a click on the input element.\n * @public\n * @method click\n * @returns {void}\n /\n click() {\n this.input.click();\n }\n\n /\n Calls blur on the input element.\n * @public\n * @method blur\n * @returns {void}\n /\n blur(): void {\n this.input.blur();\n }\n\n /\n Calls focus on the input element.\n * @public\n * @method focus\n * @returns {void}\n /\n focus(): void {\n this.input.focus();\n }\n\n handleBlur() {\n this.focused = false;\n emitEvent(this, 'kemet-radio-blur', { element: this });\n }\n\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-radio-focus', { element: this });\n }\n\n makeDot() {\n if (this.checked) {\n return html`\n <span part=\"dot\"></span>\n `;\n }\n\n return null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radio': KemetRadio\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/\n A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n --kemet-radio-size: 18px;\n --kemet-radio-border: 1px solid var(--kemet-color-font-active);\n --kemet-radio-dot-color: var(--kemet-color-font-active);\n --kemet-radio-dot-border: none;\n --kemet-radio-dot-border-width: 3px;\n --kemet-radio-dot-ring-color: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-color-filled: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-border-width: 4px;\n --kemet-radio-dot-border-color: var(--kemet-color-font-active);\n\n display: inline-block;\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\nlabel {\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n margin-right: 0.5rem;\n}\n\ninput {\n cursor: pointer;\n margin: 0;\n padding: 0;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n position: absolute;\n opacity: 0;\n}\n\n[part=button] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n padding: 0;\n border-radius: var(--kemet-border-radius-circle);\n background: none;\n border: var(--kemet-radio-border);\n}\n\n[part=dot] {\n display: inline-flex;\n border-radius: var(--kemet-border-radius-circle);\n width: calc(var(--kemet-radio-size) - 2px);\n height: calc(var(--kemet-radio-size) - 2px);\n background: var(--kemet-radio-dot-color);\n border: var(--kemet-radio-dot-border);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n}\n\n:host([filled]) [part=dot] {\n background: var(--kemet-radio-dot-color-filled);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/radio/styles.css.js CHANGED Viewed

@@ -36,7 +36,7 @@ input {
   opacity: 0;
 }
-button {
+[part=button] {
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/elements/radio/styles.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/radio/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n --kemet-radio-size: 18px;\n --kemet-radio-border: 1px solid var(--kemet-color-font-active);\n --kemet-radio-dot-color: var(--kemet-color-font-active);\n --kemet-radio-dot-border: none;\n --kemet-radio-dot-border-width: 3px;\n --kemet-radio-dot-ring-color: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-color-filled: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-border-width: 4px;\n --kemet-radio-dot-border-color: var(--kemet-color-font-active);\n\n display: inline-block;\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\nlabel {\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n margin-right: 0.5rem;\n}\n\ninput {\n cursor: pointer;\n margin: 0;\n padding: 0;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n position: absolute;\n opacity: 0;\n}\n\~~nbutton~~ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n padding: 0;\n border-radius: var(--kemet-border-radius-circle);\n background: none;\n border: var(--kemet-radio-border);\n}\n\n[part=dot] {\n display: inline-flex;\n border-radius: var(--kemet-border-radius-circle);\n width: calc(var(--kemet-radio-size) - 2px);\n height: calc(var(--kemet-radio-size) - 2px);\n background: var(--kemet-radio-dot-color);\n border: var(--kemet-radio-dot-border);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n}\n\n:host([filled]) [part=dot] {\n background: var(--kemet-radio-dot-color-filled);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
1	+ {"version":3,"sources":["../../../src/elements/radio/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n --kemet-radio-size: 18px;\n --kemet-radio-border: 1px solid var(--kemet-color-font-active);\n --kemet-radio-dot-color: var(--kemet-color-font-active);\n --kemet-radio-dot-border: none;\n --kemet-radio-dot-border-width: 3px;\n --kemet-radio-dot-ring-color: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-color-filled: var(--kemet-color-font-inverse-base);\n --kemet-radio-dot-border-width: 4px;\n --kemet-radio-dot-border-color: var(--kemet-color-font-active);\n\n display: inline-block;\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\nlabel {\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n margin-right: 0.5rem;\n}\n\ninput {\n cursor: pointer;\n margin: 0;\n padding: 0;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n position: absolute;\n opacity: 0;\n}\n\n[part=button] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n padding: 0;\n border-radius: var(--kemet-border-radius-circle);\n background: none;\n border: var(--kemet-radio-border);\n}\n\n[part=dot] {\n display: inline-flex;\n border-radius: var(--kemet-border-radius-circle);\n width: calc(var(--kemet-radio-size) - 2px);\n height: calc(var(--kemet-radio-size) - 2px);\n background: var(--kemet-radio-dot-color);\n border: var(--kemet-radio-dot-border);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n}\n\n:host([filled]) [part=dot] {\n background: var(--kemet-radio-dot-color-filled);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/radios/index.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
-import { g as EnumAxis, e as EnumAppearances } from '../../constants-Dj9X-JwG.js';
+import { g as EnumAxis, E as EnumAppearances } from '../../constants-BsAfWV-a.js';
 import KemetRadio from '../radio/index.js';
 /**
@@ -50,7 +50,6 @@ declare class KemetRadios extends LitElement {
     render(): lit_html.TemplateResult<1>;
     handleClick(event: MouseEvent): void;
     handleKeyDown(event: KeyboardEvent): void;
-    handleSlotChange(): void;
     makeMessage(): lit_html.TemplateResult<1> | null;
     checkValidity(): boolean;
 }

package/dist/elements/radios/index.js CHANGED Viewed

@@ -64,14 +64,13 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
-            component.status = "error";
+            console.log("invalid", component);
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
                 detail: {
-                  status: "error",
+                  appearance: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }
@@ -79,7 +78,7 @@ var FormSubmitController = class {
             );
           }
           if (component.checkLimitValidity && !component.checkLimitValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
@@ -171,7 +170,6 @@ var KemetRadios = class extends LitElement {
   }
   firstUpdated() {
     this.radios = this.querySelectorAll("kemet-radio");
-    this.setAttribute("role", "radiogroup");
     emitEvent(this, "kemet-radios-mounted", {
       bubbles: true,
       composed: true,
@@ -185,18 +183,13 @@ var KemetRadios = class extends LitElement {
     return html`
       <fieldset part="fieldset">
         ${this.legend !== "" ? html`<legend part="legend">${this.legend}</legend>` : null}
-        <slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
+        <slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)}></slot>
       </fieldset>
       ${this.makeMessage()}
     `;
   }
   handleClick(event) {
     const target = event.target;
-    this.radios.forEach((radio) => {
-      radio.checked = false;
-      radio.tabIndex = radio === target ? 0 : -1;
-      radio.setAttribute("aria-checked", "false");
-    });
     if (!target.disabled) {
       target.checked = true;
       target.setAttribute("aria-checked", "true");
@@ -236,17 +229,6 @@ var KemetRadios = class extends LitElement {
       }
     }
   }
-  handleSlotChange() {
-    const radios = Array.from(this.radios);
-    const checkedRadio = radios.find((radio) => radio.checked);
-    this.radios.forEach((radio) => {
-      radio.tabIndex = -1;
-      radio.input.tabIndex = -1;
-    });
-    if (checkedRadio) {
-      checkedRadio.tabIndex = 0;
-    }
-  }
   makeMessage() {
     if (this.appearance === "error" || this.appearance === "warning") {
       return html`<span part="message">${this.message}</span>`;