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.
Files changed (26) hide show
  1. package/dist/bundle-report.json +7 -7
  2. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  3. package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
  4. package/dist/cjs/q2-checkbox.entry.cjs.js.map +1 -1
  5. package/dist/cjs/q2-data-table.cjs.entry.js +24 -4
  6. package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
  7. package/dist/cjs/q2-data-table.entry.cjs.js.map +1 -1
  8. package/dist/collection/components/q2-checkbox/q2-checkbox.css +1 -1
  9. package/dist/collection/components/q2-data-table/q2-data-table.js +24 -4
  10. package/dist/collection/components/q2-data-table/q2-data-table.js.map +1 -1
  11. package/dist/components/q2-checkbox2.js +1 -1
  12. package/dist/components/q2-checkbox2.js.map +1 -1
  13. package/dist/components/q2-data-table.js +24 -4
  14. package/dist/components/q2-data-table.js.map +1 -1
  15. package/dist/esm/q2-checkbox.entry.js +1 -1
  16. package/dist/esm/q2-checkbox.entry.js.map +1 -1
  17. package/dist/esm/q2-data-table.entry.js +24 -4
  18. package/dist/esm/q2-data-table.entry.js.map +1 -1
  19. package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map +1 -1
  20. package/dist/q2-tecton-elements/q2-checkbox.entry.js +1 -1
  21. package/dist/q2-tecton-elements/q2-checkbox.entry.js.map +1 -1
  22. package/dist/q2-tecton-elements/q2-data-table.entry.esm.js.map +1 -1
  23. package/dist/q2-tecton-elements/q2-data-table.entry.js +27 -7
  24. package/dist/q2-tecton-elements/q2-data-table.entry.js.map +1 -1
  25. package/dist/types/components/q2-data-table/q2-data-table.d.ts +2 -0
  26. package/package.json +3 -3
package/dist/q2-tecton-elements/q2-checkbox.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as o, c as e, h as c, g as t } from "./index-CGkHOjh1.js";
2
2
 
3
3
  import { c as r, d as a, o as i, i as s, l as h } from "./index-YJ5sXwiE.js";
4
4
 
5
- const l = '*{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex;cursor:pointer}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px)}.label-text label .label-content{display:inline-block}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}:host(:not([type=toggle])) label{cursor:pointer}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--tct-checkbox-toggle-track-color, transparent);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
5
+ const l = '*{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex;cursor:pointer}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px)}.label-text label .label-content{display:inline}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}:host(:not([type=toggle])) label{cursor:pointer}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--tct-checkbox-toggle-track-color, transparent);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
6
6
 
7
7
  const d = class {
8
8
  constructor(c) {
package/dist/q2-tecton-elements/q2-checkbox.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["q2CheckboxCss","Q2Checkbox","constructor","hostRef","this","_id","createGuid","checked","hasError","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","renderCheckboxSVG","type","h","class","renderToggleSVG","width","height","viewBox","focusable","x","y","rx","indeterminate","renderCheckBoxSVGFill","x1","y1","x2","y2","points","id","maskUnits","fill","stroke","cx","cy","r","mask","render","textLabelClasses","hideLabel","push","labelId","key","ref","el","description","undefined","groupDisabled","name","onClick","htmlFor","loc","label","join"],"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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["q2CheckboxCss","Q2Checkbox","constructor","hostRef","this","_id","createGuid","checked","hasError","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","renderCheckboxSVG","type","h","class","renderToggleSVG","width","height","viewBox","focusable","x","y","rx","indeterminate","renderCheckBoxSVGFill","x1","y1","x2","y2","points","id","maskUnits","fill","stroke","cx","cy","r","mask","render","textLabelClasses","hideLabel","push","labelId","key","ref","el","description","undefined","groupDisabled","name","onClick","htmlFor","loc","label","join"],"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"],"mappings":"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","ignoreList":[]}