q2-tecton-elements 1.63.0 → 1.63.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle-report.json +7 -7
- package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-checkbox.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-data-table.cjs.entry.js +24 -4
- package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-data-table.entry.cjs.js.map +1 -1
- package/dist/collection/components/q2-checkbox/q2-checkbox.css +1 -1
- package/dist/collection/components/q2-data-table/q2-data-table.js +24 -4
- package/dist/collection/components/q2-data-table/q2-data-table.js.map +1 -1
- package/dist/components/q2-checkbox2.js +1 -1
- package/dist/components/q2-checkbox2.js.map +1 -1
- package/dist/components/q2-data-table.js +24 -4
- package/dist/components/q2-data-table.js.map +1 -1
- package/dist/esm/q2-checkbox.entry.js +1 -1
- package/dist/esm/q2-checkbox.entry.js.map +1 -1
- package/dist/esm/q2-data-table.entry.js +24 -4
- package/dist/esm/q2-data-table.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.js +27 -7
- package/dist/q2-tecton-elements/q2-data-table.entry.js.map +1 -1
- package/dist/types/components/q2-data-table/q2-data-table.d.ts +2 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"q2-checkbox.entry.js","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 --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-color: #{var-list(\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n --t-a11y-active-gray-color-AA,\n #404040\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 :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: center;\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 cursor: pointer;\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\n label {\n line-height: var-list(--tct-checkbox-label-line-height, 24px);\n .label-content {\n display: inline-block;\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 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 :host(:not([type='toggle'])) & {\n cursor: pointer;\n }\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(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n\n rect {\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-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(: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-checked-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(--tct-checkbox-checkmark-stroke-color, --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\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-list(--tct-checkbox-toggle-track-color, transparent);\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 }\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 }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\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 }\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 }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n }\n }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\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 }\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 }\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 }\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 }\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 { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\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 inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\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 * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\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 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 this.change.emit({\n value,\n checked,\n });\n this.inputElement.focus();\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 />\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 const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\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-label={loc(this.label)}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={labelId}\n aria-hidden=\"true\"\n >\n <div\n class=\"label-content\"\n id={labelId}\n >\n {loc(this.label)}\n <slot />\n </div>\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"q2-checkbox.entry.js","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 --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-color: #{var-list(\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n --t-a11y-active-gray-color-AA,\n #404040\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 :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: center;\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 cursor: pointer;\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\n label {\n line-height: var-list(--tct-checkbox-label-line-height, 24px);\n .label-content {\n display: inline;\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 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 :host(:not([type='toggle'])) & {\n cursor: pointer;\n }\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(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n\n rect {\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-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(: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-checked-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(--tct-checkbox-checkmark-stroke-color, --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\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-list(--tct-checkbox-toggle-track-color, transparent);\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 }\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 }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\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 }\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 }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n }\n }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\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 }\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 }\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 }\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 }\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 { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\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 inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\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 * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\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 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 this.change.emit({\n value,\n checked,\n });\n this.inputElement.focus();\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 />\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 const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\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-label={loc(this.label)}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={labelId}\n aria-hidden=\"true\"\n >\n <div\n class=\"label-content\"\n id={labelId}\n >\n {loc(this.label)}\n <slot />\n </div>\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,i8nBAAi8nB;;MCI18nB,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,YAAY,UAAU,EAAE,EAAE;;AAsBxC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAsBxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA8GzB,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;AAEvC,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,KAAK;gBACL,OAAO;AACV,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7B,SAAC;AAoMJ;;;IAnQG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAGzB,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;;;;AAO5D,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,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;;;;IAsBvC,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;;AAGV,QAAA,QACI,CACI,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,oBAAoB,EAC7B,CAAA;;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;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG;AACzE,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,EAAA,kBAAA,EACjB,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,kBAChD,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,SAAS,GAAG,CAAG,EAAA,IAAI,CAAC,QAAQ,EAAE,EAC1E,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,aAClB,yBAAyB,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACnB,CAAA,EACF,CACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAC,eAAe,EACb,SAAA,EAAA,gBAAgB,gBACZ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAE1B,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,OAAO,iBACJ,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,eAAe,EACrB,EAAE,EAAE,OAAO,EAAA,EAEV,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAChB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACF,CACN,EACL,IAAI,CAAC,WAAW,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,kBAAkB,EAChB,SAAA,EAAA,qBAAqB,EAC7B,EAAE,EAAC,aAAa,EAAA,EAEf,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CACpB,CACT,CACC;;;;;;;;;;;"}
|
|
@@ -252,7 +252,7 @@ const Q2DataTable = class {
|
|
|
252
252
|
// tracks if the select-all checkbox should be visually updated as the `rows` are built
|
|
253
253
|
let isAllSelected = true;
|
|
254
254
|
let isIndeterminate = false;
|
|
255
|
-
const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {
|
|
255
|
+
const serializedRows = rows.map(({ id, cells, selected, expanded, disabled, selectAriaLabel }) => {
|
|
256
256
|
const serializedCells = Object.entries(cells).reduce((accum, [cellKey, cellData]) => {
|
|
257
257
|
const header = mappedHeaders[cellKey] || {};
|
|
258
258
|
const { align, type = 'text', lineClamp, verticalAlign } = header;
|
|
@@ -276,7 +276,7 @@ const Q2DataTable = class {
|
|
|
276
276
|
isAllSelected = false;
|
|
277
277
|
if (!isAllSelected && selected)
|
|
278
278
|
isIndeterminate = true;
|
|
279
|
-
return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, expanded: !!expanded, disabled: !!disabled, cells: serializedCells });
|
|
279
|
+
return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, expanded: !!expanded, disabled: !!disabled, selectAriaLabel, cells: serializedCells });
|
|
280
280
|
});
|
|
281
281
|
const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);
|
|
282
282
|
const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';
|
|
@@ -313,6 +313,26 @@ const Q2DataTable = class {
|
|
|
313
313
|
get selectedRows() {
|
|
314
314
|
return this.serializedRows.filter(({ selected }) => selected);
|
|
315
315
|
}
|
|
316
|
+
getSelectRowLabel(row) {
|
|
317
|
+
const { selectAriaLabel, cells } = row;
|
|
318
|
+
if (typeof selectAriaLabel === 'string') {
|
|
319
|
+
return selectAriaLabel;
|
|
320
|
+
}
|
|
321
|
+
if (Array.isArray(selectAriaLabel)) {
|
|
322
|
+
const labelParts = selectAriaLabel.map(key => {
|
|
323
|
+
const cell = cells[key];
|
|
324
|
+
const header = this.serializedHeaders.find(h => h.key === key);
|
|
325
|
+
if ((cell === null || cell === void 0 ? void 0 : cell.value) === undefined || !header)
|
|
326
|
+
return undefined;
|
|
327
|
+
return `${header.title} ${cell.value}`;
|
|
328
|
+
});
|
|
329
|
+
const allKeysValid = labelParts.every(part => part !== undefined);
|
|
330
|
+
if (allKeysValid) {
|
|
331
|
+
return `Select row for ${labelParts.join(', ')}`;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
return loc('tecton.element.dataTable.selectRow');
|
|
335
|
+
}
|
|
316
336
|
sortRows(rows, header) {
|
|
317
337
|
const { key, sorted } = header;
|
|
318
338
|
const direction = sorted || 'ASC';
|
|
@@ -331,7 +351,7 @@ const Q2DataTable = class {
|
|
|
331
351
|
// #region Render Methods
|
|
332
352
|
render() {
|
|
333
353
|
const { caption } = this;
|
|
334
|
-
return (h("div", { key: '
|
|
354
|
+
return (h("div", { key: '4fea1e90fb31439532b0c21282ea48f9dad59c1a', class: "container" }, h("table", { key: '9eacd521fb43832d653682e97dba45a2e6cfbcef' }, caption && h("caption", { key: 'e772f4c4c1cc012c489b5723e64c72887cffddd8', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
|
|
335
355
|
}
|
|
336
356
|
renderCellContent(cell) {
|
|
337
357
|
if (!cell)
|
|
@@ -430,7 +450,7 @@ const Q2DataTable = class {
|
|
|
430
450
|
if (row.selected)
|
|
431
451
|
rowClasses.push('selected');
|
|
432
452
|
const rowIsClickable = clickable || rowHasExpandableSlot;
|
|
433
|
-
return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label:
|
|
453
|
+
return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: this.getSelectRowLabel(row), "hide-label": true, checked: row.selected, disabled: (isSelectDisabled && row !== selectedRow) || row.disabled, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
|
|
434
454
|
const cell = row.cells[key];
|
|
435
455
|
const lineClamp = cell === null || cell === void 0 ? void 0 : cell.lineClamp;
|
|
436
456
|
const cellAlign = cell === null || cell === void 0 ? void 0 : cell.align;
|