kemet-ui 5.0.3 → 5.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1389 -1393
- package/dist/{constants-Dj9X-JwG.d.ts → constants-C4-3KYlX.d.ts} +1 -2
- 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/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/checkbox/index.d.ts +1 -1
- package/dist/elements/checkbox/index.js +7 -4
- 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/count/index.d.ts +1 -1
- package/dist/elements/dialog/index.d.ts +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/flipcard/index.d.ts +1 -1
- package/dist/elements/input/index.d.ts +1 -1
- package/dist/elements/input/index.js +8 -5
- 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/password/index.d.ts +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 +7 -21
- package/dist/elements/radios/index.js.map +1 -1
- package/dist/elements/select/index.d.ts +1 -1
- package/dist/elements/select/index.js +8 -5
- 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/tabs/index.d.ts +1 -1
- package/dist/elements/textarea/index.d.ts +1 -1
- package/dist/elements/textarea/index.js +8 -5
- package/dist/elements/textarea/index.js.map +1 -1
- package/dist/elements/textarea/styles.css.js +2 -2
- package/dist/elements/textarea/styles.css.js.map +1 -1
- package/dist/elements/toggle/index.js +6 -3
- package/dist/elements/toggle/index.js.map +1 -1
- package/dist/wrappers/react.d.ts +1 -1
- package/dist/wrappers/react.js +26 -46
- package/dist/wrappers/react.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/input-combo/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumKeyCodes, EnumAppearances, TypeRoundedSizes, TypeAppearance, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetComboElement from '../combo';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSelections {\n element: HTMLUListElement;\n text: string;\n id: string;\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {EnumRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-combo-height - The height of the input.\n * @cssproperty --kemet-input-combo-color - The color of the input.\n * @cssproperty --kemet-input-combo-border - The border of the input.\n * @cssproperty --kemet-input-combo-padding-y - The padding on the input.\n * @cssproperty --kemet-input-combo-padding-x - The padding on the input.\n * @cssproperty --kemet-input-combo-icon-gap - The icon gap of the input.\n * @cssproperty --kemet-input-combo-font-color - The font color of the input.\n * @cssproperty --kemet-input-combo-chip-font-color - The font color of the chip.\n * @cssproperty --kemet-input-combo-chip-background-color - The background color of the chip.\n *\n * @event kemet-input-combo-focus - Fires when the input receives focus\n * @event kemet-input-combo-blur - Fires when the input loses focus\n * @event kemet-input-combo-input - Fires when the input receives input\n * @event kemet-input-combo-change - Fires when the input changes\n * @event kemet-input-combo-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-input-combo')\nexport default class InputCombo extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n slug: string = 'input';\n\n @property({ type: String })\n placeholder: string = '';\n\n @property({ type: Boolean })\n disabled: boolean = false;\n\n @property({ type: Boolean })\n filled: boolean = false;\n\n @property({ type: String,reflect: true })\n rounded?: EnumRoundedSizes;\n\n @property({ type: String })\n name: string = 'input';\n\n @property({ reflect: true })\n appearance?: EnumAppearances;\n\n @property({ type: Boolean })\n required: boolean = false;\n\n @property({ type: Boolean })\n invalid!: boolean;\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean = false;\n\n @state()\n value: string = '';\n\n @state()\n selections: InterfaceSelections[] = [];\n\n @state()\n paddingLeft!: number;\n\n @state()\n field!: HTMLKemetFieldElement;\n\n @state()\n combo!: HTMLKemetComboElement;\n\n @query('[part=chips]')\n chips!: { offsetWidth: number; };\n\n @query('input')\n input!: HTMLInputElement;\n\n firstUpdated() {\n // elements\n this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n this.combo = this.field.querySelector('kemet-combo') as HTMLKemetComboElement;\n\n document.addEventListener('click', this.handleComboClose.bind(this));\n\n if (this.combo) {\n this.combo.addEventListener('kemet-combo-selection', (event: Event) => this.addComboItem(event));\n }\n }\n\n updated() {\n if (this.chips) this.calculatePadding();\n }\n\n render() {\n return html`\n <div>\n <input\n part=\"input\"\n id=${this.slug}\n name=${this.name}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @change=${this.handleChange}\n @invalid=${this.handleInvalid}\n @keydown=${this.handleKeydown}\n .value=${live(this.value)}\n />\n ${this.makeSelections()}\n </div>\n `;\n }\n\n /**\n * Handles when a selection is made from a combo\n * @private\n * @param event\n */\n\n addComboItem(event: Event) {\n this.value = '';\n this.appearance = EnumAppearances.Neutral;\n const isPresent = this.selections.find(selection => selection.id === (event as CustomEvent).detail.id);\n if (!isPresent) this.selections = [...this.selections, (event as CustomEvent).detail];\n }\n\n /**\n * Handles when the input receives input\n * @private\n */\n handleInput(event: Event) {\n this.value = (event.target as HTMLInputElement).value;\n emitEvent(this, 'kemet-input-combo-input', {\n element: this,\n validity: this.input.validity,\n status: this.appearance,\n value: (event.target as HTMLInputElement).value\n });\n }\n\n /**\n * Handles when the input is focused\n */\n handleFocus() {\n emitEvent(this, 'kemet-input-combo-focus', { element: this });\n }\n\n handleBlur() {\n emitEvent(this, 'kemet-input-combo-blur', { element: this });\n if (this.validateOnBlur) {\n this.input.checkValidity();\n }\n }\n\n handleChange(event: Event) {\n emitEvent(this, 'kemet-input-combo-change', {\n element: this,\n validity: this.input.validity,\n status: this.appearance,\n value: (event.target as HTMLInputElement).value\n });\n }\n\n handleInvalid(event: Event) {\n this.appearance = EnumAppearances.Error;\n emitEvent(this, 'kemet-input-combo-invalid', {\n element: this,\n validity: this.input.validity,\n status: this.appearance,\n value: (event.target as HTMLInputElement).value\n });\n }\n\n /**\n * Renders the chips from the selections of the combo\n * @private\n */\n makeSelections() {\n const selections = this.selections.map(selection => html`\n <li part=\"chip\">\n <span>${selection.text}</span>\n <button @click=${this.handleRemoveChip}>×</button>\n </li>\n `);\n\n if (this.selections) {\n return html`<ul part=\"chips\">${selections}</ul>`;\n }\n\n return null;\n }\n\n /**\n * calculates padding to properly place the cursor of the input\n * @private\n */\n calculatePadding() {\n this.paddingLeft = this.chips.offsetWidth + 16;\n }\n\n /**\n * handle removing a chip from the selections\n * @private\n */\n handleRemoveChip(event: MouseEvent) {\n const chip = (event.target as Element).closest('[part=chip]');\n if (chip) {\n const span = chip.querySelector('span');\n if (span) {\n const text = span.innerText;\n this.selections = this.selections.filter(selection => selection.text !== text);\n }\n }\n }\n\n handleComboClose(event: MouseEvent) {\n if (event.target !== this && this.combo) {\n this.combo.show = false;\n }\n }\n\n handleKeydown(event: KeyboardEvent) {\n if (event.key === EnumKeyCodes.ESCAPE) {\n this.combo.show = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-combo': InputCombo\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 /* 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":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/input-combo/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumKeyCodes, EnumAppearances, TypeRoundedSizes, TypeAppearance, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetComboElement from '../combo';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSelections {\n element: HTMLUListElement;\n text: string;\n id: string;\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {EnumRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-combo-height - The height of the input.\n * @cssproperty --kemet-input-combo-color - The color of the input.\n * @cssproperty --kemet-input-combo-border - The border of the input.\n * @cssproperty --kemet-input-combo-padding-y - The padding on the input.\n * @cssproperty --kemet-input-combo-padding-x - The padding on the input.\n * @cssproperty --kemet-input-combo-icon-gap - The icon gap of the input.\n * @cssproperty --kemet-input-combo-font-color - The font color of the input.\n * @cssproperty --kemet-input-combo-chip-font-color - The font color of the chip.\n * @cssproperty --kemet-input-combo-chip-background-color - The background color of the chip.\n *\n * @event kemet-input-combo-focus - Fires when the input receives focus\n * @event kemet-input-combo-blur - Fires when the input loses focus\n * @event kemet-input-combo-input - Fires when the input receives input\n * @event kemet-input-combo-change - Fires when the input changes\n * @event kemet-input-combo-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-input-combo')\nexport default class InputCombo extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n slug: string = 'input';\n\n @property({ type: String })\n placeholder: string = '';\n\n @property({ type: Boolean })\n disabled: boolean = false;\n\n @property({ type: Boolean })\n filled: boolean = false;\n\n @property({ type: String,reflect: true })\n rounded?: EnumRoundedSizes;\n\n @property({ type: String })\n name: string = 'input';\n\n @property({ reflect: true })\n appearance?: EnumAppearances;\n\n @property({ type: Boolean })\n required: boolean = false;\n\n @property({ type: Boolean })\n invalid!: boolean;\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean = false;\n\n @state()\n value: string = '';\n\n @state()\n selections: InterfaceSelections[] = [];\n\n @state()\n paddingLeft!: number;\n\n @state()\n field!: HTMLKemetFieldElement;\n\n @state()\n combo!: HTMLKemetComboElement;\n\n @query('[part=chips]')\n chips!: { offsetWidth: number; };\n\n @query('input')\n input!: HTMLInputElement;\n\n firstUpdated() {\n // elements\n this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n this.combo = this.field.querySelector('kemet-combo') as HTMLKemetComboElement;\n\n document.addEventListener('click', this.handleComboClose.bind(this));\n\n if (this.combo) {\n this.combo.addEventListener('kemet-combo-selection', (event: Event) => this.addComboItem(event));\n }\n }\n\n updated() {\n if (this.chips) this.calculatePadding();\n }\n\n render() {\n return html`\n <div>\n <input\n part=\"input\"\n id=${this.slug}\n name=${this.name}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @change=${this.handleChange}\n @invalid=${this.handleInvalid}\n @keydown=${this.handleKeydown}\n .value=${live(this.value)}\n />\n ${this.makeSelections()}\n </div>\n `;\n }\n\n /**\n * Handles when a selection is made from a combo\n * @private\n * @param event\n */\n\n addComboItem(event: Event) {\n this.value = '';\n this.appearance = EnumAppearances.Neutral;\n const isPresent = this.selections.find(selection => selection.id === (event as CustomEvent).detail.id);\n if (!isPresent) this.selections = [...this.selections, (event as CustomEvent).detail];\n }\n\n /**\n * Handles when the input receives input\n * @private\n */\n handleInput(event: Event) {\n this.value = (event.target as HTMLInputElement).value;\n emitEvent(this, 'kemet-input-combo-input', {\n element: this,\n validity: this.input.validity,\n status: this.appearance,\n value: (event.target as HTMLInputElement).value\n });\n }\n\n /**\n * Handles when the input is focused\n */\n handleFocus() {\n emitEvent(this, 'kemet-input-combo-focus', { element: this });\n }\n\n handleBlur() {\n emitEvent(this, 'kemet-input-combo-blur', { element: this });\n if (this.validateOnBlur) {\n this.input.checkValidity();\n }\n }\n\n handleChange(event: Event) {\n emitEvent(this, 'kemet-input-combo-change', {\n element: this,\n validity: this.input.validity,\n status: this.appearance,\n value: (event.target as HTMLInputElement).value\n });\n }\n\n handleInvalid(event: Event) {\n this.appearance = EnumAppearances.Error;\n emitEvent(this, 'kemet-input-combo-invalid', {\n element: this,\n validity: this.input.validity,\n status: this.appearance,\n value: (event.target as HTMLInputElement).value\n });\n }\n\n /**\n * Renders the chips from the selections of the combo\n * @private\n */\n makeSelections() {\n const selections = this.selections.map(selection => html`\n <li part=\"chip\">\n <span>${selection.text}</span>\n <button @click=${this.handleRemoveChip}>×</button>\n </li>\n `);\n\n if (this.selections) {\n return html`<ul part=\"chips\">${selections}</ul>`;\n }\n\n return null;\n }\n\n /**\n * calculates padding to properly place the cursor of the input\n * @private\n */\n calculatePadding() {\n this.paddingLeft = this.chips.offsetWidth + 16;\n }\n\n /**\n * handle removing a chip from the selections\n * @private\n */\n handleRemoveChip(event: MouseEvent) {\n const chip = (event.target as Element).closest('[part=chip]');\n if (chip) {\n const span = chip.querySelector('span');\n if (span) {\n const text = span.innerText;\n this.selections = this.selections.filter(selection => selection.text !== text);\n }\n }\n }\n\n handleComboClose(event: MouseEvent) {\n if (event.target !== this && this.combo) {\n this.combo.show = false;\n }\n }\n\n handleKeydown(event: KeyboardEvent) {\n if (event.key === EnumKeyCodes.ESCAPE) {\n this.combo.show = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input-combo': InputCombo\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 /* 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":"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","names":[]}
|
|
@@ -53,7 +53,7 @@ input {
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
:host([appearance=brand]) {
|
|
56
|
-
--kemet-input-combo-color: var(--kemet-color-brand-primary-
|
|
56
|
+
--kemet-input-combo-color: var(--kemet-color-brand-primary-darker);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
:host([appearance=error]) {
|
|
@@ -73,7 +73,7 @@ input {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
:host([appearance=brand][filled]) {
|
|
76
|
-
--_kemet-input-combo-background-color: var(--kemet-color-brand-primary-
|
|
76
|
+
--_kemet-input-combo-background-color: var(--kemet-color-brand-primary-darker);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
:host([appearance=error][filled]) {
|
|
@@ -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-
|
|
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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as lit from 'lit';
|
|
2
2
|
import { LitElement, TemplateResult } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { E as EnumAppearances, H as HTMLKemetFieldElement, c as HTMLKemetInputElement, f as HTMLKemetTextareaElement } from '../../constants-C4-3KYlX.js';
|
|
4
4
|
import 'lit-html';
|
|
5
5
|
import '../../form-controller-3q581XcZ.js';
|
|
6
6
|
|
|
@@ -66,7 +66,7 @@ input {
|
|
|
66
66
|
opacity: 0;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
button {
|
|
69
|
+
[part=button] {
|
|
70
70
|
display: inline-flex;
|
|
71
71
|
align-items: center;
|
|
72
72
|
justify-content: center;
|
|
@@ -112,12 +112,6 @@ var KemetRadio = class extends LitElement {
|
|
|
112
112
|
const radiosElement = this.closest("kemet-radios");
|
|
113
113
|
this.name = radiosElement.name || "radio-button";
|
|
114
114
|
this.input = this.shadowRoot?.querySelector("input");
|
|
115
|
-
this.setAttribute("role", "radio");
|
|
116
|
-
if (this.checked) {
|
|
117
|
-
this.setAttribute("aria-checked", "true");
|
|
118
|
-
} else {
|
|
119
|
-
this.setAttribute("aria-checked", "false");
|
|
120
|
-
}
|
|
121
115
|
emitEvent(this, "kemet-radio-mounted", {
|
|
122
116
|
bubbles: true,
|
|
123
117
|
composed: true,
|
|
@@ -139,7 +133,7 @@ var KemetRadio = class extends LitElement {
|
|
|
139
133
|
@blur=${() => this.handleBlur()}
|
|
140
134
|
@focus=${() => this.handleFocus()}
|
|
141
135
|
/>
|
|
142
|
-
<button part="button"
|
|
136
|
+
<button part="button">${this.makeDot()}</button>
|
|
143
137
|
<span part="text">${this.label}</span>
|
|
144
138
|
</label>
|
|
145
139
|
`;
|
|
@@ -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":";;;;;;;;;;;;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;;;ADTN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;;;AEHd,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;;;AH8Cf,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,iBAAgB;AAGhB,mBAAmB;AAGnB,gBAAe;AAGf,iBAAgB;AAGhB,oBAAoB;AAGpB,mBAAmB;AAGnB,kBAAkB;AAMlB,eAAc;AAGd,iBAA0B;AAAA;AAAA,EAE1B,eAAe;AACb,UAAM,gBAAgB,KAAK,QAAQ,cAAc;AAEjD,SAAK,OAAO,cAAc,QAAQ;AAClC,SAAK,QAAQ,KAAK,YAAY,cAAc,OAAO;AACnD,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,KAAK,SAAS;AAChB,WAAK,aAAa,gBAAgB,MAAM;AAAA,IAC1C,OAAO;AACL,WAAK,aAAa,gBAAgB,OAAO;AAAA,IAC3C;AAEA,cAAU,MAAM,uBAAuB;AAAA,MACrC,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,iBAIM,UAAU,KAAK,IAAI,CAAC;AAAA,mBAClB,KAAK,KAAK;AAAA,qBACR,KAAK,KAAK,OAAO,CAAC;AAAA,sBACjB,KAAK,QAAQ;AAAA,kBACjB,MAAM,KAAK,WAAW,CAAC;AAAA,mBACtB,MAAM,KAAK,YAAY,CAAC;AAAA;AAAA,2CAEA,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC;AAAA,4BAC3C,KAAK,KAAK;AAAA;AAAA;AAAA,EAGpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAa;AACX,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAc;AACZ,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EAEA,aAAa;AACX,SAAK,UAAU;AACf,cAAU,MAAM,oBAAoB,EAAE,SAAS,KAAK,CAAC;AAAA,EACvD;AAAA,EAEA,cAAc;AACZ,SAAK,UAAU;AACf,cAAU,MAAM,qBAAqB,EAAE,SAAS,KAAK,CAAC;AAAA,EACxD;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,SAAS;AAChB,aAAO;AAAA;AAAA;AAAA,IAGT;AAEA,WAAO;AAAA,EACT;AACF;AA3HqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,WAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,WAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,WAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxBtB,WAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,WA4BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA9BY,WA+BnB;AA/BmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","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, 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\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":[]}
|
|
@@ -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\
|
|
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":[]}
|
|
@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
|
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
4
|
import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
|
|
5
|
-
import { g as EnumAxis,
|
|
5
|
+
import { g as EnumAxis, E as EnumAppearances } from '../../constants-C4-3KYlX.js';
|
|
6
6
|
import KemetRadio from '../radio/index.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -50,7 +50,6 @@ declare class KemetRadios extends LitElement {
|
|
|
50
50
|
render(): lit_html.TemplateResult<1>;
|
|
51
51
|
handleClick(event: MouseEvent): void;
|
|
52
52
|
handleKeyDown(event: KeyboardEvent): void;
|
|
53
|
-
handleSlotChange(): void;
|
|
54
53
|
makeMessage(): lit_html.TemplateResult<1> | null;
|
|
55
54
|
checkValidity(): boolean;
|
|
56
55
|
}
|
|
@@ -32,8 +32,10 @@ var FormSubmitController = class {
|
|
|
32
32
|
this.handleFormSubmit = this.handleFormSubmit.bind(this);
|
|
33
33
|
}
|
|
34
34
|
hostConnected() {
|
|
35
|
+
console.log("what?!");
|
|
35
36
|
this.form = this.options.form(this.host);
|
|
36
37
|
if (this.form) {
|
|
38
|
+
console.log("Adding form listeners");
|
|
37
39
|
this.form.addEventListener("formdata", this.handleFormData);
|
|
38
40
|
this.form.addEventListener("submit", this.handleFormSubmit);
|
|
39
41
|
}
|
|
@@ -54,6 +56,7 @@ var FormSubmitController = class {
|
|
|
54
56
|
}
|
|
55
57
|
}
|
|
56
58
|
handleFormSubmit(event) {
|
|
59
|
+
console.log("~~Form submitted~~");
|
|
57
60
|
event.preventDefault();
|
|
58
61
|
event.stopImmediatePropagation();
|
|
59
62
|
const disabled = this.options.disabled(this.host);
|
|
@@ -64,14 +67,14 @@ var FormSubmitController = class {
|
|
|
64
67
|
if (component.checkValidity) {
|
|
65
68
|
component.checkValidity();
|
|
66
69
|
if (!component.checkValidity()) {
|
|
67
|
-
component.
|
|
70
|
+
component.appearance = "error" /* Error */;
|
|
68
71
|
component.invalid = true;
|
|
69
72
|
component.dispatchEvent(
|
|
70
73
|
new CustomEvent("kemet-input-status", {
|
|
71
74
|
bubbles: true,
|
|
72
75
|
composed: true,
|
|
73
76
|
detail: {
|
|
74
|
-
status: "error"
|
|
77
|
+
status: "error" /* Error */,
|
|
75
78
|
validity: component.validity ? component.validity : {},
|
|
76
79
|
element: component
|
|
77
80
|
}
|
|
@@ -79,7 +82,7 @@ var FormSubmitController = class {
|
|
|
79
82
|
);
|
|
80
83
|
}
|
|
81
84
|
if (component.checkLimitValidity && !component.checkLimitValidity()) {
|
|
82
|
-
component.
|
|
85
|
+
component.appearance = "error" /* Error */;
|
|
83
86
|
component.invalid = true;
|
|
84
87
|
component.dispatchEvent(
|
|
85
88
|
new CustomEvent("kemet-input-status", {
|
|
@@ -171,7 +174,6 @@ var KemetRadios = class extends LitElement {
|
|
|
171
174
|
}
|
|
172
175
|
firstUpdated() {
|
|
173
176
|
this.radios = this.querySelectorAll("kemet-radio");
|
|
174
|
-
this.setAttribute("role", "radiogroup");
|
|
175
177
|
emitEvent(this, "kemet-radios-mounted", {
|
|
176
178
|
bubbles: true,
|
|
177
179
|
composed: true,
|
|
@@ -185,18 +187,13 @@ var KemetRadios = class extends LitElement {
|
|
|
185
187
|
return html`
|
|
186
188
|
<fieldset part="fieldset">
|
|
187
189
|
${this.legend !== "" ? html`<legend part="legend">${this.legend}</legend>` : null}
|
|
188
|
-
<slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)}
|
|
190
|
+
<slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)}></slot>
|
|
189
191
|
</fieldset>
|
|
190
192
|
${this.makeMessage()}
|
|
191
193
|
`;
|
|
192
194
|
}
|
|
193
195
|
handleClick(event) {
|
|
194
196
|
const target = event.target;
|
|
195
|
-
this.radios.forEach((radio) => {
|
|
196
|
-
radio.checked = false;
|
|
197
|
-
radio.tabIndex = radio === target ? 0 : -1;
|
|
198
|
-
radio.setAttribute("aria-checked", "false");
|
|
199
|
-
});
|
|
200
197
|
if (!target.disabled) {
|
|
201
198
|
target.checked = true;
|
|
202
199
|
target.setAttribute("aria-checked", "true");
|
|
@@ -236,17 +233,6 @@ var KemetRadios = class extends LitElement {
|
|
|
236
233
|
}
|
|
237
234
|
}
|
|
238
235
|
}
|
|
239
|
-
handleSlotChange() {
|
|
240
|
-
const radios = Array.from(this.radios);
|
|
241
|
-
const checkedRadio = radios.find((radio) => radio.checked);
|
|
242
|
-
this.radios.forEach((radio) => {
|
|
243
|
-
radio.tabIndex = -1;
|
|
244
|
-
radio.input.tabIndex = -1;
|
|
245
|
-
});
|
|
246
|
-
if (checkedRadio) {
|
|
247
|
-
checkedRadio.tabIndex = 0;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
236
|
makeMessage() {
|
|
251
237
|
if (this.appearance === "error" || this.appearance === "warning") {
|
|
252
238
|
return html`<span part="message">${this.message}</span>`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/radios/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/radios/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAxis, EnumAppearances } from '../../utilities/constants';\nimport type HTMLKemetRadioElement from '../radio';\nimport styles from './styles.css.ts'\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n * @ssrsafe yes\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {TypeAxis} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {EnumAppearances} appearance - The appearance of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n * @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 fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n * @fires kemet-radios-mounted - Fired when the radios is mounted to the DOM\n * @detail {HTMLElement} element - The radios element\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [styles];\n\n @property({ type: String })\n legend: string = '';\n\n @property({ type: String, reflect: true })\n axis: EnumAxis = EnumAxis.Horizontal;\n\n @property({ type: String })\n value!: string;\n\n @property({ type: String })\n name: string = 'radios';\n\n @property({ type: String, reflect: true })\n appearance: EnumAppearances = EnumAppearances.Neutral;\n\n @property({ type: String })\n message!: string;\n\n @property({ type: Boolean })\n required!: boolean;\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 radios!: NodeListOf<HTMLKemetRadioElement>;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n this.radios = this.querySelectorAll('kemet-radio');\n this.setAttribute('role', 'radiogroup');\n\n emitEvent(this, 'kemet-radios-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 <fieldset part=\"fieldset\">\n ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n </fieldset>\n ${this.makeMessage()}\n `;\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as HTMLKemetRadioElement;\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = radio === target ? 0 : -1;\n radio.setAttribute('aria-checked', 'false');\n });\n\n if (!target.disabled) {\n target.checked = true;\n target.setAttribute('aria-checked', 'true');\n this.value = target.value;\n this.appearance = EnumAppearances.Neutral;\n\n emitEvent(this, 'kemet-radios-change', this);\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const radios = Array.from(this.radios);\n const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n const forwardKeys = ['ArrowRight', 'ArrowDown'];\n const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n const checkedIndex: number | HTMLKemetRadioElement = radios.findIndex((radio: HTMLKemetRadioElement) => radio.checked) ?? radios[0];\n\n let index: number;\n\n if (typeof checkedIndex === 'number') {\n index = checkedIndex + shift;\n } else {\n index = shift;\n }\n\n if (arrowKeys.includes(event.key)) {\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n const radio = this.radios[index];\n if (radio) {\n radio.focus();\n radio.checked = true;\n radio.tabIndex = 0;\n }\n }\n }\n\n handleSlotChange() {\n const radios = Array.from(this.radios);\n const checkedRadio = radios.find((radio: HTMLKemetRadioElement) => radio.checked) as HTMLKemetRadioElement;\n\n this.radios.forEach((radio: HTMLKemetRadioElement) => {\n radio.tabIndex = -1;\n radio.input.tabIndex = -1;\n });\n\n if (checkedRadio) {\n checkedRadio.tabIndex = 0;\n }\n }\n\n makeMessage() {\n if (this.appearance === 'error' || this.appearance === 'warning') {\n return html`<span part=\"message\">${this.message}</span>`;\n }\n\n return null;\n }\n\n checkValidity() {\n if (this.required) {\n return !!this.value;\n }\n\n return true;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radios': KemetRadios\n }\n}\n","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 class FormSubmitController {\n host: any;\n form: HTMLFormElement | null | undefined;\n options: {\n form: (input: any) => HTMLFormElement | null | undefined;\n name: (input: any) => string;\n value: (input: any) => any;\n disabled: (input: any) => boolean;\n };\n\n constructor(host: any, options: Partial<{\n form: (input: any) => HTMLFormElement | null | undefined;\n name: (input: any) => string;\n value: (input: any) => any;\n disabled: (input: any) => boolean;\n }> = {}) {\n (this.host = host).addController(this);\n\n this.options = {\n form: (input: any) => input.closest('form'),\n name: (input: any) => input.name,\n value: (input: any) => input.value,\n disabled: (input: any) => input.disabled,\n ...options,\n };\n\n this.handleFormData = this.handleFormData.bind(this);\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n }\n\n hostConnected() {\n this.form = this.options.form(this.host);\n\n if (this.form) {\n this.form.addEventListener('formdata', this.handleFormData);\n this.form.addEventListener('submit', this.handleFormSubmit);\n }\n }\n\n hostDisconnected() {\n if (this.form) {\n this.form.removeEventListener('formdata', this.handleFormData);\n this.form.removeEventListener('submit', this.handleFormSubmit);\n this.form = undefined;\n }\n }\n\n handleFormData(event: FormDataEvent) {\n const disabled = this.options.disabled(this.host);\n const name = this.options.name(this.host);\n const value = this.options.value(this.host);\n\n if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n // TODO recreate a scenario where value will be an array\n // if (Array.isArray(value)) {\n // value.forEach((val) => {\n // event.formData?.append(name, val.toString());\n // });\n // } else {\n // event.formData?.append(name, value.toString());\n // }\n event.formData?.append(name, value.toString());\n }\n }\n\n handleFormSubmit(event: SubmitEvent) {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n const disabled = this.options.disabled(this.host);\n this.form = this.options.form(this.host);\n\n if (this.form && !disabled) {\n const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n components.forEach((component: any) => {\n if (component.checkValidity) {\n component.checkValidity();\n\n if (!component.checkValidity()) {\n component.status = 'error';\n component.invalid = true;\n\n component.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: component.validity ? component.validity : {},\n element: component,\n },\n }),\n );\n }\n\n if (component.checkLimitValidity && !component.checkLimitValidity()) {\n component.status = 'error';\n component.invalid = true;\n\n component.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: { passedLimit: true },\n element: component,\n },\n }),\n );\n }\n }\n });\n }\n }\n\n submit() {\n const button = document.createElement('button');\n\n if (this.form) {\n button.type = 'submit';\n button.style.position = 'absolute';\n button.style.width = '0';\n button.style.height = '0';\n button.style.clip = 'rect(0 0 0 0)';\n button.style.clipPath = 'inset(50%)';\n button.style.overflow = 'hidden';\n button.style.whiteSpace = 'nowrap';\n this.form.append(button);\n button.click();\n button.remove();\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","import { css } from 'lit';\n\nexport default css`:host {\n display: block;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: flex;\n gap: 0.5rem;\n}\n\nlegend {\n margin-bottom: 1rem;\n}\n\n:host([axis=vertical]) fieldset {\n flex-direction: column;\n}\n\n[part=message] {\n display: block;\n margin-top: 0.5rem;\n}\n\n:host([appearance=error]) [part=message] {\n color: var(--kemet-color-font-error);\n}\n\n:host([appearance=warning]) [part=message] {\n color: var(--kemet-color-font-warning);\n}\n`;\n"],"mappings":"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","names":["radio"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/radios/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/radios/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAxis, EnumAppearances } from '../../utilities/constants';\nimport type HTMLKemetRadioElement from '../radio';\nimport styles from './styles.css.ts'\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n * @ssrsafe yes\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {TypeAxis} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {EnumAppearances} appearance - The appearance of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n * @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 fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n * @fires kemet-radios-mounted - Fired when the radios is mounted to the DOM\n * @detail {HTMLElement} element - The radios element\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [styles];\n\n @property({ type: String })\n legend: string = '';\n\n @property({ type: String, reflect: true })\n axis: EnumAxis = EnumAxis.Horizontal;\n\n @property({ type: String })\n value!: string;\n\n @property({ type: String })\n name: string = 'radios';\n\n @property({ type: String, reflect: true })\n appearance: EnumAppearances = EnumAppearances.Neutral;\n\n @property({ type: String })\n message!: string;\n\n @property({ type: Boolean })\n required!: boolean;\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 radios!: NodeListOf<HTMLKemetRadioElement>;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n this.radios = this.querySelectorAll('kemet-radio');\n\n emitEvent(this, 'kemet-radios-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 <fieldset part=\"fieldset\">\n ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}></slot>\n </fieldset>\n ${this.makeMessage()}\n `;\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as HTMLKemetRadioElement;\n\n if (!target.disabled) {\n target.checked = true;\n target.setAttribute('aria-checked', 'true');\n this.value = target.value;\n this.appearance = EnumAppearances.Neutral;\n\n emitEvent(this, 'kemet-radios-change', this);\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const radios = Array.from(this.radios);\n const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n const forwardKeys = ['ArrowRight', 'ArrowDown'];\n const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n const checkedIndex: number | HTMLKemetRadioElement = radios.findIndex((radio: HTMLKemetRadioElement) => radio.checked) ?? radios[0];\n\n let index: number;\n\n if (typeof checkedIndex === 'number') {\n index = checkedIndex + shift;\n } else {\n index = shift;\n }\n\n if (arrowKeys.includes(event.key)) {\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n const radio = this.radios[index];\n if (radio) {\n radio.focus();\n radio.checked = true;\n radio.tabIndex = 0;\n }\n }\n }\n\n makeMessage() {\n if (this.appearance === 'error' || this.appearance === 'warning') {\n return html`<span part=\"message\">${this.message}</span>`;\n }\n\n return null;\n }\n\n checkValidity() {\n if (this.required) {\n return !!this.value;\n }\n\n return true;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radios': KemetRadios\n }\n}\n","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 { EnumAppearances } from \"./constants\";\n\nexport class FormSubmitController {\n host: any;\n form: HTMLFormElement | null | undefined;\n options: {\n form: (input: any) => HTMLFormElement | null | undefined;\n name: (input: any) => string;\n value: (input: any) => any;\n disabled: (input: any) => boolean;\n };\n\n constructor(host: any, options: Partial<{\n form: (input: any) => HTMLFormElement | null | undefined;\n name: (input: any) => string;\n value: (input: any) => any;\n disabled: (input: any) => boolean;\n }> = {}) {\n (this.host = host).addController(this);\n\n this.options = {\n form: (input: any) => input.closest('form'),\n name: (input: any) => input.name,\n value: (input: any) => input.value,\n disabled: (input: any) => input.disabled,\n ...options,\n };\n\n this.handleFormData = this.handleFormData.bind(this);\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n\n\n }\n\n hostConnected() {\n console.log('what?!');\n this.form = this.options.form(this.host);\n\n if (this.form) {\n console.log('Adding form listeners');\n this.form.addEventListener('formdata', this.handleFormData);\n this.form.addEventListener('submit', this.handleFormSubmit);\n }\n }\n\n hostDisconnected() {\n if (this.form) {\n this.form.removeEventListener('formdata', this.handleFormData);\n this.form.removeEventListener('submit', this.handleFormSubmit);\n this.form = undefined;\n }\n }\n\n handleFormData(event: FormDataEvent) {\n const disabled = this.options.disabled(this.host);\n const name = this.options.name(this.host);\n const value = this.options.value(this.host);\n\n if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n // TODO recreate a scenario where value will be an array\n // if (Array.isArray(value)) {\n // value.forEach((val) => {\n // event.formData?.append(name, val.toString());\n // });\n // } else {\n // event.formData?.append(name, value.toString());\n // }\n event.formData?.append(name, value.toString());\n }\n }\n\n handleFormSubmit(event: SubmitEvent) {\n console.log('~~Form submitted~~');\n event.preventDefault();\n event.stopImmediatePropagation();\n\n const disabled = this.options.disabled(this.host);\n this.form = this.options.form(this.host);\n\n if (this.form && !disabled) {\n const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n components.forEach((component: any) => {\n if (component.checkValidity) {\n component.checkValidity();\n\n if (!component.checkValidity()) {\n component.appearance = EnumAppearances.Error;\n component.invalid = true;\n\n component.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: EnumAppearances.Error,\n validity: component.validity ? component.validity : {},\n element: component,\n },\n }),\n );\n }\n\n if (component.checkLimitValidity && !component.checkLimitValidity()) {\n component.appearance = EnumAppearances.Error;\n component.invalid = true;\n\n component.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: { passedLimit: true },\n element: component,\n },\n }),\n );\n }\n }\n });\n }\n }\n\n submit() {\n const button = document.createElement('button');\n\n if (this.form) {\n button.type = 'submit';\n button.style.position = 'absolute';\n button.style.width = '0';\n button.style.height = '0';\n button.style.clip = 'rect(0 0 0 0)';\n button.style.clipPath = 'inset(50%)';\n button.style.overflow = 'hidden';\n button.style.whiteSpace = 'nowrap';\n this.form.append(button);\n button.click();\n button.remove();\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","import { css } from 'lit';\n\nexport default css`:host {\n display: block;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: flex;\n gap: 0.5rem;\n}\n\nlegend {\n margin-bottom: 1rem;\n}\n\n:host([axis=vertical]) fieldset {\n flex-direction: column;\n}\n\n[part=message] {\n display: block;\n margin-top: 0.5rem;\n}\n\n:host([appearance=error]) [part=message] {\n color: var(--kemet-color-font-error);\n}\n\n:host([appearance=warning]) [part=message] {\n color: var(--kemet-color-font-warning);\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;;;ACTC,IAAM,uBAAN,MAA2B;AAAA,EAUhC,YAAY,MAAW,UAKlB,CAAC,GAAG;AACP,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AAErC,SAAK,UAAU;AAAA,MACb,MAAM,CAAC,UAAe,MAAM,QAAQ,MAAM;AAAA,MAC1C,MAAM,CAAC,UAAe,MAAM;AAAA,MAC5B,OAAO,CAAC,UAAe,MAAM;AAAA,MAC7B,UAAU,CAAC,UAAe,MAAM;AAAA,MAChC,GAAG;AAAA,IACL;AAEA,SAAK,iBAAiB,KAAK,eAAe,KAAK,IAAI;AACnD,SAAK,mBAAmB,KAAK,iBAAiB,KAAK,IAAI;AAAA,EAGzD;AAAA,EAEA,gBAAgB;AACd,YAAQ,IAAI,QAAQ;AACpB,SAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AAEvC,QAAI,KAAK,MAAM;AACb,cAAQ,IAAI,uBAAuB;AACnC,WAAK,KAAK,iBAAiB,YAAY,KAAK,cAAc;AAC1D,WAAK,KAAK,iBAAiB,UAAU,KAAK,gBAAgB;AAAA,IAC5D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,oBAAoB,YAAY,KAAK,cAAc;AAC7D,WAAK,KAAK,oBAAoB,UAAU,KAAK,gBAAgB;AAC7D,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAEA,eAAe,OAAsB;AACnC,UAAM,WAAW,KAAK,QAAQ,SAAS,KAAK,IAAI;AAChD,UAAM,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AACxC,UAAM,QAAQ,KAAK,QAAQ,MAAM,KAAK,IAAI;AAE1C,QAAI,CAAC,YAAY,OAAO,SAAS,YAAY,OAAO,UAAU,aAAa;AASzE,YAAM,UAAU,OAAO,MAAM,MAAM,SAAS,CAAC;AAAA,IAC/C;AAAA,EACF;AAAA,EAEA,iBAAiB,OAAoB;AACnC,YAAQ,IAAI,oBAAoB;AAChC,UAAM,eAAe;AACrB,UAAM,yBAAyB;AAE/B,UAAM,WAAW,KAAK,QAAQ,SAAS,KAAK,IAAI;AAChD,SAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AAEvC,QAAI,KAAK,QAAQ,CAAC,UAAU;AAC1B,YAAM,aAAa,KAAK,KAAK,iBAAiB,yEAAyE;AAEvH,iBAAW,QAAQ,CAAC,cAAmB;AACrC,YAAI,UAAU,eAAe;AAC3B,oBAAU,cAAc;AAExB,cAAI,CAAC,UAAU,cAAc,GAAG;AAC9B,sBAAU;AACV,sBAAU,UAAU;AAEpB,sBAAU;AAAA,cACR,IAAI,YAAY,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ;AAAA,kBACN;AAAA,kBACA,UAAU,UAAU,WAAW,UAAU,WAAW,CAAC;AAAA,kBACrD,SAAS;AAAA,gBACX;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAEA,cAAI,UAAU,sBAAsB,CAAC,UAAU,mBAAmB,GAAG;AACnE,sBAAU;AACV,sBAAU,UAAU;AAEpB,sBAAU;AAAA,cACR,IAAI,YAAY,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ;AAAA,kBACN,QAAQ;AAAA,kBACR,UAAU,EAAE,aAAa,KAAK;AAAA,kBAC9B,SAAS;AAAA,gBACX;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,QAAI,KAAK,MAAM;AACb,aAAO,OAAO;AACd,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,SAAS;AACtB,aAAO,MAAM,OAAO;AACpB,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,aAAa;AAC1B,WAAK,KAAK,OAAO,MAAM;AACvB,aAAO,MAAM;AACb,aAAO,OAAO;AAAA,IAChB;AAAA,EACF;AACF;;;AC7IO,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;;;AJoCf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAmClD,cAAc;AACZ,UAAM;AA9BR,kBAAiB;AAGjB;AAMA,gBAAe;AAGf;AAYA,eAAc;AASZ,SAAK,uBAAuB,IAAI,qBAAqB,IAAI;AAAA,EAC3D;AAAA,EAEA,eAAe;AACb,SAAK,SAAS,KAAK,iBAAiB,aAAa;AAEjD,cAAU,MAAM,wBAAwB;AAAA,MACtC,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,UAED,KAAK,WAAW,KAAK,6BAA6B,KAAK,MAAM,cAAc,IAAI;AAAA,uBAClE,CAAC,UAAsB,KAAK,YAAY,KAAK,CAAC,aAAa,CAAC,UAAyB,KAAK,cAAc,KAAK,CAAC;AAAA;AAAA,QAE7H,KAAK,YAAY,CAAC;AAAA;AAAA,EAExB;AAAA,EAEA,YAAY,OAAmB;AAC7B,UAAM,SAAS,MAAM;AAErB,QAAI,CAAC,OAAO,UAAU;AACpB,aAAO,UAAU;AACjB,aAAO,aAAa,gBAAgB,MAAM;AAC1C,WAAK,QAAQ,OAAO;AACpB,WAAK;AAEL,gBAAU,MAAM,uBAAuB,IAAI;AAAA,IAC7C;AAAA,EACF;AAAA,EAEA,cAAc,OAAsB;AAClC,UAAM,SAAS,MAAM,KAAK,KAAK,MAAM;AACrC,UAAM,YAAY,CAAC,WAAW,cAAc,aAAa,WAAW;AACpE,UAAM,cAAc,CAAC,cAAc,WAAW;AAC9C,UAAM,QAAgB,YAAY,SAAS,MAAM,GAAG,IAAI,IAAI;AAC5D,UAAM,eAA+C,OAAO,UAAU,CAAC,UAAiC,MAAM,OAAO,KAAK,OAAO,CAAC;AAElI,QAAI;AAEJ,QAAI,OAAO,iBAAiB,UAAU;AACpC,cAAQ,eAAe;AAAA,IACzB,OAAO;AACL,cAAQ;AAAA,IACV;AAEA,QAAI,UAAU,SAAS,MAAM,GAAG,GAAG;AACjC,UAAI,QAAQ,GAAG;AACb,gBAAQ,OAAO,SAAS;AAAA,MAC1B;AAEA,UAAI,QAAQ,OAAO,SAAS,GAAG;AAC7B,gBAAQ;AAAA,MACV;AAEA,WAAK,OAAO,QAAQ,CAACA,WAAU;AAC7B,QAAAA,OAAM,UAAU;AAChB,QAAAA,OAAM,WAAW;AAAA,MACnB,CAAC;AAED,YAAM,QAAQ,KAAK,OAAO,KAAK;AAC/B,UAAI,OAAO;AACT,cAAM,MAAM;AACZ,cAAM,UAAU;AAChB,cAAM,WAAW;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,eAAe,WAAW,KAAK,eAAe,WAAW;AAChE,aAAO,4BAA4B,KAAK,OAAO;AAAA,IACjD;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,UAAU;AACjB,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAEA,WAAO;AAAA,EACT;AACF;AAnIqB,YAGZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GALP,YAMnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GARtB,YASnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,YAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,YAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjBtB,YAkBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApBP,YAqBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAvBR,YAwBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1BtB,YA2BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA7BtB,YA8BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhCY,YAiCnB;AAjCmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":["radio"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit from 'lit';
|
|
2
2
|
import { LitElement, TemplateResult } from 'lit';
|
|
3
3
|
import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
|
|
4
|
-
import {
|
|
4
|
+
import { d as EnumRoundedSizes, H as HTMLKemetFieldElement } from '../../constants-C4-3KYlX.js';
|
|
5
5
|
import KemetSelectOption from '../select-option/index.js';
|
|
6
6
|
import '../icon/index.js';
|
|
7
7
|
import 'lit-html';
|
|
@@ -32,8 +32,10 @@ var FormSubmitController = class {
|
|
|
32
32
|
this.handleFormSubmit = this.handleFormSubmit.bind(this);
|
|
33
33
|
}
|
|
34
34
|
hostConnected() {
|
|
35
|
+
console.log("what?!");
|
|
35
36
|
this.form = this.options.form(this.host);
|
|
36
37
|
if (this.form) {
|
|
38
|
+
console.log("Adding form listeners");
|
|
37
39
|
this.form.addEventListener("formdata", this.handleFormData);
|
|
38
40
|
this.form.addEventListener("submit", this.handleFormSubmit);
|
|
39
41
|
}
|
|
@@ -54,6 +56,7 @@ var FormSubmitController = class {
|
|
|
54
56
|
}
|
|
55
57
|
}
|
|
56
58
|
handleFormSubmit(event) {
|
|
59
|
+
console.log("~~Form submitted~~");
|
|
57
60
|
event.preventDefault();
|
|
58
61
|
event.stopImmediatePropagation();
|
|
59
62
|
const disabled = this.options.disabled(this.host);
|
|
@@ -64,14 +67,14 @@ var FormSubmitController = class {
|
|
|
64
67
|
if (component.checkValidity) {
|
|
65
68
|
component.checkValidity();
|
|
66
69
|
if (!component.checkValidity()) {
|
|
67
|
-
component.
|
|
70
|
+
component.appearance = "error" /* Error */;
|
|
68
71
|
component.invalid = true;
|
|
69
72
|
component.dispatchEvent(
|
|
70
73
|
new CustomEvent("kemet-input-status", {
|
|
71
74
|
bubbles: true,
|
|
72
75
|
composed: true,
|
|
73
76
|
detail: {
|
|
74
|
-
status: "error"
|
|
77
|
+
status: "error" /* Error */,
|
|
75
78
|
validity: component.validity ? component.validity : {},
|
|
76
79
|
element: component
|
|
77
80
|
}
|
|
@@ -79,7 +82,7 @@ var FormSubmitController = class {
|
|
|
79
82
|
);
|
|
80
83
|
}
|
|
81
84
|
if (component.checkLimitValidity && !component.checkLimitValidity()) {
|
|
82
|
-
component.
|
|
85
|
+
component.appearance = "error" /* Error */;
|
|
83
86
|
component.invalid = true;
|
|
84
87
|
component.dispatchEvent(
|
|
85
88
|
new CustomEvent("kemet-input-status", {
|
|
@@ -380,7 +383,7 @@ option {
|
|
|
380
383
|
}
|
|
381
384
|
|
|
382
385
|
:host([appearance=brand]) {
|
|
383
|
-
--kemet-select-color: var(--kemet-color-brand-primary-
|
|
386
|
+
--kemet-select-color: var(--kemet-color-brand-primary-darker);
|
|
384
387
|
}
|
|
385
388
|
|
|
386
389
|
:host([appearance=error]) {
|
|
@@ -436,7 +439,7 @@ option {
|
|
|
436
439
|
|
|
437
440
|
|
|
438
441
|
:host([appearance=brand][filled]) {
|
|
439
|
-
--_kemet-select-background-color: var(--kemet-color-brand-primary-
|
|
442
|
+
--_kemet-select-background-color: var(--kemet-color-brand-primary-darker);
|
|
440
443
|
}
|
|
441
444
|
|
|
442
445
|
:host([appearance=error][filled]) {
|