npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/cjs/q2-radio-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-radio-group.entry.cjs.js","mappings":"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","names":["createGuid","mirrorEmit","overrideFocus","isEventFromElement","h","Fragment","renderLabel"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n color: var-list(--tct-radio-group-label-font-color, inherit);\n font-size: var-list(--tct-radio-group-label-font-size, inherit);\n font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n text-transform: var-list(--tct-radio-group-label-text-transform, none);\n letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: var-list(--tct-radio-group-border-width, 1px);\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-radio-group.entry.cjs.js","mappings":"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","names":["createGuid","mirrorEmit","overrideFocus","isEventFromElement","h","Fragment","renderLabel"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n color: var-list(--tct-radio-group-label-font-color, inherit);\n font-size: var-list(--tct-radio-group-label-font-size, inherit);\n font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n text-transform: var-list(--tct-radio-group-label-text-transform, none);\n letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: var-list(--tct-radio-group-border-width, 1px);\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-radio-group.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-radio-group.entry.cjs.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n color: var-list(--tct-radio-group-label-font-color, inherit);\n font-size: var-list(--tct-radio-group-label-font-size, inherit);\n font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n text-transform: var-list(--tct-radio-group-label-text-transform, none);\n letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: var-list(--tct-radio-group-border-width, 1px);\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":["createGuid","mirrorEmit","overrideFocus","isEventFromElement","h","Fragment","renderLabel"],"mappings":"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"}
1	+ {"version":3,"file":"q2-radio-group.entry.cjs.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n color: var-list(--tct-radio-group-label-font-color, inherit);\n font-size: var-list(--tct-radio-group-label-font-size, inherit);\n font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n text-transform: var-list(--tct-radio-group-label-text-transform, none);\n letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: var-list(--tct-radio-group-border-width, 1px);\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":["createGuid","mirrorEmit","overrideFocus","isEventFromElement","h","Fragment","renderLabel"],"mappings":"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"}

package/dist/cjs/q2-radio.cjs.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-const q2RadioCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));--comp-big-circle-fill:var(--tct-radio-background-fill, transparent);--comp-big-circle-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-big-circle-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-big-circle-transition:fill var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease)));--comp-small-circle-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-letter-spacing:var(--tct-radio-label-letter-spacing, 0.25);--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 1rem);--comp-label-content-gap:var(--tct-radio-label-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));--comp-label-hidden-columns:var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr);--comp-svg-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-svg-box-shadow:var(--tct-radio-box-shadow, none);--comp-big-circle-fill-checked:var(--tct-radio-checked-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-checked:var(--tct-radio-checked-stroke-color, var(--comp-big-circle-stroke));--comp-small-circle-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600)));--comp-label-content-letter-spacing-checked:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--comp-label-content-letter-spacing))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-big-circle-fill-active:var(--tct-radio-background-fill-active, var(--comp-big-circle-fill));--comp-big-circle-stroke-active:var(--tct-radio-background-stroke-active, var(--comp-big-circle-stroke));--comp-small-circle-fill-active:var(--tct-radio-selected-fill-active, var(--comp-small-circle-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-letter-spacing-active:var(--tct-radio-label-letter-spacing-active, var(--comp-label-content-letter-spacing));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-big-circle-fill-hover:var(--tct-radio-hover-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-hover:var(--tct-radio-hover-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-big-circle-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-svg-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, --tct-radio-focus-box-shadow, --const-double-focus-ring);margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(---comp-label-content-color);font-weight:var(---comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, 14px);align-items:center;cursor:pointer;margin-right:var(---comp-label-content-margin-right);display:grid;grid-template-columns:18px 1fr;gap:var(--comp-label-content-gap);letter-spacing:var(--comp-label-content-letter-spacing)}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container svg{border-radius:50%;transition:var(--comp-svg-transition);outline:0;width:100%;box-shadow:var(--comp-svg-box-shadow)}.radio-container .big-circle{fill:var(--comp-big-circle-fill);stroke:var(--comp-big-circle-stroke);stroke-width:var(--comp-big-circle-stroke-width);transition:var(--comp-big-circle-transition)}.radio-container .small-circle{fill:var(--comp-small-circle-fill)}.radio-container input:checked+label .big-circle{fill:var(--comp-big-circle-fill-checked);stroke:var(--comp-big-circle-stroke-checked)}.radio-container input:checked+label .small-circle{fill:var(--comp-small-circle-fill-checked)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);letter-spacing:var(--comp-label-content-letter-spacing-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover+label .big-circle{fill:var(--comp-big-circle-fill-hover);stroke:var(--comp-big-circle-stroke-hover)}.radio-container input:hover+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active+label .big-circle{fill:var(--comp-big-circle-fill-active);stroke:var(--comp-big-circle-stroke-active)}.radio-container input:active+label .small-circle{fill:var(--comp-small-circle-fill-active)}.radio-container input:active+label .label-content{font-weight:var(--comp-label-content-font-weight-active);letter-spacing:var(--comp-label-content-letter-spacing-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .big-circle{fill:var(--comp-big-circle-fill-focus);stroke:var(--comp-big-circle-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:var(--tct-radio-tile-border-radius, var(--app-border-radius-1, 3px));border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));background:var(--tct-radio-background-fill, transparent);cursor:pointer;display:block;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, 14px));padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:checked+label{border-color:var(--tct-radio-tile-checked-stroke-color, var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));box-shadow:inset 0 0 0 2px #ffffff;background:var(--tct-radio-checked-background-fill, transparent);color:var(--tct-radio-checked-label-color, inherit)}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-radio-tile-checked-stroke-color, var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}.radio-tile input:hover+label{border-color:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));background:var(--tct-radio-hover-background-fill, transparent);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{--comp-radio-tile-focus-box-shadow-fallback:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);border-color:var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));background:var(--tct-radio-focus-background-fill, transparent);box-shadow:var(--tct-radio-tile-focus-box-shadow, var(--comp-radio-tile-focus-box-shadow-fallback));color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile input:focus:checked+label:after{border-bottom:5px solid var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, #2e2e2e))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
+const q2RadioCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));--comp-big-circle-fill:var(--tct-radio-background-fill, transparent);--comp-big-circle-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-big-circle-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-big-circle-transition:fill var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease)));--comp-small-circle-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-letter-spacing:var(--tct-radio-label-letter-spacing, 0.25);--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 1rem);--comp-label-content-gap:var(--tct-radio-label-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));--comp-label-hidden-columns:var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr);--comp-svg-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-svg-box-shadow:var(--tct-radio-box-shadow, none);--comp-big-circle-fill-checked:var(--tct-radio-checked-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-checked:var(--tct-radio-checked-stroke-color, var(--comp-big-circle-stroke));--comp-small-circle-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600)));--comp-label-content-letter-spacing-checked:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--comp-label-content-letter-spacing))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-big-circle-fill-active:var(--tct-radio-background-fill-active, var(--comp-big-circle-fill));--comp-big-circle-stroke-active:var(--tct-radio-background-stroke-active, var(--comp-big-circle-stroke));--comp-small-circle-fill-active:var(--tct-radio-selected-fill-active, var(--comp-small-circle-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-letter-spacing-active:var(--tct-radio-label-letter-spacing-active, var(--comp-label-content-letter-spacing));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-big-circle-fill-hover:var(--tct-radio-hover-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-hover:var(--tct-radio-hover-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-big-circle-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-svg-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, --tct-radio-focus-box-shadow, --const-double-focus-ring);margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(---comp-label-content-color);font-weight:var(---comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, 14px);align-items:start;cursor:pointer;margin-right:var(---comp-label-content-margin-right);display:grid;grid-template-columns:18px 1fr;gap:var(--comp-label-content-gap);letter-spacing:var(--comp-label-content-letter-spacing)}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container label[for] .description-content{grid-column:2}.radio-container svg{border-radius:50%;transition:var(--comp-svg-transition);outline:0;width:100%;box-shadow:var(--comp-svg-box-shadow)}.radio-container .big-circle{fill:var(--comp-big-circle-fill);stroke:var(--comp-big-circle-stroke);stroke-width:var(--comp-big-circle-stroke-width);transition:var(--comp-big-circle-transition)}.radio-container .small-circle{fill:var(--comp-small-circle-fill)}.radio-container input:checked+label .big-circle{fill:var(--comp-big-circle-fill-checked);stroke:var(--comp-big-circle-stroke-checked)}.radio-container input:checked+label .small-circle{fill:var(--comp-small-circle-fill-checked)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);letter-spacing:var(--comp-label-content-letter-spacing-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover+label .big-circle{fill:var(--comp-big-circle-fill-hover);stroke:var(--comp-big-circle-stroke-hover)}.radio-container input:hover+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active+label .big-circle{fill:var(--comp-big-circle-fill-active);stroke:var(--comp-big-circle-stroke-active)}.radio-container input:active+label .small-circle{fill:var(--comp-small-circle-fill-active)}.radio-container input:active+label .label-content{font-weight:var(--comp-label-content-font-weight-active);letter-spacing:var(--comp-label-content-letter-spacing-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .big-circle{fill:var(--comp-big-circle-fill-focus);stroke:var(--comp-big-circle-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:var(--tct-radio-tile-border-radius, var(--app-border-radius-1, 3px));border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));background:var(--tct-radio-background-fill, transparent);cursor:pointer;display:block;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, 14px));padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:checked+label{border-color:var(--tct-radio-tile-checked-stroke-color, var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));box-shadow:inset 0 0 0 2px #ffffff;background:var(--tct-radio-checked-background-fill, transparent);color:var(--tct-radio-checked-label-color, inherit)}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-radio-tile-checked-stroke-color, var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}.radio-tile input:hover+label{border-color:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));background:var(--tct-radio-hover-background-fill, transparent);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{--comp-radio-tile-focus-box-shadow-fallback:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);border-color:var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));background:var(--tct-radio-focus-background-fill, transparent);box-shadow:var(--tct-radio-tile-focus-box-shadow, var(--comp-radio-tile-focus-box-shadow-fallback));color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile input:focus:checked+label:after{border-bottom:5px solid var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, #2e2e2e))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 const Q2Radio = class {
     constructor(hostRef) {
@@ -93,7 +93,7 @@ const Q2Radio = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'b3ff3221d679096f3fd42a318cfadb6233ab0ac5', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, index.h("input", { key: 'ed9d41619e21af0927c1ebef5dedd3546683e677', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? index$1.loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), index.h("label", { key: '817d5260d720061908c803ff34dc826a9aa954e8', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (index.h("svg", { key: 'aed6e01bca76e33bc6dda009cb78437b75da31df', viewBox: "0 0 18 18" }, index.h("circle", { key: '12b009b629c2f79b0ff9d973d91eee878680d5e2', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), index.h("circle", { key: 'bdb34bf3af2d9b05ac1a2f13d1ba68bc1be34379', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (index.h("div", { key: '67348d1852db1ab314e686a6208d3ab66216f002', class: "label-content" }, (this.label && index$1.loc(this.label)) || '', index.h("slot", { key: 'ac58bd184195bc2c2ed79dcab60df89bc0accf62' }))))));
+        return (index.h("div", { key: '699970d6bed602cbd0e6954d36ca3b03b2122fdc', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, index.h("input", { key: 'edaaa6bbba5eb256fed9e02863b3cf3b706b4e73', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? index$1.loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), index.h("label", { key: 'fd0c67c56535a53f3cbbeddd32f3817b430b9075', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (index.h("svg", { key: '2cfaa2fa7393ff369a319adb780f3667dc11194d', viewBox: "0 0 18 18" }, index.h("circle", { key: '157a1a5b430a0e63e695aec87bba111f60357444', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), index.h("circle", { key: '4c4daede7d3414b1e7a9c037ba4d9e919300a9ca', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (index.h("div", { key: 'e9b3ba9aceb316988bf570a3dd50cf99166fb248', class: "label-content" }, (this.label && index$1.loc(this.label)) || '', index.h("slot", { key: 'a6ae2c01e62af90255f836a69458d530136daccb' }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-radio.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-radio.entry.cjs.js","mappings":"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","names":["createGuid","handleAriaLabel","overrideFocus","mirrorEmit","h","loc"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.radio-container {\n --comp-radio-margin: #{var-list(\n --tct-radio-margin,\n unquote(\n '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n )\n )};\n\n //Default State\n --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n --comp-big-circle-stroke: #{var-list(\n --tct-radio-background-stroke,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n --comp-big-circle-transition: #{fill\n var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n --comp-label-content-color: #{var-list(\n --tct-radio-label-color,\n --tct-radio-label-font-color,\n --tct-radio-label-color,\n inherit\n )};\n --comp-label-content-font-weight: #{var-list(\n --tct-radio-label-font-weight,\n --tct-radio-font-weight,\n --tct-checkbox-font-weight,\n 400\n )};\n --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n --comp-svg-transition: #{box-shadow\n var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n //Checked State\n --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n --comp-small-circle-fill-checked: #{var-list(\n --tct-radio-select-fill-checked,\n --tct-radio-checked-fill,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n )};\n --comp-label-content-font-weight-checked: #{var-list(\n --tct-radio-label-font-weight-checked,\n --tct-radio-checked-label-font-weight,\n --tct-checkbox-selected-font-weight,\n 600\n )};\n --comp-label-content-letter-spacing-checked: #{var-list(\n --tct-radio-label-letter-spacing-checked,\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-checked: #{var-list(\n --tct-radio-label-font-color-checked,\n --tct-radio-checked-label-font-color,\n --tct-radio-checked-label-color,\n inherit\n )};\n\n // Active State\n --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n --comp-label-content-font-weight-active: #{var-list(\n --tct-radio-label-font-weight-active,\n --comp-label-content-font-weight\n )};\n --comp-label-content-letter-spacing-active: #{var-list(\n --tct-radio-label-letter-spacing-active,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n // Hover State\n --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n // Focus State\n --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n // Focus Visible\n --comp-svg-box-shadow-focus-visible: #{var(\n --tct-radio-box-shadow-focus-visible,\n --tct-radio-focus-box-shadow,\n --const-double-focus-ring\n )};\n\n margin: var(--comp-radio-margin);\n\n label[for] {\n color: var(---comp-label-content-color);\n font-weight: var(---comp-label-content-font-weight);\n font-size: var(--tct-radio-label-font-size, 14px);\n align-items: center;\n cursor: pointer;\n margin-right: var(---comp-label-content-margin-right);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var(--comp-label-content-gap);\n letter-spacing: var(--comp-label-content-letter-spacing);\n\n &.label-hidden {\n grid-template-columns: var(--comp-label-hidden-columns);\n }\n }\n\n svg {\n border-radius: 50%;\n transition: var(--comp-svg-transition);\n outline: 0;\n width: 100%;\n box-shadow: var(--comp-svg-box-shadow);\n }\n\n .big-circle {\n fill: var(--comp-big-circle-fill);\n stroke: var(--comp-big-circle-stroke);\n stroke-width: var(--comp-big-circle-stroke-width);\n transition: var(--comp-big-circle-transition);\n }\n .small-circle {\n fill: var(--comp-small-circle-fill);\n }\n\n input {\n &:checked {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-checked);\n stroke: var(--comp-big-circle-stroke-checked);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-checked);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-checked);\n letter-spacing: var(--comp-label-content-letter-spacing-checked);\n color: var(--comp-label-content-color-checked);\n }\n }\n }\n\n &:hover {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-hover);\n stroke: var(--comp-big-circle-stroke-hover);\n }\n .label-content {\n color: var(--comp-label-content-color-hover);\n }\n }\n }\n\n &:active {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-active);\n stroke: var(--comp-big-circle-stroke-active);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-active);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-active);\n letter-spacing: var(--comp-label-content-letter-spacing-active);\n color: var(--comp-label-content-color-active);\n }\n }\n }\n\n &:focus {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-focus);\n stroke: var(--comp-big-circle-stroke-focus);\n }\n .label-content {\n color: var(--comp-label-content-color-focus);\n }\n }\n }\n }\n}\n\n.radio-tile {\n flex-basis: 100px;\n flex-grow: 0;\n flex-wrap: wrap;\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n align-items: center;\n border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 3px);\n border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n background: var-list(--tct-radio-background-fill, transparent);\n cursor: pointer;\n display: block;\n font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\n padding: 10px;\n position: relative;\n text-align: center;\n transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n white-space: nowrap;\n }\n\n input {\n &:checked + label {\n border-color: var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n box-shadow: inset 0 0 0 2px #ffffff;\n background: var-list(--tct-radio-checked-background-fill, transparent);\n color: var-list(--tct-radio-checked-label-color, inherit);\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid\n var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n border-left-width: 5px;\n border-left: 8px solid transparent;\n border-right-width: 5px;\n border-right: 8px solid transparent;\n bottom: 0;\n content: '';\n height: 0;\n left: 50%;\n margin-left: -5px;\n position: absolute;\n width: 0;\n }\n }\n\n &:hover + label {\n border-color: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n background: var-list(--tct-radio-hover-background-fill, transparent);\n color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n }\n\n &:focus + label,\n &:focus:checked + label {\n --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n border-color: var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n background: var-list(--tct-radio-focus-background-fill, transparent);\n box-shadow: var-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n\n &:focus:checked + label:after {\n border-bottom: 5px solid var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n #2e2e2e\n );\n }\n }\n}\n\ninput:disabled + label[for] {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n /\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the radio. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the radio and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false })\n groupDisabled: boolean = false;\n\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false })\n groupReadonly: boolean = false;\n\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false })\n groupTileLayout: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The text that describes the individual radio option.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true })\n name: string;\n\n /* The radio is non-interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* @private /\n @Prop()\n tabIndex: number = 0;\n\n /* The value that is returned in the `change` event that is emitted from the `q2-radio-group`. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the radio is checked.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the radio is checked.\n */\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => {\n this.inputField.focus();\n this.inputField.click();\n };\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n } else if (this.groupReadonly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.inputField.focus();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('checked')\n checkedObserver() {\n if (!this.isLoaded) return;\n if (!this.checked) return;\n mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled \|\| this.readonly \|\| this.groupReadonly \|\| this.groupDisabled) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n <input\n ref={el => (this.inputField = el)}\n class=\"sr\"\n id={this._id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.groupDisabled}\n checked={this.checked}\n aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n onChange={this.inputChange}\n test-id=\"q2RadioInnerRadioBox\"\n ></input>\n\n <label\n htmlFor={this._id}\n class={this.hideLabel ? 'label-hidden' : undefined}\n test-id=\"radioButton\"\n >\n {!this.groupTileLayout && (\n <svg viewBox=\"0 0 18 18\">\n <circle\n class=\"big-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <circle\n class=\"small-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"4\"\n />\n </svg>\n )}\n {!this.hideLabel && (\n <div class=\"label-content\">\n {(this.label && loc(this.label)) \|\| ''}\n <slot></slot>\n </div>\n )}\n </label>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-radio.entry.cjs.js","mappings":"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","names":["createGuid","handleAriaLabel","overrideFocus","mirrorEmit","h","loc"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n}\n\n.radio-container {\n --comp-radio-margin: #{var-list(\n --tct-radio-margin,\n unquote(\n '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n )\n )};\n\n //Default State\n --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n --comp-big-circle-stroke: #{var-list(\n --tct-radio-background-stroke,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n --comp-big-circle-transition: #{fill\n var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n --comp-label-content-color: #{var-list(\n --tct-radio-label-color,\n --tct-radio-label-font-color,\n --tct-radio-label-color,\n inherit\n )};\n --comp-label-content-font-weight: #{var-list(\n --tct-radio-label-font-weight,\n --tct-radio-font-weight,\n --tct-checkbox-font-weight,\n 400\n )};\n --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n --comp-svg-transition: #{box-shadow\n var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n //Checked State\n --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n --comp-small-circle-fill-checked: #{var-list(\n --tct-radio-select-fill-checked,\n --tct-radio-checked-fill,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n )};\n --comp-label-content-font-weight-checked: #{var-list(\n --tct-radio-label-font-weight-checked,\n --tct-radio-checked-label-font-weight,\n --tct-checkbox-selected-font-weight,\n 600\n )};\n --comp-label-content-letter-spacing-checked: #{var-list(\n --tct-radio-label-letter-spacing-checked,\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-checked: #{var-list(\n --tct-radio-label-font-color-checked,\n --tct-radio-checked-label-font-color,\n --tct-radio-checked-label-color,\n inherit\n )};\n\n // Active State\n --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n --comp-label-content-font-weight-active: #{var-list(\n --tct-radio-label-font-weight-active,\n --comp-label-content-font-weight\n )};\n --comp-label-content-letter-spacing-active: #{var-list(\n --tct-radio-label-letter-spacing-active,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n // Hover State\n --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n // Focus State\n --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n // Focus Visible\n --comp-svg-box-shadow-focus-visible: #{var(\n --tct-radio-box-shadow-focus-visible,\n --tct-radio-focus-box-shadow,\n --const-double-focus-ring\n )};\n\n margin: var(--comp-radio-margin);\n\n label[for] {\n color: var(---comp-label-content-color);\n font-weight: var(---comp-label-content-font-weight);\n font-size: var(--tct-radio-label-font-size, 14px);\n align-items: start;\n cursor: pointer;\n margin-right: var(---comp-label-content-margin-right);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var(--comp-label-content-gap);\n letter-spacing: var(--comp-label-content-letter-spacing);\n\n &.label-hidden {\n grid-template-columns: var(--comp-label-hidden-columns);\n }\n .description-content {\n grid-column: 2;\n }\n }\n\n svg {\n border-radius: 50%;\n transition: var(--comp-svg-transition);\n outline: 0;\n width: 100%;\n box-shadow: var(--comp-svg-box-shadow);\n }\n\n .big-circle {\n fill: var(--comp-big-circle-fill);\n stroke: var(--comp-big-circle-stroke);\n stroke-width: var(--comp-big-circle-stroke-width);\n transition: var(--comp-big-circle-transition);\n }\n .small-circle {\n fill: var(--comp-small-circle-fill);\n }\n\n input {\n &:checked {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-checked);\n stroke: var(--comp-big-circle-stroke-checked);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-checked);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-checked);\n letter-spacing: var(--comp-label-content-letter-spacing-checked);\n color: var(--comp-label-content-color-checked);\n }\n }\n }\n\n &:hover {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-hover);\n stroke: var(--comp-big-circle-stroke-hover);\n }\n .label-content {\n color: var(--comp-label-content-color-hover);\n }\n }\n }\n\n &:active {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-active);\n stroke: var(--comp-big-circle-stroke-active);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-active);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-active);\n letter-spacing: var(--comp-label-content-letter-spacing-active);\n color: var(--comp-label-content-color-active);\n }\n }\n }\n\n &:focus {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-focus);\n stroke: var(--comp-big-circle-stroke-focus);\n }\n .label-content {\n color: var(--comp-label-content-color-focus);\n }\n }\n }\n }\n}\n\n.radio-tile {\n flex-basis: 100px;\n flex-grow: 0;\n flex-wrap: wrap;\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n align-items: center;\n border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 3px);\n border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n background: var-list(--tct-radio-background-fill, transparent);\n cursor: pointer;\n display: block;\n font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\n padding: 10px;\n position: relative;\n text-align: center;\n transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n white-space: nowrap;\n }\n\n input {\n &:checked + label {\n border-color: var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n box-shadow: inset 0 0 0 2px #ffffff;\n background: var-list(--tct-radio-checked-background-fill, transparent);\n color: var-list(--tct-radio-checked-label-color, inherit);\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid\n var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n border-left-width: 5px;\n border-left: 8px solid transparent;\n border-right-width: 5px;\n border-right: 8px solid transparent;\n bottom: 0;\n content: '';\n height: 0;\n left: 50%;\n margin-left: -5px;\n position: absolute;\n width: 0;\n }\n }\n\n &:hover + label {\n border-color: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n background: var-list(--tct-radio-hover-background-fill, transparent);\n color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n }\n\n &:focus + label,\n &:focus:checked + label {\n --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n border-color: var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n background: var-list(--tct-radio-focus-background-fill, transparent);\n box-shadow: var-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n\n &:focus:checked + label:after {\n border-bottom: 5px solid var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n #2e2e2e\n );\n }\n }\n}\n\ninput:disabled + label[for] {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n /\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the radio. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the radio and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false })\n groupDisabled: boolean = false;\n\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false })\n groupReadonly: boolean = false;\n\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false })\n groupTileLayout: boolean = false;\n\n /\n Hides the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The text that describes the individual radio option.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true })\n name: string;\n\n /* The radio is non-interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* @private /\n @Prop()\n tabIndex: number = 0;\n\n /* The value that is returned in the `change` event that is emitted from the `q2-radio-group`. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the radio is checked.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the radio is checked.\n */\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => {\n this.inputField.focus();\n this.inputField.click();\n };\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n } else if (this.groupReadonly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.inputField.focus();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('checked')\n checkedObserver() {\n if (!this.isLoaded) return;\n if (!this.checked) return;\n mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled \|\| this.readonly \|\| this.groupReadonly \|\| this.groupDisabled) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n <input\n ref={el => (this.inputField = el)}\n class=\"sr\"\n id={this._id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.groupDisabled}\n checked={this.checked}\n aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n onChange={this.inputChange}\n test-id=\"q2RadioInnerRadioBox\"\n ></input>\n\n <label\n htmlFor={this._id}\n class={this.hideLabel ? 'label-hidden' : undefined}\n test-id=\"radioButton\"\n >\n {!this.groupTileLayout && (\n <svg viewBox=\"0 0 18 18\">\n <circle\n class=\"big-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <circle\n class=\"small-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"4\"\n />\n </svg>\n )}\n {!this.hideLabel && (\n <div class=\"label-content\">\n {(this.label && loc(this.label)) \|\| ''}\n <slot></slot>\n </div>\n )}\n </label>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-radio.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-radio.entry.cjs.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.radio-container {\n --comp-radio-margin: #{var-list(\n --tct-radio-margin,\n unquote(\n '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n )\n )};\n\n //Default State\n --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n --comp-big-circle-stroke: #{var-list(\n --tct-radio-background-stroke,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n --comp-big-circle-transition: #{fill\n var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n --comp-label-content-color: #{var-list(\n --tct-radio-label-color,\n --tct-radio-label-font-color,\n --tct-radio-label-color,\n inherit\n )};\n --comp-label-content-font-weight: #{var-list(\n --tct-radio-label-font-weight,\n --tct-radio-font-weight,\n --tct-checkbox-font-weight,\n 400\n )};\n --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n --comp-svg-transition: #{box-shadow\n var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n //Checked State\n --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n --comp-small-circle-fill-checked: #{var-list(\n --tct-radio-select-fill-checked,\n --tct-radio-checked-fill,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n )};\n --comp-label-content-font-weight-checked: #{var-list(\n --tct-radio-label-font-weight-checked,\n --tct-radio-checked-label-font-weight,\n --tct-checkbox-selected-font-weight,\n 600\n )};\n --comp-label-content-letter-spacing-checked: #{var-list(\n --tct-radio-label-letter-spacing-checked,\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-checked: #{var-list(\n --tct-radio-label-font-color-checked,\n --tct-radio-checked-label-font-color,\n --tct-radio-checked-label-color,\n inherit\n )};\n\n // Active State\n --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n --comp-label-content-font-weight-active: #{var-list(\n --tct-radio-label-font-weight-active,\n --comp-label-content-font-weight\n )};\n --comp-label-content-letter-spacing-active: #{var-list(\n --tct-radio-label-letter-spacing-active,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n // Hover State\n --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n // Focus State\n --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n // Focus Visible\n --comp-svg-box-shadow-focus-visible: #{var(\n --tct-radio-box-shadow-focus-visible,\n --tct-radio-focus-box-shadow,\n --const-double-focus-ring\n )};\n\n margin: var(--comp-radio-margin);\n\n label[for] {\n color: var(---comp-label-content-color);\n font-weight: var(---comp-label-content-font-weight);\n font-size: var(--tct-radio-label-font-size, 14px);\n align-items: center;\n cursor: pointer;\n margin-right: var(---comp-label-content-margin-right);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var(--comp-label-content-gap);\n letter-spacing: var(--comp-label-content-letter-spacing);\n\n &.label-hidden {\n grid-template-columns: var(--comp-label-hidden-columns);\n }\n }\n\n svg {\n border-radius: 50%;\n transition: var(--comp-svg-transition);\n outline: 0;\n width: 100%;\n box-shadow: var(--comp-svg-box-shadow);\n }\n\n .big-circle {\n fill: var(--comp-big-circle-fill);\n stroke: var(--comp-big-circle-stroke);\n stroke-width: var(--comp-big-circle-stroke-width);\n transition: var(--comp-big-circle-transition);\n }\n .small-circle {\n fill: var(--comp-small-circle-fill);\n }\n\n input {\n &:checked {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-checked);\n stroke: var(--comp-big-circle-stroke-checked);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-checked);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-checked);\n letter-spacing: var(--comp-label-content-letter-spacing-checked);\n color: var(--comp-label-content-color-checked);\n }\n }\n }\n\n &:hover {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-hover);\n stroke: var(--comp-big-circle-stroke-hover);\n }\n .label-content {\n color: var(--comp-label-content-color-hover);\n }\n }\n }\n\n &:active {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-active);\n stroke: var(--comp-big-circle-stroke-active);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-active);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-active);\n letter-spacing: var(--comp-label-content-letter-spacing-active);\n color: var(--comp-label-content-color-active);\n }\n }\n }\n\n &:focus {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-focus);\n stroke: var(--comp-big-circle-stroke-focus);\n }\n .label-content {\n color: var(--comp-label-content-color-focus);\n }\n }\n }\n }\n}\n\n.radio-tile {\n flex-basis: 100px;\n flex-grow: 0;\n flex-wrap: wrap;\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n align-items: center;\n border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 3px);\n border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n background: var-list(--tct-radio-background-fill, transparent);\n cursor: pointer;\n display: block;\n font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\n padding: 10px;\n position: relative;\n text-align: center;\n transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n white-space: nowrap;\n }\n\n input {\n &:checked + label {\n border-color: var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n box-shadow: inset 0 0 0 2px #ffffff;\n background: var-list(--tct-radio-checked-background-fill, transparent);\n color: var-list(--tct-radio-checked-label-color, inherit);\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid\n var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n border-left-width: 5px;\n border-left: 8px solid transparent;\n border-right-width: 5px;\n border-right: 8px solid transparent;\n bottom: 0;\n content: '';\n height: 0;\n left: 50%;\n margin-left: -5px;\n position: absolute;\n width: 0;\n }\n }\n\n &:hover + label {\n border-color: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n background: var-list(--tct-radio-hover-background-fill, transparent);\n color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n }\n\n &:focus + label,\n &:focus:checked + label {\n --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n border-color: var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n background: var-list(--tct-radio-focus-background-fill, transparent);\n box-shadow: var-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n\n &:focus:checked + label:after {\n border-bottom: 5px solid var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n #2e2e2e\n );\n }\n }\n}\n\ninput:disabled + label[for] {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n /\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the radio. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the radio and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false })\n groupDisabled: boolean = false;\n\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false })\n groupReadonly: boolean = false;\n\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false })\n groupTileLayout: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The text that describes the individual radio option.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true })\n name: string;\n\n /* The radio is non-interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* @private /\n @Prop()\n tabIndex: number = 0;\n\n /* The value that is returned in the `change` event that is emitted from the `q2-radio-group`. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the radio is checked.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the radio is checked.\n */\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => {\n this.inputField.focus();\n this.inputField.click();\n };\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n } else if (this.groupReadonly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.inputField.focus();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('checked')\n checkedObserver() {\n if (!this.isLoaded) return;\n if (!this.checked) return;\n mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled \|\| this.readonly \|\| this.groupReadonly \|\| this.groupDisabled) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n <input\n ref={el => (this.inputField = el)}\n class=\"sr\"\n id={this._id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.groupDisabled}\n checked={this.checked}\n aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n onChange={this.inputChange}\n test-id=\"q2RadioInnerRadioBox\"\n ></input>\n\n <label\n htmlFor={this._id}\n class={this.hideLabel ? 'label-hidden' : undefined}\n test-id=\"radioButton\"\n >\n {!this.groupTileLayout && (\n <svg viewBox=\"0 0 18 18\">\n <circle\n class=\"big-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <circle\n class=\"small-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"4\"\n />\n </svg>\n )}\n {!this.hideLabel && (\n <div class=\"label-content\">\n {(this.label && loc(this.label)) \|\| ''}\n <slot></slot>\n </div>\n )}\n </label>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["createGuid","handleAriaLabel","overrideFocus","mirrorEmit","h","loc"],"mappings":"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"}
1	+ {"version":3,"file":"q2-radio.entry.cjs.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n}\n\n.radio-container {\n --comp-radio-margin: #{var-list(\n --tct-radio-margin,\n unquote(\n '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n )\n )};\n\n //Default State\n --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n --comp-big-circle-stroke: #{var-list(\n --tct-radio-background-stroke,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n --comp-big-circle-transition: #{fill\n var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n --comp-label-content-color: #{var-list(\n --tct-radio-label-color,\n --tct-radio-label-font-color,\n --tct-radio-label-color,\n inherit\n )};\n --comp-label-content-font-weight: #{var-list(\n --tct-radio-label-font-weight,\n --tct-radio-font-weight,\n --tct-checkbox-font-weight,\n 400\n )};\n --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n --comp-svg-transition: #{box-shadow\n var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n //Checked State\n --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n --comp-small-circle-fill-checked: #{var-list(\n --tct-radio-select-fill-checked,\n --tct-radio-checked-fill,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n )};\n --comp-label-content-font-weight-checked: #{var-list(\n --tct-radio-label-font-weight-checked,\n --tct-radio-checked-label-font-weight,\n --tct-checkbox-selected-font-weight,\n 600\n )};\n --comp-label-content-letter-spacing-checked: #{var-list(\n --tct-radio-label-letter-spacing-checked,\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-checked: #{var-list(\n --tct-radio-label-font-color-checked,\n --tct-radio-checked-label-font-color,\n --tct-radio-checked-label-color,\n inherit\n )};\n\n // Active State\n --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n --comp-label-content-font-weight-active: #{var-list(\n --tct-radio-label-font-weight-active,\n --comp-label-content-font-weight\n )};\n --comp-label-content-letter-spacing-active: #{var-list(\n --tct-radio-label-letter-spacing-active,\n --comp-label-content-letter-spacing\n )};\n --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n // Hover State\n --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n // Focus State\n --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n // Focus Visible\n --comp-svg-box-shadow-focus-visible: #{var(\n --tct-radio-box-shadow-focus-visible,\n --tct-radio-focus-box-shadow,\n --const-double-focus-ring\n )};\n\n margin: var(--comp-radio-margin);\n\n label[for] {\n color: var(---comp-label-content-color);\n font-weight: var(---comp-label-content-font-weight);\n font-size: var(--tct-radio-label-font-size, 14px);\n align-items: start;\n cursor: pointer;\n margin-right: var(---comp-label-content-margin-right);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var(--comp-label-content-gap);\n letter-spacing: var(--comp-label-content-letter-spacing);\n\n &.label-hidden {\n grid-template-columns: var(--comp-label-hidden-columns);\n }\n .description-content {\n grid-column: 2;\n }\n }\n\n svg {\n border-radius: 50%;\n transition: var(--comp-svg-transition);\n outline: 0;\n width: 100%;\n box-shadow: var(--comp-svg-box-shadow);\n }\n\n .big-circle {\n fill: var(--comp-big-circle-fill);\n stroke: var(--comp-big-circle-stroke);\n stroke-width: var(--comp-big-circle-stroke-width);\n transition: var(--comp-big-circle-transition);\n }\n .small-circle {\n fill: var(--comp-small-circle-fill);\n }\n\n input {\n &:checked {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-checked);\n stroke: var(--comp-big-circle-stroke-checked);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-checked);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-checked);\n letter-spacing: var(--comp-label-content-letter-spacing-checked);\n color: var(--comp-label-content-color-checked);\n }\n }\n }\n\n &:hover {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-hover);\n stroke: var(--comp-big-circle-stroke-hover);\n }\n .label-content {\n color: var(--comp-label-content-color-hover);\n }\n }\n }\n\n &:active {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-active);\n stroke: var(--comp-big-circle-stroke-active);\n }\n\n .small-circle {\n fill: var(--comp-small-circle-fill-active);\n }\n\n .label-content {\n font-weight: var(--comp-label-content-font-weight-active);\n letter-spacing: var(--comp-label-content-letter-spacing-active);\n color: var(--comp-label-content-color-active);\n }\n }\n }\n\n &:focus {\n & + label {\n .big-circle {\n fill: var(--comp-big-circle-fill-focus);\n stroke: var(--comp-big-circle-stroke-focus);\n }\n .label-content {\n color: var(--comp-label-content-color-focus);\n }\n }\n }\n }\n}\n\n.radio-tile {\n flex-basis: 100px;\n flex-grow: 0;\n flex-wrap: wrap;\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n align-items: center;\n border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 3px);\n border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n background: var-list(--tct-radio-background-fill, transparent);\n cursor: pointer;\n display: block;\n font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\n padding: 10px;\n position: relative;\n text-align: center;\n transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n white-space: nowrap;\n }\n\n input {\n &:checked + label {\n border-color: var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n box-shadow: inset 0 0 0 2px #ffffff;\n background: var-list(--tct-radio-checked-background-fill, transparent);\n color: var-list(--tct-radio-checked-label-color, inherit);\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid\n var-list(\n --tct-radio-tile-checked-stroke-color,\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n border-left-width: 5px;\n border-left: 8px solid transparent;\n border-right-width: 5px;\n border-right: 8px solid transparent;\n bottom: 0;\n content: '';\n height: 0;\n left: 50%;\n margin-left: -5px;\n position: absolute;\n width: 0;\n }\n }\n\n &:hover + label {\n border-color: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n background: var-list(--tct-radio-hover-background-fill, transparent);\n color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n }\n\n &:focus + label,\n &:focus:checked + label {\n --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n border-color: var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n background: var-list(--tct-radio-focus-background-fill, transparent);\n box-shadow: var-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n\n &:focus:checked + label:after {\n border-bottom: 5px solid var-list(\n --tct-radio-tile-focus-stroke-color,\n --tct-radio-focus-stroke-color,\n #2e2e2e\n );\n }\n }\n}\n\ninput:disabled + label[for] {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n /\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the radio. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the radio and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false })\n groupDisabled: boolean = false;\n\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false })\n groupReadonly: boolean = false;\n\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false })\n groupTileLayout: boolean = false;\n\n /\n Hides the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The text that describes the individual radio option.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true })\n name: string;\n\n /* The radio is non-interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* @private /\n @Prop()\n tabIndex: number = 0;\n\n /* The value that is returned in the `change` event that is emitted from the `q2-radio-group`. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the radio is checked.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the radio is checked.\n */\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => {\n this.inputField.focus();\n this.inputField.click();\n };\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n } else if (this.groupReadonly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.inputField.focus();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('checked')\n checkedObserver() {\n if (!this.isLoaded) return;\n if (!this.checked) return;\n mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled \|\| this.readonly \|\| this.groupReadonly \|\| this.groupDisabled) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n <input\n ref={el => (this.inputField = el)}\n class=\"sr\"\n id={this._id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.groupDisabled}\n checked={this.checked}\n aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n onChange={this.inputChange}\n test-id=\"q2RadioInnerRadioBox\"\n ></input>\n\n <label\n htmlFor={this._id}\n class={this.hideLabel ? 'label-hidden' : undefined}\n test-id=\"radioButton\"\n >\n {!this.groupTileLayout && (\n <svg viewBox=\"0 0 18 18\">\n <circle\n class=\"big-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <circle\n class=\"small-circle\"\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"4\"\n />\n </svg>\n )}\n {!this.hideLabel && (\n <div class=\"label-content\">\n {(this.label && loc(this.label)) \|\| ''}\n <slot></slot>\n </div>\n )}\n </label>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["createGuid","handleAriaLabel","overrideFocus","mirrorEmit","h","loc"],"mappings":"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"}

package/dist/cjs/q2-relative-time.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-BYXz4owL.js');
 var index$2 = require('./index-CgG3VNXc.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 const q2RelativeTimeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
@@ -154,7 +154,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return index.h(index.Fragment, { key: '368b5847fd62820031d367eaee690212fa655223' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return index.h(index.Fragment, { key: '0d8c6b23a5af08e1fbb7e8d5c48248bf6676427a' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-section-container.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var component = require('./component-DRAntnCA.js');
+var component = require('./component-iASoq6gx.js');
 const Q2SectonContainer = class {
     constructor(hostRef) {

package/dist/cjs/q2-section.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 const q2SectionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}q2-btn{--tct-btn-icon-hover-background:var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474))}";
@@ -188,9 +188,9 @@ const Q2Section = class {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (index.h("section", { key: 'ea31fa3fcb95aeba58b116111a8de973acfc9dd8', class: "wrapper" }, index.h("header", { key: '599e2c5d97b7e1a8e82d4f67477feaea39bf44a4', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: 'ec33d8f308ddc45636df221e103972abb4c743e4', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: 'c16de7c1c6fb720b4bfa43a8a1768480e7d9df0d', class: "title" }, index$1.loc(this.label)), index.h("div", { key: '3ff11259f114b4ca6c6dbd2c05fb35d5f270fb97', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: '47b372f49b184db9ecb4aa29a60545f6ec3e1f6b', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: '7b7f6e91877c354860d16ec95d39c1cd78ccf48b', label: index$1.loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, index.h("q2-icon", { key: '39c6913339322a55626fba6b72b2305654821b34', type: "chevron-up" })))), index.h("div", { key: '0212368798fdf64763de5f8507dc5cb1e7ca307f', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (index.h("section", { key: 'a8febda26aacf75f431b73fbde550fe48464f795', class: "wrapper" }, index.h("header", { key: 'cfa6b6b4b5877bbb29a8378b2b6f3f2712473800', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '08a21351630af94e43ece1bb43ec02da1065870e', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: 'f03e8e974dad67995d0f75e284d9aa2ff4844be9', class: "title" }, index$1.loc(this.label)), index.h("div", { key: '1bcecedcd8bf29a01c0267c6e4dfb5c80175b79a', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: '13058e098cb3bd53220ba3f52dc7cb7045802dde', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: '141e18cc76c195a6a9695138a7c1565df73c7173', label: index$1.loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, index.h("q2-icon", { key: '13e830f8f773ce4a6d548679f047755cd1c2b0c4', type: "chevron-up" })))), index.h("div", { key: '6b28ad8fe4a7e058c8ea79abcfaf205a92e582fa', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, index.h("div", { key: '32e77e59068e9117454cc158998af16c18b7eda5', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: '770db19e692eaafb752ec9109de89d52f4375dca', ref: (el) => (this.contentSlot = el) })))));
+            } }, index.h("div", { key: '5b8635606705cb71f74db7765efd8d44a66f88fb', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: 'c99160718c0309eac5739ce3039afa742716a819', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {