npm - q2-tecton-elements - Versions diffs - 1.32.1 → 1.34.0 - Mend

q2-tecton-elements 1.32.1 → 1.34.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 (294) hide show

package/dist/components/q2-radio-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as createGuid, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index16.js';
 import { d as defineCustomElement$2 } from './index8.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
@@ -31,6 +31,11 @@ const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup exten
       if (!this.value && !!firstCheckedRadio) {
         this.value = firstCheckedRadio.value;
       }
+      else if (!this.value && !firstCheckedRadio) {
+        // if no radios are meant to be checked, then assign first radio tabIndex of 0
+        if (this.radioElements.length)
+          this.radioElements[0].tabIndex = 0;
+      }
     };
     this.label = undefined;
     this.value = undefined;
@@ -57,6 +62,7 @@ const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup exten
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
     overrideFocus(this.hostElement);
+    this.checkedRadioExists();
   }
   /////// OBSERVERS ///////
   valueUpdated(newVal) {
@@ -65,6 +71,10 @@ const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup exten
       // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad
       if (!radio.checked) {
         radio.removeAttribute('checked');
+        radio.tabIndex = -1;
+      }
+      else if (radio.checked) {
+        radio.tabIndex = 0;
       }
     });
   }
@@ -146,7 +156,7 @@ const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup exten
     const showLabel = this.label || this.optional || this.readonly;
     const { hasError } = this;
     const showLabelRow = showLabel || hasError;
-    return (h(Fragment, null, showLabelRow && (h("div", { class: "label-row" }, showLabel && h("div", { class: "group-legend" }, this.labelDOM()), hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))), h("fieldset", { onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { class: "sr" }, this.labelDOM()), this.inputDom())));
+    return (h(Fragment, null, showLabelRow && (h("div", { class: "label-row" }, showLabel && h("div", { class: "group-legend" }, this.labelDOM()), hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))), h("fieldset", { onChange: this.onInnerRadioChange, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { class: "sr" }, this.labelDOM()), this.inputDom())));
   }
   inputDom() {
     if (this.tileLayout) {

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

	@@ -1 +1 @@
1	- {"file":"q2-radio-group.js","mappings":"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","names":["Q2RadioGroup"],"sources":["./src/components/q2-radio-group/styles.scss?tag=q2-radio-group&encapsulation=shadow","./src/components/q2-radio-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n 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 gap: var-list(--app-scale-1x, 5px);\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\n.optional-tag {\n margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(input-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(input-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-1x, 5px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-border-radius-1, --app-border-radius-1, 2px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #c30000);\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} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-radio-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) optional: boolean;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n @Prop({ reflect: true }) tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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 onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\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 }\n };\n\n /////// LIFECYCLE HOOK ///////\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 }\n\n /////// OBSERVERS ///////\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 }\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('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\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 /////// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\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 labelDOM() {\n const { label, optional, readonly } = this;\n let helpText = '';\n if (readonly) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n } else if (optional) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n }\n return (\n <Fragment>\n {label && loc(label)}\n {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n </Fragment>\n );\n }\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = showLabel \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && <div class=\"group-legend\">{this.labelDOM()}</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-required={`${!this.optional}`}\n aria-readonly={`${this.readonly}`}\n aria-invalid={`${this.hasError}`}\n >\n {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\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"],"version":3}
1	+ {"file":"q2-radio-group.js","mappings":"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","names":["Q2RadioGroup"],"sources":["./src/components/q2-radio-group/styles.scss?tag=q2-radio-group&encapsulation=shadow","./src/components/q2-radio-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n 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 gap: var-list(--app-scale-1x, 5px);\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\n.optional-tag {\n margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(input-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(input-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-1x, 5px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-border-radius-1, --app-border-radius-1, 2px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #c30000);\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} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-radio-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) optional: boolean;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n @Prop({ reflect: true }) tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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 onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\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 /////// LIFECYCLE HOOK ///////\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 /////// OBSERVERS ///////\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 @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\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 /////// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\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 labelDOM() {\n const { label, optional, readonly } = this;\n let helpText = '';\n if (readonly) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n } else if (optional) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n }\n return (\n <Fragment>\n {label && loc(label)}\n {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n </Fragment>\n );\n }\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = showLabel \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && <div class=\"group-legend\">{this.labelDOM()}</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-readonly={`${this.readonly}`}\n aria-invalid={`${this.hasError}`}\n >\n {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\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"],"version":3}

package/dist/components/q2-radio.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index16.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index16.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(--tct-radio-label-color);font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){fill:var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-color);align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));cursor:pointer;display:block;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:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-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}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid 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}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
@@ -26,6 +26,7 @@ const Q2Radio$1 = /*@__PURE__*/ proxyCustomElement(class Q2Radio extends HTMLEle
     this.value = undefined;
     this.disabled = false;
     this.checked = false;
+    this.tabIndex = 0;
     this.name = undefined;
     this.groupDisabled = false;
     this.groupReadonly = false;
@@ -78,6 +79,7 @@ const Q2Radio$1 = /*@__PURE__*/ proxyCustomElement(class Q2Radio extends HTMLEle
     "value": [513],
     "disabled": [516],
     "checked": [516],
+    "tabIndex": [2, "tab-index"],
     "name": [513],
     "groupDisabled": [4, "group-disabled"],
     "groupReadonly": [4, "group-readonly"],

package/dist/components/q2-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-radio.js","mappings":"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","names":["Q2Radio"],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.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-color);\n font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n align-items: center;\n cursor: pointer;\n 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\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 }\n\n circle:nth-child(1) {\n stroke-width: 2;\n stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n }\n\n input {\n &:focus {\n & + label svg {\n box-shadow: var(--const-double-focus-ring);\n }\n & + label circle:nth-child(1) {\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 }\n\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-checkbox-selected-font-weight, 600);\n letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\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}\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-color);\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 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 &:focus + label,\n &:focus:checked + label {\n border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n }\n\n &:checked + label {\n border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n box-shadow: inset 0 0 0 2px #ffffff;\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\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}\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';\n\n@Component({\n tag: 'q2-radio',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n /*\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true }) name: string;\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false }) groupDisabled: boolean = false;\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false }) groupReadonly: boolean = false;\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n @Event() change: EventEmitter;\n\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputField.click();\n }\n\n ////////// OBSERVERS //////////\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 this.change.emit({ value: this.value });\n }\n\n /////// HOST ELEMENT EVENTS ///////\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.groupReadonly) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\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 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"],"version":3}
1	+ {"file":"q2-radio.js","mappings":"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","names":["Q2Radio"],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.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-color);\n font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n align-items: center;\n cursor: pointer;\n 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\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 }\n\n circle:nth-child(1) {\n stroke-width: 2;\n stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n }\n\n input {\n &:focus {\n & + label svg {\n box-shadow: var(--const-double-focus-ring);\n }\n & + label circle:nth-child(1) {\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 }\n\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-checkbox-selected-font-weight, 600);\n letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\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}\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-color);\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 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 &:focus + label,\n &:focus:checked + label {\n border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n }\n\n &:checked + label {\n border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n box-shadow: inset 0 0 0 2px #ffffff;\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\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}\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';\n\n@Component({\n tag: 'q2-radio',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Prop() tabIndex: number = 0;\n /*\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true }) name: string;\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false }) groupDisabled: boolean = false;\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false }) groupReadonly: boolean = false;\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n @Event() change: EventEmitter;\n\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputField.click();\n }\n\n ////////// OBSERVERS //////////\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 this.change.emit({ value: this.value });\n }\n\n /////// HOST ELEMENT EVENTS ///////\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.groupReadonly) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\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 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"],"version":3}

package/dist/components/q2-section.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, a as isEventFromElement, n as nextPaint, l as loc } from './index16.js';
+import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index16.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index8.js';
 import { d as defineCustomElement$2 } from './index10.js';

package/dist/components/q2-select.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, e as isRelatedTargetWithinHost, a as isEventFromElement, f as isHostLosingFocus } from './index16.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, d as isRelatedTargetWithinHost, i as isEventFromElement, e as isHostLosingFocus } from './index16.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$9 } from './index2.js';
 import { d as defineCustomElement$8 } from './index4.js';

package/dist/components/q2-stepper-pane.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as createGuid, n as nextPaint, l as loc } from './index16.js';
+import { c as createGuid, n as nextPaint, l as loc } from './index16.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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;position:relative}";

package/dist/components/q2-stepper-vertical.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { o as overrideFocus, d as createGuid, a as isEventFromElement, l as loc } from './index16.js';
+import { o as overrideFocus, c as createGuid, i as isEventFromElement, l as loc } from './index16.js';
 import { d as defineCustomElement$2 } from './index8.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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:grid;grid-template-columns:var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px)) 1fr;gap:var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px)));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-btn-label-font-size:var-list(var-prefixer(advanced-stepper-btn-label-font-size), 16px);--comp-btn-label-color:var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d)));--comp-tween:var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease)));--comp-bullet-bg:var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1)));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px));--comp-btn-content-gap:var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px)));--comp-btn-label-font-size:var-list(\n      var-prefixer(advanced-stepper-child-btn-label-font-size),\n      --app-font-size-small,\n      12px\n  )}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start));grid-template-areas:\"icon content\";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px));font-size:var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #c30000)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px));padding-left:var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px));border-left-width:var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px));border-left-style:var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #c30000);--comp-active-color:var(--const-stoplight-alert, #c30000)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-icon-fill:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-advanced-stepper-child-border-width, var(--t-advanced-stepper-child-border-width, 1px));border-left-style:var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid));border-left-color:var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9)));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px)))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}";

package/dist/components/q2-stepper.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { g as addSmoothScrollPolyfill, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
+import { f as addSmoothScrollPolyfill, o as overrideFocus, i as isEventFromElement, l as loc } from './index16.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index8.js';
 import { d as defineCustomElement$2 } from './index10.js';

package/dist/components/q2-tab-container.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { g as addSmoothScrollPolyfill, d as createGuid, l as loc, a as isEventFromElement, o as overrideFocus } from './index16.js';
+import { f as addSmoothScrollPolyfill, c as createGuid, l as loc, i as isEventFromElement, o as overrideFocus } from './index16.js';
 import { d as defineCustomElement$5 } from './index4.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index8.js';

package/dist/components/q2-tag.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { o as overrideFocus, i as isEventFromElement, l as loc } from './index16.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './index2.js';
 import { d as defineCustomElement$4 } from './index8.js';
 import { d as defineCustomElement$3 } from './index14.js';
 import { d as defineCustomElement$2 } from './index15.js';
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--t-primary-l5, #61c4ff);--comp-tag-color:var(--t-primary-text, #ffffff)}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--t-secondary-l5, #d9e1e6);--comp-tag-color:var(--t-secondary-text, #000000)}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--t-tertiary-l5, #f4fafe);--comp-tag-color:var(--t-tertiary-text, #000000)}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-color, var(--t-primary-l5, #61c4ff));--comp-tag-color:var(--t-primary-text, #ffffff)}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-color, var(--t-secondary-l5, #d9e1e6));--comp-tag-color:var(--t-secondary-text, #000000)}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-color, var(--t-tertiary-l5, #f4fafe));--comp-tag-color:var(--t-tertiary-text, #000000)}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
 const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement {
   constructor() {
@@ -17,9 +17,9 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
     var _a;
     /// Getters ///
     /// Helpers
-    this.determineHasOptions = () => {
-      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-      this.hasOptions = hasOptions;
+    this.determineOptionCount = () => {
+      const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+      this.optionCount = numberOfOptions;
     };
     /// Event Handlers ///
     this.onClickElsewhere = (event) => {
@@ -34,7 +34,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
     };
     this.handleChange = event => {
       event.stopPropagation();
-      if (!this.hasOptions)
+      if (!this.optionCount)
         return;
       const { value } = event.detail;
       this.click.emit({ value });
@@ -47,7 +47,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
         this.click.emit({ value });
       }
       else {
-        this.popoverElement.toggle();
+        await this.popoverElement.toggle();
       }
     };
     this.handleKeydown = async (event) => {
@@ -82,11 +82,12 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
     this.popoverAlignment = 'right';
-    this.hasOptions = undefined;
+    this.optionListLabel = 'options';
+    this.optionCount = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
-    const observer = new MutationObserver(() => this.determineHasOptions());
+    const observer = new MutationObserver(this.determineOptionCount);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
   }
@@ -101,7 +102,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    if (!this.hasOptions)
+    if (!this.optionCount)
       return;
     this.dropdownBtn.focus();
   }
@@ -113,12 +114,15 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
     this.optionList.setActiveElement(null);
   }
   /// DOM ///
+  generateHiddenElement() {
+    return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
+  }
   render() {
-    const { hasOptions, open } = this;
+    const { optionCount, open } = this;
     const wrapperClassNames = ['tag'];
-    if (hasOptions)
+    if (optionCount)
       wrapperClassNames.push('has-options');
-    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, this.hasOptions ? (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false' }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options", label: loc('tecton.element.tag.viewOptions') })))) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null)))))));
+    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, this.optionCount ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", null)))))));
   }
   get hostElement() { return this; }
   static get style() { return stylesCss; }
@@ -130,7 +134,8 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
     "popoverMinHeight": [2, "popover-min-height"],
     "popoverDirection": [1, "popover-direction"],
     "popoverAlignment": [1025, "popover-alignment"],
-    "hasOptions": [32]
+    "optionListLabel": [1, "option-list-label"],
+    "optionCount": [32]
   }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/q2-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-tag.js","mappings":"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","names":["Q2Tag"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n background: var(--comp-tag-background);\n color: var(--comp-tag-color);\n border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n position: relative;\n\n :host([theme='primary']) & {\n --comp-tag-background: #{var-list(--t-primary-l5, #61c4ff)};\n --comp-tag-color: #{var-list(--t-primary-text, #ffffff)};\n }\n\n :host([theme='secondary']) & {\n --comp-tag-background: #{var-list(--t-secondary-l5, #d9e1e6)};\n --comp-tag-color: #{var-list(--t-secondary-text, #000000)};\n }\n\n :host([theme='tertiary']) & {\n --comp-tag-background: #{var-list(--t-tertiary-l5, #f4fafe)};\n --comp-tag-color: #{var-list(--t-tertiary-text, #000000)};\n }\n}\n\n.tag {\n display: flex;\n width: max-content;\n height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n padding-right: 6px;\n}\n\n.btn-wrapper {\n --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n height: var(--comp-tag-clickable-size);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n right: var(--comp-tag-btn-offset);\n top: var(--comp-tag-btn-offset);\n cursor: pointer;\n}\n\nbutton {\n height: var(--comp-tag-btn-size);\n stroke: var(--comp-tag-color);\n --tct-icon-stroke-primary: var(--comp-tag-color);\n cursor: pointer;\n border: 0;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: 6px;\n --tct-icon-size: 18px;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Host,\n Listen,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n tag: 'q2-tag',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n\n @State() hasOptions: boolean;\n\n @Element() hostElement: HTMLElement;\n @Event() click: EventEmitter<{ value: string }>;\n dropdownBtn: HTMLButtonElement;\n popoverElement: HTMLQ2PopoverElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(() => this.determineHasOptions());\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n\n /// Helpers\n determineHasOptions = () => {\n const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n this.hasOptions = hasOptions;\n };\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.hasOptions) return;\n this.dropdownBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n /// Event Handlers ///\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.hasOptions) return;\n const { value } = event.detail;\n\n this.click.emit({ value });\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n this.popoverElement.toggle();\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this, event)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleWrapperClick = () => {\n this.dropdownBtn.focus();\n this.dropdownBtn.click();\n };\n\n /// DOM ///\n\n render() {\n const { hasOptions, open } = this;\n const wrapperClassNames = ['tag'];\n if (hasOptions) wrapperClassNames.push('has-options');\n\n return (\n <Host role=\"listitem\">\n <click-elsewhere onChange={this.onClickElsewhere}>\n {this.hasOptions ? (\n <div\n class=\"btn-wrapper\"\n onClick={this.handleWrapperClick}\n >\n <button\n class=\"tag-wrapper\"\n ref={el => (this.dropdownBtn = el)}\n test-id=\"btn-control\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n aria-controls=\"option-list\"\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : 'false'}\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n <q2-icon\n type=\"options\"\n label={loc('tecton.element.tag.viewOptions')}\n ></q2-icon>\n </button>\n </div>\n ) : (\n <div\n class=\"tag-wrapper\"\n onClick={e => e.stopPropagation()}\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n </div>\n )}\n\n {this.hasOptions && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.dropdownBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n id=\"option-list\"\n role=\"menu\"\n ref={el => (this.optionList = el)}\n onChange={this.handleChange}\n align=\"right\"\n type=\"menu\"\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-tag.js","mappings":"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","names":["Q2Tag"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n background: var(--comp-tag-background);\n color: var(--comp-tag-color);\n border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n position: relative;\n\n :host([theme='primary']) & {\n --comp-tag-background: #{var-list(--tct-tag-primary-color, --t-primary-l5, #61c4ff)};\n --comp-tag-color: #{var-list(--t-primary-text, #ffffff)};\n }\n\n :host([theme='secondary']) & {\n --comp-tag-background: #{var-list(--tct-tag-secondary-color, --t-secondary-l5, #d9e1e6)};\n --comp-tag-color: #{var-list(--t-secondary-text, #000000)};\n }\n\n :host([theme='tertiary']) & {\n --comp-tag-background: #{var-list(--tct-tag-tertiary-color, --t-tertiary-l5, #f4fafe)};\n --comp-tag-color: #{var-list(--t-tertiary-text, #000000)};\n }\n}\n\n.tag {\n display: flex;\n width: max-content;\n height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n padding-right: 6px;\n}\n\n.btn-wrapper {\n --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n height: var(--comp-tag-clickable-size);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n right: var(--comp-tag-btn-offset);\n top: var(--comp-tag-btn-offset);\n cursor: pointer;\n}\n\nbutton {\n height: var(--comp-tag-btn-size);\n stroke: var(--comp-tag-color);\n --tct-icon-stroke-primary: var(--comp-tag-color);\n cursor: pointer;\n border: 0;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: 6px;\n --tct-icon-size: 18px;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Host,\n Listen,\n Element,\n EventEmitter,\n Event,\n Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n tag: 'q2-tag',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n @Prop() optionListLabel: string = 'options';\n\n @State() optionCount: number;\n\n @Element() hostElement: HTMLElement;\n @Event() click: EventEmitter<{ value: string }>;\n dropdownBtn: HTMLButtonElement;\n popoverElement: HTMLQ2PopoverElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n\n /// Helpers\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.optionCount) return;\n this.dropdownBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n /// Event Handlers ///\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n const { value } = event.detail;\n\n this.click.emit({ value });\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this, event)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleWrapperClick = () => {\n this.dropdownBtn.focus();\n this.dropdownBtn.click();\n };\n\n /// DOM ///\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n render() {\n const { optionCount, open } = this;\n const wrapperClassNames = ['tag'];\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <Host role=\"listitem\">\n <click-elsewhere onChange={this.onClickElsewhere}>\n {this.optionCount ? (\n <Fragment>\n <div\n class=\"btn-wrapper\"\n onClick={this.handleWrapperClick}\n >\n <button\n class=\"tag-wrapper\"\n ref={el => (this.dropdownBtn = el)}\n test-id=\"btn-control\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n aria-controls=\"option-list\"\n aria-expanded={open ? 'true' : 'false'}\n aria-describedby=\"option-description\"\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n <q2-icon type=\"options\"></q2-icon>\n </button>\n </div>\n {this.generateHiddenElement()}\n </Fragment>\n ) : (\n <div\n class=\"tag-wrapper\"\n onClick={e => e.stopPropagation()}\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n </div>\n )}\n\n {this.optionCount && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.dropdownBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n id=\"option-list\"\n role=\"menu\"\n ref={el => (this.optionList = el)}\n onChange={this.handleChange}\n align=\"right\"\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/q2-textarea.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as createGuid, s as setMessageHeight, o as overrideFocus, a as isEventFromElement, j as labelDOM, m as messagesDOM, l as loc } from './index16.js';
+import { c as createGuid, s as setMessageHeight, o as overrideFocus, i as isEventFromElement, g as labelDOM, m as messagesDOM, l as loc } from './index16.js';
 import { d as defineCustomElement$2 } from './index8.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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;margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));box-shadow:var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";

package/dist/components/q2-tooltip.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { o as overrideFocus, a as isEventFromElement } from './index16.js';
+import { o as overrideFocus, i as isEventFromElement } from './index16.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";