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

q2-tecton-elements 1.67.2 → 1.68.0

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

Files changed (807) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-checkbox2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n )};\n\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n\n --comp-checkbox-toggle-track-fill: #{var-list(\n --tct-checkbox-toggle-track-fill,\n --tct-checkbox-toggle-track-color,\n transparent\n )};\n --comp-checkbox-toggle-track-fill-active: #{var-list(\n --tct-checkbox-toggle-active-track-fill,\n --tct-checkbox-toggle-active-track-color,\n --tct-checkbox-toggle-active-color,\n --t-primary-l1,\n #7755af\n )};\n --comp-checkbox-toggle-track-fill-hover: #{var-list(\n --tct-checkbox-toggle-hover-track-fill,\n --tct-checkbox-toggle-hover-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error: #{var-list(\n --tct-checkbox-toggle-error-track-fill,\n --tct-checkbox-toggle-error-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error-hover: #{var-list(\n --tct-checkbox-toggle-error-hover-track-fill,\n --tct-checkbox-toggle-error-hover-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n --comp-checkbox-toggle-track-fill-error-active: #{var-list(\n --tct-checkbox-toggle-error-active-track-fill,\n --tct-checkbox-toggle-error-active-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n\n --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-fill-color: #{var-list(\n --tct-checkbox-checked-fill-color,\n --t-primary,\n #040404\n )};\n --comp-checkbox-checked-color: #{var-list(\n --tct-checkbox-checked-stroke-color,\n --tct-white,\n --app-white,\n #FFFFFF\n )};\n --comp-control-width: var(--comp-checkbox-size);\n --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n --comp-checkbox-bold-fallback-stroke-width: #{var-list(--tct-checkbox-bold-fallback-stroke-width, 0.7px)};\n --comp-checkbox-stroke-width: #{var-list(--tct-checkbox-stroke-width, unset)};\n --comp-checkbox-checked-stroke-width: #{var-list(\n --tct-checkbox-checked-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-hover-stroke-width: #{var-list(--tct-checkbox-hover-stroke-width, unset)};\n --comp-checkbox-focused-stroke-width: #{var-list(--tct-checkbox-focused-stroke-width, unset)};\n --comp-checkbox-checked-hover-stroke-width: #{var-list(\n --tct-checkbox-checked-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-checked-focused-stroke-width: #{var-list(\n --tct-checkbox-checked-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-stroke-width: #{var-list(\n --tct-checkbox-description-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-focused-stroke-width: #{var-list(\n --tct-checkbox-description-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-hover-stroke-width: #{var-list(\n --tct-checkbox-description-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n\n --comp-checkbox-toggle-circle-fill-active: #{var-list(\n --tct-checkbox-toggle-active-fill,\n --tct-checkbox-toggle-active-color,\n --comp-checkbox-toggle-color\n )};\n\n :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: start;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n}\n\n.label-text {\n grid-area: label;\n\n :host([description]) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-stroke-width);\n }\n :host([checked]:not([checked='false'])) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n }\n :host(:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n }\n :host(:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n }\n :host([description]:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n }\n :host([checked]:not([checked='false']):hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n }\n :host([description]:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n }\n :host([checked]:not([checked='false']):focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n }\n :host(:active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n }\n :host([checked]:not([checked='false']):active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n }\n :host([has-error]:not([has-error='false']):hover) & {\n -webkit-text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n }\n :host([has-error]:not([has-error='false']):focus-within) & {\n -webkit-text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n }\n :host([has-error]:not([has-error='false']):active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n }\n :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):hover) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n }\n :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):focus-within) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n }\n :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n }\n\n label {\n line-height: var-list(--tct-checkbox-label-line-height, 24px);\n .label-content {\n display: inline;\n font-size: var(--tct-checkbox-label-font-size, inherit);\n }\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n width: var(--comp-checkbox-size);\n height: var(--comp-checkbox-size);\n border-radius: var-list(\n var-prefixer(checkbox-outer-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 4px\n );\n stroke: var(--comp-checkbox-outer-stroke-color);\n fill: var(--comp-checkbox-outer-fill-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n flex-shrink: 0;\n box-shadow: var(--tct-checkbox-box-shadow);\n\n rect {\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n :host([checked]:not([checked='false']):not([type='favorite'])) & {\n stroke: var-list(\n --comp-checkbox-checked-fill-color,\n var-prefixer(checkbox-checked-outer-stroke-color),\n --comp-checkbox-outer-stroke-color\n );\n\n rect {\n fill: var(--comp-checkbox-checked-fill-color);\n }\n }\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n box-shadow: var-list(--tct-checkbox-error-box-shadow, --tct-checkbox-box-shadow);\n\n rect {\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])[checked]:not([checked='false'])) & {\n rect {\n fill: var-list(--tct-checkbox-error-checked-outer-fill-color);\n }\n }\n\n :host([indeterminate]:not([indeterminate='false']):not([type='favorite'])) & {\n stroke: var-list(\n --comp-checkbox-checked-fill-color,\n var-prefixer(checkbox-checked-outer-stroke-color),\n --comp-checkbox-outer-stroke-color\n );\n\n rect {\n fill: var(--comp-checkbox-checked-fill-color);\n }\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n box-shadow: var-list(--tct-checkbox-hover-box-shadow, --tct-checkbox-box-shadow);\n rect {\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n :host(:hover[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-hover-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow,\n --tct-checkbox-box-shadow\n );\n rect {\n fill: var-list(\n --tct-checkbox-error-hover-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n }\n }\n\n :host(:focus-within:not([type='favorite'])) & {\n --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var-list(\n --tct-checkbox-focused-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n :host(:focus-within[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-focused-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-focused-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-focused-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n\n // Favorite\n :host([type='favorite']) & {\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host(:hover[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n // Checked favorite\n :host([checked]:not([checked='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-stroke-color,\n --tct-checkbox-favorite-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-hover-stroke-color,\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-fill-primary: #{var-list(\n --tct-checkbox-favorite-checked-fill-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-focused-stroke-color,\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error]:not([has-error='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error]:not([has-error='false'])[type='favorite'][checked]:not([checked='false'])) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n fill: none;\n stroke: var-list(--comp-checkbox-checked-color);\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);\n stroke-width: var(--tct-checkbox-error-checkmark-stroke-width, 2.5);\n }\n}\n\n.checked-fill {\n stroke-dasharray: 16;\n stroke-dashoffset: 16;\n animation-name: draw-checkmark;\n animation-duration: var-list(--tct-checkbox-animation-duration, --t-tween-time-in-4, 300ms);\n animation-timing-function: var-list(--tct-checkbox-animation-timing-function, ease-out);\n animation-fill-mode: var-list(--tct-checkbox-animation-fill-mode, forwards);\n}\n\n@keyframes draw-checkmark {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n.toggle-indicator {\n transition:\n left var(--comp-checkbox-tween),\n height var(--comp-checkbox-tween),\n width var(--comp-checkbox-tween);\n height: 16px;\n width: 16px;\n left: 4px;\n border-radius: 50%;\n}\n\n.toggle-track {\n --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n height: 24px;\n width: 38px;\n fill: var(--comp-checkbox-toggle-track-fill);\n border-radius: var(--app-border-radius-3, 12px);\n box-shadow: var-list(--tct-checkbox-toggle-track-box-shadow, --comp-default-track-box-shadow);\n transition:\n fill var(--comp-checkbox-tween),\n box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n mask: url(#xMask);\n fill: var(--comp-checkbox-toggle-color);\n transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n box-shadow: var-list(\n --tct-checkbox-toggle-hover-track-box-shadow,\n --comp-default-hover-track-box-shadow\n );\n fill: var(--comp-checkbox-toggle-track-fill-hover);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n }\n .label-text {\n color: var(--tct-checkbox-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n }\n }\n :active {\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-track-fill-active);\n }\n .label-text {\n color: var(--tct-checkbox-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n }\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-circle-fill-active);\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n fill: var(--comp-checkbox-toggle-track-fill-error);\n }\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-error-color);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n fill: var(--comp-checkbox-toggle-track-fill-error-hover);\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n }\n .label-text {\n color: var(--tct-checkbox-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n }\n }\n :active {\n .toggle-track {\n fill: var(--comp-checkbox-toggle-track-fill-error-active);\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n }\n .label-text {\n color: var(--tct-checkbox-error-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-error-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\n }\n }\n }\n }\n}\n\n:host([checked]:not([checked='false'])) {\n .toggle-indicator {\n left: 18px;\n }\n\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n border: none;\n }\n .toggle-circle {\n mask: url(#checkMask);\n fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .label-text {\n color: var(--tct-checkbox-checked-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .label-text {\n color: var(--tct-checkbox-checked-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n }\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-hover-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n .label-text {\n color: var(--tct-checkbox-checked-error-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-error-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-active-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n .label-text {\n color: var(--tct-checkbox-checked-error-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-error-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\n }\n }\n }\n }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Checkbox\n * @category Forms\n * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.\n /\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n descriptionObserver: MutationObserver;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasDescription: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /* Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @deprecated Use 'tctChange' instead\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.descriptionObserver?.disconnect();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.checkForDescription();\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n this.setupDescriptionObserver();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get ariaLabelledBy(): string \| undefined {\n const hasLabel =\n !!loc(this.label) \|\|\n !!this.hostElement.querySelector('[slot=\"label\"]') \|\|\n Array.from(this.hostElement.childNodes).some(\n node => !(node instanceof HTMLElement && node.getAttribute('slot')) && !!node.textContent?.trim()\n );\n if (!hasLabel && !this._tooltip) return undefined;\n const ids = [];\n if (hasLabel) ids.push(this.labelId);\n if (this._tooltip) ids.push(this.tooltipId);\n return ids.join(' ');\n }\n\n get labelId(): string {\n return `label-${this._id}`;\n }\n\n get tooltipId(): string {\n return `tooltip-${this._id}`;\n }\n\n checkForDescription() {\n this.hasDescription = !!this.description \|\| !!this.hostElement.querySelector('[slot=\"description\"]');\n }\n\n handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n if (\n this.readonly \|\|\n this.disabled \|\|\n this.hostElement.onchange \|\|\n event.defaultPrevented \|\|\n event.target !== this.hostElement \|\|\n !event.detail\n ) {\n return;\n }\n this.checked = event.detail.checked;\n }\n\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n mirrorEmit(this, ['change', 'tctChange'], {\n value,\n checked,\n });\n this.inputElement.focus();\n };\n\n setupDescriptionObserver() {\n this.descriptionObserver = new MutationObserver(() => {\n this.checkForDescription();\n });\n\n this.descriptionObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\n if (this.type === 'favorite') {\n return (\n <q2-icon\n type=\"star\"\n class=\"checkbox-icon\"\n />\n );\n }\n\n if (this.type === 'toggle') {\n return this.renderToggleSVG();\n }\n\n return (\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n class=\"checkbox-icon\"\n focusable=\"false\"\n >\n <rect\n x=\"1\"\n y=\"1\"\n width=\"18\"\n height=\"18\"\n rx=\"3\"\n />\n {(this.checked \|\| this.indeterminate) && this.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\n if (this.indeterminate) {\n return (\n <line\n class=\"checkbox-fill indeterminate-fill\"\n x1=\"4\"\n y1=\"10\"\n x2=\"16\"\n y2=\"10\"\n />\n );\n }\n return (\n <polyline\n class=\"checkbox-fill checked-fill\"\n points=\"5 11 8.5 14.5 15 6\"\n key={`checkmark-${this.checked}`}\n />\n );\n }\n\n renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n ></rect>\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask\n id=\"xMask\"\n maskUnits=\"userSpaceOnUse\"\n >\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n ></rect>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n </mask>\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n ></circle>\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.hasDescription ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n aria-labelledby={this.ariaLabelledBy}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n aria-hidden=\"true\"\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n id={this.labelId}\n >\n <div class=\"label-content\">\n {loc(this.label)}\n <slot />\n <slot name=\"label\" />\n </div>\n </label>\n </div>\n {this._tooltip && (\n <span\n id={this.tooltipId}\n class=\"sr\"\n test-id=\"checkboxTooltipText\"\n >\n {this._tooltip}\n </span>\n )}\n {this.hasDescription && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n <slot name=\"description\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-checkbox2.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,so+BAAso+B;;MCqB/o+B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AADvB,IAAA,WAAA,GAAA;;;;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,YAAY,UAAU,EAAE,EAAE;;;AAcxC,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAsB/B,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAsBxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAsJzB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;YAC5B,KAAK,CAAC,eAAe,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;AAC5E,YAAA,IAAI,gBAAgB;gBAAE;AACtB,YAAA,IAAI,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC;gBAAE;YACjD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;YAEvC,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;gBACtC,KAAK;gBACL,OAAO;AACV,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7B,SAAC;AAwNJ;;;IAvTG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,mBAAmB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;IAG1C,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,mBAAmB,EAAE;;IAG9B,gBAAgB,GAAA;AACZ,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;QACxD,IAAI,CAAC,wBAAwB,EAAE;;;;AAOnC,IAAA,oBAAoB,CAAC,KAAkB,EAAA;;AAEnC,QAAA,UAAU,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;;AAItD,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE;;;;IAO9D,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,IAAI,cAAc,GAAA;QACd,MAAM,QAAQ,GACV,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAClD,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,IAAI,CACxC,IAAI,IAAG,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,EAAE,IAAI,YAAY,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAC,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE,CAAA,CAAA,EAAA,CACpG;AACL,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,SAAS;QACjD,MAAM,GAAG,GAAG,EAAE;AACd,QAAA,IAAI,QAAQ;AAAE,YAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3C,QAAA,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGxB,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,CAAS,MAAA,EAAA,IAAI,CAAC,GAAG,EAAE;;AAG9B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,OAAO,CAAW,QAAA,EAAA,IAAI,CAAC,GAAG,EAAE;;IAGhC,mBAAmB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC;;AAGxG,IAAA,iBAAiB,CAAC,KAAuD,EAAA;QACrE,IACI,IAAI,CAAC,QAAQ;AACb,YAAA,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,WAAW,CAAC,QAAQ;AACzB,YAAA,KAAK,CAAC,gBAAgB;AACtB,YAAA,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW;AACjC,YAAA,CAAC,KAAK,CAAC,MAAM,EACf;YACE;;QAEJ,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;;IAmBvC,wBAAwB,GAAA;AACpB,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACjD,IAAI,CAAC,mBAAmB,EAAE;AAC9B,SAAC,CAAC;QAEF,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AAC/C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AAChB,SAAA,CAAC;;;;IAMN,iBAAiB,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1B,YAAA,QACI,CACI,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,eAAe,EACvB,CAAA;;AAIV,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;AAGjC,QAAA,QACI,0BACgB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAC,OAAO,EAAA,EAEjB,CAAA,CAAA,MAAA,EAAA,EACI,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,EACR,CAAA,EACD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,qBAAqB,EAAE,CACnE;;IAId,qBAAqB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,QACI,YACI,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACT,CAAA;;QAGV,QACI,CACI,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,oBAAoB,EAC3B,GAAG,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,CAAE,CAAA,EAAA,CAClC;;IAIV,eAAe,GAAA;AACX,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC7B,CAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,aACZ,aAAa,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,EACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,IAAI,EAAA,CACH,CACN,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,kBAAkB,aAChB,iBAAiB,EAAA,EAEzB,CAAA,CAAA,MAAA,EAAA,IAAA,EAEI,CAAA,CAAA,MAAA,EAAA,EACI,EAAE,EAAC,OAAO,EACV,SAAS,EAAC,gBAAgB,EAAA,EAE1B,CACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,EACR,CAAA,EACR,CACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,EACZ,CAAA,EACR,CACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,KAAK,EACR,MAAM,EAAC,OAAO,EAAA,cAAA,EACD,GAAG,EAAA,CACZ,CACL,EAEP,CAAM,CAAA,MAAA,EAAA,EAAA,EAAE,EAAC,WAAW,EAAA,EAChB,CACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,EACd,CAAA,EACF,CAAA,CAAA,UAAA,EAAA,EACI,KAAK,EAAC,aAAa,EACnB,MAAM,EAAC,uBAAuB,EAC9B,IAAI,EAAC,MAAM,EAAA,CACb,CACC,CACJ,EACP,CACI,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EACrB,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACL,IAAI,EAAC,aAAa,EACZ,CAAA,CACR,CACJ;;IAId,MAAM,GAAA;AACF,QAAA,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAC;QACvC,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/C,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClB,CACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACjB,kBAAA,EAAA,IAAI,CAAC,cAAc,GAAG,aAAa,GAAG,SAAS,EAAA,cAAA,EACnD,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,SAAS,GAAG,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,CAAE,EACzD,iBAAA,EAAA,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EACpD,KAAK,EAAC,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EACjD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,EAClB,SAAA,EAAA,yBAAyB,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACnB,CAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAC,eAAe,EACb,SAAA,EAAA,gBAAgB,iBACZ,MAAM,EAAA,EAEjB,IAAI,CAAC,iBAAiB,EAAE,CACrB,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,EAClC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAA,EACY,eAAe,EACvB,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,EAAE,EAAE,IAAI,CAAC,OAAO,EAAA,EAEhB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACrB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAChB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAG,CAAA,CACnB,CACF,CACN,EACL,IAAI,CAAC,QAAQ,KACV,6DACI,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAC,IAAI,EACF,SAAA,EAAA,qBAAqB,IAE5B,IAAI,CAAC,QAAQ,CACX,CACV,EACA,IAAI,CAAC,cAAc,KAChB,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAChB,SAAA,EAAA,qBAAqB,EAC7B,EAAE,EAAC,aAAa,EAAA,EAEf,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAG,CACzB,CACT,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n )};\n\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n\n --comp-checkbox-toggle-track-fill: #{var-list(\n --tct-checkbox-toggle-track-fill,\n --tct-checkbox-toggle-track-color,\n transparent\n )};\n --comp-checkbox-toggle-track-fill-active: #{var-list(\n --tct-checkbox-toggle-active-track-fill,\n --tct-checkbox-toggle-active-track-color,\n --tct-checkbox-toggle-active-color,\n --t-primary-l1,\n #7755af\n )};\n --comp-checkbox-toggle-track-fill-hover: #{var-list(\n --tct-checkbox-toggle-hover-track-fill,\n --tct-checkbox-toggle-hover-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error: #{var-list(\n --tct-checkbox-toggle-error-track-fill,\n --tct-checkbox-toggle-error-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error-hover: #{var-list(\n --tct-checkbox-toggle-error-hover-track-fill,\n --tct-checkbox-toggle-error-hover-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n --comp-checkbox-toggle-track-fill-error-active: #{var-list(\n --tct-checkbox-toggle-error-active-track-fill,\n --tct-checkbox-toggle-error-active-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n\n --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-fill-color: #{var-list(\n --tct-checkbox-checked-fill-color,\n --t-primary,\n #040404\n )};\n --comp-checkbox-checked-color: #{var-list(\n --tct-checkbox-checked-stroke-color,\n --tct-white,\n --app-white,\n #FFFFFF\n )};\n --comp-control-width: var(--comp-checkbox-size);\n --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n --comp-checkbox-bold-fallback-stroke-width: #{var-list(--tct-checkbox-bold-fallback-stroke-width, 0.7px)};\n --comp-checkbox-stroke-width: #{var-list(--tct-checkbox-stroke-width, unset)};\n --comp-checkbox-checked-stroke-width: #{var-list(\n --tct-checkbox-checked-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-hover-stroke-width: #{var-list(--tct-checkbox-hover-stroke-width, unset)};\n --comp-checkbox-focused-stroke-width: #{var-list(--tct-checkbox-focused-stroke-width, unset)};\n --comp-checkbox-checked-hover-stroke-width: #{var-list(\n --tct-checkbox-checked-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-checked-focused-stroke-width: #{var-list(\n --tct-checkbox-checked-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-stroke-width: #{var-list(\n --tct-checkbox-description-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-focused-stroke-width: #{var-list(\n --tct-checkbox-description-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-hover-stroke-width: #{var-list(\n --tct-checkbox-description-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n\n --comp-checkbox-toggle-circle-fill-active: #{var-list(\n --tct-checkbox-toggle-active-fill,\n --tct-checkbox-toggle-active-color,\n --comp-checkbox-toggle-color\n )};\n\n :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: start;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n}\n\n.label-text {\n grid-area: label;\n\n :host([description]) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-stroke-width);\n }\n :host([checked]:not([checked='false'])) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n }\n :host(:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n }\n :host(:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n }\n :host([description]:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n }\n :host([checked]:not([checked='false']):hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n }\n :host([description]:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n }\n :host([checked]:not([checked='false']):focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n }\n :host(:active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n }\n :host([checked]:not([checked='false']):active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n }\n :host([has-error]:not([has-error='false']):hover) & {\n -webkit-text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n }\n :host([has-error]:not([has-error='false']):focus-within) & {\n -webkit-text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n }\n :host([has-error]:not([has-error='false']):active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n }\n :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):hover) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n }\n :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):focus-within) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n }\n :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):active) & {\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n }\n\n label {\n line-height: var-list(--tct-checkbox-label-line-height, 24px);\n .label-content {\n display: inline;\n font-size: var(--tct-checkbox-label-font-size, inherit);\n }\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n width: var(--comp-checkbox-size);\n height: var(--comp-checkbox-size);\n border-radius: var-list(\n var-prefixer(checkbox-outer-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 4px\n );\n stroke: var(--comp-checkbox-outer-stroke-color);\n fill: var(--comp-checkbox-outer-fill-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n flex-shrink: 0;\n box-shadow: var(--tct-checkbox-box-shadow);\n\n rect {\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n :host([checked]:not([checked='false']):not([type='favorite'])) & {\n stroke: var-list(\n --comp-checkbox-checked-fill-color,\n var-prefixer(checkbox-checked-outer-stroke-color),\n --comp-checkbox-outer-stroke-color\n );\n\n rect {\n fill: var(--comp-checkbox-checked-fill-color);\n }\n }\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n box-shadow: var-list(--tct-checkbox-error-box-shadow, --tct-checkbox-box-shadow);\n\n rect {\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])[checked]:not([checked='false'])) & {\n rect {\n fill: var-list(--tct-checkbox-error-checked-outer-fill-color);\n }\n }\n\n :host([indeterminate]:not([indeterminate='false']):not([type='favorite'])) & {\n stroke: var-list(\n --comp-checkbox-checked-fill-color,\n var-prefixer(checkbox-checked-outer-stroke-color),\n --comp-checkbox-outer-stroke-color\n );\n\n rect {\n fill: var(--comp-checkbox-checked-fill-color);\n }\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n box-shadow: var-list(--tct-checkbox-hover-box-shadow, --tct-checkbox-box-shadow);\n rect {\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n :host(:hover[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-hover-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow,\n --tct-checkbox-box-shadow\n );\n rect {\n fill: var-list(\n --tct-checkbox-error-hover-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n }\n }\n\n :host(:focus-within:not([type='favorite'])) & {\n --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var-list(\n --tct-checkbox-focused-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n :host(:focus-within[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-focused-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-focused-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-focused-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n\n // Favorite\n :host([type='favorite']) & {\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host(:hover[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n // Checked favorite\n :host([checked]:not([checked='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-stroke-color,\n --tct-checkbox-favorite-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-hover-stroke-color,\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-fill-primary: #{var-list(\n --tct-checkbox-favorite-checked-fill-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-focused-stroke-color,\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error]:not([has-error='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error]:not([has-error='false'])[type='favorite'][checked]:not([checked='false'])) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n fill: none;\n stroke: var-list(--comp-checkbox-checked-color);\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);\n stroke-width: var(--tct-checkbox-error-checkmark-stroke-width, 2.5);\n }\n}\n\n.checked-fill {\n stroke-dasharray: 16;\n stroke-dashoffset: 16;\n animation-name: draw-checkmark;\n animation-duration: var-list(--tct-checkbox-animation-duration, --t-tween-time-in-4, 300ms);\n animation-timing-function: var-list(--tct-checkbox-animation-timing-function, ease-out);\n animation-fill-mode: var-list(--tct-checkbox-animation-fill-mode, forwards);\n}\n\n@keyframes draw-checkmark {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n.toggle-indicator {\n transition:\n left var(--comp-checkbox-tween),\n height var(--comp-checkbox-tween),\n width var(--comp-checkbox-tween);\n height: 16px;\n width: 16px;\n left: 4px;\n border-radius: 50%;\n}\n\n.toggle-track {\n --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n height: 24px;\n width: 38px;\n fill: var(--comp-checkbox-toggle-track-fill);\n border-radius: var(--app-border-radius-3, 12px);\n box-shadow: var-list(--tct-checkbox-toggle-track-box-shadow, --comp-default-track-box-shadow);\n transition:\n fill var(--comp-checkbox-tween),\n box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n mask: url(#xMask);\n fill: var(--comp-checkbox-toggle-color);\n transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n box-shadow: var-list(\n --tct-checkbox-toggle-hover-track-box-shadow,\n --comp-default-hover-track-box-shadow\n );\n fill: var(--comp-checkbox-toggle-track-fill-hover);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n }\n .label-text {\n color: var(--tct-checkbox-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n }\n }\n :active {\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-track-fill-active);\n }\n .label-text {\n color: var(--tct-checkbox-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n }\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-circle-fill-active);\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n fill: var(--comp-checkbox-toggle-track-fill-error);\n }\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-error-color);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n fill: var(--comp-checkbox-toggle-track-fill-error-hover);\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n }\n .label-text {\n color: var(--tct-checkbox-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n }\n }\n :active {\n .toggle-track {\n fill: var(--comp-checkbox-toggle-track-fill-error-active);\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n }\n .label-text {\n color: var(--tct-checkbox-error-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-error-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\n }\n }\n }\n }\n}\n\n:host([checked]:not([checked='false'])) {\n .toggle-indicator {\n left: 18px;\n }\n\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n border: none;\n }\n .toggle-circle {\n mask: url(#checkMask);\n fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .label-text {\n color: var(--tct-checkbox-checked-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .label-text {\n color: var(--tct-checkbox-checked-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n }\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-hover-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n .label-text {\n color: var(--tct-checkbox-checked-error-label-hover-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-error-description-hover-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-active-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n .label-text {\n color: var(--tct-checkbox-checked-error-label-active-color, inherit);\n }\n .description-text {\n color: var(--tct-checkbox-checked-error-description-active-color, inherit);\n -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\n text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\n }\n }\n }\n }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Checkbox\n * @category Forms\n * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.\n /\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n descriptionObserver: MutationObserver;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasDescription: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /* Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @deprecated Use 'tctChange' instead\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.descriptionObserver?.disconnect();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.checkForDescription();\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n this.setupDescriptionObserver();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get ariaLabelledBy(): string \| undefined {\n const hasLabel =\n !!loc(this.label) \|\|\n !!this.hostElement.querySelector('[slot=\"label\"]') \|\|\n Array.from(this.hostElement.childNodes).some(\n node => !(node instanceof HTMLElement && node.getAttribute('slot')) && !!node.textContent?.trim()\n );\n if (!hasLabel && !this._tooltip) return undefined;\n const ids = [];\n if (hasLabel) ids.push(this.labelId);\n if (this._tooltip) ids.push(this.tooltipId);\n return ids.join(' ');\n }\n\n get labelId(): string {\n return `label-${this._id}`;\n }\n\n get tooltipId(): string {\n return `tooltip-${this._id}`;\n }\n\n checkForDescription() {\n this.hasDescription = !!this.description \|\| !!this.hostElement.querySelector('[slot=\"description\"]');\n }\n\n handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n if (\n this.readonly \|\|\n this.disabled \|\|\n this.hostElement.onchange \|\|\n event.defaultPrevented \|\|\n event.target !== this.hostElement \|\|\n !event.detail\n ) {\n return;\n }\n this.checked = event.detail.checked;\n }\n\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n mirrorEmit(this, ['change', 'tctChange'], {\n value,\n checked,\n });\n this.inputElement.focus();\n };\n\n setupDescriptionObserver() {\n this.descriptionObserver = new MutationObserver(() => {\n this.checkForDescription();\n });\n\n this.descriptionObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\n if (this.type === 'favorite') {\n return (\n <q2-icon\n type=\"star\"\n class=\"checkbox-icon\"\n />\n );\n }\n\n if (this.type === 'toggle') {\n return this.renderToggleSVG();\n }\n\n return (\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n class=\"checkbox-icon\"\n focusable=\"false\"\n >\n <rect\n x=\"1\"\n y=\"1\"\n width=\"18\"\n height=\"18\"\n rx=\"3\"\n />\n {(this.checked \|\| this.indeterminate) && this.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\n if (this.indeterminate) {\n return (\n <line\n class=\"checkbox-fill indeterminate-fill\"\n x1=\"4\"\n y1=\"10\"\n x2=\"16\"\n y2=\"10\"\n />\n );\n }\n return (\n <polyline\n class=\"checkbox-fill checked-fill\"\n points=\"5 11 8.5 14.5 15 6\"\n key={`checkmark-${this.checked}`}\n />\n );\n }\n\n renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n ></rect>\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask\n id=\"xMask\"\n maskUnits=\"userSpaceOnUse\"\n >\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n ></rect>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n </mask>\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n ></circle>\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.hasDescription ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n aria-labelledby={this.ariaLabelledBy}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n aria-hidden=\"true\"\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n id={this.labelId}\n >\n <div class=\"label-content\">\n {loc(this.label)}\n <slot />\n <slot name=\"label\" />\n </div>\n </label>\n </div>\n {this._tooltip && (\n <span\n id={this.tooltipId}\n class=\"sr\"\n test-id=\"checkboxTooltipText\"\n >\n {this._tooltip}\n </span>\n )}\n {this.hasDescription && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n <slot name=\"description\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './q2-action-group2.js';
 import { d as defineCustomElement$3 } from './q2-item2.js';
 import { d as defineCustomElement$2 } from './q2-resize-observer2.js';
-const q2ContextCss = "*{box-sizing:border-box}:host([hidden]){display:none}:host{display:block;background:var(--tct-context-background, var(--t-tertiary, #e8f5fc));box-shadow:var(--tct-context-box-shadow, none);backdrop-filter:var(--tct-context-backdrop-filter, none);border-radius:var(--tct-context-border-radius, var(--app-border-radius-2, 8px));padding:var(--tct-context-padding, 10px);width:var(--tct-context-width);border-width:var(--tct-context-border-width, 0px);border-style:var(--tct-context-border-style, solid);border-color:var(--tct-context-border-color, transparent)}.context-wrapper{display:flex;flex-direction:column;gap:var(--tct-context-gap, 10px)}.context-item{--tct-item-bullet-padding-top:0;--tct-item-action-align-items:start;--tct-item-action-icon-height:24px;--tct-item-action-icon-width:24px;--tct-item-action-icon-size:24px;--tct-item-avatar-height:44px;--tct-item-avatar-width:44px}.context-body slot:not(:first-child)::before{content:\" \"}.context-body ::slotted(*){display:inline}.separator{margin:var(--tct-context-separator-margin, 0);border-bottom:1px solid var(--tct-context-separator-color, var(--t-gray-12, #d9d9d9))}.action-group{--tct-action-group-margin:0}::slotted(q2-dropdown){--tct-btn-icon-border-radius:var(--app-border-radius-1, 4px)}::slotted(q2-link){--tct-link-border-radius:var(--app-border-radius-1, 4px);--tct-icon-stroke-primary:var(--t-primary, #6a4a9e);--tct-icon-stroke-secondary:var(--t-primary, #6a4a9e)}";
+const q2ContextCss = "*{box-sizing:border-box}:host([hidden]){display:none}:host{--tct-item-body-color:var(--tct-context-color, var(--tct-text));display:block;background:var(--tct-context-background, var(--t-tertiary, #e8f5fc));box-shadow:var(--tct-context-box-shadow, none);backdrop-filter:var(--tct-context-backdrop-filter, none);border-radius:var(--tct-context-border-radius, var(--app-border-radius-2, 8px));padding:var(--tct-context-padding, 10px);width:var(--tct-context-width);border-width:var(--tct-context-border-width, 0px);border-style:var(--tct-context-border-style, solid);border-color:var(--tct-context-border-color, transparent)}.context-wrapper{display:flex;flex-direction:column;gap:var(--tct-context-gap, 10px)}.context-item{--tct-item-bullet-padding-top:0;--tct-item-action-align-items:start;--tct-item-action-icon-height:24px;--tct-item-action-icon-width:24px;--tct-item-action-icon-size:24px;--tct-item-avatar-height:44px;--tct-item-avatar-width:44px}.context-body slot:not(:first-child)::before{content:\" \"}.context-body ::slotted(*){display:inline}.separator{margin:var(--tct-context-separator-margin, 0);border-bottom:1px solid var(--tct-context-separator-color, var(--t-gray-12, #d9d9d9))}.action-group{--tct-action-group-margin:0}::slotted(q2-dropdown){--tct-btn-icon-border-radius:var(--app-border-radius-1, 4px)}::slotted(q2-link){--tct-link-border-radius:var(--app-border-radius-1, 4px);--tct-icon-stroke-primary:var(--t-primary, #6a4a9e);--tct-icon-stroke-secondary:var(--t-primary, #6a4a9e)}";
 const Q2Context$1 = /*@__PURE__*/ proxyCustomElement(class Q2Context extends HTMLElement {
     constructor() {

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

	@@ -1 +1 @@
1	- {"file":"q2-context.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,g6CAAg6C;;MCuBx6CA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;;;;;;;;IAgBlB,kBAAkB,GAAA;QACd,IAAI,CAAC,yBAAyB,EAAE;QAChC,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,sBAAsB,EAAE;QAC7B,IAAI,CAAC,mBAAmB,EAAE;;;;AAM9B,IAAA,IAAI,yBAAyB,GAAA;QACzB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;;AAG3D,IAAA,IAAI,wBAAwB,GAAA;QACxB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC;;AAGzD,IAAA,IAAI,uBAAuB,GAAA;QACvB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;;AAGxD,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;IAGrD,yBAAyB,GAAA;AACrB,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,eAAe,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,2BAA2B,CAAC;AAC/G,QAAA,MAAM,mBAAmB,GAAG,CAAA,eAAe,KAAf,IAAA,IAAA,eAAe,uBAAf,eAAe,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QACtF,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AACnD,YAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC;gBAC/E;;AAGJ,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,QAAQ,EAAE;gBACzB,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,EAAE;AACrC,oBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;AAChC,oBAAA,OAAO,CAAC,IAAI,CAAC,6DAA6D,CAAC;;AAE/E,gBAAA,IAAI,CAAC,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE;AACrE,oBAAA,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC;AACpC,oBAAA,OAAO,CAAC,IAAI,CACR,+FAA+F,CAClG;;;AAGb,SAAC,CAAC;;IAGN,uBAAuB,GAAA;AACnB,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,cAAc,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC;AAC5G,QAAA,MAAM,kBAAkB,GAAG,CAAA,cAAc,KAAd,IAAA,IAAA,cAAc,uBAAd,cAAc,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QACpF,kBAAkB,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AAClD,YAAA,IAAI,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;gBAC9D,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC;gBACzF;;AAGJ,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,QAAQ,EAAE;AACzB,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC;AAClE,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC;;AAG7E,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,aAAa,EAAE;AAC9B,gBAAA,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;AACvE,gBAAA,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC;AAC7E,gBAAA,IAAI,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,KAAK,OAAO;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,mBAAmB,EAAE,OAAO,CAAC;;AAE3G,SAAC,CAAC;;IAGN,sBAAsB,GAAA;AAClB,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,aAAa,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC;AAC1G,QAAA,MAAM,iBAAiB,GAAG,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QAClF,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AACjD,YAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC;gBAC9E;;AAGJ,YAAA,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;gBAChD,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,0EAA0E,CAAC;gBACxF;;AAER,SAAC,CAAC;;IAGN,mBAAmB,GAAA;AACf,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,UAAU,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC;AACpG,QAAA,MAAM,cAAc,GAAG,CAAA,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QAC5E,cAAc,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AAC9C,YAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,0DAA0D,CAAC;;AAG5E,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,IAAI,EAAE;gBACrB,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC;;AAEpF,SAAC,CAAC;;;;IAMN,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACxB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACxB,IAAI,CAAC,uBAAuB,KACzB,CACI,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,WAAW,GAClB,CACL,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EAAA,EAEX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,CACzB,EACL,IAAI,CAAC,wBAAwB,KAC1B,6DACI,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,EAAA,CACf,CACL,CACK,EACT,IAAI,CAAC,SAAS,KACX,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,GAClB,CACL,EACA,IAAI,CAAC,yBAAyB,KAC3B,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,YAAY,EAAA,EAExB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACd,CACrB,EACA,IAAI,CAAC,oBAAoB,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Context","__stencil_proxyCustomElement"],"sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host {\n display: block;\n background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n box-shadow: var-list(--tct-context-box-shadow, none);\n backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n padding: var(--tct-context-padding, 10px);\n width: var(--tct-context-width);\n border-width: var-list(--tct-context-border-width, 0px);\n border-style: var-list(--tct-context-border-style, solid);\n border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n --tct-item-bullet-padding-top: 0;\n --tct-item-action-align-items: start;\n --tct-item-action-icon-height: 24px;\n --tct-item-action-icon-width: 24px;\n --tct-item-action-icon-size: 24px;\n --tct-item-avatar-height: 44px;\n --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n slot:not(:first-child)::before {\n content: ' ';\n }\n\n ::slotted() {\n display: inline;\n }\n}\n\n.separator {\n margin: var(--tct-context-separator-margin, 0);\n border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n // slotted affordance dropdown\n --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n // slotted action-group links\n --tct-link-border-radius: var(--app-border-radius-1, 4px);\n --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/\n @name Context\n * @category Display\n * @summary Use for displaying supplementary information or hints alongside content.\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n \n @slot header - A required slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n \n @slot description - A required slot. Use this to provide the bulk of the context you wish to convey to the user.\n \n @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n \n @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n \n @slot footer - An optional slot to display additional HTML content.\n /\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Renders a horizontal line between the description and the action-group/footer slots. */\n @Prop({ reflect: true })\n separator: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidRender(): void {\n this.handleActionGroupElements();\n this.handleAffordanceElement();\n this.handleDecoratorElement();\n this.handleHeaderElement();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasActionGroupSlotContent() {\n return hasSlotContent(this.hostElement, 'action-group');\n }\n\n get hasAffordanceSlotContent() {\n return hasSlotContent(this.hostElement, 'affordance');\n }\n\n get hasDecoratorSlotContent() {\n return hasSlotContent(this.hostElement, 'decorator');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n handleActionGroupElements() {\n if (!('HTMLSlotElement' in window)) return;\n const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) \|\| [];\n actionGroupElements.forEach((el: HTMLElement, index) => {\n if (index > 1) {\n el.remove();\n console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n return;\n }\n\n if (el.tagName === 'Q2-BTN') {\n if (el.getAttribute('size') !== 'small') {\n el.setAttribute('size', 'small');\n console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n }\n if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n el.setAttribute('intent', 'neutral');\n console.warn(\n 'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n );\n }\n }\n });\n }\n\n handleAffordanceElement() {\n if (!('HTMLSlotElement' in window)) return;\n const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) \|\| [];\n affordanceElements.forEach((el: HTMLElement, index) => {\n if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) \|\| index > 0) {\n el.remove();\n console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n return;\n }\n\n if (el.tagName === 'Q2-BTN') {\n if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n }\n\n if (el.tagName === 'Q2-DROPDOWN') {\n if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n }\n });\n }\n\n handleDecoratorElement() {\n if (!('HTMLSlotElement' in window)) return;\n const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) \|\| [];\n decoratorElements.forEach((el: HTMLElement, index) => {\n if (index > 0) {\n el.remove();\n console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n return;\n }\n\n if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n el.remove();\n console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n return;\n }\n });\n }\n\n handleHeaderElement() {\n if (!('HTMLSlotElement' in window)) return;\n const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n const headerElements = headerSlot?.assignedElements({ flatten: true }) \|\| [];\n headerElements.forEach((el: HTMLElement, index) => {\n if (index > 0) {\n el.remove();\n console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n }\n\n if (el.tagName !== 'H4') {\n el.remove();\n console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"context-wrapper\">\n <q2-item class=\"context-item\">\n {this.hasDecoratorSlotContent && (\n <slot\n name=\"decorator\"\n slot=\"decorator\"\n />\n )}\n <div\n class=\"context-body\"\n slot=\"body\"\n >\n <slot name=\"header\" />\n <slot name=\"description\" />\n </div>\n {this.hasAffordanceSlotContent && (\n <slot\n name=\"affordance\"\n slot=\"action\"\n />\n )}\n </q2-item>\n {this.separator && (\n <div\n class=\"separator\"\n role=\"separator\"\n />\n )}\n {this.hasActionGroupSlotContent && (\n <q2-action-group\n class=\"action-group\"\n orientation=\"horizontal\"\n >\n <slot name=\"action-group\" />\n </q2-action-group>\n )}\n {this.hasFooterSlotContent && <slot name=\"footer\" />}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-context.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,g+CAAg+C;;MCuBx+CA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;;;;;;;;IAgBlB,kBAAkB,GAAA;QACd,IAAI,CAAC,yBAAyB,EAAE;QAChC,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,sBAAsB,EAAE;QAC7B,IAAI,CAAC,mBAAmB,EAAE;;;;AAM9B,IAAA,IAAI,yBAAyB,GAAA;QACzB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;;AAG3D,IAAA,IAAI,wBAAwB,GAAA;QACxB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC;;AAGzD,IAAA,IAAI,uBAAuB,GAAA;QACvB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;;AAGxD,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;IAGrD,yBAAyB,GAAA;AACrB,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,eAAe,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,2BAA2B,CAAC;AAC/G,QAAA,MAAM,mBAAmB,GAAG,CAAA,eAAe,KAAf,IAAA,IAAA,eAAe,uBAAf,eAAe,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QACtF,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AACnD,YAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC;gBAC/E;;AAGJ,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,QAAQ,EAAE;gBACzB,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,EAAE;AACrC,oBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;AAChC,oBAAA,OAAO,CAAC,IAAI,CAAC,6DAA6D,CAAC;;AAE/E,gBAAA,IAAI,CAAC,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE;AACrE,oBAAA,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC;AACpC,oBAAA,OAAO,CAAC,IAAI,CACR,+FAA+F,CAClG;;;AAGb,SAAC,CAAC;;IAGN,uBAAuB,GAAA;AACnB,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,cAAc,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC;AAC5G,QAAA,MAAM,kBAAkB,GAAG,CAAA,cAAc,KAAd,IAAA,IAAA,cAAc,uBAAd,cAAc,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QACpF,kBAAkB,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AAClD,YAAA,IAAI,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;gBAC9D,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC;gBACzF;;AAGJ,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,QAAQ,EAAE;AACzB,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC;AAClE,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC;;AAG7E,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,aAAa,EAAE;AAC9B,gBAAA,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;AACvE,gBAAA,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC;AAC7E,gBAAA,IAAI,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,KAAK,OAAO;AAAE,oBAAA,EAAE,CAAC,YAAY,CAAC,mBAAmB,EAAE,OAAO,CAAC;;AAE3G,SAAC,CAAC;;IAGN,sBAAsB,GAAA;AAClB,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,aAAa,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC;AAC1G,QAAA,MAAM,iBAAiB,GAAG,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QAClF,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AACjD,YAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC;gBAC9E;;AAGJ,YAAA,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;gBAChD,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,0EAA0E,CAAC;gBACxF;;AAER,SAAC,CAAC;;IAGN,mBAAmB,GAAA;AACf,QAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;YAAE;AACpC,QAAA,MAAM,UAAU,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC;AACpG,QAAA,MAAM,cAAc,GAAG,CAAA,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAI,EAAE;QAC5E,cAAc,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,KAAK,KAAI;AAC9C,YAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,0DAA0D,CAAC;;AAG5E,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,IAAI,EAAE;gBACrB,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC;;AAEpF,SAAC,CAAC;;;;IAMN,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACxB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACxB,IAAI,CAAC,uBAAuB,KACzB,CACI,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,WAAW,GAClB,CACL,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EAAA,EAEX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,CACzB,EACL,IAAI,CAAC,wBAAwB,KAC1B,6DACI,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,EAAA,CACf,CACL,CACK,EACT,IAAI,CAAC,SAAS,KACX,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,GAClB,CACL,EACA,IAAI,CAAC,yBAAyB,KAC3B,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,YAAY,EAAA,EAExB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACd,CACrB,EACA,IAAI,CAAC,oBAAoB,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Context","__stencil_proxyCustomElement"],"sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n@import './variables';\n\n* {\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host {\n\n --tct-item-body-color: #{var-list(--tct-context-color, --tct-text)};\n\n display: block;\n background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n box-shadow: var-list(--tct-context-box-shadow, none);\n backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n padding: var(--tct-context-padding, 10px);\n width: var(--tct-context-width);\n border-width: var-list(--tct-context-border-width, 0px);\n border-style: var-list(--tct-context-border-style, solid);\n border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n --tct-item-bullet-padding-top: 0;\n --tct-item-action-align-items: start;\n --tct-item-action-icon-height: 24px;\n --tct-item-action-icon-width: 24px;\n --tct-item-action-icon-size: 24px;\n --tct-item-avatar-height: 44px;\n --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n slot:not(:first-child)::before {\n content: ' ';\n }\n\n ::slotted() {\n display: inline;\n }\n}\n\n.separator {\n margin: var(--tct-context-separator-margin, 0);\n border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n // slotted affordance dropdown\n --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n // slotted action-group links\n --tct-link-border-radius: var(--app-border-radius-1, 4px);\n --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/\n @name Context\n * @category Display\n * @summary Use for displaying supplementary information or hints alongside content.\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n \n @slot header - A required slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n \n @slot description - A required slot. Use this to provide the bulk of the context you wish to convey to the user.\n \n @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n \n @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n \n @slot footer - An optional slot to display additional HTML content.\n /\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Renders a horizontal line between the description and the action-group/footer slots. */\n @Prop({ reflect: true })\n separator: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidRender(): void {\n this.handleActionGroupElements();\n this.handleAffordanceElement();\n this.handleDecoratorElement();\n this.handleHeaderElement();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasActionGroupSlotContent() {\n return hasSlotContent(this.hostElement, 'action-group');\n }\n\n get hasAffordanceSlotContent() {\n return hasSlotContent(this.hostElement, 'affordance');\n }\n\n get hasDecoratorSlotContent() {\n return hasSlotContent(this.hostElement, 'decorator');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n handleActionGroupElements() {\n if (!('HTMLSlotElement' in window)) return;\n const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) \|\| [];\n actionGroupElements.forEach((el: HTMLElement, index) => {\n if (index > 1) {\n el.remove();\n console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n return;\n }\n\n if (el.tagName === 'Q2-BTN') {\n if (el.getAttribute('size') !== 'small') {\n el.setAttribute('size', 'small');\n console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n }\n if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n el.setAttribute('intent', 'neutral');\n console.warn(\n 'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n );\n }\n }\n });\n }\n\n handleAffordanceElement() {\n if (!('HTMLSlotElement' in window)) return;\n const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) \|\| [];\n affordanceElements.forEach((el: HTMLElement, index) => {\n if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) \|\| index > 0) {\n el.remove();\n console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n return;\n }\n\n if (el.tagName === 'Q2-BTN') {\n if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n }\n\n if (el.tagName === 'Q2-DROPDOWN') {\n if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n }\n });\n }\n\n handleDecoratorElement() {\n if (!('HTMLSlotElement' in window)) return;\n const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) \|\| [];\n decoratorElements.forEach((el: HTMLElement, index) => {\n if (index > 0) {\n el.remove();\n console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n return;\n }\n\n if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n el.remove();\n console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n return;\n }\n });\n }\n\n handleHeaderElement() {\n if (!('HTMLSlotElement' in window)) return;\n const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n const headerElements = headerSlot?.assignedElements({ flatten: true }) \|\| [];\n headerElements.forEach((el: HTMLElement, index) => {\n if (index > 0) {\n el.remove();\n console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n }\n\n if (el.tagName !== 'H4') {\n el.remove();\n console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"context-wrapper\">\n <q2-item class=\"context-item\">\n {this.hasDecoratorSlotContent && (\n <slot\n name=\"decorator\"\n slot=\"decorator\"\n />\n )}\n <div\n class=\"context-body\"\n slot=\"body\"\n >\n <slot name=\"header\" />\n <slot name=\"description\" />\n </div>\n {this.hasAffordanceSlotContent && (\n <slot\n name=\"affordance\"\n slot=\"action\"\n />\n )}\n </q2-item>\n {this.separator && (\n <div\n class=\"separator\"\n role=\"separator\"\n />\n )}\n {this.hasActionGroupSlotContent && (\n <q2-action-group\n class=\"action-group\"\n orientation=\"horizontal\"\n >\n <slot name=\"action-group\" />\n </q2-action-group>\n )}\n {this.hasFooterSlotContent && <slot name=\"footer\" />}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 const q2CurrencyCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.currency{--comp-currency-color:var(--tct-currency-color, var(--t-text, #4d4d4d));color:var(--comp-currency-color);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency.positive{color:var(--tct-currency-positive-color, var(--comp-currency-color))}.currency.negative{color:var(--tct-currency-negative-color, var(--comp-currency-color))}.currency.debit.positive{color:var(--tct-currency-debit-positive-color, var(--const-stoplight-success, #0e8a00))}.currency.debit.negative{color:var(--tct-currency-debit-negative-color, var(--const-stoplight-alert, #d20a0a))}.currency.credit.positive{color:var(--tct-currency-credit-positive-color, var(--const-stoplight-alert, #d20a0a))}.currency.credit.negative{color:var(--tct-currency-credit-negative-color, var(--const-stoplight-success, #0e8a00))}.currency.masked{line-height:1}.currency.masked.positive{background:var(--tct-currency-masked-positive-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.currency.masked.negative{background:var(--tct-currency-masked-negative-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, 0.5em);font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 0.5em);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 0.5em);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
@@ -36,8 +36,7 @@ const Q2Currency$1 = /*@__PURE__*/ proxyCustomElement(class Q2Currency extends H
      * @testOnly
      */
     async displayedMessageValue() {
-        const currency = this.hostElement.shadowRoot.querySelector('[test-id="q2CurrencyInner"]');
-        return (currency === null || currency === void 0 ? void 0 : currency.getAttribute('aria-label')) || '';
+        return this.hostElement.getAttribute('aria-label') || '';
     }
     // #endregion
     // #region Watchers
@@ -142,7 +141,7 @@ const Q2Currency$1 = /*@__PURE__*/ proxyCustomElement(class Q2Currency extends H
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h("div", { key: 'a600525cc214be0a670d8faa90c22583bb142a5a', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '40a2b4736c8afc5b7939391fe90600d79d584c66' }, '('), hasPlusMinusSign && h("span", { key: '6f5755d3e4681168e523c9549a0fa2ce60ad49fc' }, plusMinusSign), currencyIsFront && h("span", { key: '006b2ab6a62e7f1f5bf413ce767763d1c8b6fa57', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '96b0d7262fa2bcf8b9039fba828d937e88c0fc00' }, amountCore), h("span", { key: 'fa848c80fe88cff6de78a1386c4473413f0cda18', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '0a39e489c17f33846af1587603a2e9ae21bd5f78', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '9e088b3f70a82bb7bb0ab1d8a59e1eadd837178a' }, ')')));
+        return (h(Host, { key: 'ef34175a8e5490734fff3dea6315012cff694ffa', "aria-label": readableCurrency }, h("div", { key: '68bbd6aeec8220bba221b5b0d8fccf2500c9b2c0', "test-id": "q2CurrencyInner", class: currencyClasses }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '0beac730d59b4241acc7514b7107116531665894' }, '('), hasPlusMinusSign && h("span", { key: '382819a090c7b64fbd6396dad59ef1599dafac64' }, plusMinusSign), currencyIsFront && (h("span", { key: '3537b66c817af1a9de2eb1f05b4e6a2e2f6a2355', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), h("span", { key: '3cbf46fc1608be20c15d5b46fd7cc5da99954081' }, amountCore), h("span", { key: '2df7ac4a43fedc127d02eaea6aa96b6d4d8b107f', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && (h("span", { key: '5ad6317c0a36f7a5fef10f1ea83ac8fc667571e5', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '0356a4cf07928a11fa2226f40115159b63c2daf9' }, ')'))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"q2-currency.js","mappings":"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","names":["Q2Currency","__stencil_proxyCustomElement"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.currency {\n --comp-currency-color: #{var-list(--tct-currency-color, --t-text, #4d4d4d)};\n color: var(--comp-currency-color);\n font-size: var-list(--tct-currency-font-size, inherit);\n font-weight: var-list(--tct-currency-font-weight, inherit);\n\n &.positive {\n color: var-list(--tct-currency-positive-color, --comp-currency-color);\n }\n\n &.negative {\n color: var-list(--tct-currency-negative-color, --comp-currency-color);\n }\n\n &.debit {\n &.positive {\n color: var-list(--tct-currency-debit-positive-color, --const-stoplight-success, #0e8a00);\n }\n\n &.negative {\n color: var-list(--tct-currency-debit-negative-color, --const-stoplight-alert, #d20a0a);\n }\n }\n\n &.credit {\n &.positive {\n color: var-list(--tct-currency-credit-positive-color, --const-stoplight-alert, #d20a0a);\n }\n\n &.negative {\n color: var-list(--tct-currency-credit-negative-color, --const-stoplight-success, #0e8a00);\n }\n }\n\n &.masked {\n line-height: 1; // ensures gradient covers full text height in all contexts\n\n &.positive {\n background: var(\n --tct-currency-masked-positive-background,\n unquote('linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%)')\n );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-background-clip: text;\n -moz-text-fill-color: transparent;\n }\n\n &.negative {\n background: var(\n --tct-currency-masked-negative-background,\n unquote('linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%)')\n );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-background-clip: text;\n -moz-text-fill-color: transparent;\n }\n }\n}\n\n.currency-small {\n color: var(--tct-currency-small-color, inherit);\n font-size: var(--tct-currency-small-font-size, 24px);\n font-weight: var(--tct-currency-small-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var(--tct-currency-small-superscript-color, inherit);\n font-size: var(--tct-currency-small-superscript-font-size, 0.5em);\n font-weight: var(--tct-currency-small-superscript-font-weight, 700);\n }\n}\n\n.currency-medium {\n color: var(--tct-currency-medium-color, inherit);\n font-size: var(--tct-currency-medium-font-size, 42px);\n font-weight: var(--tct-currency-medium-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var(--tct-currency-medium-superscript-color, inherit);\n font-size: var(--tct-currency-medium-superscript-font-size, 0.5em);\n font-weight: var(--tct-currency-medium-superscript-font-weight, 700);\n }\n}\n\n.currency-large {\n color: var(--tct-currency-large-color, inherit);\n font-size: var(--tct-currency-large-font-size, 70px);\n font-weight: var(--tct-currency-large-font-weight, 700);\n\n .superscript {\n vertical-align: super;\n color: var(--tct-currency-large-superscript-color, inherit);\n font-size: var(--tct-currency-large-superscript-font-size, 0.5em);\n font-weight: var(--tct-currency-large-superscript-font-weight, 800);\n }\n}\n","import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n/*\n @name Currency\n * @category Text\n * @summary Use for displaying formatted monetary amounts with proper locale.\n /\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n // #region Own Properties\n\n /* @private The parts of the formatted number. /\n formattedParts: Intl.NumberFormatPart[];\n /* @private The full currency for aria-label purposes. /\n readableCurrency: string;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* The amount you want formatted. /\n @Prop({ reflect: true })\n amount: number;\n\n /* Formats the `amount` to a specific currency. /\n @Prop({ reflect: true })\n currency: string = 'USD';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative amounts only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative amounts, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'accounting' \| 'always' \| 'auto' \| 'exceptZero' \| 'never' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large';\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /\n The variant controls how the currency is colored and exposes unique CSS overrides.\n * The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts.\n * The `masked` variant exposes the ability to use gradients and images to color the currency.\n /\n @Prop({ reflect: true })\n variant: 'debit' \| 'credit' \| 'masked';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatCurrency();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to retrieve the displayed currency value.\n \n @testOnly\n */\n @Method()\n async displayedMessageValue() {\n const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n return currency?.getAttribute('aria-label') \|\| '';\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('amount')\n @Watch('currency')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('variant')\n propsUpdated() {\n this.formatCurrency();\n }\n\n // #endregion\n // #region Local Methods\n\n get amountCore(): string {\n const { formattedParts, shouldSuperscriptFraction } = this;\n let amount: string = '';\n\n for (const part of formattedParts) {\n if (\n part.type === 'integer' \|\|\n part.type === 'decimal' \|\|\n part.type === 'group' \|\|\n part.type === 'literal'\n ) {\n amount += part.value;\n }\n }\n\n // removes trailing decimal point if superscripting the fraction\n if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n // removes end whitespace that breaks formatting\n amount = amount.trimEnd();\n\n return amount;\n }\n\n get currencyClasses(): string {\n const { size, slotSize, isNegativeAmount, variant } = this;\n const classes = ['currency'];\n const sizeClass = size ? size : slotSize;\n const sign = isNegativeAmount ? 'negative' : 'positive';\n\n classes.push(sign);\n if (!!variant) classes.push(variant);\n if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n return classes.join(' ');\n }\n\n get currencyIsFront(): boolean {\n const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n if (index === 0 \|\| index === 1) return true;\n return false;\n }\n\n get currencySymbol(): string {\n const { formattedParts, currencyIsFront } = this;\n const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n const symbol = formattedParts[currencyIndex].value;\n return currencyIsFront ? symbol : ' ' + symbol;\n }\n\n get fraction(): string {\n const { formattedParts } = this;\n const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n if (!fraction) return;\n\n return fraction.value;\n }\n\n get hasPlusMinusSign(): boolean {\n return this.formattedParts.some(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' \|\| part.type === 'plusSign'\n );\n }\n\n get isNegativeAmount(): boolean {\n const hasNegativePart = this.formattedParts.some((part: Intl.NumberFormatPart) => part.type === 'minusSign');\n const hasNegativeDash = String(this.amount).startsWith('-');\n return hasNegativePart \|\| hasNegativeDash;\n }\n\n get plusMinusSign(): string {\n const { formattedParts, hasPlusMinusSign } = this;\n if (!hasPlusMinusSign) return;\n\n const sign = formattedParts.find(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' \|\| part.type === 'plusSign'\n );\n return sign.value;\n }\n\n get shouldSuperscriptFraction(): boolean {\n const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n const commaBeforeFraction = this.formattedParts[fractionIndex - 1]?.value === ',';\n\n if (commaBeforeFraction \|\| !this.currencyIsFront \|\| this.sizeValue === 'small' \|\| !this.sizeProvided)\n return false;\n\n return true;\n }\n\n get shouldSuperscriptSymbol(): boolean {\n if (!this.currencyIsFront \|\| this.sizeProvided) return true;\n\n return false;\n }\n\n get sizeProvided(): boolean {\n return !!this.size \|\| !!this.slotSize;\n }\n\n get sizeValue(): string {\n return this.size ? this.size : this.slotSize;\n }\n\n formatCurrency() {\n const formatOptions = new Intl.NumberFormat(this.locale, {\n style: 'currency',\n currency: this.currency,\n signDisplay: this.signDisplay === 'accounting' ? 'never' : this.signDisplay,\n });\n this.formattedParts = formatOptions.formatToParts(this.amount);\n this.readableCurrency = formatOptions.format(this.amount);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const {\n hasPlusMinusSign,\n plusMinusSign,\n currencyIsFront,\n currencySymbol,\n shouldSuperscriptSymbol,\n amountCore,\n fraction,\n shouldSuperscriptFraction,\n readableCurrency,\n currencyClasses,\n signDisplay,\n isNegativeAmount,\n } = this;\n\n return (\n <div\n test-id=\"q2CurrencyInner\"\n class={currencyClasses}\n aria-label={readableCurrency}\n >\n {signDisplay === 'accounting' && isNegativeAmount && <span>{'('}</span>}\n {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n <span>{amountCore}</span>\n <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n {signDisplay === 'accounting' && isNegativeAmount && <span>{')'}</span>}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-currency.js","mappings":"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","names":["Q2Currency","__stencil_proxyCustomElement"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n}\n\n.currency {\n --comp-currency-color: #{var-list(--tct-currency-color, --t-text, #4d4d4d)};\n color: var(--comp-currency-color);\n font-size: var-list(--tct-currency-font-size, inherit);\n font-weight: var-list(--tct-currency-font-weight, inherit);\n\n &.positive {\n color: var-list(--tct-currency-positive-color, --comp-currency-color);\n }\n\n &.negative {\n color: var-list(--tct-currency-negative-color, --comp-currency-color);\n }\n\n &.debit {\n &.positive {\n color: var-list(--tct-currency-debit-positive-color, --const-stoplight-success, #0e8a00);\n }\n\n &.negative {\n color: var-list(--tct-currency-debit-negative-color, --const-stoplight-alert, #d20a0a);\n }\n }\n\n &.credit {\n &.positive {\n color: var-list(--tct-currency-credit-positive-color, --const-stoplight-alert, #d20a0a);\n }\n\n &.negative {\n color: var-list(--tct-currency-credit-negative-color, --const-stoplight-success, #0e8a00);\n }\n }\n\n &.masked {\n line-height: 1; // ensures gradient covers full text height in all contexts\n\n &.positive {\n background: var(\n --tct-currency-masked-positive-background,\n unquote('linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%)')\n );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-background-clip: text;\n -moz-text-fill-color: transparent;\n }\n\n &.negative {\n background: var(\n --tct-currency-masked-negative-background,\n unquote('linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%)')\n );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-background-clip: text;\n -moz-text-fill-color: transparent;\n }\n }\n}\n\n.currency-small {\n color: var(--tct-currency-small-color, inherit);\n font-size: var(--tct-currency-small-font-size, 24px);\n font-weight: var(--tct-currency-small-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var(--tct-currency-small-superscript-color, inherit);\n font-size: var(--tct-currency-small-superscript-font-size, 0.5em);\n font-weight: var(--tct-currency-small-superscript-font-weight, 700);\n }\n}\n\n.currency-medium {\n color: var(--tct-currency-medium-color, inherit);\n font-size: var(--tct-currency-medium-font-size, 42px);\n font-weight: var(--tct-currency-medium-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var(--tct-currency-medium-superscript-color, inherit);\n font-size: var(--tct-currency-medium-superscript-font-size, 0.5em);\n font-weight: var(--tct-currency-medium-superscript-font-weight, 700);\n }\n}\n\n.currency-large {\n color: var(--tct-currency-large-color, inherit);\n font-size: var(--tct-currency-large-font-size, 70px);\n font-weight: var(--tct-currency-large-font-weight, 700);\n\n .superscript {\n vertical-align: super;\n color: var(--tct-currency-large-superscript-color, inherit);\n font-size: var(--tct-currency-large-superscript-font-size, 0.5em);\n font-weight: var(--tct-currency-large-superscript-font-weight, 800);\n }\n}\n","import { Component, Prop, Watch, h, ComponentInterface, Element, Host, Method } from '@stencil/core';\n/*\n @name Currency\n * @category Text\n * @summary Use for displaying formatted monetary amounts with proper locale.\n /\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n // #region Own Properties\n\n /* @private The parts of the formatted number. /\n formattedParts: Intl.NumberFormatPart[];\n /* @private The full currency for aria-label purposes. /\n readableCurrency: string;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* The amount you want formatted. /\n @Prop({ reflect: true })\n amount: number;\n\n /* Formats the `amount` to a specific currency. /\n @Prop({ reflect: true })\n currency: string = 'USD';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative amounts only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative amounts, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'accounting' \| 'always' \| 'auto' \| 'exceptZero' \| 'never' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large';\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /\n The variant controls how the currency is colored and exposes unique CSS overrides.\n * The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts.\n * The `masked` variant exposes the ability to use gradients and images to color the currency.\n /\n @Prop({ reflect: true })\n variant: 'debit' \| 'credit' \| 'masked';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatCurrency();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to retrieve the displayed currency value.\n \n @testOnly\n */\n @Method()\n async displayedMessageValue() {\n return this.hostElement.getAttribute('aria-label') \|\| '';\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('amount')\n @Watch('currency')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('variant')\n propsUpdated() {\n this.formatCurrency();\n }\n\n // #endregion\n // #region Local Methods\n\n get amountCore(): string {\n const { formattedParts, shouldSuperscriptFraction } = this;\n let amount: string = '';\n\n for (const part of formattedParts) {\n if (\n part.type === 'integer' \|\|\n part.type === 'decimal' \|\|\n part.type === 'group' \|\|\n part.type === 'literal'\n ) {\n amount += part.value;\n }\n }\n\n // removes trailing decimal point if superscripting the fraction\n if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n // removes end whitespace that breaks formatting\n amount = amount.trimEnd();\n\n return amount;\n }\n\n get currencyClasses(): string {\n const { size, slotSize, isNegativeAmount, variant } = this;\n const classes = ['currency'];\n const sizeClass = size ? size : slotSize;\n const sign = isNegativeAmount ? 'negative' : 'positive';\n\n classes.push(sign);\n if (!!variant) classes.push(variant);\n if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n return classes.join(' ');\n }\n\n get currencyIsFront(): boolean {\n const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n if (index === 0 \|\| index === 1) return true;\n return false;\n }\n\n get currencySymbol(): string {\n const { formattedParts, currencyIsFront } = this;\n const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n const symbol = formattedParts[currencyIndex].value;\n return currencyIsFront ? symbol : ' ' + symbol;\n }\n\n get fraction(): string {\n const { formattedParts } = this;\n const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n if (!fraction) return;\n\n return fraction.value;\n }\n\n get hasPlusMinusSign(): boolean {\n return this.formattedParts.some(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' \|\| part.type === 'plusSign'\n );\n }\n\n get isNegativeAmount(): boolean {\n const hasNegativePart = this.formattedParts.some((part: Intl.NumberFormatPart) => part.type === 'minusSign');\n const hasNegativeDash = String(this.amount).startsWith('-');\n return hasNegativePart \|\| hasNegativeDash;\n }\n\n get plusMinusSign(): string {\n const { formattedParts, hasPlusMinusSign } = this;\n if (!hasPlusMinusSign) return;\n\n const sign = formattedParts.find(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' \|\| part.type === 'plusSign'\n );\n return sign.value;\n }\n\n get shouldSuperscriptFraction(): boolean {\n const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n const commaBeforeFraction = this.formattedParts[fractionIndex - 1]?.value === ',';\n\n if (commaBeforeFraction \|\| !this.currencyIsFront \|\| this.sizeValue === 'small' \|\| !this.sizeProvided)\n return false;\n\n return true;\n }\n\n get shouldSuperscriptSymbol(): boolean {\n if (!this.currencyIsFront \|\| this.sizeProvided) return true;\n\n return false;\n }\n\n get sizeProvided(): boolean {\n return !!this.size \|\| !!this.slotSize;\n }\n\n get sizeValue(): string {\n return this.size ? this.size : this.slotSize;\n }\n\n formatCurrency() {\n const formatOptions = new Intl.NumberFormat(this.locale, {\n style: 'currency',\n currency: this.currency,\n signDisplay: this.signDisplay === 'accounting' ? 'never' : this.signDisplay,\n });\n this.formattedParts = formatOptions.formatToParts(this.amount);\n this.readableCurrency = formatOptions.format(this.amount);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const {\n hasPlusMinusSign,\n plusMinusSign,\n currencyIsFront,\n currencySymbol,\n shouldSuperscriptSymbol,\n amountCore,\n fraction,\n shouldSuperscriptFraction,\n readableCurrency,\n currencyClasses,\n signDisplay,\n isNegativeAmount,\n } = this;\n\n return (\n <Host aria-label={readableCurrency}>\n <div\n test-id=\"q2CurrencyInner\"\n class={currencyClasses}\n >\n {signDisplay === 'accounting' && isNegativeAmount && <span>{'('}</span>}\n {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n {currencyIsFront && (\n <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>\n )}\n <span>{amountCore}</span>\n <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n {!currencyIsFront && (\n <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>\n )}\n {signDisplay === 'accounting' && isNegativeAmount && <span>{')'}</span>}\n </div>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-data-table.js CHANGED Viewed

@@ -413,7 +413,7 @@ const Q2DataTable$1 = /*@__PURE__*/ proxyCustomElement(class Q2DataTable extends
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: 'ee7b81a0e49d8be037696fb1e275f90fe5547f8b', class: "container" }, h("table", { key: 'a5ee5ad79d6ed0b5e911611f9e15fb2130c69894' }, caption && h("caption", { key: 'ba4ea123b1b9fe1bda5734dcd789889db8d992b9', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '616c110e6636c4be4bb29feb636b1804cbdb622f', class: "container" }, h("table", { key: '131bda2f7b698a8c4d09d55be8e054363b2843b4' }, caption && h("caption", { key: '69efd5cdb86237ac380d17f8f4b43890727ef7f3', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)