q2-tecton-elements 1.41.0 → 1.41.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/cjs/{index-c385e32f.js → index-174843b4.js} +1 -1
  2. package/dist/cjs/{index-c385e32f.js.map → index-174843b4.js.map} +1 -1
  3. package/dist/cjs/q2-calendar.cjs.entry.js +1 -1
  4. package/dist/cjs/q2-checkbox.cjs.entry.js +2 -2
  5. package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
  6. package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
  7. package/dist/collection/components/q2-checkbox/q2-checkbox.css +27 -18
  8. package/dist/collection/components/q2-checkbox/q2-checkbox.js +1 -1
  9. package/dist/collection/components/q2-checkbox/q2-checkbox.js.map +1 -1
  10. package/dist/collection/components/q2-data-table/q2-data-table.js +6 -6
  11. package/dist/collection/components/q2-input/q2-input.js +1 -1
  12. package/dist/collection/components/q2-option-list/q2-option-list.js +2 -2
  13. package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +2 -2
  14. package/dist/components/q2-checkbox2.js +2 -2
  15. package/dist/components/q2-checkbox2.js.map +1 -1
  16. package/dist/esm/{index-f0dfb099.js → index-6e45a543.js} +1 -1
  17. package/dist/esm/{index-f0dfb099.js.map → index-6e45a543.js.map} +1 -1
  18. package/dist/esm/q2-calendar.entry.js +1 -1
  19. package/dist/esm/q2-checkbox.entry.js +2 -2
  20. package/dist/esm/q2-checkbox.entry.js.map +1 -1
  21. package/dist/esm/q2-relative-time.entry.js +1 -1
  22. package/dist/q2-tecton-elements/{p-3c42c90f.js → p-04978763.js} +1 -1
  23. package/dist/q2-tecton-elements/p-7990796e.entry.js +2 -0
  24. package/dist/q2-tecton-elements/p-7990796e.entry.js.map +1 -0
  25. package/dist/q2-tecton-elements/{p-e834679c.entry.js → p-adda0544.entry.js} +2 -2
  26. package/dist/q2-tecton-elements/{p-9889cdb8.entry.js → p-dd552b4d.entry.js} +2 -2
  27. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  28. package/dist/test/elements/q2-checkbox-test.e2e.js +117 -9
  29. package/dist/test/elements/q2-checkbox-test.e2e.js.map +1 -1
  30. package/package.json +3 -3
  31. package/dist/q2-tecton-elements/p-47a65dbe.entry.js +0 -2
  32. package/dist/q2-tecton-elements/p-47a65dbe.entry.js.map +0 -1
  33. /package/dist/q2-tecton-elements/{p-3c42c90f.js.map → p-04978763.js.map} +0 -0
  34. /package/dist/q2-tecton-elements/{p-e834679c.entry.js.map → p-adda0544.entry.js.map} +0 -0
  35. /package/dist/q2-tecton-elements/{p-9889cdb8.entry.js.map → p-dd552b4d.entry.js.map} +0 -0
  36. /package/dist/types/workspace/workspace/{_Gitlab_tecton-production_master → tecton-production_release_1.41.x}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
package/dist/cjs/q2-calendar.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index$2 = require('./index-a9257c74.js');
6
- const index$1 = require('./index-c385e32f.js');
6
+ const index$1 = require('./index-174843b4.js');
7
7
  const index = require('./index-6f69b6ab.js');
8
8
 
9
9
  function formatDateISO(value) {
package/dist/cjs/q2-checkbox.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-a9257c74.js');
6
6
  const index$1 = require('./index-6f69b6ab.js');
7
7
 
8
- const q2CheckboxCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--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, 46px));--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));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}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.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);cursor:pointer;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([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.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, 3px))));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}:host([checked]: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)));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([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]: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)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}: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(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]: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(--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][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][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][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][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle,:host(:hover) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle,:host(:not([checked]):hover) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
8
+ const q2CheckboxCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--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, 46px));--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));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}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.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);cursor:pointer;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([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.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, 3px))));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}: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)));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([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]: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)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}: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(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]: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(--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][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][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{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]:not([checked=false])) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]:not([checked=false])) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]:not([checked=false])) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}.toggle-hover-circle{stroke-width:0}:host(:focus-within) .toggle-hover-circle,:host(:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-hover-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-hover-circle,:host([has-error]:focus-within) .toggle-hover-circle,:host([has-error]:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}:host([checked]:not([checked=false])) .off,:host(:is(:not([checked]),[checked=false])) .on{opacity:0}";
9
9
  const Q2CheckboxStyle0 = q2CheckboxCss;
10
10
 
11
11
  const Q2Checkbox = class {
@@ -100,7 +100,7 @@ const Q2Checkbox = class {
100
100
  return (index.h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
101
101
  }
102
102
  generateToggleSVG() {
103
- return (index.h("div", { class: "toggle-svg" }, index.h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track", "test-id": "toggleTrack" }, index.h("rect", { width: "36", height: "14", rx: "7", x: "5" })), index.h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator", "test-id": "toggleIndicator" }, index.h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), index.h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), index.h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), index.h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
103
+ return (index.h("div", { class: "toggle-svg" }, index.h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track", "test-id": "toggleTrack" }, index.h("rect", { width: "36", height: "14", rx: "7", x: "5" })), index.h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator", "test-id": "toggleIndicator" }, index.h("circle", { class: "toggle-hover-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), index.h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), index.h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), index.h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), index.h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
104
104
  }
105
105
  get hostElement() { return index.getElement(this); }
106
106
  static get watchers() { return {
package/dist/cjs/q2-checkbox.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"q2-checkbox.entry.cjs.js","mappings":"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","names":["createGuid","handleAriaLabel","overrideFocus","isEventFromElement","h","loc"],"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), --tct-scale-2, --app-scale-2x, 10px)} 0')\n )};\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\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), 46px)};\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 :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}\n\n.label-text {\n grid-area: label;\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n :host([description]) & {\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]) & {\n font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n }\n :host(:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host(:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host([description]:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:hover) & {\n font-weight: var-list(\n --tct-checkbox-checked-hover-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n :host([description]:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:focus-within) & {\n font-weight: var-list(\n --tct-checkbox-checked-focused-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n label {\n cursor: not-allowed;\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 3px\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\n :host([checked]:not([type='favorite'])) & {\n stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n }\n\n :host([has-error]:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-error-box-shadow);\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-hover-box-shadow);\n }\n :host(:hover[has-error]: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 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 box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow\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(--comp-checkbox-focused-box-shadow);\n }\n :host(:focus-within[has-error]: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 --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: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), 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][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: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n }\n\n :host([checked][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][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][type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error][type='favorite'][checked]) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n\n :host([type='toggle']) & {\n stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n transition: opacity var(--comp-checkbox-tween);\n }\n :host([type='toggle'][checked]) & {\n stroke: var-list(\n var-prefixer(checkbox-toggle-checked-icon-stroke),\n --t-checkbox-text,\n --tct-white,\n --app-white,\n #ffffff\n );\n }\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.toggle-track {\n fill: var-list(\n var-prefixer(checkbox-toggle-track-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n height: 14px;\n width: 46px;\n\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n opacity: 0.5;\n }\n :host([has-error]) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n opacity: 0.5;\n }\n}\n\n.toggle-indicator {\n transition: left var(--comp-checkbox-tween);\n height: 30px;\n width: 30px;\n left: 0;\n border-radius: 50%;\n\n :host([checked]) & {\n left: 21px;\n }\n}\n\n.toggle-circle {\n fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n }\n\n :host(:focus-within) &,\n :host(:hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n stroke-width: 10px;\n stroke-opacity: 0.5;\n }\n\n :host(:not([checked]):focus-within) &,\n :host(:not([checked]):hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n }\n :host([has-error]) &,\n :host([has-error]:focus-within) &,\n :host([has-error]:hover) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n }\n}\n\n:host([checked]) .off,\n:host(:not([checked])) .on {\n opacity: 0;\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 /** Determine which side of the label the checkbox will render on. */\n @Prop({ reflect: true }) alignment: string;\n\n /** The state of the checkbox. This modifies the visual appearance of the element. */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /**\n * Populates a description that is displayed beneath the label.\n * @localizable\n */\n @Prop({ reflect: true }) description: string;\n\n /** Disables the checkbox and prevents interaction. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /** Determines if the component should display in an errant state. */\n @Prop({ reflect: true }) 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 }) 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 }) 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 }) label: string;\n\n /** A static string used to establish a symbolic relationship between checkboxes. */\n @Prop({ reflect: true }) name: string;\n\n /** The field is not interactive, but remains focusable. */\n @Prop({ reflect: true }) readonly: boolean;\n\n /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n /** A static reference value for the checkbox. */\n @Prop({ reflect: true }) value: string;\n\n /**\n * Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n */\n @Prop({ reflect: true }) groupDisabled: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n ////////// LIFECYCLE HOOKS ////////\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 //////// Host Element Events ////////\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 ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n ///// Event ////////\n /**\n * Emitted when the checkbox is toggled.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n ///// Actions ////////\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled || this.readonly;\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 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 /////// View Methods ///////\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={`${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 >\n {this.generateCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\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 generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n </svg>\n );\n }\n\n generateCheckBoxSVGFill() {\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 generateToggleSVG() {\n return (\n <div class=\"toggle-svg\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 46 14\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"36\"\n height=\"14\"\n rx=\"7\"\n x=\"5\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 30 30\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"18\"\n x2=\"18\"\n y2=\"12\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"12\"\n x2=\"18\"\n y2=\"18\"\n />\n <polyline\n class=\"on checked-fill\"\n points=\"11,16 14,19 18,12 14,19\"\n />\n </svg>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"q2-checkbox.entry.cjs.js","mappings":"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","names":["createGuid","handleAriaLabel","overrideFocus","isEventFromElement","h","loc"],"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), --tct-scale-2, --app-scale-2x, 10px)} 0')\n )};\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\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), 46px)};\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 :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}\n\n.label-text {\n grid-area: label;\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n :host([description]) & {\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:not([checked='false'])) & {\n font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n }\n :host(:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host(:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host([description]:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:not([checked='false']):hover) & {\n font-weight: var-list(\n --tct-checkbox-checked-hover-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n :host([description]:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:not([checked='false']):focus-within) & {\n font-weight: var-list(\n --tct-checkbox-checked-focused-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n label {\n cursor: not-allowed;\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 3px\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\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 fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n }\n\n :host([has-error]:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-error-box-shadow);\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-hover-box-shadow);\n }\n :host(:hover[has-error]: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 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 box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow\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(--comp-checkbox-focused-box-shadow);\n }\n :host(:focus-within[has-error]: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 --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][type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error][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 stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n\n :host([type='toggle']) & {\n stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n transition: opacity var(--comp-checkbox-tween);\n }\n :host([type='toggle'][checked]:not([checked='false'])) & {\n stroke: var-list(\n var-prefixer(checkbox-toggle-checked-icon-stroke),\n --t-checkbox-text,\n --tct-white,\n --app-white,\n #ffffff\n );\n }\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.toggle-track {\n fill: var-list(\n var-prefixer(checkbox-toggle-track-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n height: 14px;\n width: 46px;\n\n :host([checked]:not([checked='false'])) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n opacity: 0.5;\n }\n :host([has-error]) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n opacity: 0.5;\n }\n}\n\n.toggle-indicator {\n transition: left var(--comp-checkbox-tween);\n height: 30px;\n width: 30px;\n left: 0;\n border-radius: 50%;\n\n :host([checked]:not([checked='false'])) & {\n left: 21px;\n }\n}\n\n.toggle-circle {\n fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n :host([checked]:not([checked='false'])) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n }\n\n :host(:is(:not([checked]), [checked='false']):focus-within) &,\n :host(:is(:not([checked]), [checked='false']):hover) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n }\n :host([has-error]) &,\n :host([has-error]:focus-within) &,\n :host([has-error]:hover) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n }\n}\n\n.toggle-hover-circle {\n stroke-width: 0;\n\n :host(:focus-within) &,\n :host(:hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n stroke-width: 10px;\n stroke-opacity: 0.5;\n }\n\n :host(:is(:not([checked]), [checked='false']):focus-within) &,\n :host(:is(:not([checked]), [checked='false']):hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n }\n :host([has-error]) &,\n :host([has-error]:focus-within) &,\n :host([has-error]:hover) & {\n stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n }\n}\n\n:host([checked]:not([checked='false'])) .off,\n:host(:is(:not([checked]), [checked='false'])) .on {\n opacity: 0;\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 /** Determine which side of the label the checkbox will render on. */\n @Prop({ reflect: true }) alignment: string;\n\n /** The state of the checkbox. This modifies the visual appearance of the element. */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /**\n * Populates a description that is displayed beneath the label.\n * @localizable\n */\n @Prop({ reflect: true }) description: string;\n\n /** Disables the checkbox and prevents interaction. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /** Determines if the component should display in an errant state. */\n @Prop({ reflect: true }) 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 }) 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 }) 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 }) label: string;\n\n /** A static string used to establish a symbolic relationship between checkboxes. */\n @Prop({ reflect: true }) name: string;\n\n /** The field is not interactive, but remains focusable. */\n @Prop({ reflect: true }) readonly: boolean;\n\n /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n /** A static reference value for the checkbox. */\n @Prop({ reflect: true }) value: string;\n\n /**\n * Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n */\n @Prop({ reflect: true }) groupDisabled: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n ////////// LIFECYCLE HOOKS ////////\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 //////// Host Element Events ////////\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 ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n ///// Event ////////\n /**\n * Emitted when the checkbox is toggled.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n ///// Actions ////////\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled || this.readonly;\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 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 /////// View Methods ///////\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={`${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 >\n {this.generateCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\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 generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n </svg>\n );\n }\n\n generateCheckBoxSVGFill() {\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 generateToggleSVG() {\n return (\n <div class=\"toggle-svg\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 46 14\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"36\"\n height=\"14\"\n rx=\"7\"\n x=\"5\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 30 30\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-hover-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <circle\n class=\"toggle-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"18\"\n x2=\"18\"\n y2=\"12\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"12\"\n x2=\"18\"\n y2=\"18\"\n />\n <polyline\n class=\"on checked-fill\"\n points=\"11,16 14,19 18,12 14,19\"\n />\n </svg>\n </div>\n );\n }\n}\n"],"version":3}
package/dist/cjs/q2-relative-time.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-a9257c74.js');
6
- const index$1 = require('./index-c385e32f.js');
6
+ const index$1 = require('./index-174843b4.js');
7
7
 
8
8
  const q2RelativeTimeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
9
9
  const Q2RelativeTimeStyle0 = q2RelativeTimeCss;
package/dist/collection/components/q2-checkbox/q2-checkbox.css CHANGED
@@ -119,7 +119,7 @@ button {
119
119
  :host([description]) .label-text {
120
120
  font-weight: var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600));
121
121
  }
122
- :host([checked]) .label-text {
122
+ :host([checked]:not([checked=false])) .label-text {
123
123
  font-weight: var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600));
124
124
  }
125
125
  :host(:hover) .label-text {
@@ -131,13 +131,13 @@ button {
131
131
  :host([description]:hover) .label-text {
132
132
  font-weight: var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)));
133
133
  }
134
- :host([checked]:hover) .label-text {
134
+ :host([checked]:not([checked=false]):hover) .label-text {
135
135
  font-weight: var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)));
136
136
  }
137
137
  :host([description]:focus-within) .label-text {
138
138
  font-weight: var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)));
139
139
  }
140
- :host([checked]:focus-within) .label-text {
140
+ :host([checked]:not([checked=false]):focus-within) .label-text {
141
141
  font-weight: var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)));
142
142
  }
143
143
 
@@ -175,7 +175,7 @@ label {
175
175
  stroke-width: var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));
176
176
  flex-shrink: 0;
177
177
  }
178
- :host([checked]:not([type=favorite])) .checkbox-icon {
178
+ :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon {
179
179
  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));
180
180
  fill: var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
181
181
  }
@@ -218,24 +218,24 @@ label {
218
218
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));
219
219
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
220
220
  }
221
- :host([checked][type=favorite]) .checkbox-icon {
221
+ :host([checked]:not([checked=false])[type=favorite]) .checkbox-icon {
222
222
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));
223
223
  fill: var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));
224
224
  transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
225
225
  }
226
- :host([checked][type=favorite]:hover) .checkbox-icon {
226
+ :host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon {
227
227
  --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)));
228
228
  --tct-icon-fill-primary: var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));
229
229
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
230
230
  }
231
- :host([checked][type=favorite]:focus-within) .checkbox-icon {
231
+ :host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon {
232
232
  --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)));
233
233
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
234
234
  }
235
235
  :host([has-error][type=favorite]) .checkbox-icon {
236
236
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color));
237
237
  }
238
- :host([has-error][type=favorite][checked]) .checkbox-icon {
238
+ :host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon {
239
239
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color));
240
240
  }
241
241
 
@@ -252,7 +252,7 @@ label {
252
252
  stroke: var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));
253
253
  transition: opacity var(--comp-checkbox-tween);
254
254
  }
255
- :host([type=toggle][checked]) .checked-fill {
255
+ :host([type=toggle][checked]:not([checked=false])) .checked-fill {
256
256
  stroke: var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))));
257
257
  }
258
258
 
@@ -279,7 +279,7 @@ label {
279
279
  height: 14px;
280
280
  width: 46px;
281
281
  }
282
- :host([checked]) .toggle-track {
282
+ :host([checked]:not([checked=false])) .toggle-track {
283
283
  fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
284
284
  opacity: 0.5;
285
285
  }
@@ -295,30 +295,39 @@ label {
295
295
  left: 0;
296
296
  border-radius: 50%;
297
297
  }
298
- :host([checked]) .toggle-indicator {
298
+ :host([checked]:not([checked=false])) .toggle-indicator {
299
299
  left: 21px;
300
300
  }
301
301
 
302
302
  .toggle-circle {
303
303
  fill: var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)));
304
304
  }
305
- :host([checked]) .toggle-circle {
305
+ :host([checked]:not([checked=false])) .toggle-circle {
306
306
  fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
307
307
  }
308
- :host(:focus-within) .toggle-circle, :host(:hover) .toggle-circle {
308
+ :host(:is(:not([checked]), [checked=false]):focus-within) .toggle-circle, :host(:is(:not([checked]), [checked=false]):hover) .toggle-circle {
309
+ fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
310
+ }
311
+ :host([has-error]) .toggle-circle, :host([has-error]:focus-within) .toggle-circle, :host([has-error]:hover) .toggle-circle {
312
+ fill: var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));
313
+ }
314
+
315
+ .toggle-hover-circle {
316
+ stroke-width: 0;
317
+ }
318
+ :host(:focus-within) .toggle-hover-circle, :host(:hover) .toggle-hover-circle {
309
319
  stroke: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
310
320
  stroke-width: 10px;
311
321
  stroke-opacity: 0.5;
312
322
  }
313
- :host(:not([checked]):focus-within) .toggle-circle, :host(:not([checked]):hover) .toggle-circle {
323
+ :host(:is(:not([checked]), [checked=false]):focus-within) .toggle-hover-circle, :host(:is(:not([checked]), [checked=false]):hover) .toggle-hover-circle {
314
324
  stroke: var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)));
315
325
  }
316
- :host([has-error]) .toggle-circle, :host([has-error]:focus-within) .toggle-circle, :host([has-error]:hover) .toggle-circle {
317
- fill: var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));
326
+ :host([has-error]) .toggle-hover-circle, :host([has-error]:focus-within) .toggle-hover-circle, :host([has-error]:hover) .toggle-hover-circle {
318
327
  stroke: var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));
319
328
  }
320
329
 
321
- :host([checked]) .off,
322
- :host(:not([checked])) .on {
330
+ :host([checked]:not([checked=false])) .off,
331
+ :host(:is(:not([checked]), [checked=false])) .on {
323
332
  opacity: 0;
324
333
  }
package/dist/collection/components/q2-checkbox/q2-checkbox.js CHANGED
@@ -90,7 +90,7 @@ export class Q2Checkbox {
90
90
  return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
91
91
  }
92
92
  generateToggleSVG() {
93
- return (h("div", { class: "toggle-svg" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track", "test-id": "toggleTrack" }, h("rect", { width: "36", height: "14", rx: "7", x: "5" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
93
+ return (h("div", { class: "toggle-svg" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track", "test-id": "toggleTrack" }, h("rect", { width: "36", height: "14", rx: "7", x: "5" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("circle", { class: "toggle-hover-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
94
94
  }
95
95
  static get is() { return "q2-checkbox"; }
96
96
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/q2-checkbox/q2-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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 /** Determine which side of the label the checkbox will render on. */\n @Prop({ reflect: true }) alignment: string;\n\n /** The state of the checkbox. This modifies the visual appearance of the element. */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /**\n * Populates a description that is displayed beneath the label.\n * @localizable\n */\n @Prop({ reflect: true }) description: string;\n\n /** Disables the checkbox and prevents interaction. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /** Determines if the component should display in an errant state. */\n @Prop({ reflect: true }) 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 }) 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 }) 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 }) label: string;\n\n /** A static string used to establish a symbolic relationship between checkboxes. */\n @Prop({ reflect: true }) name: string;\n\n /** The field is not interactive, but remains focusable. */\n @Prop({ reflect: true }) readonly: boolean;\n\n /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n /** A static reference value for the checkbox. */\n @Prop({ reflect: true }) value: string;\n\n /**\n * Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n */\n @Prop({ reflect: true }) groupDisabled: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n ////////// LIFECYCLE HOOKS ////////\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 //////// Host Element Events ////////\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 ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n ///// Event ////////\n /**\n * Emitted when the checkbox is toggled.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n ///// Actions ////////\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled || this.readonly;\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 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 /////// View Methods ///////\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={`${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 >\n {this.generateCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\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 generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n </svg>\n );\n }\n\n generateCheckBoxSVGFill() {\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 generateToggleSVG() {\n return (\n <div class=\"toggle-svg\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 46 14\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"36\"\n height=\"14\"\n rx=\"7\"\n x=\"5\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 30 30\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"18\"\n x2=\"18\"\n y2=\"12\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"12\"\n x2=\"18\"\n y2=\"18\"\n />\n <polyline\n class=\"on checked-fill\"\n points=\"11,16 14,19 18,12 14,19\"\n />\n </svg>\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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 /** Determine which side of the label the checkbox will render on. */\n @Prop({ reflect: true }) alignment: string;\n\n /** The state of the checkbox. This modifies the visual appearance of the element. */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /**\n * Populates a description that is displayed beneath the label.\n * @localizable\n */\n @Prop({ reflect: true }) description: string;\n\n /** Disables the checkbox and prevents interaction. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /** Determines if the component should display in an errant state. */\n @Prop({ reflect: true }) 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 }) 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 }) 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 }) label: string;\n\n /** A static string used to establish a symbolic relationship between checkboxes. */\n @Prop({ reflect: true }) name: string;\n\n /** The field is not interactive, but remains focusable. */\n @Prop({ reflect: true }) readonly: boolean;\n\n /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n /** A static reference value for the checkbox. */\n @Prop({ reflect: true }) value: string;\n\n /**\n * Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n */\n @Prop({ reflect: true }) groupDisabled: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n ////////// LIFECYCLE HOOKS ////////\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 //////// Host Element Events ////////\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 ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n ///// Event ////////\n /**\n * Emitted when the checkbox is toggled.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n ///// Actions ////////\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled || this.readonly;\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 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 /////// View Methods ///////\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={`${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 >\n {this.generateCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\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 generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n </svg>\n );\n }\n\n generateCheckBoxSVGFill() {\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 generateToggleSVG() {\n return (\n <div class=\"toggle-svg\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 46 14\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"36\"\n height=\"14\"\n rx=\"7\"\n x=\"5\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 30 30\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-hover-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <circle\n class=\"toggle-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"18\"\n x2=\"18\"\n y2=\"12\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"12\"\n x2=\"18\"\n y2=\"18\"\n />\n <polyline\n class=\"on checked-fill\"\n points=\"11,16 14,19 18,12 14,19\"\n />\n </svg>\n </div>\n );\n }\n}\n"]}
package/dist/collection/components/q2-data-table/q2-data-table.js CHANGED
@@ -446,7 +446,7 @@ export class Q2DataTable {
446
446
  "references": {
447
447
  "Q2DataTableHeader": {
448
448
  "location": "local",
449
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
449
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
450
450
  "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
451
451
  }
452
452
  }
@@ -524,7 +524,7 @@ export class Q2DataTable {
524
524
  "references": {
525
525
  "Q2DataTableRow": {
526
526
  "location": "local",
527
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
527
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
528
528
  "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableRow"
529
529
  }
530
530
  }
@@ -624,7 +624,7 @@ export class Q2DataTable {
624
624
  "references": {
625
625
  "Q2DataTableSerializedRow": {
626
626
  "location": "local",
627
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
627
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
628
628
  "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
629
629
  }
630
630
  }
@@ -645,7 +645,7 @@ export class Q2DataTable {
645
645
  "references": {
646
646
  "Q2DataTableSerializedRow": {
647
647
  "location": "local",
648
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
648
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
649
649
  "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
650
650
  }
651
651
  }
@@ -666,7 +666,7 @@ export class Q2DataTable {
666
666
  "references": {
667
667
  "Q2DataTableSerializedRow": {
668
668
  "location": "local",
669
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
669
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
670
670
  "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
671
671
  }
672
672
  }
@@ -687,7 +687,7 @@ export class Q2DataTable {
687
687
  "references": {
688
688
  "Q2DataTableHeader": {
689
689
  "location": "local",
690
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
690
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
691
691
  "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
692
692
  }
693
693
  }
package/dist/collection/components/q2-input/q2-input.js CHANGED
@@ -1175,7 +1175,7 @@ export class Q2Input {
1175
1175
  "references": {
1176
1176
  "InputType": {
1177
1177
  "location": "local",
1178
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-input/q2-input.tsx",
1178
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-input/q2-input.tsx",
1179
1179
  "id": "src/components/q2-input/q2-input.tsx::InputType"
1180
1180
  }
1181
1181
  }
package/dist/collection/components/q2-option-list/q2-option-list.js CHANGED
@@ -659,7 +659,7 @@ export class Q2OptionList {
659
659
  "references": {
660
660
  "IOptionValue": {
661
661
  "location": "local",
662
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
662
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
663
663
  "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
664
664
  }
665
665
  }
@@ -731,7 +731,7 @@ export class Q2OptionList {
731
731
  "references": {
732
732
  "IOptionValue": {
733
733
  "location": "local",
734
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
734
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
735
735
  "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
736
736
  }
737
737
  }
package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js CHANGED
@@ -197,7 +197,7 @@ export class Q2StepperPane {
197
197
  "references": {
198
198
  "IStepperPaneEvent": {
199
199
  "location": "local",
200
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
200
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
201
201
  "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
202
202
  }
203
203
  }
@@ -218,7 +218,7 @@ export class Q2StepperPane {
218
218
  "references": {
219
219
  "IStepperPaneEvent": {
220
220
  "location": "local",
221
- "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
221
+ "path": "/workspace/workspace/tecton-production_release_1.41.x/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
222
222
  "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
223
223
  }
224
224
  }