npm - q2-tecton-elements - Versions diffs - 1.65.0 → 1.66.1 - Mend

q2-tecton-elements 1.65.0 → 1.66.1

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 (687) hide show

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 margin: var(--comp-radio-margin);\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n align-items: center;\n cursor: pointer;\n margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n &.label-hidden {\n grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n }\n }\n\n svg {\n border-radius: 50%;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n outline: 0;\n width: 100%;\n box-shadow: var-list(--tct-radio-box-shadow, none);\n }\n\n circle:nth-child(1) {\n stroke-width: var-list(--tct-radio-stroke-width, 2);\n stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n fill: var-list(--tct-radio-background-fill, transparent);\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n input {\n &:checked {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n stroke: var-list(\n --tct-radio-checked-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n letter-spacing: var-list(\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n 0.25\n );\n color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n }\n & + label circle:nth-child(2) {\n fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n }\n }\n\n &:hover {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-hover-background-fill, transparent);\n stroke: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-hover-label-color, inherit);\n }\n }\n\n &:focus {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-focus-background-fill, transparent);\n stroke: var-list(\n --tct-radio-focus-stroke-color,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n }\n\n &:focus-visible {\n & + label svg {\n box-shadow: var(--tct-radio-focus-box-shadow, --const-double-focus-ring);\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: 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 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-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-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 border-color: var-list(\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(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\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 stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <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\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 border-color: var-list(\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(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\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(--tct-radio-focus-stroke-color, #2e2e2e);\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}

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 margin: var(--comp-radio-margin);\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n align-items: center;\n cursor: pointer;\n margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n &.label-hidden {\n grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n }\n }\n\n svg {\n border-radius: 50%;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n outline: 0;\n width: 100%;\n box-shadow: var-list(--tct-radio-box-shadow, none);\n }\n\n circle:nth-child(1) {\n stroke-width: var-list(--tct-radio-stroke-width, 2);\n stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n fill: var-list(--tct-radio-background-fill, transparent);\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n input {\n &:checked {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n stroke: var-list(\n --tct-radio-checked-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n letter-spacing: var-list(\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n 0.25\n );\n color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n }\n & + label circle:nth-child(2) {\n fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n }\n }\n\n &:hover {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-hover-background-fill, transparent);\n stroke: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-hover-label-color, inherit);\n }\n }\n\n &:focus {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-focus-background-fill, transparent);\n stroke: var-list(\n --tct-radio-focus-stroke-color,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n }\n\n &:focus-visible {\n & + label svg {\n box-shadow: var(--tct-radio-focus-box-shadow, --const-double-focus-ring);\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: 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 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-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-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 border-color: var-list(\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(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\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 stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <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\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 border-color: var-list(\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(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\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(--tct-radio-focus-stroke-color, #2e2e2e);\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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"}

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

@@ -154,7 +154,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return index.h(index.Fragment, { key: '569e87bba45a32bc28d5754509e40a3941e0053e' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return index.h(index.Fragment, { key: 'cb780607f4db81492c93d54366e0e177a4aee498' }, 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,6 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
+var component = require('./component-DRAntnCA.js');
 const Q2SectonContainer = class {
     constructor(hostRef) {
@@ -79,6 +80,7 @@ const Q2SectonContainer = class {
     // #endregion
     // #region Component Lifecycle Events
     componentWillLoad() {
+        component.hasValidChildren(this.hostElement, 'q2-section');
         this.filterSlottedElements();
         this.fixSlottedElements();
     }

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

	@@ -1 +1 @@
1	- {"file":"q2-section-container.entry.cjs.js","mappings":"~~;;;;MAQa~~,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;~~AAwBzB~~,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAMA,qBAAQ;AAG1B;;;~~IA/DG~~,iBAAiB,GAAA;~~QACb~~,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;","names":["h"],"sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/*\n @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n /\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Determines if a single or multiple sections can be open at a time.\n /\n @Prop({ mutable: true })\n openMode: 'multiple' \| 'single' = 'single';\n\n /\n Determines which section starts open.\n /\n @Prop()\n openPaneIndex: number = 0;\n\n /\n Determines if all sections inside the section-container start opened or closed.\n \n @info\n * If you have openMode set to multiple, all panes will start open.\n /\n @Prop({ mutable: true })\n startAllOpen: boolean = false;\n\n /\n Determines if the section-container starts opened or closed.\n \n @info\n * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n * @warning\n * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n */\n @Prop({ mutable: true })\n startOpen: boolean = true;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.filterSlottedElements();\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('openMode')\n @Watch('openPaneIndex')\n @Watch('startAllOpen')\n @Watch('startOpen')\n handleOpenStateChange() {\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Local Methods\n\n filterSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach(el => {\n if ('Q2-SECTION' !== el.tagName) {\n el.remove();\n }\n });\n };\n\n fixSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach((el, i) => {\n el.setAttribute('collapsible', '');\n if (this.openMode === 'single') {\n el.addEventListener('change', event => {\n const target = event.target as HTMLElement;\n const children = Array.from(target.parentElement.children);\n const siblings = children.filter(child => child !== target);\n siblings.forEach(el => el.setAttribute('expanded', 'false'));\n });\n }\n\n if (!el.getAttribute('label')) {\n el.setAttribute('label', 'Section ' + (i + 1));\n }\n\n if (!this.startOpen) {\n el.removeAttribute('expanded');\n } else {\n if (this.openPaneIndex === i \|\| (this.openMode === 'multiple' && this.startAllOpen)) {\n el.setAttribute('expanded', '');\n } else {\n el.removeAttribute('expanded');\n }\n }\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render = () => <slot />;\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-section-container.entry.cjs.js","mappings":";;;;;MASa,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;AAyBzB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAMA,qBAAQ;AAG1B;;;IAhEG,iBAAiB,GAAA;AACb,QAAAC,0BAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC;QAChD,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;","names":["h","hasValidChildren"],"sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { hasValidChildren } from '@/utils/component';\nimport { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/*\n @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n /\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Determines if a single or multiple sections can be open at a time.\n /\n @Prop({ mutable: true })\n openMode: 'multiple' \| 'single' = 'single';\n\n /\n Determines which section starts open.\n /\n @Prop()\n openPaneIndex: number = 0;\n\n /\n Determines if all sections inside the section-container start opened or closed.\n \n @info\n * If you have openMode set to multiple, all panes will start open.\n /\n @Prop({ mutable: true })\n startAllOpen: boolean = false;\n\n /\n Determines if the section-container starts opened or closed.\n \n @info\n * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n * @warning\n * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n */\n @Prop({ mutable: true })\n startOpen: boolean = true;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n hasValidChildren(this.hostElement, 'q2-section');\n this.filterSlottedElements();\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('openMode')\n @Watch('openPaneIndex')\n @Watch('startAllOpen')\n @Watch('startOpen')\n handleOpenStateChange() {\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Local Methods\n\n filterSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach(el => {\n if ('Q2-SECTION' !== el.tagName) {\n el.remove();\n }\n });\n };\n\n fixSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach((el, i) => {\n el.setAttribute('collapsible', '');\n if (this.openMode === 'single') {\n el.addEventListener('change', event => {\n const target = event.target as HTMLElement;\n const children = Array.from(target.parentElement.children);\n const siblings = children.filter(child => child !== target);\n siblings.forEach(el => el.setAttribute('expanded', 'false'));\n });\n }\n\n if (!el.getAttribute('label')) {\n el.setAttribute('label', 'Section ' + (i + 1));\n }\n\n if (!this.startOpen) {\n el.removeAttribute('expanded');\n } else {\n if (this.openPaneIndex === i \|\| (this.openMode === 'multiple' && this.startAllOpen)) {\n el.setAttribute('expanded', '');\n } else {\n el.removeAttribute('expanded');\n }\n }\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render = () => <slot />;\n\n // #endregion\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-section-container.entry.cjs.js","sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/*\n @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n /\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Determines if a single or multiple sections can be open at a time.\n /\n @Prop({ mutable: true })\n openMode: 'multiple' \| 'single' = 'single';\n\n /\n Determines which section starts open.\n /\n @Prop()\n openPaneIndex: number = 0;\n\n /\n Determines if all sections inside the section-container start opened or closed.\n \n @info\n * If you have openMode set to multiple, all panes will start open.\n /\n @Prop({ mutable: true })\n startAllOpen: boolean = false;\n\n /\n Determines if the section-container starts opened or closed.\n \n @info\n * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n * @warning\n * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n */\n @Prop({ mutable: true })\n startOpen: boolean = true;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.filterSlottedElements();\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('openMode')\n @Watch('openPaneIndex')\n @Watch('startAllOpen')\n @Watch('startOpen')\n handleOpenStateChange() {\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Local Methods\n\n filterSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach(el => {\n if ('Q2-SECTION' !== el.tagName) {\n el.remove();\n }\n });\n };\n\n fixSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach((el, i) => {\n el.setAttribute('collapsible', '');\n if (this.openMode === 'single') {\n el.addEventListener('change', event => {\n const target = event.target as HTMLElement;\n const children = Array.from(target.parentElement.children);\n const siblings = children.filter(child => child !== target);\n siblings.forEach(el => el.setAttribute('expanded', 'false'));\n });\n }\n\n if (!el.getAttribute('label')) {\n el.setAttribute('label', 'Section ' + (i + 1));\n }\n\n if (!this.startOpen) {\n el.removeAttribute('expanded');\n } else {\n if (this.openPaneIndex === i \|\| (this.openMode === 'multiple' && this.startAllOpen)) {\n el.setAttribute('expanded', '');\n } else {\n el.removeAttribute('expanded');\n }\n }\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render = () => <slot />;\n\n // #endregion\n}\n"],"names":["h"],"mappings":"~~;;;;MAQa~~,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;~~AAwBzB~~,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAMA,qBAAQ;AAG1B;;;~~IA/DG~~,iBAAiB,GAAA;~~QACb~~,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-section-container.entry.cjs.js","sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { hasValidChildren } from '@/utils/component';\nimport { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/*\n @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n /\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Determines if a single or multiple sections can be open at a time.\n /\n @Prop({ mutable: true })\n openMode: 'multiple' \| 'single' = 'single';\n\n /\n Determines which section starts open.\n /\n @Prop()\n openPaneIndex: number = 0;\n\n /\n Determines if all sections inside the section-container start opened or closed.\n \n @info\n * If you have openMode set to multiple, all panes will start open.\n /\n @Prop({ mutable: true })\n startAllOpen: boolean = false;\n\n /\n Determines if the section-container starts opened or closed.\n \n @info\n * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n * @warning\n * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n */\n @Prop({ mutable: true })\n startOpen: boolean = true;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n hasValidChildren(this.hostElement, 'q2-section');\n this.filterSlottedElements();\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('openMode')\n @Watch('openPaneIndex')\n @Watch('startAllOpen')\n @Watch('startOpen')\n handleOpenStateChange() {\n this.fixSlottedElements();\n }\n\n // #endregion\n // #region Local Methods\n\n filterSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach(el => {\n if ('Q2-SECTION' !== el.tagName) {\n el.remove();\n }\n });\n };\n\n fixSlottedElements = () => {\n if (!('HTMLSlotElement' in window)) return;\n Array.from(this.hostElement.children).forEach((el, i) => {\n el.setAttribute('collapsible', '');\n if (this.openMode === 'single') {\n el.addEventListener('change', event => {\n const target = event.target as HTMLElement;\n const children = Array.from(target.parentElement.children);\n const siblings = children.filter(child => child !== target);\n siblings.forEach(el => el.setAttribute('expanded', 'false'));\n });\n }\n\n if (!el.getAttribute('label')) {\n el.setAttribute('label', 'Section ' + (i + 1));\n }\n\n if (!this.startOpen) {\n el.removeAttribute('expanded');\n } else {\n if (this.openPaneIndex === i \|\| (this.openMode === 'multiple' && this.startAllOpen)) {\n el.setAttribute('expanded', '');\n } else {\n el.removeAttribute('expanded');\n }\n }\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render = () => <slot />;\n\n // #endregion\n}\n"],"names":["h","hasValidChildren"],"mappings":";;;;;MASa,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;AAyBzB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAMA,qBAAQ;AAG1B;;;IAhEG,iBAAiB,GAAA;AACb,QAAAC,0BAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC;QAChD,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;"}

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

@@ -188,9 +188,9 @@ const Q2Section = class {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (index.h("section", { key: '72e39ebc94cc5e4a1dfc8e6d919e036bb97d292d', class: "wrapper" }, index.h("header", { key: 'a8e31aaa8fba0222b10f50624d27bfec2556e9a6', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '76e6ccb47c00adf0bdcda3324344f098f41a6cd9', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: 'd35a32df0bf3b6c87dbd30dcbd6a60ddf01c7093', class: "title" }, index$1.loc(this.label)), index.h("div", { key: '1994e8d76552892bff165c63a5d47f25159d86e2', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: '23803b2f996e6647de62f24803139e6ac3cfd36c', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: 'e3071b4e4c32347390955545b3085bec2e023c11', 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: 'd378a5c6005496f8253faa657a9bae3c13314fd3', type: "chevron-up" })))), index.h("div", { key: 'a7cc7075290dbcd106a534b9c0b74f5875eb97d2', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (index.h("section", { key: 'd75ff1baca078adfbe4a8160b7cc93aedbd2b633', class: "wrapper" }, index.h("header", { key: '8d7b0501fa215c7a03b4c7731a80d1e72b101436', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '9daa8ed7468f00dd996a7bc41ca7307be573376c', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: '2bdd67ba18ba96ba58348b69e6d31a3b57afd46f', class: "title" }, index$1.loc(this.label)), index.h("div", { key: '7ee904d99bf8f36565b7b6221f328e3caf176179', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: 'a4235e3a0835992b13dec77be7fe7b649dd06ac3', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: '3a79fd3ec731c7705f648bd312eae8e4bc27cccd', 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: 'a0015837062a6089cb40db4eb7a83641920acb5a', type: "chevron-up" })))), index.h("div", { key: '401b248658a0033ef6d45a12b57d8aefc3b00799', 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: '5f63656a3e7a64b7b2ae3809a154cc46f692a100', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: '999a2d04c56ec72fc716dba1d6b2f3aea1798833', ref: (el) => (this.contentSlot = el) })))));
+            } }, index.h("div", { key: '816137034e779961bc9469697403be6f59bade26', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: 'a7824eeccf0662bee8766071bcd9017d5a7d2226', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 var index = require('./index-BYXz4owL.js');
 var index$1 = require('./index-DyAq0y0v.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var actionSheet = require('./action-sheet-CiK2Bap_.js');
+var actionSheet = require('./action-sheet-D71RSc-w.js');
 const q2SelectCss = "*{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}";
@@ -340,7 +340,11 @@ const Q2Select = class {
             this.selectedOptions = [];
         }
     }
-    onClearHandler() {
+    onClearHandler(event) {
+        var _a;
+        // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
+        if (this.multiple && this.searchable && ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.source) === 'input')
+            return;
         this.clearValue();
     }
     handleSelectedDisplay(event) {
@@ -775,7 +779,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), index.h("label", { htmlFor: "selected" }, index$1.loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: '622346c74aa66d525fafff41706f318587afda41', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (index.h("click-elsewhere", { key: '6b949fa9d117300197a927538e36554ac73458c9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {