q2-tecton-elements 1.38.2 → 1.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (399) hide show
  1. package/dist/cjs/click-elsewhere_2.cjs.entry.js +1 -1
  2. package/dist/cjs/click-elsewhere_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/{index-09c712ea.js → index-9113a9da.js} +2 -2
  4. package/dist/cjs/{index-09c712ea.js.map → index-9113a9da.js.map} +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  7. package/dist/cjs/q2-action-sheet.cjs.entry.js.map +1 -1
  8. package/dist/cjs/q2-btn_2.cjs.entry.js +2 -2
  9. package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
  10. package/dist/cjs/q2-calendar.cjs.entry.js +11 -2
  11. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  12. package/dist/cjs/q2-card.cjs.entry.js +20 -23
  13. package/dist/cjs/q2-card.cjs.entry.js.map +1 -1
  14. package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
  15. package/dist/cjs/q2-carousel-pane.cjs.entry.js.map +1 -1
  16. package/dist/cjs/q2-carousel.cjs.entry.js +30 -4
  17. package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
  18. package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-chart-area.cjs.entry.js.map +1 -1
  20. package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
  21. package/dist/cjs/q2-chart-donut.cjs.entry.js +14 -14
  22. package/dist/cjs/q2-chart-donut.cjs.entry.js.map +1 -1
  23. package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
  24. package/dist/cjs/q2-checkbox-group.cjs.entry.js.map +1 -1
  25. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  26. package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
  27. package/dist/cjs/q2-data-table.cjs.entry.js +43 -21
  28. package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
  29. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  30. package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
  31. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-editable-field.cjs.entry.js.map +1 -1
  33. package/dist/cjs/q2-icon.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-input.cjs.entry.js +6 -3
  35. package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
  36. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  37. package/dist/cjs/q2-message.cjs.entry.js +1 -1
  38. package/dist/cjs/q2-month-picker.cjs.entry.js +1 -1
  39. package/dist/cjs/q2-optgroup_2.cjs.entry.js +1 -1
  40. package/dist/cjs/q2-optgroup_2.cjs.entry.js.map +1 -1
  41. package/dist/cjs/q2-option-list.cjs.entry.js +1 -1
  42. package/dist/cjs/q2-option-list.cjs.entry.js.map +1 -1
  43. package/dist/cjs/q2-pagination.cjs.entry.js +1 -1
  44. package/dist/cjs/q2-pagination.cjs.entry.js.map +1 -1
  45. package/dist/cjs/q2-pill.cjs.entry.js +1 -1
  46. package/dist/cjs/q2-pill.cjs.entry.js.map +1 -1
  47. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  48. package/dist/cjs/q2-radio-group.cjs.entry.js.map +1 -1
  49. package/dist/cjs/q2-radio.cjs.entry.js +1 -1
  50. package/dist/cjs/q2-radio.cjs.entry.js.map +1 -1
  51. package/dist/cjs/q2-section.cjs.entry.js +2 -2
  52. package/dist/cjs/q2-section.cjs.entry.js.map +1 -1
  53. package/dist/cjs/q2-select.cjs.entry.js +1 -1
  54. package/dist/cjs/q2-select.cjs.entry.js.map +1 -1
  55. package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
  56. package/dist/cjs/q2-stepper-pane.cjs.entry.js.map +1 -1
  57. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +4 -4
  58. package/dist/cjs/q2-stepper-vertical.cjs.entry.js.map +1 -1
  59. package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
  60. package/dist/cjs/q2-stepper.cjs.entry.js.map +1 -1
  61. package/dist/cjs/q2-tab-container.cjs.entry.js +1 -1
  62. package/dist/cjs/q2-tab-container.cjs.entry.js.map +1 -1
  63. package/dist/cjs/q2-tab-pane.cjs.entry.js.map +1 -1
  64. package/dist/cjs/q2-tag.cjs.entry.js +1 -1
  65. package/dist/cjs/q2-tag.cjs.entry.js.map +1 -1
  66. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  67. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  68. package/dist/cjs/q2-textarea.cjs.entry.js.map +1 -1
  69. package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
  70. package/dist/cjs/tecton-tab-pane.cjs.entry.js.map +1 -1
  71. package/dist/collection/components/click-elsewhere/index.js +1 -1
  72. package/dist/collection/components/click-elsewhere/index.js.map +1 -1
  73. package/dist/collection/components/q2-action-sheet/index.js +6 -3
  74. package/dist/collection/components/q2-action-sheet/index.js.map +1 -1
  75. package/dist/collection/components/q2-btn/styles.css +11 -11
  76. package/dist/collection/components/q2-calendar/index.js +23 -11
  77. package/dist/collection/components/q2-calendar/index.js.map +1 -1
  78. package/dist/collection/components/q2-card/index.js +21 -27
  79. package/dist/collection/components/q2-card/index.js.map +1 -1
  80. package/dist/collection/components/q2-card/styles.css +57 -0
  81. package/dist/collection/components/q2-carousel/index.js +33 -5
  82. package/dist/collection/components/q2-carousel/index.js.map +1 -1
  83. package/dist/collection/components/q2-carousel-pane/index.js +8 -4
  84. package/dist/collection/components/q2-carousel-pane/index.js.map +1 -1
  85. package/dist/collection/components/q2-chart-area/index.js +9 -4
  86. package/dist/collection/components/q2-chart-area/index.js.map +1 -1
  87. package/dist/collection/components/q2-chart-donut/index.js +58 -22
  88. package/dist/collection/components/q2-chart-donut/index.js.map +1 -1
  89. package/dist/collection/components/q2-checkbox/index.js +5 -2
  90. package/dist/collection/components/q2-checkbox/index.js.map +1 -1
  91. package/dist/collection/components/q2-checkbox-group/index.js +12 -5
  92. package/dist/collection/components/q2-checkbox-group/index.js.map +1 -1
  93. package/dist/collection/components/q2-data-table/index.js +73 -29
  94. package/dist/collection/components/q2-data-table/index.js.map +1 -1
  95. package/dist/collection/components/q2-editable-field/index.js +6 -6
  96. package/dist/collection/components/q2-editable-field/index.js.map +1 -1
  97. package/dist/collection/components/q2-input/formatting/phone.js +1 -1
  98. package/dist/collection/components/q2-input/formatting/phone.js.map +1 -1
  99. package/dist/collection/components/q2-input/index.js +23 -19
  100. package/dist/collection/components/q2-input/index.js.map +1 -1
  101. package/dist/collection/components/q2-input/types.js.map +1 -1
  102. package/dist/collection/components/q2-option/index.js +5 -2
  103. package/dist/collection/components/q2-option/index.js.map +1 -1
  104. package/dist/collection/components/q2-option-list/index.js +15 -9
  105. package/dist/collection/components/q2-option-list/index.js.map +1 -1
  106. package/dist/collection/components/q2-pagination/index.js +8 -5
  107. package/dist/collection/components/q2-pagination/index.js.map +1 -1
  108. package/dist/collection/components/q2-pill/index.js +5 -2
  109. package/dist/collection/components/q2-pill/index.js.map +1 -1
  110. package/dist/collection/components/q2-popover/index.js +1 -1
  111. package/dist/collection/components/q2-popover/index.js.map +1 -1
  112. package/dist/collection/components/q2-radio/index.js +3 -3
  113. package/dist/collection/components/q2-radio/index.js.map +1 -1
  114. package/dist/collection/components/q2-radio-group/index.js +7 -4
  115. package/dist/collection/components/q2-radio-group/index.js.map +1 -1
  116. package/dist/collection/components/q2-section/index.js +7 -4
  117. package/dist/collection/components/q2-section/index.js.map +1 -1
  118. package/dist/collection/components/q2-section/styles.css +8 -6
  119. package/dist/collection/components/q2-select/index.js +8 -5
  120. package/dist/collection/components/q2-select/index.js.map +1 -1
  121. package/dist/collection/components/q2-stepper/index.js +5 -2
  122. package/dist/collection/components/q2-stepper/index.js.map +1 -1
  123. package/dist/collection/components/q2-stepper-pane/index.js +11 -8
  124. package/dist/collection/components/q2-stepper-pane/index.js.map +1 -1
  125. package/dist/collection/components/q2-stepper-vertical/index.js +13 -6
  126. package/dist/collection/components/q2-stepper-vertical/index.js.map +1 -1
  127. package/dist/collection/components/q2-tab-container/index.js +14 -8
  128. package/dist/collection/components/q2-tab-container/index.js.map +1 -1
  129. package/dist/collection/components/q2-tab-pane/index.js +5 -2
  130. package/dist/collection/components/q2-tab-pane/index.js.map +1 -1
  131. package/dist/collection/components/q2-tag/index.js +1 -1
  132. package/dist/collection/components/q2-tag/index.js.map +1 -1
  133. package/dist/collection/components/q2-textarea/index.js +14 -8
  134. package/dist/collection/components/q2-textarea/index.js.map +1 -1
  135. package/dist/collection/components/tecton-tab-pane/index.js +5 -2
  136. package/dist/collection/components/tecton-tab-pane/index.js.map +1 -1
  137. package/dist/collection/utils/index.js +1 -1
  138. package/dist/collection/utils/index.js.map +1 -1
  139. package/dist/components/index13.js.map +1 -1
  140. package/dist/components/index14.js.map +1 -1
  141. package/dist/components/index15.js.map +1 -1
  142. package/dist/components/index16.js +1 -1
  143. package/dist/components/index16.js.map +1 -1
  144. package/dist/components/index2.js.map +1 -1
  145. package/dist/components/index5.js +1 -1
  146. package/dist/components/index5.js.map +1 -1
  147. package/dist/components/index6.js.map +1 -1
  148. package/dist/components/index9.js +5 -2
  149. package/dist/components/index9.js.map +1 -1
  150. package/dist/components/q2-action-sheet.js.map +1 -1
  151. package/dist/components/q2-calendar.js +10 -1
  152. package/dist/components/q2-calendar.js.map +1 -1
  153. package/dist/components/q2-card.js +19 -22
  154. package/dist/components/q2-card.js.map +1 -1
  155. package/dist/components/q2-carousel-pane.js.map +1 -1
  156. package/dist/components/q2-carousel.js +32 -4
  157. package/dist/components/q2-carousel.js.map +1 -1
  158. package/dist/components/q2-chart-area.js.map +1 -1
  159. package/dist/components/q2-chart-donut.js +16 -15
  160. package/dist/components/q2-chart-donut.js.map +1 -1
  161. package/dist/components/q2-checkbox-group.js.map +1 -1
  162. package/dist/components/q2-data-table.js +43 -21
  163. package/dist/components/q2-data-table.js.map +1 -1
  164. package/dist/components/q2-editable-field.js.map +1 -1
  165. package/dist/components/q2-pagination.js.map +1 -1
  166. package/dist/components/q2-pill.js.map +1 -1
  167. package/dist/components/q2-radio-group.js.map +1 -1
  168. package/dist/components/q2-radio.js.map +1 -1
  169. package/dist/components/q2-section.js +1 -1
  170. package/dist/components/q2-section.js.map +1 -1
  171. package/dist/components/q2-select.js.map +1 -1
  172. package/dist/components/q2-stepper-pane.js.map +1 -1
  173. package/dist/components/q2-stepper-vertical.js +3 -3
  174. package/dist/components/q2-stepper-vertical.js.map +1 -1
  175. package/dist/components/q2-stepper.js.map +1 -1
  176. package/dist/components/q2-tab-container.js.map +1 -1
  177. package/dist/components/q2-tab-pane.js.map +1 -1
  178. package/dist/components/q2-tag.js.map +1 -1
  179. package/dist/components/q2-textarea.js.map +1 -1
  180. package/dist/components/tecton-tab-pane.js.map +1 -1
  181. package/dist/esm/click-elsewhere_2.entry.js +1 -1
  182. package/dist/esm/click-elsewhere_2.entry.js.map +1 -1
  183. package/dist/esm/{index-84f1034e.js → index-fbe28822.js} +2 -2
  184. package/dist/esm/{index-84f1034e.js.map → index-fbe28822.js.map} +1 -1
  185. package/dist/esm/loader.js +1 -1
  186. package/dist/esm/q2-action-sheet.entry.js +1 -1
  187. package/dist/esm/q2-action-sheet.entry.js.map +1 -1
  188. package/dist/esm/q2-btn_2.entry.js +2 -2
  189. package/dist/esm/q2-btn_2.entry.js.map +1 -1
  190. package/dist/esm/q2-calendar.entry.js +11 -2
  191. package/dist/esm/q2-calendar.entry.js.map +1 -1
  192. package/dist/esm/q2-card.entry.js +20 -23
  193. package/dist/esm/q2-card.entry.js.map +1 -1
  194. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  195. package/dist/esm/q2-carousel-pane.entry.js.map +1 -1
  196. package/dist/esm/q2-carousel.entry.js +30 -4
  197. package/dist/esm/q2-carousel.entry.js.map +1 -1
  198. package/dist/esm/q2-chart-area.entry.js +1 -1
  199. package/dist/esm/q2-chart-area.entry.js.map +1 -1
  200. package/dist/esm/q2-chart-bar.entry.js +1 -1
  201. package/dist/esm/q2-chart-donut.entry.js +14 -14
  202. package/dist/esm/q2-chart-donut.entry.js.map +1 -1
  203. package/dist/esm/q2-checkbox-group.entry.js +1 -1
  204. package/dist/esm/q2-checkbox-group.entry.js.map +1 -1
  205. package/dist/esm/q2-checkbox.entry.js +1 -1
  206. package/dist/esm/q2-checkbox.entry.js.map +1 -1
  207. package/dist/esm/q2-data-table.entry.js +43 -21
  208. package/dist/esm/q2-data-table.entry.js.map +1 -1
  209. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  210. package/dist/esm/q2-dropdown.entry.js +1 -1
  211. package/dist/esm/q2-editable-field.entry.js +1 -1
  212. package/dist/esm/q2-editable-field.entry.js.map +1 -1
  213. package/dist/esm/q2-icon.entry.js +1 -1
  214. package/dist/esm/q2-input.entry.js +6 -3
  215. package/dist/esm/q2-input.entry.js.map +1 -1
  216. package/dist/esm/q2-loc.entry.js +1 -1
  217. package/dist/esm/q2-message.entry.js +1 -1
  218. package/dist/esm/q2-month-picker.entry.js +1 -1
  219. package/dist/esm/q2-optgroup_2.entry.js +1 -1
  220. package/dist/esm/q2-optgroup_2.entry.js.map +1 -1
  221. package/dist/esm/q2-option-list.entry.js +1 -1
  222. package/dist/esm/q2-option-list.entry.js.map +1 -1
  223. package/dist/esm/q2-pagination.entry.js +1 -1
  224. package/dist/esm/q2-pagination.entry.js.map +1 -1
  225. package/dist/esm/q2-pill.entry.js +1 -1
  226. package/dist/esm/q2-pill.entry.js.map +1 -1
  227. package/dist/esm/q2-radio-group.entry.js +1 -1
  228. package/dist/esm/q2-radio-group.entry.js.map +1 -1
  229. package/dist/esm/q2-radio.entry.js +1 -1
  230. package/dist/esm/q2-radio.entry.js.map +1 -1
  231. package/dist/esm/q2-section.entry.js +2 -2
  232. package/dist/esm/q2-section.entry.js.map +1 -1
  233. package/dist/esm/q2-select.entry.js +1 -1
  234. package/dist/esm/q2-select.entry.js.map +1 -1
  235. package/dist/esm/q2-stepper-pane.entry.js +1 -1
  236. package/dist/esm/q2-stepper-pane.entry.js.map +1 -1
  237. package/dist/esm/q2-stepper-vertical.entry.js +4 -4
  238. package/dist/esm/q2-stepper-vertical.entry.js.map +1 -1
  239. package/dist/esm/q2-stepper.entry.js +1 -1
  240. package/dist/esm/q2-stepper.entry.js.map +1 -1
  241. package/dist/esm/q2-tab-container.entry.js +1 -1
  242. package/dist/esm/q2-tab-container.entry.js.map +1 -1
  243. package/dist/esm/q2-tab-pane.entry.js.map +1 -1
  244. package/dist/esm/q2-tag.entry.js +1 -1
  245. package/dist/esm/q2-tag.entry.js.map +1 -1
  246. package/dist/esm/q2-tecton-elements.js +1 -1
  247. package/dist/esm/q2-textarea.entry.js +1 -1
  248. package/dist/esm/q2-textarea.entry.js.map +1 -1
  249. package/dist/esm/q2-tooltip.entry.js +1 -1
  250. package/dist/esm/tecton-tab-pane.entry.js.map +1 -1
  251. package/dist/q2-tecton-elements/p-0253a00b.entry.js +2 -0
  252. package/dist/q2-tecton-elements/p-0253a00b.entry.js.map +1 -0
  253. package/dist/q2-tecton-elements/{p-72b4ecc6.entry.js → p-07229496.entry.js} +2 -2
  254. package/dist/q2-tecton-elements/p-07229496.entry.js.map +1 -0
  255. package/dist/q2-tecton-elements/{p-a6b03db1.entry.js → p-0ecff52c.entry.js} +2 -2
  256. package/dist/q2-tecton-elements/{p-a6b03db1.entry.js.map → p-0ecff52c.entry.js.map} +1 -1
  257. package/dist/q2-tecton-elements/{p-f198f77b.entry.js → p-1179b32c.entry.js} +2 -2
  258. package/dist/q2-tecton-elements/p-1179b32c.entry.js.map +1 -0
  259. package/dist/q2-tecton-elements/{p-311f37e2.entry.js → p-15c69543.entry.js} +2 -2
  260. package/dist/q2-tecton-elements/{p-9220365b.entry.js → p-212c6301.entry.js} +2 -2
  261. package/dist/q2-tecton-elements/p-212c6301.entry.js.map +1 -0
  262. package/dist/q2-tecton-elements/p-3090b655.entry.js +2 -0
  263. package/dist/q2-tecton-elements/p-3090b655.entry.js.map +1 -0
  264. package/dist/q2-tecton-elements/{p-8f8d5362.entry.js → p-3569e648.entry.js} +2 -2
  265. package/dist/q2-tecton-elements/p-3569e648.entry.js.map +1 -0
  266. package/dist/q2-tecton-elements/{p-0cade28b.entry.js → p-36bff57a.entry.js} +2 -2
  267. package/dist/q2-tecton-elements/{p-57e81863.entry.js → p-39e94e12.entry.js} +2 -2
  268. package/dist/q2-tecton-elements/{p-57e81863.entry.js.map → p-39e94e12.entry.js.map} +1 -1
  269. package/dist/q2-tecton-elements/p-3f20d610.entry.js +2 -0
  270. package/dist/q2-tecton-elements/p-3f20d610.entry.js.map +1 -0
  271. package/dist/q2-tecton-elements/{p-29a7ca63.entry.js → p-44c2d7a2.entry.js} +2 -2
  272. package/dist/q2-tecton-elements/{p-29a7ca63.entry.js.map → p-44c2d7a2.entry.js.map} +1 -1
  273. package/dist/q2-tecton-elements/{p-deb773a5.entry.js → p-461dca3d.entry.js} +2 -2
  274. package/dist/q2-tecton-elements/{p-deb773a5.entry.js.map → p-461dca3d.entry.js.map} +1 -1
  275. package/dist/q2-tecton-elements/{p-3d82d94f.entry.js → p-5964fd50.entry.js} +2 -2
  276. package/dist/q2-tecton-elements/{p-3d82d94f.entry.js.map → p-5964fd50.entry.js.map} +1 -1
  277. package/dist/q2-tecton-elements/{p-e98d9cf2.entry.js → p-5b4c30b8.entry.js} +2 -2
  278. package/dist/q2-tecton-elements/p-5b4c30b8.entry.js.map +1 -0
  279. package/dist/q2-tecton-elements/{p-69dcf12e.entry.js → p-5d6c2534.entry.js} +2 -2
  280. package/dist/q2-tecton-elements/p-5d6c2534.entry.js.map +1 -0
  281. package/dist/q2-tecton-elements/{p-a09c90c1.entry.js → p-66bc9475.entry.js} +2 -2
  282. package/dist/q2-tecton-elements/{p-a09c90c1.entry.js.map → p-66bc9475.entry.js.map} +1 -1
  283. package/dist/q2-tecton-elements/{p-e4dadcd7.entry.js → p-6ba6d83e.entry.js} +2 -2
  284. package/dist/q2-tecton-elements/p-6ba6d83e.entry.js.map +1 -0
  285. package/dist/q2-tecton-elements/{p-5843f6c8.entry.js → p-78d5707b.entry.js} +2 -2
  286. package/dist/q2-tecton-elements/p-78d5707b.entry.js.map +1 -0
  287. package/dist/q2-tecton-elements/{p-85dc889e.entry.js → p-7e276297.entry.js} +2 -2
  288. package/dist/q2-tecton-elements/p-7e276297.entry.js.map +1 -0
  289. package/dist/q2-tecton-elements/{p-059ea7c9.entry.js → p-81e36fcd.entry.js} +2 -2
  290. package/dist/q2-tecton-elements/{p-8f273db2.entry.js → p-88b303a7.entry.js} +2 -2
  291. package/dist/q2-tecton-elements/{p-8f273db2.entry.js.map → p-88b303a7.entry.js.map} +1 -1
  292. package/dist/q2-tecton-elements/p-9889692d.entry.js +2 -0
  293. package/dist/q2-tecton-elements/p-9889692d.entry.js.map +1 -0
  294. package/dist/q2-tecton-elements/p-9da0db14.entry.js.map +1 -1
  295. package/dist/q2-tecton-elements/{p-c057134f.entry.js → p-9dff6592.entry.js} +2 -2
  296. package/dist/q2-tecton-elements/p-9dff6592.entry.js.map +1 -0
  297. package/dist/q2-tecton-elements/{p-145849d0.entry.js → p-a5a23edc.entry.js} +2 -2
  298. package/dist/q2-tecton-elements/p-a5a23edc.entry.js.map +1 -0
  299. package/dist/q2-tecton-elements/{p-db3bbfb8.entry.js → p-a9c40d3b.entry.js} +2 -2
  300. package/dist/q2-tecton-elements/p-a9c40d3b.entry.js.map +1 -0
  301. package/dist/q2-tecton-elements/{p-15179d55.entry.js → p-aa96f160.entry.js} +2 -2
  302. package/dist/q2-tecton-elements/{p-5c033ed9.entry.js → p-b3a32a46.entry.js} +2 -2
  303. package/dist/q2-tecton-elements/{p-5c033ed9.entry.js.map → p-b3a32a46.entry.js.map} +1 -1
  304. package/dist/q2-tecton-elements/{p-f3868a77.entry.js → p-b6ed1342.entry.js} +2 -2
  305. package/dist/q2-tecton-elements/{p-f3868a77.entry.js.map → p-b6ed1342.entry.js.map} +1 -1
  306. package/dist/q2-tecton-elements/{p-52132d80.entry.js → p-ba19d09f.entry.js} +2 -2
  307. package/dist/q2-tecton-elements/p-ba19d09f.entry.js.map +1 -0
  308. package/dist/q2-tecton-elements/{p-81b917a5.entry.js → p-cc7ba0cb.entry.js} +2 -2
  309. package/dist/q2-tecton-elements/{p-107f07f2.entry.js → p-ce009987.entry.js} +2 -2
  310. package/dist/q2-tecton-elements/p-d7fb3534.entry.js.map +1 -1
  311. package/dist/q2-tecton-elements/{p-959f47ef.entry.js → p-de7352f5.entry.js} +2 -2
  312. package/dist/q2-tecton-elements/{p-6ae87415.entry.js → p-ef2e2991.entry.js} +2 -2
  313. package/dist/q2-tecton-elements/{p-b83568e7.entry.js → p-f1479052.entry.js} +2 -2
  314. package/dist/q2-tecton-elements/p-f1479052.entry.js.map +1 -0
  315. package/dist/q2-tecton-elements/{p-f34521a4.js → p-fb903495.js} +2 -2
  316. package/dist/q2-tecton-elements/{p-f34521a4.js.map → p-fb903495.js.map} +1 -1
  317. package/dist/q2-tecton-elements/{p-2812f9d2.entry.js → p-ff137358.entry.js} +2 -2
  318. package/dist/q2-tecton-elements/p-ff137358.entry.js.map +1 -0
  319. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  320. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
  321. package/dist/test/elements/q2-btn-test.e2e.js +31 -0
  322. package/dist/test/elements/q2-btn-test.e2e.js.map +1 -1
  323. package/dist/test/elements/q2-card-test.e2e.js +69 -11
  324. package/dist/test/elements/q2-card-test.e2e.js.map +1 -1
  325. package/dist/test/elements/q2-carousel-test.e2e.js +41 -3
  326. package/dist/test/elements/q2-carousel-test.e2e.js.map +1 -1
  327. package/dist/test/elements/q2-chart-donut-test.e2e.js +64 -9
  328. package/dist/test/elements/q2-chart-donut-test.e2e.js.map +1 -1
  329. package/dist/test/elements/q2-data-table-test.e2e.js +91 -2
  330. package/dist/test/elements/q2-data-table-test.e2e.js.map +1 -1
  331. package/dist/test/elements/q2-input-test.e2e.js +151 -67
  332. package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
  333. package/dist/test/helpers.js +48 -0
  334. package/dist/test/helpers.js.map +1 -1
  335. package/dist/types/components/click-elsewhere/index.d.ts +3 -0
  336. package/dist/types/components/q2-action-sheet/index.d.ts +7 -0
  337. package/dist/types/components/q2-calendar/index.d.ts +23 -3
  338. package/dist/types/components/q2-card/index.d.ts +14 -4
  339. package/dist/types/components/q2-carousel/index.d.ts +8 -0
  340. package/dist/types/components/q2-carousel-pane/index.d.ts +7 -1
  341. package/dist/types/components/q2-chart-area/index.d.ts +7 -1
  342. package/dist/types/components/q2-chart-donut/index.d.ts +18 -3
  343. package/dist/types/components/q2-checkbox/index.d.ts +4 -0
  344. package/dist/types/components/q2-checkbox-group/index.d.ts +8 -1
  345. package/dist/types/components/q2-data-table/index.d.ts +43 -3
  346. package/dist/types/components/q2-editable-field/index.d.ts +18 -2
  347. package/dist/types/components/q2-input/index.d.ts +19 -2
  348. package/dist/types/components/q2-input/types.d.ts +1 -0
  349. package/dist/types/components/q2-option/index.d.ts +4 -0
  350. package/dist/types/components/q2-option-list/index.d.ts +15 -1
  351. package/dist/types/components/q2-pagination/index.d.ts +8 -2
  352. package/dist/types/components/q2-pill/index.d.ts +4 -0
  353. package/dist/types/components/q2-popover/index.d.ts +3 -0
  354. package/dist/types/components/q2-radio/index.d.ts +6 -1
  355. package/dist/types/components/q2-radio-group/index.d.ts +7 -1
  356. package/dist/types/components/q2-section/index.d.ts +7 -1
  357. package/dist/types/components/q2-select/index.d.ts +16 -1
  358. package/dist/types/components/q2-stepper/index.d.ts +4 -0
  359. package/dist/types/components/q2-stepper-pane/index.d.ts +11 -1
  360. package/dist/types/components/q2-stepper-vertical/index.d.ts +10 -2
  361. package/dist/types/components/q2-tab-container/index.d.ts +12 -2
  362. package/dist/types/components/q2-tab-pane/index.d.ts +4 -0
  363. package/dist/types/components/q2-tag/index.d.ts +5 -0
  364. package/dist/types/components/q2-textarea/index.d.ts +14 -2
  365. package/dist/types/components/tecton-tab-pane/index.d.ts +4 -0
  366. package/dist/types/components.d.ts +223 -27
  367. package/dist/types/workspace/workspace/{tecton-production_release_1.38.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +1 -0
  368. package/package.json +4 -3
  369. package/dist/q2-tecton-elements/p-072bda73.entry.js +0 -2
  370. package/dist/q2-tecton-elements/p-072bda73.entry.js.map +0 -1
  371. package/dist/q2-tecton-elements/p-145849d0.entry.js.map +0 -1
  372. package/dist/q2-tecton-elements/p-2812f9d2.entry.js.map +0 -1
  373. package/dist/q2-tecton-elements/p-52132d80.entry.js.map +0 -1
  374. package/dist/q2-tecton-elements/p-5843f6c8.entry.js.map +0 -1
  375. package/dist/q2-tecton-elements/p-69dcf12e.entry.js.map +0 -1
  376. package/dist/q2-tecton-elements/p-72b4ecc6.entry.js.map +0 -1
  377. package/dist/q2-tecton-elements/p-85dc889e.entry.js.map +0 -1
  378. package/dist/q2-tecton-elements/p-8f8d5362.entry.js.map +0 -1
  379. package/dist/q2-tecton-elements/p-9220365b.entry.js.map +0 -1
  380. package/dist/q2-tecton-elements/p-a4017e55.entry.js +0 -2
  381. package/dist/q2-tecton-elements/p-a4017e55.entry.js.map +0 -1
  382. package/dist/q2-tecton-elements/p-af98db79.entry.js +0 -2
  383. package/dist/q2-tecton-elements/p-af98db79.entry.js.map +0 -1
  384. package/dist/q2-tecton-elements/p-b83568e7.entry.js.map +0 -1
  385. package/dist/q2-tecton-elements/p-c0334e63.entry.js +0 -2
  386. package/dist/q2-tecton-elements/p-c0334e63.entry.js.map +0 -1
  387. package/dist/q2-tecton-elements/p-c057134f.entry.js.map +0 -1
  388. package/dist/q2-tecton-elements/p-db3bbfb8.entry.js.map +0 -1
  389. package/dist/q2-tecton-elements/p-e4dadcd7.entry.js.map +0 -1
  390. package/dist/q2-tecton-elements/p-e98d9cf2.entry.js.map +0 -1
  391. package/dist/q2-tecton-elements/p-f198f77b.entry.js.map +0 -1
  392. /package/dist/q2-tecton-elements/{p-311f37e2.entry.js.map → p-15c69543.entry.js.map} +0 -0
  393. /package/dist/q2-tecton-elements/{p-0cade28b.entry.js.map → p-36bff57a.entry.js.map} +0 -0
  394. /package/dist/q2-tecton-elements/{p-059ea7c9.entry.js.map → p-81e36fcd.entry.js.map} +0 -0
  395. /package/dist/q2-tecton-elements/{p-15179d55.entry.js.map → p-aa96f160.entry.js.map} +0 -0
  396. /package/dist/q2-tecton-elements/{p-81b917a5.entry.js.map → p-cc7ba0cb.entry.js.map} +0 -0
  397. /package/dist/q2-tecton-elements/{p-107f07f2.entry.js.map → p-ce009987.entry.js.map} +0 -0
  398. /package/dist/q2-tecton-elements/{p-959f47ef.entry.js.map → p-de7352f5.entry.js.map} +0 -0
  399. /package/dist/q2-tecton-elements/{p-6ae87415.entry.js.map → p-ef2e2991.entry.js.map} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"names":["stylesCss","Q2OptionList","this","scheduledAfterRender","keyStore","queue","lastPressedAt","Date","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","undefined","activeIndex","list","allOptions","map","element","index","slice","buildQueue","now","getTime","length","push","searchIndex","keyStr","join","find","v","disabled","display","match","RegExp","replace","setFocus","multiple","openDropdownWithActiveElement","selectOption","popoverState","emit","open","action","setActiveElement","matched","externalKeydownHandler","event","stopPropagation","customSearch","key","nextIndex","searchString","searchOptions","type","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","internalKeydownHandler","shiftKey","newOption","active","isFirstOptionActive","adjustActiveOptionAndScroll","isLastOptionActive","focusoutHandler","relatedTarget","isInQ2OptionList","includes","isInLightDom","hostElement","contains","clickHandler","target","option","closest","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","allContents","rootSlot","getRootSlot","acceptedTags","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","allVisibleOptions","hidden","_multiSelectHidden","disabledGroup","async","options","getOptions","optionRole","role","slot","querySelector","assignedElements","_a","hasAnotherSlot","scrollToActiveOption","activeOption","scrollIntoView","block","waitForNextPaint","setActiveOption","setFocusedOption","firstSelected","findIndex","selected","firstEnabled","updateSingleOptionAttrs","selectedValue","value","updateMultipleOptionAttrs","selectedValues","elementIndex","isHostElementVisible","offsetParent","focus","direction","visibleActiveOptionIndex","indexOf","nextVisibleOptionIndex","nextVisibleOption","focusSelectedSibling","hasNoSiblings","showSelected","selectedOptionVisibleIndex","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","selectedOption","valueObject","innerText","trim","values","isAlreadySelected","change","numToAdd","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","showSelectedUpdated","delegateFocus","isEventFromElement","handleClick","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"sources":["./src/components/q2-option-list/styles.scss?tag=q2-option-list&encapsulation=shadow","./src/components/q2-option-list/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n line-height: var-list(var-prefixer(option-list-line-height),--app-line-height, 1.428571429em);\n}\n\n.content {\n text-align: start;\n\n :host([is-sizeable]) & {\n display: block;\n height: auto;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Event,\n State,\n Element,\n ComponentInterface,\n Host,\n EventEmitter,\n Method,\n Watch,\n Listen,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n value: string;\n display?: string;\n}\n\n@Component({\n tag: 'q2-option-list',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2OptionList implements ComponentInterface {\n @Prop({ reflect: true }) customSearch: boolean;\n @Prop({ reflect: true }) noSelect: boolean;\n @Prop({ reflect: true }) align: 'left' | 'right';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) showSelected: boolean;\n /**\n * Translates to the role of the option list\n * @type {('menu' | 'listbox')}\n */\n @Prop() type: 'menu' | 'listbox' = 'listbox';\n @Prop() label: string = loc('tecton.element.optionList.label');\n\n /**\n * Emitted when an option is selected or deselected.\n *\n * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n * will contain the selected option values.\n */\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n /**\n * Emitted to indicate the intended state of the popover.\n * @private\n */\n @Event() popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n\n /**\n * Emitted when the component has finished rendering.\n * @private\n */\n @Event({ bubbles: false }) ready: EventEmitter<undefined>;\n @State() hasOptions: boolean;\n contentElement: HTMLElement;\n activeIndex: number;\n pivotIndex: number;\n scheduledAfterRender: (() => void)[] = [];\n searchString: string;\n searchStringTimer: number;\n keyStore: {\n queue: string[];\n lastPressedAt: Date;\n } = {\n queue: [],\n lastPressedAt: new Date(),\n };\n\n @Element() hostElement: HTMLElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.checkOptions();\n this.selectedOptionsUpdated();\n this.ready.emit();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n /// Getters ///\n get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[] {\n const rootSlot = this.getRootSlot(this.hostElement);\n const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];\n return rootSlot.filter(element => acceptedTags.includes(element.tagName)) as (\n | HTMLQ2OptgroupElement\n | HTMLQ2OptionElement\n )[];\n }\n\n get allOptions(): HTMLQ2OptionElement[] {\n const contents = this.allContents;\n\n const extractOptions = (\n elements: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | Element)[]\n ): HTMLQ2OptionElement[] => {\n return elements.reduce((acc, element) => {\n if (element.tagName === 'Q2-OPTGROUP') {\n return [...acc, ...extractOptions(Array.from(element.children))];\n } else if (element.tagName === 'Q2-OPTION') {\n return [...acc, element];\n } else {\n return acc;\n }\n }, []);\n };\n\n return extractOptions(contents);\n }\n\n get allVisibleOptions(): HTMLQ2OptionElement[] {\n return this.allOptions.filter(\n option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup\n );\n }\n\n /// Helpers ///\n async checkOptions() {\n const { type } = this;\n const options = await this.getOptions();\n if (!type) return;\n const optionRole = type === 'menu' ? 'menuitem' : 'option';\n options.forEach(option => {\n option.role = optionRole;\n });\n }\n\n getRootSlot(element: Element): Element[] {\n const slot = element.querySelector('slot');\n const assignedElements = slot?.assignedElements() ?? Array.from(element.children);\n const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';\n if (hasAnotherSlot) {\n return this.getRootSlot(assignedElements[0]);\n } else {\n return assignedElements;\n }\n }\n\n scrollToActiveOption() {\n const activeOption = this.allOptions[this.activeIndex];\n activeOption?.scrollIntoView({ block: 'nearest' });\n }\n\n async openDropdownWithActiveElement(activeIndex: number) {\n if (this.disabled) return;\n this.activeIndex = activeIndex;\n this.popoverState.emit({ open: true, action: 'open' });\n await waitForNextPaint();\n this.setActiveOption();\n await waitForNextPaint();\n this.setFocusedOption();\n this.scrollToActiveOption();\n }\n\n getDefaultActiveIndex() {\n const { allOptions } = this;\n const firstSelected = allOptions.findIndex(element => element.selected);\n if (firstSelected > -1) return firstSelected;\n\n const firstEnabled = allOptions.findIndex(element => !element.hidden);\n if (firstEnabled > -1) return firstEnabled;\n\n return 0;\n }\n\n updateSingleOptionAttrs() {\n const { allOptions, selectedOptions } = this;\n const selectedValue = selectedOptions[0]?.value || undefined;\n allOptions.forEach(element => {\n element.selected = element.value === selectedValue;\n });\n }\n\n updateMultipleOptionAttrs() {\n const { allOptions, selectedOptions } = this;\n const selectedValues = selectedOptions.map(({ value }) => value);\n allOptions.forEach(element => {\n element.selected = selectedValues.includes(element.value);\n });\n }\n\n setActiveOption() {\n const activeIndex = this.activeIndex;\n\n this.allOptions.forEach((element, elementIndex) => {\n element.active = activeIndex === elementIndex;\n });\n }\n\n setFocusedOption() {\n const option = this.allOptions[this.activeIndex];\n if (!option) return;\n\n const isHostElementVisible = !!this.hostElement.offsetParent;\n if (isHostElementVisible) option.focus();\n else nextPaint(() => option.focus());\n }\n\n getNextVisibleIndex(direction) {\n const { allVisibleOptions, allOptions, activeIndex } = this;\n const activeOption = allOptions[activeIndex];\n const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);\n let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;\n\n if (nextVisibleOptionIndex < 0) {\n nextVisibleOptionIndex = allVisibleOptions.length - 1;\n } else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {\n nextVisibleOptionIndex = 0;\n }\n\n const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];\n return allOptions.indexOf(nextVisibleOption);\n }\n\n focusSelectedSibling(option: HTMLQ2OptionElement) {\n const { allVisibleOptions, allOptions } = this;\n const hasNoSiblings = allVisibleOptions.length < 2;\n if (hasNoSiblings) {\n this.showSelected = false;\n return;\n }\n\n const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);\n const nextVisibleSiblingIndex = selectedOptionVisibleIndex\n ? selectedOptionVisibleIndex - 1\n : selectedOptionVisibleIndex + 1;\n const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];\n const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);\n\n this.activeIndex = nextSiblingIndex;\n this.setFocusedOption();\n this.scheduledAfterRender.push(() => {\n option._multiSelectHidden = !option.selected;\n });\n }\n\n selectOption(selectedOption: HTMLQ2OptionElement) {\n const { multiple, noSelect, showSelected } = this;\n if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup) return;\n const selectedValue = selectedOption.value;\n const valueObject = {\n value: selectedValue,\n display: selectedOption.display || selectedOption.innerText.trim(),\n };\n\n let values: IOptionValue[] = [];\n if (multiple) {\n const { selectedOptions } = this;\n const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);\n\n if (isAlreadySelected) {\n values = selectedOptions.filter(({ value }) => value !== selectedValue);\n } else {\n values = [...selectedOptions, valueObject];\n }\n\n if (showSelected) this.focusSelectedSibling(selectedOption);\n } else {\n values = [valueObject];\n }\n\n if (noSelect) this.setActiveElement(null);\n else this.selectedOptions = values;\n\n this.change.emit({ value: selectedValue, values });\n }\n\n adjustActiveOptionAndScroll(numToAdd: number) {\n this.activeIndex += numToAdd;\n this.setActiveOption();\n this.setFocusedOption();\n this.scrollToActiveOption();\n }\n\n resetTimer() {\n if (this.searchStringTimer) {\n clearTimeout(this.searchStringTimer);\n }\n\n this.searchStringTimer = window.setTimeout(() => {\n this.searchString = null;\n }, 2000);\n }\n\n searchAndFocus = (keyValue: string, shouldSelect: boolean) => {\n // pseudo search in non-searchable select\n const reorder = () => {\n this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;\n const list = this.allOptions.map((element, index) => ({ element, index }));\n return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];\n };\n\n const buildQueue = () => {\n const now = new Date();\n if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {\n // empty stored keys if delay > 1s\n this.keyStore.queue.length = 0;\n }\n if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {\n this.keyStore.queue.push(keyValue);\n }\n this.keyStore.lastPressedAt = now;\n };\n\n const searchIndex = (list: any[]) => {\n const keyStr = this.keyStore.queue.join('');\n return list.find(v => {\n return (\n !v.element.disabled &&\n v.element.display &&\n (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||\n v.element.display.replace(/\\s/g, '').match(new RegExp(`^${keyStr}`, 'i')))\n );\n });\n };\n\n const setFocus = ({ index }) => {\n if (this.multiple) {\n // multiple: should open to make sure that which options are selected\n this.openDropdownWithActiveElement(index);\n } else {\n this.activeIndex = index;\n if (shouldSelect) {\n this.selectOption(this.allOptions[index]);\n this.popoverState.emit({ open: false, action: 'select' });\n } else this.setActiveElement(index);\n }\n };\n\n buildQueue();\n const matched = searchIndex(reorder());\n if (matched) {\n setFocus(matched);\n }\n };\n\n searchOptions(key: string, shouldSelect?: boolean) {\n this.searchString = key;\n this.searchAndFocus(key, shouldSelect);\n }\n\n /// Watchers ///\n @Watch('showSelected')\n showSelectedUpdated(showSelected: boolean) {\n if (showSelected && this.selectedOptions.length === 0) {\n this.showSelected = false;\n return;\n }\n this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));\n }\n\n @Watch('selectedOptions')\n selectedOptionsUpdated() {\n if (this.multiple) {\n this.updateMultipleOptionAttrs();\n } else {\n this.updateSingleOptionAttrs();\n }\n }\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.popoverState.emit({ open: true, action: 'open' });\n const { activeIndex } = this;\n if (typeof activeIndex === 'number' && activeIndex > -1) {\n this.setActiveOption();\n this.setFocusedOption();\n } else {\n this.setDefaultActiveElement();\n }\n }\n\n @Listen('click')\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n }\n\n /// Public Methods ///\n @Method()\n async setDefaultActiveElement() {\n this.activeIndex = this.getDefaultActiveIndex();\n this.setActiveOption();\n this.setFocusedOption();\n }\n\n @Method()\n async setActiveElement(index: number) {\n this.activeIndex = index;\n this.setActiveOption();\n this.setFocusedOption();\n }\n\n @Method()\n async handleExternalKeydown(event: KeyboardEvent) {\n this.externalKeydownHandler(event);\n }\n\n @Method()\n async getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]> {\n return this.allContents;\n }\n\n @Method()\n async getOptions(): Promise<HTMLQ2OptionElement[]> {\n return this.allOptions;\n }\n\n /// Event Handlers ///\n /* tslint:disable:cyclomatic-complexity */\n externalKeydownHandler = (event: KeyboardEvent) => {\n event.stopPropagation();\n const { activeIndex, customSearch, allOptions } = this;\n const { key } = event;\n\n let nextIndex;\n switch (key) {\n case ' ':\n if (this.searchString) {\n if (customSearch) break;\n\n this.searchOptions(key, true);\n break;\n } else if (this.type === 'menu') {\n this.activeIndex = 0;\n this.openDropdownWithActiveElement(0);\n } else {\n this.setDefaultActiveElement();\n nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n }\n break;\n\n case 'Enter':\n if (this.type === 'menu') {\n this.activeIndex = 0;\n this.openDropdownWithActiveElement(0);\n } else {\n this.setDefaultActiveElement();\n nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n }\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.activeIndex = 0;\n nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);\n if (nextIndex === -1) break;\n this.openDropdownWithActiveElement(nextIndex);\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.activeIndex = 0;\n nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);\n if (nextIndex === -1) break;\n this.openDropdownWithActiveElement(nextIndex);\n break;\n\n case 'Home':\n event.preventDefault();\n this.openDropdownWithActiveElement(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.openDropdownWithActiveElement(allOptions.length - 1);\n break;\n\n case 'PageUp':\n event.preventDefault();\n this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));\n break;\n\n case 'PageDown':\n event.preventDefault();\n this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));\n break;\n\n case 'Tab':\n this.popoverState.emit({ open: false, action: 'close' });\n break;\n\n case 'Esc':\n case 'Escape':\n if (this.noSelect) this.setActiveElement(null);\n this.popoverState.emit({ open: false, action: 'close' });\n break;\n\n default:\n if (customSearch) break;\n if (!key.match(/^[\\w]$/)) break;\n\n this.searchOptions(key, true);\n break;\n }\n };\n\n internalKeydownHandler = (event: KeyboardEvent) => {\n event.stopPropagation();\n const { activeIndex, customSearch, allOptions, multiple } = this;\n const { key, shiftKey } = event;\n\n let newOption;\n switch (key) {\n case ' ':\n if (this.searchString && !this.multiple) {\n if (customSearch) break;\n\n this.searchOptions(key, false);\n break;\n }\n\n event.preventDefault();\n newOption = allOptions.find(element => element.active);\n if (!newOption || newOption.disabled) break;\n this.selectOption(newOption);\n if (multiple) break;\n this.popoverState.emit({ open: false, action: 'select' });\n break;\n\n case 'Enter':\n event.preventDefault();\n newOption = allOptions.find(element => element.active);\n if (!newOption || newOption.disabled) break;\n this.selectOption(newOption);\n if (multiple) break;\n this.popoverState.emit({ open: false, action: 'select' });\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n const isFirstOptionActive = activeIndex === 0;\n if (isFirstOptionActive) break;\n if (activeIndex === undefined) {\n this.setDefaultActiveElement();\n break;\n } else {\n const nextIndex = this.getNextVisibleIndex(-1);\n if (nextIndex === -1) break;\n this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n break;\n }\n\n case 'ArrowDown':\n event.preventDefault();\n const isLastOptionActive = activeIndex === allOptions.length - 1;\n if (isLastOptionActive) break;\n if (activeIndex === undefined) {\n this.setDefaultActiveElement();\n break;\n } else {\n const nextIndex = this.getNextVisibleIndex(1);\n if (nextIndex === -1) break;\n this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n break;\n }\n\n case 'Home':\n event.preventDefault();\n this.openDropdownWithActiveElement(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.openDropdownWithActiveElement(allOptions.length - 1);\n break;\n\n case 'PageUp':\n event.preventDefault();\n this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));\n break;\n\n case 'PageDown':\n event.preventDefault();\n this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));\n break;\n\n case 'Tab':\n if (shiftKey) break;\n if (this.multiple && this.type === 'listbox') break;\n newOption = allOptions.find(element => element.active);\n if (!newOption || newOption.disabled) return;\n this.selectOption(newOption);\n break;\n\n case 'Esc':\n case 'Escape':\n if (this.noSelect) this.setActiveElement(null);\n this.popoverState.emit({ open: false, action: 'close' });\n break;\n\n default:\n if (customSearch) break;\n if (!key.match(/^[\\w]$/)) break;\n\n this.searchOptions(key, false);\n break;\n }\n };\n /* tslint:enable:cyclomatic-complexity */\n\n focusoutHandler = (event: FocusEvent) => {\n const { relatedTarget } = event as unknown as { relatedTarget: HTMLQ2OptionElement };\n const isInQ2OptionList = this.allOptions.includes(relatedTarget);\n const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);\n if (isInQ2OptionList || isInLightDom) {\n event.stopPropagation();\n }\n };\n\n clickHandler = (event: Event) => {\n const target = event.target as HTMLQ2OptionElement;\n const option = target.closest('q2-option');\n this.selectOption(option);\n if (this.multiple) return;\n this.popoverState.emit({ open: false, action: 'select' });\n };\n\n /// DOM ///\n render() {\n return (\n <Host>\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n onFocusout={this.focusoutHandler}\n >\n <div\n class=\"options\"\n aria-label={loc('tecton.element.optionList.label', [this.label])}\n aria-multiselectable={`${!!this.multiple}`}\n role={this.type || 'listbox'}\n onKeyDown={this.internalKeydownHandler}\n onClick={this.clickHandler}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gIAAA,MAAMA,EAAY,q5B,MC0BLC,EAAY,M,gIAsCrBC,KAAAC,qBAAuC,GAGvCD,KAAAE,SAGI,CACAC,MAAO,GACPC,cAAe,IAAIC,MAkOvBL,KAAAM,eAAiB,CAACC,EAAkBC,KAEhC,MAAMC,EAAU,KACZT,KAAKU,WAAaV,KAAKU,aAAeC,UAAY,GAAKX,KAAKY,aAAe,GAAK,EAChF,MAAMC,EAAOb,KAAKc,WAAWC,KAAI,CAACC,EAASC,KAAK,CAAQD,UAASC,YACjE,MAAO,IAAIJ,EAAKK,MAAMlB,KAAKU,eAAgBG,EAAKK,MAAM,EAAGlB,KAAKU,YAAY,EAG9E,MAAMS,EAAa,KACf,MAAMC,EAAM,IAAIf,KAChB,GAAIe,EAAIC,UAAYrB,KAAKE,SAASE,cAAciB,UAAY,IAAM,CAE9DrB,KAAKE,SAASC,MAAMmB,OAAS,C,CAEjC,GAAItB,KAAKE,SAASC,MAAMmB,SAAW,GAAKtB,KAAKE,SAASC,MAAM,KAAOI,EAAU,CACzEP,KAAKE,SAASC,MAAMoB,KAAKhB,E,CAE7BP,KAAKE,SAASE,cAAgBgB,CAAG,EAGrC,MAAMI,EAAeX,IACjB,MAAMY,EAASzB,KAAKE,SAASC,MAAMuB,KAAK,IACxC,OAAOb,EAAKc,MAAKC,IAERA,EAAEZ,QAAQa,UACXD,EAAEZ,QAAQc,UACTF,EAAEZ,QAAQc,QAAQC,MAAM,IAAIC,OAAO,IAAIP,IAAU,OAC9CG,EAAEZ,QAAQc,QAAQG,QAAQ,MAAO,IAAIF,MAAM,IAAIC,OAAO,IAAIP,IAAU,QAE9E,EAGN,MAAMS,EAAW,EAAGjB,YAChB,GAAIjB,KAAKmC,SAAU,CAEfnC,KAAKoC,8BAA8BnB,E,KAChC,CACHjB,KAAKY,YAAcK,EACnB,GAAIT,EAAc,CACdR,KAAKqC,aAAarC,KAAKc,WAAWG,IAClCjB,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,U,MAC3CzC,KAAK0C,iBAAiBzB,E,GAIrCE,IACA,MAAMwB,EAAUnB,EAAYf,KAC5B,GAAIkC,EAAS,CACTT,EAASS,E,GA+EjB3C,KAAA4C,uBAA0BC,IACtBA,EAAMC,kBACN,MAAMlC,YAAEA,EAAWmC,aAAEA,EAAYjC,WAAEA,GAAed,KAClD,MAAMgD,IAAEA,GAAQH,EAEhB,IAAII,EACJ,OAAQD,GACJ,IAAK,IACD,GAAIhD,KAAKkD,aAAc,CACnB,GAAIH,EAAc,MAElB/C,KAAKmD,cAAcH,EAAK,MACxB,K,MACG,GAAIhD,KAAKoD,OAAS,OAAQ,CAC7BpD,KAAKY,YAAc,EACnBZ,KAAKoC,8BAA8B,E,KAChC,CACHpC,KAAKqD,0BACLC,GAAU,IAAMtD,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,U,CAEjE,MAEJ,IAAK,QACD,GAAIzC,KAAKoD,OAAS,OAAQ,CACtBpD,KAAKY,YAAc,EACnBZ,KAAKoC,8BAA8B,E,KAChC,CACHpC,KAAKqD,0BACLC,GAAU,IAAMtD,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,U,CAEjE,MAEJ,IAAK,UACDI,EAAMU,iBACNvD,KAAKY,YAAc,EACnBqC,IAAcjD,KAAKwD,gBAAgBlC,OAAStB,KAAKyD,wBAA0BzD,KAAK0D,qBAAqB,GACrG,GAAIT,KAAe,EAAG,MACtBjD,KAAKoC,8BAA8Ba,GACnC,MAEJ,IAAK,YACDJ,EAAMU,iBACNvD,KAAKY,YAAc,EACnBqC,IAAcjD,KAAKwD,gBAAgBlC,OAAStB,KAAKyD,wBAA0BzD,KAAK0D,oBAAoB,GACpG,GAAIT,KAAe,EAAG,MACtBjD,KAAKoC,8BAA8Ba,GACnC,MAEJ,IAAK,OACDJ,EAAMU,iBACNvD,KAAKoC,8BAA8B,GACnC,MAEJ,IAAK,MACDS,EAAMU,iBACNvD,KAAKoC,8BAA8BtB,EAAWQ,OAAS,GACvD,MAEJ,IAAK,SACDuB,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKC,KAAKhD,GAAe,GAAK,GAAI,IACrE,MAEJ,IAAK,WACDiC,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKE,KAAKjD,GAAe,GAAK,GAAIE,EAAWQ,OAAS,IACzF,MAEJ,IAAK,MACDtB,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAC9C,MAEJ,IAAK,MACL,IAAK,SACD,GAAIzC,KAAK8D,SAAU9D,KAAK0C,iBAAiB,MACzC1C,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAC9C,MAEJ,QACI,GAAIM,EAAc,MAClB,IAAKC,EAAIjB,MAAM,UAAW,MAE1B/B,KAAKmD,cAAcH,EAAK,MACxB,M,EAIZhD,KAAA+D,uBAA0BlB,IACtBA,EAAMC,kBACN,MAAMlC,YAAEA,EAAWmC,aAAEA,EAAYjC,WAAEA,EAAUqB,SAAEA,GAAanC,KAC5D,MAAMgD,IAAEA,EAAGgB,SAAEA,GAAanB,EAE1B,IAAIoB,EACJ,OAAQjB,GACJ,IAAK,IACD,GAAIhD,KAAKkD,eAAiBlD,KAAKmC,SAAU,CACrC,GAAIY,EAAc,MAElB/C,KAAKmD,cAAcH,EAAK,OACxB,K,CAGJH,EAAMU,iBACNU,EAAYnD,EAAWa,MAAKX,GAAWA,EAAQkD,SAC/C,IAAKD,GAAaA,EAAUpC,SAAU,MACtC7B,KAAKqC,aAAa4B,GAClB,GAAI9B,EAAU,MACdnC,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,WAC9C,MAEJ,IAAK,QACDI,EAAMU,iBACNU,EAAYnD,EAAWa,MAAKX,GAAWA,EAAQkD,SAC/C,IAAKD,GAAaA,EAAUpC,SAAU,MACtC7B,KAAKqC,aAAa4B,GAClB,GAAI9B,EAAU,MACdnC,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,WAC9C,MAEJ,IAAK,UACDI,EAAMU,iBACN,MAAMY,EAAsBvD,IAAgB,EAC5C,GAAIuD,EAAqB,MACzB,GAAIvD,IAAgBD,UAAW,CAC3BX,KAAKqD,0BACL,K,KACG,CACH,MAAMJ,EAAYjD,KAAK0D,qBAAqB,GAC5C,GAAIT,KAAe,EAAG,MACtBjD,KAAKoE,4BAA4BnB,EAAYrC,GAC7C,K,CAGR,IAAK,YACDiC,EAAMU,iBACN,MAAMc,EAAqBzD,IAAgBE,EAAWQ,OAAS,EAC/D,GAAI+C,EAAoB,MACxB,GAAIzD,IAAgBD,UAAW,CAC3BX,KAAKqD,0BACL,K,KACG,CACH,MAAMJ,EAAYjD,KAAK0D,oBAAoB,GAC3C,GAAIT,KAAe,EAAG,MACtBjD,KAAKoE,4BAA4BnB,EAAYrC,GAC7C,K,CAGR,IAAK,OACDiC,EAAMU,iBACNvD,KAAKoC,8BAA8B,GACnC,MAEJ,IAAK,MACDS,EAAMU,iBACNvD,KAAKoC,8BAA8BtB,EAAWQ,OAAS,GACvD,MAEJ,IAAK,SACDuB,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKC,IAAIhD,EAAc,GAAI,IAC9D,MAEJ,IAAK,WACDiC,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKE,IAAIjD,EAAc,GAAIE,EAAWQ,OAAS,IAClF,MAEJ,IAAK,MACD,GAAI0C,EAAU,MACd,GAAIhE,KAAKmC,UAAYnC,KAAKoD,OAAS,UAAW,MAC9Ca,EAAYnD,EAAWa,MAAKX,GAAWA,EAAQkD,SAC/C,IAAKD,GAAaA,EAAUpC,SAAU,OACtC7B,KAAKqC,aAAa4B,GAClB,MAEJ,IAAK,MACL,IAAK,SACD,GAAIjE,KAAK8D,SAAU9D,KAAK0C,iBAAiB,MACzC1C,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAC9C,MAEJ,QACI,GAAIM,EAAc,MAClB,IAAKC,EAAIjB,MAAM,UAAW,MAE1B/B,KAAKmD,cAAcH,EAAK,OACxB,M,EAKZhD,KAAAsE,gBAAmBzB,IACf,MAAM0B,cAAEA,GAAkB1B,EAC1B,MAAM2B,EAAmBxE,KAAKc,WAAW2D,SAASF,GAClD,MAAMG,GAAgBF,GAAoBxE,KAAK2E,YAAYC,SAASL,GACpE,GAAIC,GAAoBE,EAAc,CAClC7B,EAAMC,iB,GAId9C,KAAA6E,aAAgBhC,IACZ,MAAMiC,EAASjC,EAAMiC,OACrB,MAAMC,EAASD,EAAOE,QAAQ,aAC9BhF,KAAKqC,aAAa0C,GAClB,GAAI/E,KAAKmC,SAAU,OACnBnC,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAAW,E,8FAxlBF,G,sFAQxB,U,WACXwC,EAAI,mC,0BAuC5BC,oBACIlF,KAAKmF,aAAenF,KAAK2E,YAAYS,iBAAiB,aAAa9D,M,CAGvE+D,mBACIC,EAActF,KAAK2E,aACnB3E,KAAKuF,eACLvF,KAAKwF,yBACLxF,KAAKyF,MAAMlD,M,CAGfmD,qBACI1F,KAAKC,qBAAqB0F,SAAQC,GAAMA,MACxC5F,KAAKC,qBAAuB,E,CAI5B4F,kBACA,MAAMC,EAAW9F,KAAK+F,YAAY/F,KAAK2E,aACvC,MAAMqB,EAAe,CAAC,cAAe,aACrC,OAAOF,EAASG,QAAOjF,GAAWgF,EAAavB,SAASzD,EAAQkF,U,CAMhEpF,iBACA,MAAMqF,EAAWnG,KAAK6F,YAEtB,MAAMO,EACFC,GAEOA,EAASC,QAAO,CAACC,EAAKvF,KACzB,GAAIA,EAAQkF,UAAY,cAAe,CACnC,MAAO,IAAIK,KAAQH,EAAeI,MAAMC,KAAKzF,EAAQ0F,W,MAClD,GAAI1F,EAAQkF,UAAY,YAAa,CACxC,MAAO,IAAIK,EAAKvF,E,KACb,CACH,OAAOuF,C,IAEZ,IAGP,OAAOH,EAAeD,E,CAGtBQ,wBACA,OAAO3G,KAAKc,WAAWmF,QACnBlB,IAAWA,EAAO6B,SAAW7B,EAAO8B,qBAAuB9B,EAAOlD,WAAakD,EAAO+B,e,CAK9FC,qBACI,MAAM3D,KAAEA,GAASpD,KACjB,MAAMgH,QAAgBhH,KAAKiH,aAC3B,IAAK7D,EAAM,OACX,MAAM8D,EAAa9D,IAAS,OAAS,WAAa,SAClD4D,EAAQrB,SAAQZ,IACZA,EAAOoC,KAAOD,CAAU,G,CAIhCnB,YAAY/E,G,MACR,MAAMoG,EAAOpG,EAAQqG,cAAc,QACnC,MAAMC,GAAmBC,EAAAH,IAAI,MAAJA,SAAI,SAAJA,EAAME,sBAAkB,MAAAC,SAAA,EAAAA,EAAIf,MAAMC,KAAKzF,EAAQ0F,UACxE,MAAMc,IAAmBF,EAAiBhG,QAAUgG,EAAiB,GAAGpB,UAAY,OACpF,GAAIsB,EAAgB,CAChB,OAAOxH,KAAK+F,YAAYuB,EAAiB,G,KACtC,CACH,OAAOA,C,EAIfG,uBACI,MAAMC,EAAe1H,KAAKc,WAAWd,KAAKY,aAC1C8G,IAAY,MAAZA,SAAY,SAAZA,EAAcC,eAAe,CAAEC,MAAO,W,CAG1Cb,oCAAoCnG,GAChC,GAAIZ,KAAK6B,SAAU,OACnB7B,KAAKY,YAAcA,EACnBZ,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,eACvCoF,IACN7H,KAAK8H,wBACCD,IACN7H,KAAK+H,mBACL/H,KAAKyH,sB,CAGThE,wBACI,MAAM3C,WAAEA,GAAed,KACvB,MAAMgI,EAAgBlH,EAAWmH,WAAUjH,GAAWA,EAAQkH,WAC9D,GAAIF,GAAiB,EAAG,OAAOA,EAE/B,MAAMG,EAAerH,EAAWmH,WAAUjH,IAAYA,EAAQ4F,SAC9D,GAAIuB,GAAgB,EAAG,OAAOA,EAE9B,OAAO,C,CAGXC,0B,MACI,MAAMtH,WAAEA,EAAU0C,gBAAEA,GAAoBxD,KACxC,MAAMqI,IAAgBd,EAAA/D,EAAgB,MAAE,MAAA+D,SAAA,SAAAA,EAAEe,QAAS3H,UACnDG,EAAW6E,SAAQ3E,IACfA,EAAQkH,SAAWlH,EAAQsH,QAAUD,CAAa,G,CAI1DE,4BACI,MAAMzH,WAAEA,EAAU0C,gBAAEA,GAAoBxD,KACxC,MAAMwI,EAAiBhF,EAAgBzC,KAAI,EAAGuH,WAAYA,IAC1DxH,EAAW6E,SAAQ3E,IACfA,EAAQkH,SAAWM,EAAe/D,SAASzD,EAAQsH,MAAM,G,CAIjER,kBACI,MAAMlH,EAAcZ,KAAKY,YAEzBZ,KAAKc,WAAW6E,SAAQ,CAAC3E,EAASyH,KAC9BzH,EAAQkD,OAAStD,IAAgB6H,CAAY,G,CAIrDV,mBACI,MAAMhD,EAAS/E,KAAKc,WAAWd,KAAKY,aACpC,IAAKmE,EAAQ,OAEb,MAAM2D,IAAyB1I,KAAK2E,YAAYgE,aAChD,GAAID,EAAsB3D,EAAO6D,aAC5BtF,GAAU,IAAMyB,EAAO6D,S,CAGhClF,oBAAoBmF,GAChB,MAAMlC,kBAAEA,EAAiB7F,WAAEA,EAAUF,YAAEA,GAAgBZ,KACvD,MAAM0H,EAAe5G,EAAWF,GAChC,MAAMkI,EAA2BnC,EAAkBoC,QAAQrB,GAC3D,IAAIsB,EAAyBF,EAA2BD,EAExD,GAAIG,EAAyB,EAAG,CAC5BA,EAAyBrC,EAAkBrF,OAAS,C,MACjD,GAAI0H,EAAyBrC,EAAkBrF,OAAS,EAAG,CAC9D0H,EAAyB,C,CAG7B,MAAMC,EAAoBtC,EAAkBqC,GAC5C,OAAOlI,EAAWiI,QAAQE,E,CAG9BC,qBAAqBnE,GACjB,MAAM4B,kBAAEA,EAAiB7F,WAAEA,GAAed,KAC1C,MAAMmJ,EAAgBxC,EAAkBrF,OAAS,EACjD,GAAI6H,EAAe,CACfnJ,KAAKoJ,aAAe,MACpB,M,CAGJ,MAAMC,EAA6B1C,EAAkBoC,QAAQhE,GAC7D,MAAMuE,EAA0BD,EAC1BA,EAA6B,EAC7BA,EAA6B,EACnC,MAAME,EAAqB5C,EAAkB2C,GAC7C,MAAME,EAAmB1I,EAAWiI,QAAQQ,GAE5CvJ,KAAKY,YAAc4I,EACnBxJ,KAAK+H,mBACL/H,KAAKC,qBAAqBsB,MAAK,KAC3BwD,EAAO8B,oBAAsB9B,EAAOmD,QAAQ,G,CAIpD7F,aAAaoH,GACT,MAAMtH,SAAEA,EAAQ2B,SAAEA,EAAQsF,aAAEA,GAAiBpJ,KAC7C,IAAKyJ,GAAkBA,EAAe5H,UAAY4H,EAAe3C,cAAe,OAChF,MAAMuB,EAAgBoB,EAAenB,MACrC,MAAMoB,EAAc,CAChBpB,MAAOD,EACPvG,QAAS2H,EAAe3H,SAAW2H,EAAeE,UAAUC,QAGhE,IAAIC,EAAyB,GAC7B,GAAI1H,EAAU,CACV,MAAMqB,gBAAEA,GAAoBxD,KAC5B,MAAM8J,EAAoBtG,EAAgB7B,MAAKoD,GAAUA,EAAOuD,QAAUD,IAE1E,GAAIyB,EAAmB,CACnBD,EAASrG,EAAgByC,QAAO,EAAGqC,WAAYA,IAAUD,G,KACtD,CACHwB,EAAS,IAAIrG,EAAiBkG,E,CAGlC,GAAIN,EAAcpJ,KAAKkJ,qBAAqBO,E,KACzC,CACHI,EAAS,CAACH,E,CAGd,GAAI5F,EAAU9D,KAAK0C,iBAAiB,WAC/B1C,KAAKwD,gBAAkBqG,EAE5B7J,KAAK+J,OAAOxH,KAAK,CAAE+F,MAAOD,EAAewB,U,CAG7CzF,4BAA4B4F,GACxBhK,KAAKY,aAAeoJ,EACpBhK,KAAK8H,kBACL9H,KAAK+H,mBACL/H,KAAKyH,sB,CAGTwC,aACI,GAAIjK,KAAKkK,kBAAmB,CACxBC,aAAanK,KAAKkK,kB,CAGtBlK,KAAKkK,kBAAoBE,OAAOC,YAAW,KACvCrK,KAAKkD,aAAe,IAAI,GACzB,I,CAuDPC,cAAcH,EAAaxC,GACvBR,KAAKkD,aAAeF,EACpBhD,KAAKM,eAAe0C,EAAKxC,E,CAK7B8J,oBAAoBlB,GAChB,GAAIA,GAAgBpJ,KAAKwD,gBAAgBlC,SAAW,EAAG,CACnDtB,KAAKoJ,aAAe,MACpB,M,CAEJpJ,KAAKc,WAAW6E,SAAQZ,GAAWA,EAAO8B,mBAAqBuC,GAAgBrE,EAAOmD,SAAW,O,CAIrG1C,yBACI,GAAIxF,KAAKmC,SAAU,CACfnC,KAAKuI,2B,KACF,CACHvI,KAAKoI,yB,EAMbmC,cAAc1H,GACV,IAAK2H,EAAmB3H,EAAO7C,KAAK2E,aAAc,OAClD3E,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,SAC7C,MAAM7B,YAAEA,GAAgBZ,KACxB,UAAWY,IAAgB,UAAYA,GAAe,EAAG,CACrDZ,KAAK8H,kBACL9H,KAAK+H,kB,KACF,CACH/H,KAAKqD,yB,EAKboH,YAAY5H,GACRA,EAAMC,iB,CAKViE,gCACI/G,KAAKY,YAAcZ,KAAKyD,wBACxBzD,KAAK8H,kBACL9H,KAAK+H,kB,CAIThB,uBAAuB9F,GACnBjB,KAAKY,YAAcK,EACnBjB,KAAK8H,kBACL9H,KAAK+H,kB,CAIThB,4BAA4BlE,GACxB7C,KAAK4C,uBAAuBC,E,CAIhCkE,oBACI,OAAO/G,KAAK6F,W,CAIhBkB,mBACI,OAAO/G,KAAKc,U,CAsNhB4J,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OACIE,MAAM,UACNC,IAAKC,GAAO/K,KAAKgL,eAAiBD,EAClCE,WAAYjL,KAAKsE,iBAEjBqG,EAAA,OACIE,MAAM,UAAS,aACH5F,EAAI,kCAAmC,CAACjF,KAAKkL,QAAO,uBAC1C,KAAKlL,KAAKmC,WAChCgF,KAAMnH,KAAKoD,MAAQ,UACnB+H,UAAWnL,KAAK+D,uBAChBqH,QAASpL,KAAK6E,cAEd8F,EAAA,e"}
@@ -1,2 +1,2 @@
1
- import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-f34521a4.js";const a='*{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-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"||t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null||t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
2
- //# sourceMappingURL=p-0cade28b.entry.js.map
1
+ import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-fb903495.js";const a='*{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-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"||t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null||t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
2
+ //# sourceMappingURL=p-36bff57a.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as t,c as e,h as i,g as r}from"./p-277dc8cd.js";import{c as o,l as s}from"./p-f34521a4.js";const a="*{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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const n=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.valueUpdated();this.updateDisabled()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.label=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.optional=false;this.hasError=false}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}componentWillLoad(){this.updateReadonly(this.readonly)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueUpdated(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(t){this.checkboxElements.forEach((e=>{e.readonly=t}))}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){return i("div",null,this.label||this.optional?i("div",{class:"group-legend"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",i("fieldset",{class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueUpdated"],disabled:["updateDisabled"],readonly:["updateReadonly"]}}};n.style=a;export{n as q2_checkbox_group};
2
- //# sourceMappingURL=p-57e81863.entry.js.map
1
+ import{r as t,c as e,h as i,g as r}from"./p-277dc8cd.js";import{c as o,l as s}from"./p-fb903495.js";const a="*{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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const n=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.valueUpdated();this.updateDisabled()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.label=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.optional=false;this.hasError=false}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}componentWillLoad(){this.updateReadonly(this.readonly)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueUpdated(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(t){this.checkboxElements.forEach((e=>{e.readonly=t}))}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){return i("div",null,this.label||this.optional?i("div",{class:"group-legend"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",i("fieldset",{class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueUpdated"],disabled:["updateDisabled"],readonly:["updateReadonly"]}}};n.style=a;export{n as q2_checkbox_group};
2
+ //# sourceMappingURL=p-39e94e12.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["stylesCss","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","valueUpdated","updateDisabled","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","Array","from","hostElement","querySelectorAll","protectedValue","componentWillLoad","updateReadonly","readonly","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","disconnectedCallback","disconnect","hasOwnProperty","groupDisabled","disabled","checkbox","newReadonly","setValue","values","valuesSet","Set","isArray","has","click","onHostElementChange","target","onchange","detail","render","h","label","optional","class","loc","hasError","onChange","type","inputDom"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value || {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly(this.readonly);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n @Watch('readonly')\n updateReadonly(newReadonly: boolean) {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = newReadonly;\n });\n }\n\n /// Methods ///\n /**\n * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n *\n * @testOnly\n */\n @Method()\n setValue(values: string | string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n return (\n <div>\n {this.label || this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label || this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,oiE,MCmBLC,EAAe,M,wDASxBC,KAAAC,IAAc,kBAAkBC,MAWhCF,KAAAG,mBAAqB,KACjBH,KAAKI,eACLJ,KAAKK,gBAAgB,EAGzBL,KAAAM,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPV,KAAKW,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7Cf,KAAKgB,OAAOC,KAAKR,EAAW,GAC7B,EAAE,E,wDA9BoC,M,cACA,M,cACA,M,cACA,K,CAMzCE,uBACA,OAAOO,MAAMC,KAAKnB,KAAKoB,YAAYC,iBAAiB,e,CAGpDC,qBACA,OAAOtB,KAAKc,OAAS,E,CAqBzBS,oBACIvB,KAAKwB,eAAexB,KAAKyB,S,CAG7BC,mBACI,MAAMC,EAAW,IAAIC,iBAAiB5B,KAAKG,oBAC3CwB,EAASE,QAAQ7B,KAAKoB,YAAa,CAAEU,UAAW,OAChD9B,KAAK+B,iBAAmBJ,EACxB3B,KAAKG,oB,CAGT6B,uBACI,GAAIhC,KAAK+B,iBAAkB,CACvB/B,KAAK+B,iBAAiBE,aACtBjC,KAAK+B,iBAAmB,I,EAKhC3B,eACI,GAAIJ,KAAKyB,SAAU,OACnBzB,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAIb,KAAKsB,eAAeY,eAAerB,EAAMC,OAAQ,CACjDD,EAAME,QAAUf,KAAKc,MAAMD,EAAMC,M,KAM7CT,iBACI,MAAM8B,EAAgBnC,KAAKoC,SAC3BpC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAK9CX,eAAec,GACXtC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASZ,SAAWa,CAAW,G,CAWvCC,SAASC,GACL,MAAMC,EAAY,IAAIC,IAAIxB,MAAMyB,QAAQH,GAAUA,EAAS,CAACA,IAC5DxC,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAI4B,EAAUG,IAAI/B,EAAMC,OAAQD,EAAMgC,OAAO,G,CASrDC,oBAAoBvC,GAChB,GAAIA,EAAMwC,SAAW/C,KAAKoB,cAAgBpB,KAAKoB,YAAY4B,SAAU,CACjEhD,KAAKc,MAAQP,EAAM0C,M,EAI3BC,SACI,OACIC,EAAA,WACKnD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,OAAKG,MAAM,gBACNtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SAAWF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAA2C,IAC1F,GAIVJ,EAAA,YACIG,MAAO,wBAAwBtD,KAAKwD,SAAW,YAAc,KAC7DC,SAAUzD,KAAKM,sBAAqB,eACtB,GAAGN,KAAKwD,YAErBxD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,UAAQG,MAAM,WACTtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SACFF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAAwC,IAIvE,GAIZvD,KAAKwD,SACFL,EAAA,OAAKG,MAAO,wBAAwBtD,KAAKoD,OAASpD,KAAKqD,SAAW,GAAK,cACnEF,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAIT1D,KAAK2D,Y,CAMtBA,WACI,OAAOR,EAAA,Y"}
1
+ {"version":3,"names":["stylesCss","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","valueUpdated","updateDisabled","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","Array","from","hostElement","querySelectorAll","protectedValue","componentWillLoad","updateReadonly","readonly","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","disconnectedCallback","disconnect","hasOwnProperty","groupDisabled","disabled","checkbox","newReadonly","setValue","values","valuesSet","Set","isArray","has","click","onHostElementChange","target","onchange","detail","render","h","label","optional","class","loc","hasError","onChange","type","inputDom"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value || {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly(this.readonly);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n @Watch('readonly')\n updateReadonly(newReadonly: boolean) {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = newReadonly;\n });\n }\n\n /// Methods ///\n /**\n * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n *\n * @testOnly\n */\n @Method()\n setValue(values: string | string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n /**\n * Emitted when a checkbox is toggled.\n *\n * The event detail is an object with the value of each checkbox as the key and the checked state as the value.\n *\n * @legacyEvent\n */\n @Event() change: EventEmitter<Record<string, boolean>>;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n return (\n <div>\n {this.label || this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label || this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,oiE,MCmBLC,EAAe,M,wDASxBC,KAAAC,IAAc,kBAAkBC,MAWhCF,KAAAG,mBAAqB,KACjBH,KAAKI,eACLJ,KAAKK,gBAAgB,EAGzBL,KAAAM,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPV,KAAKW,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7Cf,KAAKgB,OAAOC,KAAKR,EAAW,GAC7B,EAAE,E,wDA9BoC,M,cACA,M,cACA,M,cACA,K,CAMzCE,uBACA,OAAOO,MAAMC,KAAKnB,KAAKoB,YAAYC,iBAAiB,e,CAGpDC,qBACA,OAAOtB,KAAKc,OAAS,E,CAqBzBS,oBACIvB,KAAKwB,eAAexB,KAAKyB,S,CAG7BC,mBACI,MAAMC,EAAW,IAAIC,iBAAiB5B,KAAKG,oBAC3CwB,EAASE,QAAQ7B,KAAKoB,YAAa,CAAEU,UAAW,OAChD9B,KAAK+B,iBAAmBJ,EACxB3B,KAAKG,oB,CAGT6B,uBACI,GAAIhC,KAAK+B,iBAAkB,CACvB/B,KAAK+B,iBAAiBE,aACtBjC,KAAK+B,iBAAmB,I,EAKhC3B,eACI,GAAIJ,KAAKyB,SAAU,OACnBzB,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAIb,KAAKsB,eAAeY,eAAerB,EAAMC,OAAQ,CACjDD,EAAME,QAAUf,KAAKc,MAAMD,EAAMC,M,KAM7CT,iBACI,MAAM8B,EAAgBnC,KAAKoC,SAC3BpC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAK9CX,eAAec,GACXtC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASZ,SAAWa,CAAW,G,CAWvCC,SAASC,GACL,MAAMC,EAAY,IAAIC,IAAIxB,MAAMyB,QAAQH,GAAUA,EAAS,CAACA,IAC5DxC,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAI4B,EAAUG,IAAI/B,EAAMC,OAAQD,EAAMgC,OAAO,G,CAgBrDC,oBAAoBvC,GAChB,GAAIA,EAAMwC,SAAW/C,KAAKoB,cAAgBpB,KAAKoB,YAAY4B,SAAU,CACjEhD,KAAKc,MAAQP,EAAM0C,M,EAI3BC,SACI,OACIC,EAAA,WACKnD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,OAAKG,MAAM,gBACNtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SAAWF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAA2C,IAC1F,GAIVJ,EAAA,YACIG,MAAO,wBAAwBtD,KAAKwD,SAAW,YAAc,KAC7DC,SAAUzD,KAAKM,sBAAqB,eACtB,GAAGN,KAAKwD,YAErBxD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,UAAQG,MAAM,WACTtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SACFF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAAwC,IAIvE,GAIZvD,KAAKwD,SACFL,EAAA,OAAKG,MAAO,wBAAwBtD,KAAKoD,OAASpD,KAAKqD,SAAW,GAAK,cACnEF,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAIT1D,KAAK2D,Y,CAMtBA,WACI,OAAOR,EAAA,Y"}
@@ -0,0 +1,2 @@
1
+ import{r as t,c as a,h as r,F as c,g as o}from"./p-277dc8cd.js";import{b as e,o as i,i as s}from"./p-fb903495.js";const n="*{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:block}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";const d=["primary","secondary","tertiary","info","success","warning","alert","accent-1","accent-2","accent-3","accent-4","accent-5","accent-6","accent-7","accent-8","accent-9","accent-10","accent-11","accent-12"];const l=class{constructor(r){t(this,r);this.click=a(this,"click",7);this.handleClick=t=>{if(this.url)return true;t.preventDefault();t.stopPropagation();this.click.emit()};this.title=undefined;this.description=undefined;this.avatarName=undefined;this.avatarInitials=undefined;this.avatarIcon=undefined;this.avatarSrc=undefined;this.isSmall=undefined;this.bar=undefined;this.isStatic=undefined;this.isTouch=e();this.url=undefined;this.target=undefined;this.type="clickable";this.isAutoTouch=false;this.isAutoSmall=false}componentDidLoad(){const{hostElement:t,clickableElement:a}=this;t.click=()=>a.click();i(this.hostElement);this.resizeObserver=new ResizeObserver((()=>this.determineAutoSmall()));this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.resizeObserver=null}onHostElementFocus(t){if(!s(t,this.hostElement))return;this.clickableElement.focus()}getBarClasses(){const{bar:t}=this;return{bar:true,[`color-${t}`]:this.isBarColorPredefined()}}getBarStyles(){const{bar:t}=this;return this.isBarColorPredefined()?{}:{"--comp-bar-color":t}}isBarColorPredefined(){return d.includes(this.bar)}determineAutoTouch(){if(this.hostElement.hasAttribute("is-touch"))return;this.isAutoTouch=e()}determineAutoSmall(){var t,a;if(this.isStatic)return;if(this.hostElement.hasAttribute("is-small"))return;const{containerElement:r,avatarElement:c}=this;const o=(t=c===null||c===void 0?void 0:c.offsetWidth)!==null&&t!==void 0?t:0;const e=(a=r===null||r===void 0?void 0:r.offsetWidth)!==null&&a!==void 0?a:0;const i=o+e;this.isAutoSmall=i<350}generateAvatar(){const{avatarName:t,avatarInitials:a,avatarSrc:c,avatarIcon:o}=this;if(o){return r("q2-icon",{type:o,ref:t=>this.avatarElement=t,"test-id":"avatar"})}else if(t||a||c){return r("q2-avatar",{name:t,initials:a,src:c,ref:t=>this.avatarElement=t,"test-id":"avatar"})}}generateContent(){return r(c,null,this.bar&&r("div",{class:this.getBarClasses(),"test-id":"bar",style:this.getBarStyles()}),this.generateAvatar(),r("div",{class:"content","test-id":"contentContainer",ref:t=>this.containerElement=t},this.title&&r("h3",{"test-id":"title"},this.title),this.description&&r("p",{"test-id":"description"},this.description),r("slot",null)),this.isTouch&&!this.isStatic&&r("q2-icon",{"test-id":"touchIndicator",type:"chevron-right",class:"touch-indicator"}))}generateContainerClasses(){const{isSmall:t,isAutoSmall:a,avatarName:r,avatarInitials:c,avatarSrc:o,avatarIcon:e,isTouch:i,isAutoTouch:s,isStatic:n,type:d}=this;const l=["container",d];const h=t||a;const v=i||s;const b=r||c||o||e;if(h)l.push("is-small");if(v&&!n)l.push("is-touch");if(b)l.push("has-avatar");if(n)l.push("is-static");return l.join(" ")}render(){const{url:t,isStatic:a,type:c}=this;if(a||c==="non-clickable")return r("div",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement"},this.generateContent());else if(!!t)return r("a",{ref:t=>this.clickableElement=t,href:this.url,class:this.generateContainerClasses(),target:this.target,rel:"noopener noreferrer","test-id":"clickableElement",onClick:this.handleClick},this.generateContent());else return r("button",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement",type:"button",onClick:this.handleClick},this.generateContent())}get hostElement(){return o(this)}};l.style=n;export{l as q2_card};
2
+ //# sourceMappingURL=p-3f20d610.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["stylesCss","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","componentDidLoad","hostElement","clickableElement","overrideFocus","resizeObserver","ResizeObserver","determineAutoSmall","observe","disconnectedCallback","onHostElementFocus","isEventFromElement","focus","getBarClasses","bar","isBarColorPredefined","getBarStyles","includes","determineAutoTouch","hasAttribute","isAutoTouch","isStatic","containerElement","avatarElement","avatarWidth","_a","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContent","Fragment","class","style","title","description","isTouch","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","render","href","target","rel","onClick"],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: 100%;\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n )};\n\n &:hover,\n &:active,\n &:focus {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(1);\n}\n\np {\n @include line-clamp(2);\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({\n tag: 'q2-card',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n @Prop({ reflect: true }) title: string;\n @Prop({ reflect: true }) description: string;\n @Prop({ reflect: true }) avatarName: string;\n @Prop({ reflect: true }) avatarInitials: string;\n @Prop({ reflect: true }) avatarIcon: string;\n @Prop({ reflect: true }) avatarSrc: string;\n @Prop({ reflect: true }) isSmall: boolean;\n @Prop({ reflect: true }) bar: string;\n @Prop({ reflect: true }) isStatic: boolean;\n @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) target: '_self' | '_blank' | '_parent' | '_top';\n @Prop({ reflect: true }) type: 'clickable' | 'non-clickable' = 'clickable';\n\n @State() isAutoTouch: boolean = false;\n @State() isAutoSmall: boolean = false;\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the card is clicked and the `url` property is not provided.\n */\n @Event() click: EventEmitter<undefined>;\n\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n avatarElement: HTMLElement;\n resizeObserver: ResizeObserver;\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n disconnectedCallback() {\n this.resizeObserver = null;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName || avatarInitials || avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall || isAutoSmall;\n const showTouch = isTouch || isAutoTouch;\n const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic || type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{r as e,c as a,h as r,H as t,g as o}from"./p-277dc8cd.js";import{l as n}from"./p-f34521a4.js";const s="*{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}";const i=class{constructor(r){e(this,r);this.clickCarouselPane=a(this,"clickCarouselPane",7);this.generatePaneClass=e=>`q2-carousel-pane swiper-slide q2-carousel-pane-${e}`;this.paneClicked=e=>{if(this.isActivePane)return;e.preventDefault();this.clickCarouselPane.emit({paneIndex:this.index,pane:this.hostElement})};this.index=undefined;this.siblingCount=undefined;this.isActivePane=undefined;this.label=undefined}get currentPaneIndex(){return Array.prototype.indexOf.call(this.hostElement.parentElement.children,this.hostElement)}componentDidLoad(){this.determineDisabledContent()}determineDisabledContent(){const{isActivePane:e}=this;const a=this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');a.forEach((a=>{const r=a.hasAttribute("tabindex")&&parseInt(a.getAttribute("tabindex"))>=0;if(r){a.dataset.q2Tabindex=`${a.tabIndex}`}if(e){if(a.hasAttribute("data-q2-tabindex")){a.tabIndex=parseInt(a.getAttribute("data-q2-tabindex"));a.removeAttribute("data-q2-tabindex")}else if(a.tagName.startsWith("Q2-")){a.tabIndex=undefined}else{a.removeAttribute("tabindex")}}else{a.tabIndex=-1}}))}render(){const{label:e}=this;return r(t,{class:this.generatePaneClass(this.currentPaneIndex),tabIndex:this.isActivePane?0:-1,role:"group","aria-roledescription":"slide","aria-hidden":this.isActivePane?undefined:"true","aria-label":e?n(e):n("tecton.element.carousel.itemDescription",[(this.currentPaneIndex+1).toString(),(this.siblingCount||0).toString()]),onClick:this.paneClicked},r("article",{class:"q2-carousel-pane-main-content"},r("slot",null)))}get hostElement(){return o(this)}static get watchers(){return{isActivePane:["determineDisabledContent"]}}};i.style=s;export{i as q2_carousel_pane};
2
- //# sourceMappingURL=p-29a7ca63.entry.js.map
1
+ import{r as e,c as a,h as r,H as t,g as o}from"./p-277dc8cd.js";import{l as n}from"./p-fb903495.js";const s="*{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}";const i=class{constructor(r){e(this,r);this.clickCarouselPane=a(this,"clickCarouselPane",7);this.generatePaneClass=e=>`q2-carousel-pane swiper-slide q2-carousel-pane-${e}`;this.paneClicked=e=>{if(this.isActivePane)return;e.preventDefault();this.clickCarouselPane.emit({paneIndex:this.index,pane:this.hostElement})};this.index=undefined;this.siblingCount=undefined;this.isActivePane=undefined;this.label=undefined}get currentPaneIndex(){return Array.prototype.indexOf.call(this.hostElement.parentElement.children,this.hostElement)}componentDidLoad(){this.determineDisabledContent()}determineDisabledContent(){const{isActivePane:e}=this;const a=this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');a.forEach((a=>{const r=a.hasAttribute("tabindex")&&parseInt(a.getAttribute("tabindex"))>=0;if(r){a.dataset.q2Tabindex=`${a.tabIndex}`}if(e){if(a.hasAttribute("data-q2-tabindex")){a.tabIndex=parseInt(a.getAttribute("data-q2-tabindex"));a.removeAttribute("data-q2-tabindex")}else if(a.tagName.startsWith("Q2-")){a.tabIndex=undefined}else{a.removeAttribute("tabindex")}}else{a.tabIndex=-1}}))}render(){const{label:e}=this;return r(t,{class:this.generatePaneClass(this.currentPaneIndex),tabIndex:this.isActivePane?0:-1,role:"group","aria-roledescription":"slide","aria-hidden":this.isActivePane?undefined:"true","aria-label":e?n(e):n("tecton.element.carousel.itemDescription",[(this.currentPaneIndex+1).toString(),(this.siblingCount||0).toString()]),onClick:this.paneClicked},r("article",{class:"q2-carousel-pane-main-content"},r("slot",null)))}get hostElement(){return o(this)}static get watchers(){return{isActivePane:["determineDisabledContent"]}}};i.style=s;export{i as q2_carousel_pane};
2
+ //# sourceMappingURL=p-44c2d7a2.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["stylesCss","Q2Carousel","this","generatePaneClass","currentIndex","paneClicked","event","isActivePane","preventDefault","clickCarouselPane","emit","paneIndex","index","pane","hostElement","currentPaneIndex","Array","prototype","indexOf","call","parentElement","children","componentDidLoad","determineDisabledContent","focusableElements","querySelectorAll","forEach","element","hasValidTabIndex","hasAttribute","parseInt","getAttribute","dataset","q2Tabindex","tabIndex","removeAttribute","tagName","startsWith","undefined","render","label","h","Host","class","role","loc","toString","siblingCount","onClick"],"sources":["./src/components/q2-carousel-pane/styles.scss?tag=q2-carousel-pane","./src/components/q2-carousel-pane/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote('0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n cursor: grab;\n\n &:not([is-active-pane]) * {\n cursor: pointer;\n }\n\n &:focus {\n box-shadow: none;\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-shadow: var(--comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), unquote('0.5rem 0.5rem 0.5rem 0.5rem'));\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n .q2-carousel-pane-main-content:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n tag: 'q2-carousel-pane',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n /**\n * Used by q2-carousel to determine the pane's index\n * @private\n */\n @Prop({ reflect: false }) index: number;\n /**\n * Used by q2-carousel to indicate how many panes are in the carousel\n * @private\n */\n @Prop({ reflect: false }) siblingCount: number;\n /**\n * Used by q2-carousel to indicate which pane is currently active\n * @private\n */\n @Prop({ reflect: true }) isActivePane: boolean;\n @Prop({ reflect: true }) label: string;\n @Element() hostElement: HTMLElement;\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n @Event() clickCarouselPane: EventEmitter;\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n this.clickCarouselPane.emit({\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.dataset.q2Tabindex = `${element.tabIndex}`;\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else if (element.tagName.startsWith('Q2-')) {\n element.tabIndex = undefined;\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount || 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,83E,MCQLC,EAAU,M,8EA2BnBC,KAAAC,kBAAqBC,GACV,kDAAkDA,IAK7DF,KAAAG,YAAcC,IACV,GAAIJ,KAAKK,aAAc,OACvBD,EAAME,iBACNN,KAAKO,kBAAkBC,KAAK,CACxBC,UAAWT,KAAKU,MAChBC,KAAMX,KAAKY,aACb,E,kGApBFC,uBACA,OAAOC,MAAMC,UAAUC,QAAQC,KAAKjB,KAAKY,YAAYM,cAAcC,SAAUnB,KAAKY,Y,CAGtFQ,mBACIpB,KAAKqB,0B,CAmBTA,2BACI,MAAMhB,aAAEA,GAAiBL,KACzB,MAAMsB,EAAoBtB,KAAKY,YAAYW,iBACvC,4DAGJD,EAAkBE,SAAQC,IACtB,MAAMC,EACFD,EAAQE,aAAa,aAAeC,SAASH,EAAQI,aAAa,cAAgB,EAEtF,GAAIH,EAAkB,CAClBD,EAAQK,QAAQC,WAAa,GAAGN,EAAQO,U,CAG5C,GAAI3B,EAAc,CACd,GAAIoB,EAAQE,aAAa,oBAAqB,CAC1CF,EAAQO,SAAWJ,SAASH,EAAQI,aAAa,qBACjDJ,EAAQQ,gBAAgB,mB,MACrB,GAAIR,EAAQS,QAAQC,WAAW,OAAQ,CAC1CV,EAAQO,SAAWI,S,KAChB,CACHX,EAAQQ,gBAAgB,W,MAEzB,CACHR,EAAQO,UAAY,C,KAKhCK,SACI,MAAMC,MAAEA,GAAUtC,KAElB,OACIuC,EAACC,EAAI,CACDC,MAAOzC,KAAKC,kBAAkBD,KAAKa,kBACnCmB,SAAUhC,KAAKK,aAAe,GAAK,EACnCqC,KAAK,QAAO,uBACS,QAAO,cACf1C,KAAKK,aAAe+B,UAAY,OAAM,aAE/CE,EACMK,EAAIL,GACJK,EAAI,0CAA2C,EAC1C3C,KAAKa,iBAAmB,GAAG+B,YAC3B5C,KAAK6C,cAAgB,GAAGD,aAGvCE,QAAS9C,KAAKG,aAEdoC,EAAA,WAASE,MAAM,iCACXF,EAAA,c"}
1
+ {"version":3,"names":["stylesCss","Q2Carousel","this","generatePaneClass","currentIndex","paneClicked","event","isActivePane","preventDefault","clickCarouselPane","emit","paneIndex","index","pane","hostElement","currentPaneIndex","Array","prototype","indexOf","call","parentElement","children","componentDidLoad","determineDisabledContent","focusableElements","querySelectorAll","forEach","element","hasValidTabIndex","hasAttribute","parseInt","getAttribute","dataset","q2Tabindex","tabIndex","removeAttribute","tagName","startsWith","undefined","render","label","h","Host","class","role","loc","toString","siblingCount","onClick"],"sources":["./src/components/q2-carousel-pane/styles.scss?tag=q2-carousel-pane","./src/components/q2-carousel-pane/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote('0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n cursor: grab;\n\n &:not([is-active-pane]) * {\n cursor: pointer;\n }\n\n &:focus {\n box-shadow: none;\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-shadow: var(--comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), unquote('0.5rem 0.5rem 0.5rem 0.5rem'));\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n .q2-carousel-pane-main-content:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n tag: 'q2-carousel-pane',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n /**\n * Used by q2-carousel to determine the pane's index\n * @private\n */\n @Prop({ reflect: false }) index: number;\n /**\n * Used by q2-carousel to indicate how many panes are in the carousel\n * @private\n */\n @Prop({ reflect: false }) siblingCount: number;\n /**\n * Used by q2-carousel to indicate which pane is currently active\n * @private\n */\n @Prop({ reflect: true }) isActivePane: boolean;\n @Prop({ reflect: true }) label: string;\n @Element() hostElement: HTMLElement;\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n /**\n * Emitted when the pane is clicked.\n */\n @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n this.clickCarouselPane.emit({\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.dataset.q2Tabindex = `${element.tabIndex}`;\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else if (element.tagName.startsWith('Q2-')) {\n element.tabIndex = undefined;\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount || 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,83E,MCQLC,EAAU,M,8EA2BnBC,KAAAC,kBAAqBC,GACV,kDAAkDA,IAQ7DF,KAAAG,YAAcC,IACV,GAAIJ,KAAKK,aAAc,OACvBD,EAAME,iBACNN,KAAKO,kBAAkBC,KAAK,CACxBC,UAAWT,KAAKU,MAChBC,KAAMX,KAAKY,aACb,E,kGAvBFC,uBACA,OAAOC,MAAMC,UAAUC,QAAQC,KAAKjB,KAAKY,YAAYM,cAAcC,SAAUnB,KAAKY,Y,CAGtFQ,mBACIpB,KAAKqB,0B,CAsBTA,2BACI,MAAMhB,aAAEA,GAAiBL,KACzB,MAAMsB,EAAoBtB,KAAKY,YAAYW,iBACvC,4DAGJD,EAAkBE,SAAQC,IACtB,MAAMC,EACFD,EAAQE,aAAa,aAAeC,SAASH,EAAQI,aAAa,cAAgB,EAEtF,GAAIH,EAAkB,CAClBD,EAAQK,QAAQC,WAAa,GAAGN,EAAQO,U,CAG5C,GAAI3B,EAAc,CACd,GAAIoB,EAAQE,aAAa,oBAAqB,CAC1CF,EAAQO,SAAWJ,SAASH,EAAQI,aAAa,qBACjDJ,EAAQQ,gBAAgB,mB,MACrB,GAAIR,EAAQS,QAAQC,WAAW,OAAQ,CAC1CV,EAAQO,SAAWI,S,KAChB,CACHX,EAAQQ,gBAAgB,W,MAEzB,CACHR,EAAQO,UAAY,C,KAKhCK,SACI,MAAMC,MAAEA,GAAUtC,KAElB,OACIuC,EAACC,EAAI,CACDC,MAAOzC,KAAKC,kBAAkBD,KAAKa,kBACnCmB,SAAUhC,KAAKK,aAAe,GAAK,EACnCqC,KAAK,QAAO,uBACS,QAAO,cACf1C,KAAKK,aAAe+B,UAAY,OAAM,aAE/CE,EACMK,EAAIL,GACJK,EAAI,0CAA2C,EAC1C3C,KAAKa,iBAAmB,GAAG+B,YAC3B5C,KAAK6C,cAAgB,GAAGD,aAGvCE,QAAS9C,KAAKG,aAEdoC,EAAA,WAASE,MAAM,iCACXF,EAAA,c"}
@@ -1,2 +1,2 @@
1
- import{r as o,c as e,h as c,g as t}from"./p-277dc8cd.js";import{c as r,h,o as i,i as a,l}from"./p-f34521a4.js";const s='*{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, #c30000));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, #c30000)));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, #c30000)));stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';const k=class{constructor(c){o(this,c);this.change=e(this,"change",7);this._id=`checkbox-${r()}`;this.onInputClick=o=>{o.stopPropagation();o.preventDefault();const e=this.disabled||this.readonly;if(e)return;if(!(o.target instanceof HTMLInputElement))return;const{value:c,checked:t}=o.target;this.change.emit({value:c,checked:t});this.inputElement.focus()};this.checked=false;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.alignment=undefined;this.description=undefined;this.ariaLabel=undefined}componentWillLoad(){h(this)}componentDidLoad(){i(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){setTimeout((()=>this.handleChangeEvent(o)),0)}delegateFocus(o){if(!a(o,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){h(this)}handleChangeEvent(o){if(this.readonly||this.disabled||this.hostElement.onchange||o.defaultPrevented||o.target!==this.hostElement||!o.detail){return}this.checked=o.detail.checked}render(){const o=["label-text"];if(this.hideLabel)o.push("sr");return c("div",{class:"container"},c("input",{ref:o=>this.inputElement=o,"aria-describedby":this.description?"description":undefined,"aria-invalid":`${this.hasError}`,checked:this.indeterminate||this.checked||false,class:"sr",disabled:!!this.disabled||!!this.groupDisabled,id:this._id,name:this.name||this._id,onClick:this.onInputClick,"test-id":"q2CheckboxInnerCheckBox",type:"checkbox",value:this.value}),c("label",{htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),c("div",{class:o.join(" ")},c("label",{"test-id":"checkboxLabel",htmlFor:this._id},l(this.label),c("slot",null))),this.description&&c("div",{class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){if(this.type==="favorite"){return c("q2-icon",{type:"star",class:"checkbox-icon"})}if(this.type==="toggle"){return this.generateToggleSVG()}return c("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},c("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){if(this.indeterminate){return c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"})}return c("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return c("div",{class:"toggle-svg"},c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track","test-id":"toggleTrack"},c("rect",{width:"36",height:"14",rx:"7",x:"5"})),c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator","test-id":"toggleIndicator"},c("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),c("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),c("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return t(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};k.style=s;export{k as q2_checkbox};
2
- //# sourceMappingURL=p-deb773a5.entry.js.map
1
+ import{r as o,c as e,h as c,g as t}from"./p-277dc8cd.js";import{c as r,h,o as i,i as a,l}from"./p-fb903495.js";const s='*{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, #c30000));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, #c30000)));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, #c30000)));stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';const k=class{constructor(c){o(this,c);this.change=e(this,"change",7);this._id=`checkbox-${r()}`;this.onInputClick=o=>{o.stopPropagation();o.preventDefault();const e=this.disabled||this.readonly;if(e)return;if(!(o.target instanceof HTMLInputElement))return;const{value:c,checked:t}=o.target;this.change.emit({value:c,checked:t});this.inputElement.focus()};this.checked=false;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.alignment=undefined;this.description=undefined;this.ariaLabel=undefined}componentWillLoad(){h(this)}componentDidLoad(){i(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){setTimeout((()=>this.handleChangeEvent(o)),0)}delegateFocus(o){if(!a(o,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){h(this)}handleChangeEvent(o){if(this.readonly||this.disabled||this.hostElement.onchange||o.defaultPrevented||o.target!==this.hostElement||!o.detail){return}this.checked=o.detail.checked}render(){const o=["label-text"];if(this.hideLabel)o.push("sr");return c("div",{class:"container"},c("input",{ref:o=>this.inputElement=o,"aria-describedby":this.description?"description":undefined,"aria-invalid":`${this.hasError}`,checked:this.indeterminate||this.checked||false,class:"sr",disabled:!!this.disabled||!!this.groupDisabled,id:this._id,name:this.name||this._id,onClick:this.onInputClick,"test-id":"q2CheckboxInnerCheckBox",type:"checkbox",value:this.value}),c("label",{htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),c("div",{class:o.join(" ")},c("label",{"test-id":"checkboxLabel",htmlFor:this._id},l(this.label),c("slot",null))),this.description&&c("div",{class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){if(this.type==="favorite"){return c("q2-icon",{type:"star",class:"checkbox-icon"})}if(this.type==="toggle"){return this.generateToggleSVG()}return c("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},c("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){if(this.indeterminate){return c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"})}return c("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return c("div",{class:"toggle-svg"},c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track","test-id":"toggleTrack"},c("rect",{width:"36",height:"14",rx:"7",x:"5"})),c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator","test-id":"toggleIndicator"},c("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),c("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),c("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return t(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};k.style=s;export{k as q2_checkbox};
2
+ //# sourceMappingURL=p-461dca3d.entry.js.map