q2-tecton-elements 1.46.1 → 1.47.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 (257) hide show
  1. package/dist/cjs/click-elsewhere_2.cjs.entry.js +6 -8
  2. package/dist/cjs/click-elsewhere_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/{index-0e15dc8d.js → index-a93362ed.js} +3 -3
  4. package/dist/cjs/index-a93362ed.js.map +1 -0
  5. package/dist/cjs/{index-59fb7c74.js → index-c385e32f.js} +1 -1
  6. package/dist/cjs/{index-59fb7c74.js.map → index-c385e32f.js.map} +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  9. package/dist/cjs/q2-btn_2.cjs.entry.js +1 -1
  10. package/dist/cjs/q2-calendar.cjs.entry.js +18 -4
  11. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  12. package/dist/cjs/q2-card.cjs.entry.js +1 -1
  13. package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
  14. package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
  15. package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
  16. package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-chart-donut.cjs.entry.js +3 -4
  18. package/dist/cjs/q2-chart-donut.cjs.entry.js.map +1 -1
  19. package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
  20. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  21. package/dist/cjs/q2-data-table.cjs.entry.js +1 -1
  22. package/dist/cjs/q2-detail.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  24. package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
  25. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  26. package/dist/cjs/q2-icon.cjs.entry.js +1 -1
  27. package/dist/cjs/q2-input.cjs.entry.js +22 -3
  28. package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
  29. package/dist/cjs/q2-item.cjs.entry.js +2 -2
  30. package/dist/cjs/q2-item.cjs.entry.js.map +1 -1
  31. package/dist/cjs/q2-legend.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-legend.cjs.entry.js.map +1 -1
  33. package/dist/cjs/q2-list.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-message.cjs.entry.js +1 -1
  36. package/dist/cjs/q2-month-picker.cjs.entry.js +1 -1
  37. package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
  38. package/dist/cjs/q2-option-list.cjs.entry.js +1 -1
  39. package/dist/cjs/q2-pagination.cjs.entry.js +1 -1
  40. package/dist/cjs/q2-pill.cjs.entry.js +1 -1
  41. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  42. package/dist/cjs/q2-radio.cjs.entry.js +1 -1
  43. package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
  44. package/dist/cjs/q2-section.cjs.entry.js +1 -1
  45. package/dist/cjs/q2-select.cjs.entry.js +6 -4
  46. package/dist/cjs/q2-select.cjs.entry.js.map +1 -1
  47. package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
  48. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
  49. package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
  50. package/dist/cjs/q2-tab-container.cjs.entry.js +1 -1
  51. package/dist/cjs/q2-tag.cjs.entry.js +1 -1
  52. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  53. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  54. package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
  55. package/dist/collection/components/q2-calendar/q2-calendar.js +16 -2
  56. package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
  57. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +2 -3
  58. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js.map +1 -1
  59. package/dist/collection/components/q2-data-table/q2-data-table.js +6 -6
  60. package/dist/collection/components/q2-icon/assets/icon-file-list.json +1 -0
  61. package/dist/collection/components/q2-icon/assets/standard.symbol.svg +1 -1
  62. package/dist/collection/components/q2-input/q2-input.js +120 -5
  63. package/dist/collection/components/q2-input/q2-input.js.map +1 -1
  64. package/dist/collection/components/q2-item/q2-item.js +1 -1
  65. package/dist/collection/components/q2-item/q2-item.js.map +1 -1
  66. package/dist/collection/components/q2-legend/q2-legend.css +1 -1
  67. package/dist/collection/components/q2-option-list/q2-option-list.js +2 -2
  68. package/dist/collection/components/q2-popover/q2-popover.js +5 -7
  69. package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
  70. package/dist/collection/components/q2-select/q2-select.js +11 -3
  71. package/dist/collection/components/q2-select/q2-select.js.map +1 -1
  72. package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +2 -2
  73. package/dist/collection/utils/index.js +2 -2
  74. package/dist/collection/utils/index.js.map +1 -1
  75. package/dist/components/index2.js +2 -2
  76. package/dist/components/index2.js.map +1 -1
  77. package/dist/components/q2-calendar.js +16 -2
  78. package/dist/components/q2-calendar.js.map +1 -1
  79. package/dist/components/q2-chart-donut.js +2 -3
  80. package/dist/components/q2-chart-donut.js.map +1 -1
  81. package/dist/components/q2-input2.js +26 -3
  82. package/dist/components/q2-input2.js.map +1 -1
  83. package/dist/components/q2-item.js +1 -1
  84. package/dist/components/q2-item.js.map +1 -1
  85. package/dist/components/q2-legend2.js +1 -1
  86. package/dist/components/q2-legend2.js.map +1 -1
  87. package/dist/components/q2-popover2.js +5 -7
  88. package/dist/components/q2-popover2.js.map +1 -1
  89. package/dist/components/q2-select2.js +6 -4
  90. package/dist/components/q2-select2.js.map +1 -1
  91. package/dist/esm/click-elsewhere_2.entry.js +6 -8
  92. package/dist/esm/click-elsewhere_2.entry.js.map +1 -1
  93. package/dist/esm/{index-0a702dd6.js → index-3c5cd75e.js} +3 -3
  94. package/dist/esm/index-3c5cd75e.js.map +1 -0
  95. package/dist/esm/{index-c99c4cc6.js → index-f0dfb099.js} +1 -1
  96. package/dist/esm/{index-c99c4cc6.js.map → index-f0dfb099.js.map} +1 -1
  97. package/dist/esm/loader.js +1 -1
  98. package/dist/esm/q2-action-sheet.entry.js +1 -1
  99. package/dist/esm/q2-btn_2.entry.js +1 -1
  100. package/dist/esm/q2-calendar.entry.js +18 -4
  101. package/dist/esm/q2-calendar.entry.js.map +1 -1
  102. package/dist/esm/q2-card.entry.js +1 -1
  103. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  104. package/dist/esm/q2-carousel.entry.js +1 -1
  105. package/dist/esm/q2-chart-area.entry.js +1 -1
  106. package/dist/esm/q2-chart-bar.entry.js +1 -1
  107. package/dist/esm/q2-chart-donut.entry.js +3 -4
  108. package/dist/esm/q2-chart-donut.entry.js.map +1 -1
  109. package/dist/esm/q2-checkbox-group.entry.js +1 -1
  110. package/dist/esm/q2-checkbox.entry.js +1 -1
  111. package/dist/esm/q2-data-table.entry.js +1 -1
  112. package/dist/esm/q2-detail.entry.js +1 -1
  113. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  114. package/dist/esm/q2-dropdown.entry.js +1 -1
  115. package/dist/esm/q2-editable-field.entry.js +1 -1
  116. package/dist/esm/q2-icon.entry.js +1 -1
  117. package/dist/esm/q2-input.entry.js +22 -3
  118. package/dist/esm/q2-input.entry.js.map +1 -1
  119. package/dist/esm/q2-item.entry.js +2 -2
  120. package/dist/esm/q2-item.entry.js.map +1 -1
  121. package/dist/esm/q2-legend.entry.js +1 -1
  122. package/dist/esm/q2-legend.entry.js.map +1 -1
  123. package/dist/esm/q2-list.entry.js +1 -1
  124. package/dist/esm/q2-loc.entry.js +1 -1
  125. package/dist/esm/q2-message.entry.js +1 -1
  126. package/dist/esm/q2-month-picker.entry.js +1 -1
  127. package/dist/esm/q2-optgroup.entry.js +1 -1
  128. package/dist/esm/q2-option-list.entry.js +1 -1
  129. package/dist/esm/q2-pagination.entry.js +1 -1
  130. package/dist/esm/q2-pill.entry.js +1 -1
  131. package/dist/esm/q2-radio-group.entry.js +1 -1
  132. package/dist/esm/q2-radio.entry.js +1 -1
  133. package/dist/esm/q2-relative-time.entry.js +1 -1
  134. package/dist/esm/q2-section.entry.js +1 -1
  135. package/dist/esm/q2-select.entry.js +6 -4
  136. package/dist/esm/q2-select.entry.js.map +1 -1
  137. package/dist/esm/q2-stepper-pane.entry.js +1 -1
  138. package/dist/esm/q2-stepper-vertical.entry.js +1 -1
  139. package/dist/esm/q2-stepper.entry.js +1 -1
  140. package/dist/esm/q2-tab-container.entry.js +1 -1
  141. package/dist/esm/q2-tag.entry.js +1 -1
  142. package/dist/esm/q2-tecton-elements.js +1 -1
  143. package/dist/esm/q2-textarea.entry.js +1 -1
  144. package/dist/esm/q2-tooltip.entry.js +1 -1
  145. package/dist/q2-tecton-elements/assets/icon-file-list.json +1 -0
  146. package/dist/q2-tecton-elements/assets/standard.symbol.svg +1 -1
  147. package/dist/q2-tecton-elements/{p-aec64fcb.entry.js → p-0e27ea75.entry.js} +2 -2
  148. package/dist/q2-tecton-elements/{p-57bf9342.entry.js → p-1b89b9c3.entry.js} +2 -2
  149. package/dist/q2-tecton-elements/{p-2a248a3f.entry.js → p-1d824cdf.entry.js} +2 -2
  150. package/dist/q2-tecton-elements/{p-0bc47914.entry.js → p-23183c61.entry.js} +2 -2
  151. package/dist/q2-tecton-elements/p-24d96969.entry.js +2 -0
  152. package/dist/q2-tecton-elements/p-24d96969.entry.js.map +1 -0
  153. package/dist/q2-tecton-elements/{p-f1265647.entry.js → p-2d6a9a94.entry.js} +2 -2
  154. package/dist/q2-tecton-elements/{p-4570ff06.entry.js → p-30d70f4a.entry.js} +2 -2
  155. package/dist/q2-tecton-elements/{p-79df783e.entry.js → p-33af97b0.entry.js} +2 -2
  156. package/dist/q2-tecton-elements/{p-47868d6d.entry.js → p-35cc1039.entry.js} +2 -2
  157. package/dist/q2-tecton-elements/{p-6559c942.js → p-3c42c90f.js} +1 -1
  158. package/dist/q2-tecton-elements/{p-dc057a9c.entry.js → p-3f665c56.entry.js} +2 -2
  159. package/dist/q2-tecton-elements/{p-12326313.entry.js → p-3fe532bc.entry.js} +2 -2
  160. package/dist/q2-tecton-elements/{p-ca0d7eb3.entry.js → p-45d70da2.entry.js} +2 -2
  161. package/dist/q2-tecton-elements/{p-ef441885.entry.js → p-4b47816d.entry.js} +2 -2
  162. package/dist/q2-tecton-elements/{p-97a98211.entry.js → p-52e277b8.entry.js} +2 -2
  163. package/dist/q2-tecton-elements/{p-d635e39f.entry.js → p-63038a54.entry.js} +2 -2
  164. package/dist/q2-tecton-elements/{p-e27a23fc.entry.js → p-66ae329f.entry.js} +2 -2
  165. package/dist/q2-tecton-elements/{p-36398b59.entry.js → p-6eac40be.entry.js} +2 -2
  166. package/dist/q2-tecton-elements/p-6eac40be.entry.js.map +1 -0
  167. package/dist/q2-tecton-elements/{p-bf32fd9c.entry.js → p-6f2de185.entry.js} +2 -2
  168. package/dist/q2-tecton-elements/p-6f2de185.entry.js.map +1 -0
  169. package/dist/q2-tecton-elements/{p-4f2dfb4d.entry.js → p-76be9cad.entry.js} +2 -2
  170. package/dist/q2-tecton-elements/{p-dd670d63.entry.js → p-774975fa.entry.js} +2 -2
  171. package/dist/q2-tecton-elements/{p-4194d6ed.entry.js → p-7cbb989e.entry.js} +2 -2
  172. package/dist/q2-tecton-elements/{p-81b76d40.entry.js → p-7dafc5da.entry.js} +2 -2
  173. package/dist/q2-tecton-elements/{p-2132da06.entry.js → p-81bb9436.entry.js} +2 -2
  174. package/dist/q2-tecton-elements/p-84190698.js +2 -0
  175. package/dist/q2-tecton-elements/p-84190698.js.map +1 -0
  176. package/dist/q2-tecton-elements/{p-515d424b.entry.js → p-8a00552f.entry.js} +2 -2
  177. package/dist/q2-tecton-elements/{p-d8fba914.entry.js → p-8fc099f5.entry.js} +2 -2
  178. package/dist/q2-tecton-elements/{p-fe3c62e0.entry.js → p-9eafabd5.entry.js} +2 -2
  179. package/dist/q2-tecton-elements/{p-ac9414a6.entry.js → p-a03c29f3.entry.js} +2 -2
  180. package/dist/q2-tecton-elements/{p-e762526f.entry.js → p-a3d58a50.entry.js} +2 -2
  181. package/dist/q2-tecton-elements/{p-2c57a367.entry.js → p-a891571c.entry.js} +2 -2
  182. package/dist/q2-tecton-elements/{p-f2251261.entry.js → p-abe30d0c.entry.js} +2 -2
  183. package/dist/q2-tecton-elements/{p-d60ccf2f.entry.js → p-b849365e.entry.js} +2 -2
  184. package/dist/q2-tecton-elements/{p-85003c5b.entry.js → p-c9ee763d.entry.js} +2 -2
  185. package/dist/q2-tecton-elements/p-c9ee763d.entry.js.map +1 -0
  186. package/dist/q2-tecton-elements/{p-18ec54c0.entry.js → p-ca17f7ca.entry.js} +2 -2
  187. package/dist/q2-tecton-elements/{p-bc141c5b.entry.js → p-ca43e917.entry.js} +2 -2
  188. package/dist/q2-tecton-elements/{p-16891e51.entry.js → p-d75e4752.entry.js} +2 -2
  189. package/dist/q2-tecton-elements/p-dd18416f.entry.js +2 -0
  190. package/dist/q2-tecton-elements/p-dd18416f.entry.js.map +1 -0
  191. package/dist/q2-tecton-elements/{p-ca7dad64.entry.js → p-e25194ce.entry.js} +2 -2
  192. package/dist/q2-tecton-elements/{p-ca7dad64.entry.js.map → p-e25194ce.entry.js.map} +1 -1
  193. package/dist/q2-tecton-elements/{p-ca7ad3c3.entry.js → p-f18caa3f.entry.js} +2 -2
  194. package/dist/q2-tecton-elements/{p-65ed80a5.entry.js → p-f450db0b.entry.js} +2 -2
  195. package/dist/q2-tecton-elements/{p-32e57e9f.entry.js → p-fb7dd7ab.entry.js} +2 -2
  196. package/dist/q2-tecton-elements/p-fb7dd7ab.entry.js.map +1 -0
  197. package/dist/q2-tecton-elements/{p-f45b3488.entry.js → p-fce6bc58.entry.js} +2 -2
  198. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  199. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
  200. package/dist/test/elements/q2-calendar-test.e2e.js +33 -35
  201. package/dist/test/elements/q2-calendar-test.e2e.js.map +1 -1
  202. package/dist/test/elements/q2-input-test.e2e.js +53 -0
  203. package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
  204. package/dist/test/elements/q2-select-test.e2e.js +41 -7
  205. package/dist/test/elements/q2-select-test.e2e.js.map +1 -1
  206. package/dist/types/components/q2-input/q2-input.d.ts +24 -1
  207. package/dist/types/components.d.ts +28 -2
  208. package/package.json +3 -3
  209. package/dist/cjs/index-0e15dc8d.js.map +0 -1
  210. package/dist/esm/index-0a702dd6.js.map +0 -1
  211. package/dist/q2-tecton-elements/p-245ad08f.entry.js +0 -2
  212. package/dist/q2-tecton-elements/p-245ad08f.entry.js.map +0 -1
  213. package/dist/q2-tecton-elements/p-32e57e9f.entry.js.map +0 -1
  214. package/dist/q2-tecton-elements/p-36398b59.entry.js.map +0 -1
  215. package/dist/q2-tecton-elements/p-42302f6f.js +0 -2
  216. package/dist/q2-tecton-elements/p-42302f6f.js.map +0 -1
  217. package/dist/q2-tecton-elements/p-85003c5b.entry.js.map +0 -1
  218. package/dist/q2-tecton-elements/p-be101dcf.entry.js +0 -2
  219. package/dist/q2-tecton-elements/p-be101dcf.entry.js.map +0 -1
  220. package/dist/q2-tecton-elements/p-bf32fd9c.entry.js.map +0 -1
  221. /package/dist/q2-tecton-elements/{p-aec64fcb.entry.js.map → p-0e27ea75.entry.js.map} +0 -0
  222. /package/dist/q2-tecton-elements/{p-57bf9342.entry.js.map → p-1b89b9c3.entry.js.map} +0 -0
  223. /package/dist/q2-tecton-elements/{p-2a248a3f.entry.js.map → p-1d824cdf.entry.js.map} +0 -0
  224. /package/dist/q2-tecton-elements/{p-0bc47914.entry.js.map → p-23183c61.entry.js.map} +0 -0
  225. /package/dist/q2-tecton-elements/{p-f1265647.entry.js.map → p-2d6a9a94.entry.js.map} +0 -0
  226. /package/dist/q2-tecton-elements/{p-4570ff06.entry.js.map → p-30d70f4a.entry.js.map} +0 -0
  227. /package/dist/q2-tecton-elements/{p-79df783e.entry.js.map → p-33af97b0.entry.js.map} +0 -0
  228. /package/dist/q2-tecton-elements/{p-47868d6d.entry.js.map → p-35cc1039.entry.js.map} +0 -0
  229. /package/dist/q2-tecton-elements/{p-6559c942.js.map → p-3c42c90f.js.map} +0 -0
  230. /package/dist/q2-tecton-elements/{p-dc057a9c.entry.js.map → p-3f665c56.entry.js.map} +0 -0
  231. /package/dist/q2-tecton-elements/{p-12326313.entry.js.map → p-3fe532bc.entry.js.map} +0 -0
  232. /package/dist/q2-tecton-elements/{p-ca0d7eb3.entry.js.map → p-45d70da2.entry.js.map} +0 -0
  233. /package/dist/q2-tecton-elements/{p-ef441885.entry.js.map → p-4b47816d.entry.js.map} +0 -0
  234. /package/dist/q2-tecton-elements/{p-97a98211.entry.js.map → p-52e277b8.entry.js.map} +0 -0
  235. /package/dist/q2-tecton-elements/{p-d635e39f.entry.js.map → p-63038a54.entry.js.map} +0 -0
  236. /package/dist/q2-tecton-elements/{p-e27a23fc.entry.js.map → p-66ae329f.entry.js.map} +0 -0
  237. /package/dist/q2-tecton-elements/{p-4f2dfb4d.entry.js.map → p-76be9cad.entry.js.map} +0 -0
  238. /package/dist/q2-tecton-elements/{p-dd670d63.entry.js.map → p-774975fa.entry.js.map} +0 -0
  239. /package/dist/q2-tecton-elements/{p-4194d6ed.entry.js.map → p-7cbb989e.entry.js.map} +0 -0
  240. /package/dist/q2-tecton-elements/{p-81b76d40.entry.js.map → p-7dafc5da.entry.js.map} +0 -0
  241. /package/dist/q2-tecton-elements/{p-2132da06.entry.js.map → p-81bb9436.entry.js.map} +0 -0
  242. /package/dist/q2-tecton-elements/{p-515d424b.entry.js.map → p-8a00552f.entry.js.map} +0 -0
  243. /package/dist/q2-tecton-elements/{p-d8fba914.entry.js.map → p-8fc099f5.entry.js.map} +0 -0
  244. /package/dist/q2-tecton-elements/{p-fe3c62e0.entry.js.map → p-9eafabd5.entry.js.map} +0 -0
  245. /package/dist/q2-tecton-elements/{p-ac9414a6.entry.js.map → p-a03c29f3.entry.js.map} +0 -0
  246. /package/dist/q2-tecton-elements/{p-e762526f.entry.js.map → p-a3d58a50.entry.js.map} +0 -0
  247. /package/dist/q2-tecton-elements/{p-2c57a367.entry.js.map → p-a891571c.entry.js.map} +0 -0
  248. /package/dist/q2-tecton-elements/{p-f2251261.entry.js.map → p-abe30d0c.entry.js.map} +0 -0
  249. /package/dist/q2-tecton-elements/{p-d60ccf2f.entry.js.map → p-b849365e.entry.js.map} +0 -0
  250. /package/dist/q2-tecton-elements/{p-18ec54c0.entry.js.map → p-ca17f7ca.entry.js.map} +0 -0
  251. /package/dist/q2-tecton-elements/{p-bc141c5b.entry.js.map → p-ca43e917.entry.js.map} +0 -0
  252. /package/dist/q2-tecton-elements/{p-16891e51.entry.js.map → p-d75e4752.entry.js.map} +0 -0
  253. /package/dist/q2-tecton-elements/{p-ca7ad3c3.entry.js.map → p-f18caa3f.entry.js.map} +0 -0
  254. /package/dist/q2-tecton-elements/{p-65ed80a5.entry.js.map → p-f450db0b.entry.js.map} +0 -0
  255. /package/dist/q2-tecton-elements/{p-f45b3488.entry.js.map → p-fce6bc58.entry.js.map} +0 -0
  256. /package/dist/types/workspace/workspace/{tecton-production_release_1.46.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/elements/q2-detail/slot-component.d.ts +0 -0
  257. /package/dist/types/workspace/workspace/{tecton-production_release_1.46.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
@@ -0,0 +1,2 @@
1
+ import{r as t,c as e,h as i}from"./p-a5f18e27.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{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, var(--app-scale-9x, 45px));opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, 0.5)}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, #141430);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, 14px);font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1.4);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, #6f6f82);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, 14px);font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1.4);text-align:right}";const s=n;const o=class{constructor(i){t(this,i);this.click=e(this,"click",7);this.mouseleave=e(this,"mouseleave",7);this.mouseenter=e(this,"mouseenter",7);this.selectedItemIndex=-1;this.hoveredItemIndex=-1;this.data=[];this.hoveredItemId=null;this.format="default";this.selectedItemId=null}watchHoveredItemId(t){const e=this.getDataIndexForId(t);this.hoveredItemIndex=e}watchSelectedItemId(t){const e=this.getDataIndexForId(t);this.selectedItemIndex=e}componentWillLoad(){this.watchHoveredItemId(this.hoveredItemId);this.watchSelectedItemId(this.selectedItemId)}get dataWithClasses(){return this.data.map(((t,e)=>Object.assign(Object.assign({},t),{classes:{"item-button":true,"item-button-faded":this.isItemButtonFaded(e),"item-button-selected":this.isItemButtonSelected(e)}})))}formatValue(t){const e=parseFloat(t.toString());if(this.format==="currency"){return Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(e)}return Intl.NumberFormat("en-US").format(e)}getDataIndexForId(t){const e=this.data.findIndex((e=>e.id===t));return e>=0?e:-1}isItemButtonFaded(t){if(this.isItemButtonSelected(t)||t==this.hoveredItemIndex)return false;if(this.selectedItemIndex>=0&&this.hoveredItemIndex===-1)return true;return this.hoveredItemIndex>=0&&t!==this.hoveredItemIndex}isItemButtonSelected(t){return t===this.selectedItemIndex}onClick(t,e){t.stopPropagation();const i=this.getDataIndexForId(e.id);if(this.selectedItemIndex===i){this.selectedItemIndex=-1;if(t.detail===0){this.hoveredItemIndex=-1}else{this.hoveredItemIndex=i}this.click.emit(null);return}this.selectedItemIndex=i;this.click.emit(this.data[i])}onClickElsewhere(t){t.selectedItemIndex=-1}onMouseLeave(t,e){t.stopPropagation();const i=this.getDataIndexForId(e.id);this.hoveredItemIndex=-1;this.mouseleave.emit(this.data[i])}onMouseEnter(t,e){t.stopPropagation();const i=this.getDataIndexForId(e.id);this.hoveredItemIndex=i;this.mouseenter.emit(this.data[i])}render(){return i("click-elsewhere",{key:"8ee6971693e03e0823d3db40447389010de04fcf",onChange:()=>this.onClickElsewhere(this)},i("ul",{key:"3e61a3ce65430feeb44596680f8f042d83ac934e"},this.dataWithClasses.map((t=>i("li",{class:"item"},i("button",{"test-id":"item","aria-label":`${t.name} ${this.formatValue(t.value)}`,class:t.classes,onClick:e=>this.onClick(e,t),onMouseEnter:e=>this.onMouseEnter(e,t),onMouseLeave:e=>this.onMouseLeave(e,t)},i("span",{"test-id":"itemColor",class:"item-color-indicator",style:{backgroundColor:t.color},"aria-hidden":"true"}),i("span",{"test-id":"itemName",class:"item-name"},t.name),i("span",{id:`item-${t.id}`,"test-id":"itemValue",class:"item-value"},this.formatValue(t.value))))))))}static get watchers(){return{hoveredItemId:["watchHoveredItemId"],selectedItemId:["watchSelectedItemId"]}}};o.style=s;export{o as q2_legend};
2
+ //# sourceMappingURL=p-dd18416f.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","watchHoveredItemId","newItemId","newItemIndex","this","getDataIndexForId","hoveredItemIndex","watchSelectedItemId","selectedItemIndex","componentWillLoad","hoveredItemId","selectedItemId","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseLeave","mouseleave","onMouseEnter","mouseenter","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.item-button {\n align-items: center;\n background-color: transparent;\n border: none;\n column-gap: #{var-list(--tct-legend-item-gap, --app-scale-2x, 10px)};\n display: flex;\n height: #{var-list(--tct-legend-item-height, --app-scale-9x, 45px)};\n opacity: 1;\n padding-block: 0;\n padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n transition: opacity var(--app-tween-1, 0.2s ease);\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n &-faded > * {\n opacity: var(--tct-legend-item-opacity-faded, 0.5);\n }\n}\n\n.item-color-indicator {\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n height: #{var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px)};\n width: #{var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px)};\n}\n\n.item-name {\n color: var(--tct-legend-item-name-font-color, #141430);\n display: inline-block;\n flex-grow: 1;\n font-size: var(--tct-legend-item-name-font-size, 14px);\n font-weight: var(--tct-legend-item-name-font-weight, 600);\n line-height: var(--tct-legend-item-name-line-height, 1.4);\n text-align: left;\n}\n\n.item-value {\n color: var(--tct-legend-item-value-font-color, #6f6f82);\n display: inline-block;\n flex-grow: 1;\n font-size: var(--tct-legend-item-value-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1.4);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n tag: 'q2-legend',\n shadow: true,\n styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n // #region State\n\n @State() selectedItemIndex: number = -1;\n @State() hoveredItemIndex: number = -1;\n\n // #endregion\n // #region Public Property API\n\n /** An array of objects that contain the data to be displayed. */\n @Prop()\n data: IDonutChartData[] = [];\n\n /** The id of the item to set as hovered. */\n @Prop({ reflect: true })\n hoveredItemId: string = null;\n\n @Watch('hoveredItemId')\n watchHoveredItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.hoveredItemIndex = newItemIndex;\n }\n\n /** The format of the value displayed in the legend. */\n @Prop({ reflect: true })\n format: 'default' | 'currency' = 'default';\n\n /** The id of the item to set as selected. */\n @Prop({ reflect: true })\n selectedItemId: string = null;\n\n @Watch('selectedItemId')\n watchSelectedItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.selectedItemIndex = newItemIndex;\n }\n\n // #endregion\n // #region Events\n\n @Event() click: EventEmitter<IDonutChartData>;\n @Event() mouseleave: EventEmitter<IDonutChartData>;\n @Event() mouseenter: EventEmitter<IDonutChartData>;\n\n // #endregion\n // #region Lifecycle events\n\n componentWillLoad() {\n this.watchHoveredItemId(this.hoveredItemId);\n this.watchSelectedItemId(this.selectedItemId);\n }\n\n // #endregion\n // #region Local methods\n\n get dataWithClasses() {\n return this.data.map((item, index) => ({\n ...item,\n classes: {\n 'item-button': true,\n 'item-button-faded': this.isItemButtonFaded(index),\n 'item-button-selected': this.isItemButtonSelected(index),\n },\n }));\n }\n\n formatValue(value: string | number) {\n const valueAsFloat = parseFloat(value.toString());\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n }\n\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n\n getDataIndexForId(id: string) {\n const index = this.data.findIndex(item => item.id === id);\n return index >= 0 ? index : -1;\n }\n\n isItemButtonFaded(index: number) {\n if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n }\n\n isItemButtonSelected(index: number) {\n return index === this.selectedItemIndex;\n }\n\n onClick(event: MouseEvent, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n if (this.selectedItemIndex === itemIndex) {\n this.selectedItemIndex = -1;\n if (event.detail === 0) {\n // Keyboard click\n this.hoveredItemIndex = -1;\n } else {\n // Mouse click\n this.hoveredItemIndex = itemIndex;\n }\n this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(this.data[itemIndex]);\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n // #endregion\n // #region Render methods\n\n render() {\n return (\n <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n <ul>\n {this.dataWithClasses.map(item => (\n <li class=\"item\">\n <button\n test-id=\"item\"\n aria-label={`${item.name} ${this.formatValue(item.value)}`}\n class={item.classes}\n onClick={event => this.onClick(event, item)}\n onMouseEnter={event => this.onMouseEnter(event, item)}\n onMouseLeave={event => this.onMouseLeave(event, item)}\n >\n <span\n test-id=\"itemColor\"\n class=\"item-color-indicator\"\n style={{ backgroundColor: item.color }}\n aria-hidden=\"true\"\n />\n <span\n test-id=\"itemName\"\n class=\"item-name\"\n >\n {item.name}\n </span>\n <span\n id={`item-${item.id}`}\n test-id=\"itemValue\"\n class=\"item-value\"\n >\n {this.formatValue(item.value)}\n </span>\n </button>\n </li>\n ))}\n </ul>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{r as t,c as o,g as i,h as e}from"./p-a5f18e27.js";import{t as r,w as s}from"./p-42302f6f.js";const n=class{constructor(i){t(this,i);this.change=o(this,"change",7);this.mouseEventList=["mousedown","dragstart","touchstart"];this.isCurrentlyFocused=false;this.mouseHandler=t=>{const o=this.shadowContains(this.findActiveElement());const i=this.shadowContains(this.shadowEventTarget(t))||this.originatesInSlots(t.target);if(!i&&(this.isCurrentlyFocused||o)){this.isCurrentlyFocused=false;this.change.emit();return}this.isCurrentlyFocused=i||o};this.windowBlurHandler=()=>{this.isCurrentlyFocused=false;this.change.emit()}}componentWillLoad(){}connectedCallback(){this.mouseEventList.forEach((t=>{document.addEventListener(t,this.mouseHandler)}));window.addEventListener("blur",this.windowBlurHandler)}disconnectedCallback(){this.mouseEventList.forEach((t=>{document.removeEventListener(t,this.mouseHandler)}));window.removeEventListener("blur",this.windowBlurHandler)}findActiveElement(){let t=document.activeElement;while(true){if(!t||!t.shadowRoot){return t}t=t.shadowRoot.activeElement}}shadowEventTarget(t){return t.composedPath()[0]||t.target}shadowContains(t){while(true){if(t===this.hostElement){return true}if(!t){return false}t=t.parentNode||t.host}}originatesInSlots(t){const o=this.hostElement.querySelectorAll("slot");for(const i of Array.from(o)){const o=i&&i.assignedNodes&&i.assignedNodes()||this.hostElement.childNodes;for(const i of Array.from(o)){if(i.contains(t)){return true}}}return false}get hostElement(){return i(this)}};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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";const c=a;const p=class{constructor(i){t(this,i);this.popoverStateChanged=o(this,"popoverStateChanged",7);this.displayBuffer=10;this.orientationChanged=false;this.handleMinHeight=()=>{if(this.minHeight){r(this,"minHeight","prop")}};this.viewPortChanged=()=>{if(!this.open)return;this.determinePopDirection()};this.viewPortOrientationChanged=()=>{this.orientationChanged=true;this.viewPortChanged()};this.setFixedCSSProperties=async()=>{var t,o;const{controlElement:i,containerElement:e,currentDirection:r}=this;const{top:n,bottom:a,left:c,right:p}=(o=(t=i===null||i===void 0?void 0:i.getBoundingClientRect)===null||t===void 0?void 0:t.call(i))!==null&&o!==void 0?o:{top:0,bottom:0,left:0,right:0};const h=c;const l=window.visualViewport.width-p;if(this.block)e.style.setProperty("--comp-pop-width",`${i.offsetWidth||0}px`);e.style.setProperty("--comp-pop-left",`${h}px`);e.style.setProperty("--comp-pop-right",`${l}px`);if(r==="up"){e.style.setProperty("--comp-pop-bottom",`${window.visualViewport.height-n}px`)}if(r==="down"){e.style.setProperty("--comp-pop-top",`${a}px`)}await s();e.style.setProperty("--comp-pop-opacity","1")};this.setAbsoluteCSSProperties=async()=>{const{controlElement:t,containerElement:o,currentDirection:i,align:e}=this;if(e==="right"){o.style.setProperty("--comp-pop-right","0");o.style.setProperty("--comp-pop-left","unset")}else{o.style.setProperty("--comp-pop-left","0");o.style.setProperty("--comp-pop-right","unset")}if(this.block){o.style.setProperty("--comp-pop-width","100%")}if(i==="up"){const i=getComputedStyle(t);const e=parseInt(i.height||"0")+parseInt(i.borderTopWidth||"0")+parseInt(i.borderBottomWidth||"0");o.style.setProperty("--comp-pop-bottom",`${e}px`)}await s();o.style.setProperty("--comp-pop-opacity","1")};this.direction=undefined;this.align=undefined;this.open=undefined;this.block=undefined;this.controlElement=undefined;this.mode=null;this.minHeight=undefined;this.currentDirection=undefined;this.show=false}componentDidLoad(){this.handleMinHeight();if(this.open)this.determinePopDirection()}disconnectedCallback(){this.removeViewportListeners()}async toggle(){this.open=!this.open}async scrollContainerTo(t){this.containerElement.scrollTo(t)}async openChanged(t){this.popoverStateChanged.emit({open:t});if(t){this.addViewportListeners();this.determinePopDirection()}else{this.removeViewportListeners();this.currentDirection=undefined;this.show=false;await s();this.clearCSSProperties()}}minHeightProvided(){this.handleMinHeight()}popoverStateHandler(t){const{detail:{open:o}}=t;if(o===this.open)return;this.open=o;t.stopPropagation()}get actualDirection(){const{direction:t}=this;switch(t){case"up":case"down":return t;default:return undefined}}get isModule(){var t,o;const i=window!==window.top;const e=Object.keys((o=(t=window.Tecton)===null||t===void 0?void 0:t.platformDimensions)!==null&&o!==void 0?o:{}).length>0;return i&&e}addViewportListeners(){var t;window.addEventListener("resize",this.viewPortOrientationChanged);window.addEventListener("scroll",this.viewPortChanged,{passive:true,capture:true});(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.addEventListener("change",this.viewPortOrientationChanged);window.addEventListener("orientationchange",this.viewPortOrientationChanged)}removeViewportListeners(){var t;window.removeEventListener("resize",this.viewPortOrientationChanged);window.removeEventListener("scroll",this.viewPortChanged);(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.removeEventListener("orientationchange",this.viewPortOrientationChanged);window.removeEventListener("orientationchange",this.viewPortOrientationChanged)}clearCSSProperties(){this.containerElement.style.removeProperty("--comp-pop-max-height");this.containerElement.style.removeProperty("--comp-pop-top");this.containerElement.style.removeProperty("--comp-pop-bottom");this.containerElement.style.removeProperty("--comp-pop-left");this.containerElement.style.removeProperty("--comp-pop-right");this.containerElement.style.removeProperty("--comp-pop-width");this.containerElement.style.removeProperty("--comp-pop-opacity")}setDirectionAndShow(t){const o=this.open;if(!o)return;this.currentDirection=t;this.show=true;if(this.mode==="legacy"){this.setAbsoluteCSSProperties()}else{this.setFixedCSSProperties()}}async determinePopDirection(){var t,o,i;const{containerElement:e,controlElement:r,actualDirection:n,displayBuffer:a}=this;if(e)e.style.maxHeight=null;await s();const{isModule:c}=this;const{top:p,bottom:h}=(o=(t=r===null||r===void 0?void 0:r.getBoundingClientRect)===null||t===void 0?void 0:t.call(r))!==null&&o!==void 0?o:{top:0,bottom:0};let l;let d;let u;if(c){const t=(i=window.Tecton)===null||i===void 0?void 0:i.platformDimensions;const o=window.visualViewport.height-h;const e=t.innerHeight-(t.outletOffset+h);const r=o<e;l=t.innerHeight;d=(t.outletOffset>0?p:p+t.outletOffset)-a;u=r?o-a:e-a}else{l=window.visualViewport.height;d=p-a;u=l-h-a}const f=d>u?"up":"down";const w=!e.style.getPropertyValue("--comp-pop-max-height")||this.orientationChanged;this.orientationChanged=false;const m=this.currentDirection||n||f;switch(m){case"up":if(w){e.style.setProperty("--comp-pop-max-height",`${d}px`)}this.setDirectionAndShow("up");break;case"down":if(w){e.style.setProperty("--comp-pop-max-height",`${u}px`)}this.setDirectionAndShow("down");break}}render(){const t=["container",this.currentDirection];if(this.show)t.push("show");if(this.mode==="legacy")t.push("legacy");return e("div",{key:"e30d8c33a5c1ef22fe5721daa2b48e22118d2476",ref:t=>this.containerElement=t,class:t.join(" "),"test-id":"outerContainer"},e("div",{key:"b8e6bcc629445b9649498f491676baf73cd3957a",ref:t=>this.contentElement=t,class:"content"},e("slot",{key:"e6b3e6d397e471cb3d2ecaa534106fd04b74c41e"})))}get hostElement(){return i(this)}static get watchers(){return{open:["openChanged"],minHeight:["minHeightProvided"]}}};p.style=c;export{n as click_elsewhere,p as q2_popover};
2
- //# sourceMappingURL=p-ca7dad64.entry.js.map
1
+ import{r as t,c as o,g as i,h as e}from"./p-a5f18e27.js";import{t as r,w as s}from"./p-84190698.js";const n=class{constructor(i){t(this,i);this.change=o(this,"change",7);this.mouseEventList=["mousedown","dragstart","touchstart"];this.isCurrentlyFocused=false;this.mouseHandler=t=>{const o=this.shadowContains(this.findActiveElement());const i=this.shadowContains(this.shadowEventTarget(t))||this.originatesInSlots(t.target);if(!i&&(this.isCurrentlyFocused||o)){this.isCurrentlyFocused=false;this.change.emit();return}this.isCurrentlyFocused=i||o};this.windowBlurHandler=()=>{this.isCurrentlyFocused=false;this.change.emit()}}componentWillLoad(){}connectedCallback(){this.mouseEventList.forEach((t=>{document.addEventListener(t,this.mouseHandler)}));window.addEventListener("blur",this.windowBlurHandler)}disconnectedCallback(){this.mouseEventList.forEach((t=>{document.removeEventListener(t,this.mouseHandler)}));window.removeEventListener("blur",this.windowBlurHandler)}findActiveElement(){let t=document.activeElement;while(true){if(!t||!t.shadowRoot){return t}t=t.shadowRoot.activeElement}}shadowEventTarget(t){return t.composedPath()[0]||t.target}shadowContains(t){while(true){if(t===this.hostElement){return true}if(!t){return false}t=t.parentNode||t.host}}originatesInSlots(t){const o=this.hostElement.querySelectorAll("slot");for(const i of Array.from(o)){const o=i&&i.assignedNodes&&i.assignedNodes()||this.hostElement.childNodes;for(const i of Array.from(o)){if(i.contains(t)){return true}}}return false}get hostElement(){return i(this)}};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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";const c=a;const p=class{constructor(i){t(this,i);this.popoverStateChanged=o(this,"popoverStateChanged",7);this.displayBuffer=10;this.orientationChanged=false;this.handleMinHeight=()=>{if(this.minHeight){r(this,"minHeight","prop")}};this.viewPortChanged=()=>{if(!this.open)return;this.determinePopDirection()};this.viewPortOrientationChanged=()=>{this.orientationChanged=true;this.viewPortChanged()};this.setFixedCSSProperties=async()=>{var t,o;const{controlElement:i,containerElement:e,currentDirection:r}=this;const{top:n,bottom:a,left:c,right:p}=(o=(t=i===null||i===void 0?void 0:i.getBoundingClientRect)===null||t===void 0?void 0:t.call(i))!==null&&o!==void 0?o:{top:0,bottom:0,left:0,right:0};const h=c;const l=window.visualViewport.width-p;if(this.block)e.style.setProperty("--comp-pop-width",`${i.offsetWidth||0}px`);e.style.setProperty("--comp-pop-left",`${h}px`);e.style.setProperty("--comp-pop-right",`${l}px`);if(r==="up"){e.style.setProperty("--comp-pop-bottom",`${window.visualViewport.height-n}px`)}if(r==="down"){e.style.setProperty("--comp-pop-top",`${a}px`)}await s();e.style.setProperty("--comp-pop-opacity","1")};this.setAbsoluteCSSProperties=async()=>{const{controlElement:t,containerElement:o,currentDirection:i,align:e}=this;if(e==="right"){o.style.setProperty("--comp-pop-right","0");o.style.setProperty("--comp-pop-left","unset")}else{o.style.setProperty("--comp-pop-left","0");o.style.setProperty("--comp-pop-right","unset")}if(this.block){o.style.setProperty("--comp-pop-width","100%")}if(i==="up"){const i=getComputedStyle(t);const e=parseInt(i.height||"0")+parseInt(i.borderTopWidth||"0")+parseInt(i.borderBottomWidth||"0");o.style.setProperty("--comp-pop-bottom",`${e}px`)}await s();o.style.setProperty("--comp-pop-opacity","1")};this.direction=undefined;this.align=undefined;this.open=undefined;this.block=undefined;this.controlElement=undefined;this.mode=null;this.minHeight=undefined;this.currentDirection=undefined;this.show=false}componentDidLoad(){this.handleMinHeight();if(this.open)this.determinePopDirection()}disconnectedCallback(){this.removeViewportListeners()}async toggle(){this.open=!this.open}async scrollContainerTo(t){this.containerElement.scrollTo(t)}async openChanged(t){this.popoverStateChanged.emit({open:t});if(t){this.addViewportListeners();this.determinePopDirection()}else{this.removeViewportListeners();this.currentDirection=undefined;this.show=false;await s();this.clearCSSProperties()}}minHeightProvided(){this.handleMinHeight()}popoverStateHandler(t){const{detail:{open:o}}=t;if(o===this.open)return;this.open=o;t.stopPropagation()}get actualDirection(){const{direction:t}=this;switch(t){case"up":case"down":return t;default:return undefined}}get isModule(){var t,o;const i=window!==window.top;const e=Object.keys((o=(t=window.Tecton)===null||t===void 0?void 0:t.platformDimensions)!==null&&o!==void 0?o:{}).length>0;return i&&e}addViewportListeners(){var t;window.addEventListener("resize",this.viewPortOrientationChanged);window.addEventListener("scroll",this.viewPortChanged,{passive:true,capture:true});(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.addEventListener("change",this.viewPortOrientationChanged);window.addEventListener("orientationchange",this.viewPortOrientationChanged)}removeViewportListeners(){var t;window.removeEventListener("resize",this.viewPortOrientationChanged);window.removeEventListener("scroll",this.viewPortChanged);(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.removeEventListener("orientationchange",this.viewPortOrientationChanged);window.removeEventListener("orientationchange",this.viewPortOrientationChanged)}clearCSSProperties(){this.containerElement.style.removeProperty("--comp-pop-max-height");this.containerElement.style.removeProperty("--comp-pop-top");this.containerElement.style.removeProperty("--comp-pop-bottom");this.containerElement.style.removeProperty("--comp-pop-left");this.containerElement.style.removeProperty("--comp-pop-right");this.containerElement.style.removeProperty("--comp-pop-width");this.containerElement.style.removeProperty("--comp-pop-opacity")}setDirectionAndShow(t){const o=this.open;if(!o)return;this.currentDirection=t;this.show=true;if(this.mode==="legacy"){this.setAbsoluteCSSProperties()}else{this.setFixedCSSProperties()}}async determinePopDirection(){var t,o,i;const{containerElement:e,controlElement:r,actualDirection:n,displayBuffer:a}=this;if(e)e.style.maxHeight=null;await s();const{isModule:c}=this;const{top:p,bottom:h}=(o=(t=r===null||r===void 0?void 0:r.getBoundingClientRect)===null||t===void 0?void 0:t.call(r))!==null&&o!==void 0?o:{top:0,bottom:0};let l;let d;let u;if(c){const{outletOffset:t=0,innerHeight:o=window.innerHeight}=((i=window.Tecton)===null||i===void 0?void 0:i.platformDimensions)||{};const e=window.visualViewport.height-h;const r=o-(t+h);const s=e<r;l=o;d=(t>0?p:p+t)-a;u=s?e-a:r-a}else{l=window.visualViewport.height;d=p-a;u=l-h-a}const f=d>u?"up":"down";const w=!e.style.getPropertyValue("--comp-pop-max-height")||this.orientationChanged;this.orientationChanged=false;const m=this.currentDirection||n||f;switch(m){case"up":if(w){e.style.setProperty("--comp-pop-max-height",`${d}px`)}this.setDirectionAndShow("up");break;case"down":if(w){e.style.setProperty("--comp-pop-max-height",`${u}px`)}this.setDirectionAndShow("down");break}}render(){const t=["container",this.currentDirection];if(this.show)t.push("show");if(this.mode==="legacy")t.push("legacy");return e("div",{key:"7d15b8b85048ea39fb00f350a4a66de5ac110793",ref:t=>this.containerElement=t,class:t.join(" "),"test-id":"outerContainer"},e("div",{key:"f37b60229cf15c849a673f69a61dbc98b974670d",ref:t=>this.contentElement=t,class:"content"},e("slot",{key:"79860592d387238074f19b6d48e5f1fabe65a73d"})))}get hostElement(){return i(this)}static get watchers(){return{open:["openChanged"],minHeight:["minHeightProvided"]}}};p.style=c;export{n as click_elsewhere,p as q2_popover};
2
+ //# sourceMappingURL=p-e25194ce.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","componentWillLoad","connectedCallback","forEach","eventName","document","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","activeElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","setFixedCSSProperties","async","controlElement","containerElement","currentDirection","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","popoverRight","visualViewport","width","block","style","setProperty","offsetWidth","height","waitForNextPaint","setAbsoluteCSSProperties","align","controlStyle","getComputedStyle","controlSize","parseInt","borderTopWidth","borderBottomWidth","undefined","componentDidLoad","removeViewportListeners","toggle","scrollContainerTo","options","scrollTo","openChanged","popoverStateChanged","addViewportListeners","show","clearCSSProperties","minHeightProvided","popoverStateHandler","detail","stopPropagation","actualDirection","direction","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","passive","capture","screen","orientation","removeProperty","setDirectionAndShow","isOpen","mode","maxHeight","windowHeight","maxSpaceAbove","maxSpaceBelow","_c","distanceToIframeBottom","viewableSpaceBelow","innerHeight","outletOffset","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","render","containerClasses","push","h","key","ref","el","class","join","contentElement"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'click-elsewhere',\n shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n /**\n * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n */\n mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n isCurrentlyFocused: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the user clicks outside the element\n */\n @Event() change: EventEmitter;\n\n /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n /* tslint:disable:no-empty */\n componentWillLoad() {}\n /* tslint:enable:no-empty */\n\n connectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.addEventListener(eventName, this.mouseHandler);\n });\n window.addEventListener('blur', this.windowBlurHandler);\n }\n\n disconnectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.removeEventListener(eventName, this.mouseHandler);\n });\n window.removeEventListener('blur', this.windowBlurHandler);\n }\n\n findActiveElement(): Element | null {\n let workingElement = document.activeElement!;\n while (true) {\n if (!workingElement || !workingElement.shadowRoot) {\n return workingElement;\n }\n workingElement = workingElement.shadowRoot.activeElement;\n }\n }\n\n shadowEventTarget(event: any): Element {\n return event.composedPath()[0] || event.target;\n }\n\n shadowContains(child: any): boolean {\n /**\n * shadow-dom enabled version of Node.contains()\n */\n\n while (true) {\n if (child === this.hostElement) {\n return true;\n }\n if (!child) {\n return false;\n }\n child = child.parentNode || child.host;\n }\n }\n\n originatesInSlots(target: Element): boolean {\n const slots = this.hostElement.querySelectorAll('slot');\n for (const currentSlot of Array.from(slots)) {\n const lightNodes =\n (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n this.hostElement.childNodes;\n\n for (const currentNode of Array.from(lightNodes)) {\n if (currentNode.contains(target)) {\n return true;\n }\n }\n }\n return false;\n }\n\n mouseHandler = (event: Event): void => {\n const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n const aboutToBeFocused =\n this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n this.isCurrentlyFocused = false;\n this.change.emit();\n return;\n }\n this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n };\n\n windowBlurHandler = (): void => {\n this.isCurrentlyFocused = false;\n this.change.emit();\n };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n display: none;\n}\n\n.show {\n display: block;\n position: fixed;\n z-index: var-list(--tct-popover-z-index, 50);\n margin: 0;\n padding: 0;\n overflow: auto;\n background: var-list(--tct-popover-background, --app-white, #ffffff);\n color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n min-width: var-list(--tct-popover-min-width, 135px);\n margin-block: var-list(--tct-popover-margin-block, 0);\n box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n border-width: var-list(--tct-popover-border-width, 0);\n border-style: solid;\n border-color: var-list(--tct-popover-border-color, transparent);\n border-radius: var-list(--tct-popover-border-radius, 0);\n // the following --comp variables are set via JS\n max-height: var(--comp-pop-max-height);\n left: var(--comp-pop-left);\n opacity: var(--comp-pop-opacity, 0);\n\n :host([block]) & {\n right: unset;\n width: var(--comp-pop-width);\n min-width: var-list(--tct-popover-min-width, unset);\n }\n\n :host([align='left']) & {\n left: var(--comp-pop-left);\n right: unset;\n }\n\n :host([align='right']) & {\n right: var(--comp-pop-right);\n left: unset;\n }\n\n &.down {\n top: var-list(--tct-popover-top, --comp-pop-top);\n bottom: unset;\n }\n\n &.up {\n top: unset;\n bottom: var(--comp-pop-bottom);\n }\n\n &.legacy {\n position: absolute;\n }\n\n @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Element,\n Watch,\n Method,\n Listen,\n EventEmitter,\n Event,\n State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n /**\n * Force the direction of the popover when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ reflect: true }) direction: 'up' | 'down';\n\n /** Aligns the popover to the left or right side of the control element. */\n @Prop({ reflect: true }) align: 'left' | 'right';\n\n /** Controls whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** Indicates the popover will match the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** The element that controls the popover's behavior. */\n @Prop() controlElement: HTMLElement;\n\n @Prop() mode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() minHeight: number;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the popover is opened or closed.\n */\n @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n @State() currentDirection: 'down' | 'up' = undefined;\n // remove `show` when Popover API is supported in iOS\n @State() show: boolean = false;\n\n containerElement: HTMLDivElement;\n contentElement: HTMLDivElement;\n\n /**\n * The number of pixels to leave between the popover and the edge of the viewport\n */\n displayBuffer = 10;\n\n /** remove when Popover API is supported in iOS */\n orientationChanged: boolean = false;\n\n /// Lifecycle hooks ///\n componentDidLoad() {\n this.handleMinHeight();\n if (this.open) this.determinePopDirection();\n }\n\n disconnectedCallback() {\n this.removeViewportListeners();\n }\n\n /// Methods ///\n @Method()\n async toggle() {\n this.open = !this.open;\n }\n\n @Method()\n async scrollContainerTo(options: ScrollToOptions) {\n this.containerElement.scrollTo(options);\n }\n\n /// Watchers ///\n @Watch('open')\n async openChanged(open: boolean) {\n this.popoverStateChanged.emit({ open });\n\n if (open) {\n this.addViewportListeners();\n this.determinePopDirection();\n } else {\n this.removeViewportListeners();\n this.currentDirection = undefined;\n this.show = false;\n await waitForNextPaint();\n this.clearCSSProperties();\n }\n }\n\n @Watch('minHeight')\n minHeightProvided() {\n this.handleMinHeight();\n }\n\n /// Listeners ///\n @Listen('popoverState')\n popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n const {\n detail: { open },\n } = event;\n if (open === this.open) return;\n\n this.open = open;\n event.stopPropagation();\n }\n\n /// Getters ///\n get actualDirection(): 'up' | 'down' | undefined {\n const { direction } = this;\n switch (direction) {\n case 'up':\n case 'down':\n return direction;\n default:\n return undefined;\n }\n }\n\n get isModule() {\n const isIframe = window !== window.top;\n const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n return isIframe && hasPlatformDimensions;\n }\n\n /// Helpers ///\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\n };\n\n viewPortChanged = () => {\n if (!this.open) return;\n this.determinePopDirection();\n };\n\n viewPortOrientationChanged = () => {\n this.orientationChanged = true;\n this.viewPortChanged();\n };\n\n addViewportListeners() {\n window.addEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n removeViewportListeners() {\n window.removeEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.removeEventListener('scroll', this.viewPortChanged);\n screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n setFixedCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection } = this;\n const {\n top: controlTop,\n bottom: controlBottom,\n left: controlLeft,\n right: controlRight,\n } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n };\n const popoverLeft: number = controlLeft;\n const popoverRight: number = window.visualViewport.width - controlRight;\n\n if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n containerElement.style.setProperty('--comp-pop-right', `${popoverRight}px`);\n\n if (currentDirection === 'up') {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);\n }\n if (currentDirection === 'down') {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n setAbsoluteCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection, align } = this;\n\n if (align === 'right') {\n containerElement.style.setProperty('--comp-pop-right', '0');\n containerElement.style.setProperty('--comp-pop-left', 'unset');\n } else {\n containerElement.style.setProperty('--comp-pop-left', '0');\n containerElement.style.setProperty('--comp-pop-right', 'unset');\n }\n\n if (this.block) {\n containerElement.style.setProperty('--comp-pop-width', '100%');\n }\n\n if (currentDirection === 'up') {\n const controlStyle = getComputedStyle(controlElement);\n const controlSize =\n parseInt(controlStyle.height || '0') +\n parseInt(controlStyle.borderTopWidth || '0') +\n parseInt(controlStyle.borderBottomWidth || '0');\n\n containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n clearCSSProperties() {\n this.containerElement.style.removeProperty('--comp-pop-max-height');\n this.containerElement.style.removeProperty('--comp-pop-top');\n this.containerElement.style.removeProperty('--comp-pop-bottom');\n this.containerElement.style.removeProperty('--comp-pop-left');\n this.containerElement.style.removeProperty('--comp-pop-right');\n this.containerElement.style.removeProperty('--comp-pop-width');\n this.containerElement.style.removeProperty('--comp-pop-opacity');\n }\n\n setDirectionAndShow(direction: 'up' | 'down') {\n // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n // popover can be closed between the time the popover is opened and the time the direction is determined\n const isOpen = this.open;\n if (!isOpen) return;\n\n this.currentDirection = direction;\n this.show = true;\n if (this.mode === 'legacy') {\n this.setAbsoluteCSSProperties();\n } else {\n this.setFixedCSSProperties();\n }\n }\n\n async determinePopDirection() {\n const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n if (containerElement) containerElement.style.maxHeight = null;\n\n await waitForNextPaint();\n\n const { isModule } = this;\n const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n };\n\n let windowHeight: number;\n let maxSpaceAbove: number;\n let maxSpaceBelow: number;\n\n if (isModule) {\n const platformDimensions = window.Tecton?.platformDimensions;\n const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n const viewableSpaceBelow =\n platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);\n const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n windowHeight = platformDimensions.innerHeight;\n // If the top of the module is below the top of the window we just use the controlTop\n // Otherwise we need to add the outletOffset to the controlTop\n maxSpaceAbove =\n (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -\n displayBuffer;\n maxSpaceBelow = isIframeShorterThanWindow\n ? distanceToIframeBottom - displayBuffer\n : viewableSpaceBelow - displayBuffer;\n } else {\n windowHeight = window.visualViewport.height;\n maxSpaceAbove = controlTop - displayBuffer;\n maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n }\n\n const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n const shouldUpdateMaxHeight =\n !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n this.orientationChanged = false;\n const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n switch (currentOrDetermineDirection) {\n case 'up':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n }\n this.setDirectionAndShow('up');\n break;\n case 'down':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n }\n this.setDirectionAndShow('down');\n break;\n default:\n break;\n }\n }\n\n /// DOM ///\n render() {\n const containerClasses = ['container', this.currentDirection];\n if (this.show) containerClasses.push('show');\n if (this.mode === 'legacy') containerClasses.push('legacy');\n\n return (\n <div\n ref={el => (this.containerElement = el)}\n class={containerClasses.join(' ')}\n test-id=\"outerContainer\"\n >\n <div\n ref={el => (this.contentElement = el)}\n class=\"content\"\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","componentWillLoad","connectedCallback","forEach","eventName","document","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","activeElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","setFixedCSSProperties","async","controlElement","containerElement","currentDirection","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","popoverRight","visualViewport","width","block","style","setProperty","offsetWidth","height","waitForNextPaint","setAbsoluteCSSProperties","align","controlStyle","getComputedStyle","controlSize","parseInt","borderTopWidth","borderBottomWidth","undefined","componentDidLoad","removeViewportListeners","toggle","scrollContainerTo","options","scrollTo","openChanged","popoverStateChanged","addViewportListeners","show","clearCSSProperties","minHeightProvided","popoverStateHandler","detail","stopPropagation","actualDirection","direction","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","passive","capture","screen","orientation","removeProperty","setDirectionAndShow","isOpen","mode","maxHeight","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","innerHeight","_c","distanceToIframeBottom","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","render","containerClasses","push","h","key","ref","el","class","join","contentElement"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'click-elsewhere',\n shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n /**\n * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n */\n mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n isCurrentlyFocused: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the user clicks outside the element\n */\n @Event() change: EventEmitter;\n\n /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n /* tslint:disable:no-empty */\n componentWillLoad() {}\n /* tslint:enable:no-empty */\n\n connectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.addEventListener(eventName, this.mouseHandler);\n });\n window.addEventListener('blur', this.windowBlurHandler);\n }\n\n disconnectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.removeEventListener(eventName, this.mouseHandler);\n });\n window.removeEventListener('blur', this.windowBlurHandler);\n }\n\n findActiveElement(): Element | null {\n let workingElement = document.activeElement!;\n while (true) {\n if (!workingElement || !workingElement.shadowRoot) {\n return workingElement;\n }\n workingElement = workingElement.shadowRoot.activeElement;\n }\n }\n\n shadowEventTarget(event: any): Element {\n return event.composedPath()[0] || event.target;\n }\n\n shadowContains(child: any): boolean {\n /**\n * shadow-dom enabled version of Node.contains()\n */\n\n while (true) {\n if (child === this.hostElement) {\n return true;\n }\n if (!child) {\n return false;\n }\n child = child.parentNode || child.host;\n }\n }\n\n originatesInSlots(target: Element): boolean {\n const slots = this.hostElement.querySelectorAll('slot');\n for (const currentSlot of Array.from(slots)) {\n const lightNodes =\n (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n this.hostElement.childNodes;\n\n for (const currentNode of Array.from(lightNodes)) {\n if (currentNode.contains(target)) {\n return true;\n }\n }\n }\n return false;\n }\n\n mouseHandler = (event: Event): void => {\n const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n const aboutToBeFocused =\n this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n this.isCurrentlyFocused = false;\n this.change.emit();\n return;\n }\n this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n };\n\n windowBlurHandler = (): void => {\n this.isCurrentlyFocused = false;\n this.change.emit();\n };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n display: none;\n}\n\n.show {\n display: block;\n position: fixed;\n z-index: var-list(--tct-popover-z-index, 50);\n margin: 0;\n padding: 0;\n overflow: auto;\n background: var-list(--tct-popover-background, --app-white, #ffffff);\n color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n min-width: var-list(--tct-popover-min-width, 135px);\n margin-block: var-list(--tct-popover-margin-block, 0);\n box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n border-width: var-list(--tct-popover-border-width, 0);\n border-style: solid;\n border-color: var-list(--tct-popover-border-color, transparent);\n border-radius: var-list(--tct-popover-border-radius, 0);\n // the following --comp variables are set via JS\n max-height: var(--comp-pop-max-height);\n left: var(--comp-pop-left);\n opacity: var(--comp-pop-opacity, 0);\n\n :host([block]) & {\n right: unset;\n width: var(--comp-pop-width);\n min-width: var-list(--tct-popover-min-width, unset);\n }\n\n :host([align='left']) & {\n left: var(--comp-pop-left);\n right: unset;\n }\n\n :host([align='right']) & {\n right: var(--comp-pop-right);\n left: unset;\n }\n\n &.down {\n top: var-list(--tct-popover-top, --comp-pop-top);\n bottom: unset;\n }\n\n &.up {\n top: unset;\n bottom: var(--comp-pop-bottom);\n }\n\n &.legacy {\n position: absolute;\n }\n\n @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Element,\n Watch,\n Method,\n Listen,\n EventEmitter,\n Event,\n State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n /**\n * Force the direction of the popover when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ reflect: true }) direction: 'up' | 'down';\n\n /** Aligns the popover to the left or right side of the control element. */\n @Prop({ reflect: true }) align: 'left' | 'right';\n\n /** Controls whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** Indicates the popover will match the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** The element that controls the popover's behavior. */\n @Prop() controlElement: HTMLElement;\n\n @Prop() mode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() minHeight: number;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the popover is opened or closed.\n */\n @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n @State() currentDirection: 'down' | 'up' = undefined;\n // remove `show` when Popover API is supported in iOS\n @State() show: boolean = false;\n\n containerElement: HTMLDivElement;\n contentElement: HTMLDivElement;\n\n /**\n * The number of pixels to leave between the popover and the edge of the viewport\n */\n displayBuffer = 10;\n\n /** remove when Popover API is supported in iOS */\n orientationChanged: boolean = false;\n\n /// Lifecycle hooks ///\n componentDidLoad() {\n this.handleMinHeight();\n if (this.open) this.determinePopDirection();\n }\n\n disconnectedCallback() {\n this.removeViewportListeners();\n }\n\n /// Methods ///\n @Method()\n async toggle() {\n this.open = !this.open;\n }\n\n @Method()\n async scrollContainerTo(options: ScrollToOptions) {\n this.containerElement.scrollTo(options);\n }\n\n /// Watchers ///\n @Watch('open')\n async openChanged(open: boolean) {\n this.popoverStateChanged.emit({ open });\n\n if (open) {\n this.addViewportListeners();\n this.determinePopDirection();\n } else {\n this.removeViewportListeners();\n this.currentDirection = undefined;\n this.show = false;\n await waitForNextPaint();\n this.clearCSSProperties();\n }\n }\n\n @Watch('minHeight')\n minHeightProvided() {\n this.handleMinHeight();\n }\n\n /// Listeners ///\n @Listen('popoverState')\n popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n const {\n detail: { open },\n } = event;\n if (open === this.open) return;\n\n this.open = open;\n event.stopPropagation();\n }\n\n /// Getters ///\n get actualDirection(): 'up' | 'down' | undefined {\n const { direction } = this;\n switch (direction) {\n case 'up':\n case 'down':\n return direction;\n default:\n return undefined;\n }\n }\n\n get isModule() {\n const isIframe = window !== window.top;\n const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n return isIframe && hasPlatformDimensions;\n }\n\n /// Helpers ///\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\n };\n\n viewPortChanged = () => {\n if (!this.open) return;\n this.determinePopDirection();\n };\n\n viewPortOrientationChanged = () => {\n this.orientationChanged = true;\n this.viewPortChanged();\n };\n\n addViewportListeners() {\n window.addEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n removeViewportListeners() {\n window.removeEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.removeEventListener('scroll', this.viewPortChanged);\n screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n setFixedCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection } = this;\n const {\n top: controlTop,\n bottom: controlBottom,\n left: controlLeft,\n right: controlRight,\n } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n };\n const popoverLeft: number = controlLeft;\n const popoverRight: number = window.visualViewport.width - controlRight;\n\n if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n containerElement.style.setProperty('--comp-pop-right', `${popoverRight}px`);\n\n if (currentDirection === 'up') {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);\n }\n if (currentDirection === 'down') {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n setAbsoluteCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection, align } = this;\n\n if (align === 'right') {\n containerElement.style.setProperty('--comp-pop-right', '0');\n containerElement.style.setProperty('--comp-pop-left', 'unset');\n } else {\n containerElement.style.setProperty('--comp-pop-left', '0');\n containerElement.style.setProperty('--comp-pop-right', 'unset');\n }\n\n if (this.block) {\n containerElement.style.setProperty('--comp-pop-width', '100%');\n }\n\n if (currentDirection === 'up') {\n const controlStyle = getComputedStyle(controlElement);\n const controlSize =\n parseInt(controlStyle.height || '0') +\n parseInt(controlStyle.borderTopWidth || '0') +\n parseInt(controlStyle.borderBottomWidth || '0');\n\n containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n clearCSSProperties() {\n this.containerElement.style.removeProperty('--comp-pop-max-height');\n this.containerElement.style.removeProperty('--comp-pop-top');\n this.containerElement.style.removeProperty('--comp-pop-bottom');\n this.containerElement.style.removeProperty('--comp-pop-left');\n this.containerElement.style.removeProperty('--comp-pop-right');\n this.containerElement.style.removeProperty('--comp-pop-width');\n this.containerElement.style.removeProperty('--comp-pop-opacity');\n }\n\n setDirectionAndShow(direction: 'up' | 'down') {\n // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n // popover can be closed between the time the popover is opened and the time the direction is determined\n const isOpen = this.open;\n if (!isOpen) return;\n\n this.currentDirection = direction;\n this.show = true;\n if (this.mode === 'legacy') {\n this.setAbsoluteCSSProperties();\n } else {\n this.setFixedCSSProperties();\n }\n }\n\n async determinePopDirection() {\n const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n if (containerElement) containerElement.style.maxHeight = null;\n\n await waitForNextPaint();\n\n const { isModule } = this;\n const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n };\n\n let windowHeight: number;\n let maxSpaceAbove: number;\n let maxSpaceBelow: number;\n\n if (isModule) {\n const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n windowHeight = innerHeight;\n // If the top of the module is below the top of the window we just use the controlTop\n // Otherwise we need to add the outletOffset to the controlTop\n maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n maxSpaceBelow = isIframeShorterThanWindow\n ? distanceToIframeBottom - displayBuffer\n : viewableSpaceBelow - displayBuffer;\n } else {\n windowHeight = window.visualViewport.height;\n maxSpaceAbove = controlTop - displayBuffer;\n maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n }\n\n const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n const shouldUpdateMaxHeight =\n !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n this.orientationChanged = false;\n const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n switch (currentOrDetermineDirection) {\n case 'up':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n }\n this.setDirectionAndShow('up');\n break;\n case 'down':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n }\n this.setDirectionAndShow('down');\n break;\n default:\n break;\n }\n }\n\n /// DOM ///\n render() {\n const containerClasses = ['container', this.currentDirection];\n if (this.show) containerClasses.push('show');\n if (this.mode === 'legacy') containerClasses.push('legacy');\n\n return (\n <div\n ref={el => (this.containerElement = el)}\n class={containerClasses.join(' ')}\n test-id=\"outerContainer\"\n >\n <div\n ref={el => (this.contentElement = el)}\n class=\"content\"\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{r as t,h as e,g as a}from"./p-a5f18e27.js";import{k as s,o,n as r,i,l as n}from"./p-42302f6f.js";const c="*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";const p=c;const d=class{constructor(e){t(this,e);this.appearance="standard";this.description=false;this.type="info";this.presentToggle=undefined}get isFirefox(){return s()}componentDidLoad(){o(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle;if(!t)return;r((()=>{this.presentToggle=false}))}delegateFocus(t){if(!i(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this;const a=t&&this.presentToggle;const s=!t&&this.presentToggle;const{description:o}=this;const r=n(`tecton.element.message.type.${this.type?this.type:"info"}`);return e("div",{key:"48c08c15096e1787af65a9d847a191f5b7ee7100",tabindex:"-1",class:"message",role:o?undefined:"alert","aria-live":o?undefined:"assertive","aria-atomic":o?undefined:"true","aria-relevant":o&&a?undefined:"all","test-id":"messageContainer"},this.appearance==="standard"?this.messageIcon(this.type):"",s&&e("div",{key:"4d673d2bdf92f56606ab1075d8af807992982a57",class:"sr"}),e("div",{key:"c31396c4d2aaed7b2d6ee96e33697e7c14c814af",class:"sr message-label"},r),e("div",{key:"9bedced6017fa3da2024ce713688e4b5b006f563",class:"message-content","aria-hidden":a?"true":undefined},e("slot",{key:"b3d452032ef55d3aca7ea63768f820a522241ba6"})))}messageIcon(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};const s=a[t]||a.info;return e("q2-icon",{type:s,class:"message-icon"})}get hostElement(){return a(this)}};d.style=p;export{d as q2_message};
2
- //# sourceMappingURL=p-ca7ad3c3.entry.js.map
1
+ import{r as t,h as e,g as a}from"./p-a5f18e27.js";import{k as s,o,n as r,i,l as n}from"./p-84190698.js";const c="*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";const p=c;const d=class{constructor(e){t(this,e);this.appearance="standard";this.description=false;this.type="info";this.presentToggle=undefined}get isFirefox(){return s()}componentDidLoad(){o(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle;if(!t)return;r((()=>{this.presentToggle=false}))}delegateFocus(t){if(!i(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this;const a=t&&this.presentToggle;const s=!t&&this.presentToggle;const{description:o}=this;const r=n(`tecton.element.message.type.${this.type?this.type:"info"}`);return e("div",{key:"48c08c15096e1787af65a9d847a191f5b7ee7100",tabindex:"-1",class:"message",role:o?undefined:"alert","aria-live":o?undefined:"assertive","aria-atomic":o?undefined:"true","aria-relevant":o&&a?undefined:"all","test-id":"messageContainer"},this.appearance==="standard"?this.messageIcon(this.type):"",s&&e("div",{key:"4d673d2bdf92f56606ab1075d8af807992982a57",class:"sr"}),e("div",{key:"c31396c4d2aaed7b2d6ee96e33697e7c14c814af",class:"sr message-label"},r),e("div",{key:"9bedced6017fa3da2024ce713688e4b5b006f563",class:"message-content","aria-hidden":a?"true":undefined},e("slot",{key:"b3d452032ef55d3aca7ea63768f820a522241ba6"})))}messageIcon(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};const s=a[t]||a.info;return e("q2-icon",{type:s,class:"message-icon"})}get hostElement(){return a(this)}};d.style=p;export{d as q2_message};
2
+ //# sourceMappingURL=p-f18caa3f.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{h as r,l as n}from"./p-42302f6f.js";const i="*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";const d=i;const a=class{constructor(e){t(this,e);this.onItemClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"select",value:this.value||""},bubbles:true}))};this.onItemKeydown=t=>{if(["ArrowRight","Right"].includes(t.key)){this.focusRemoveBtn()}};this.onItemFocus=t=>{t.stopPropagation()};this.onRemoveBtnClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"remove",value:this.value||""},bubbles:true}))};this.onRemoveBtnKeydown=t=>{if(["ArrowLeft","Left"].includes(t.key)){this.focusItem()}};this.onRemoveBtnFocus=t=>{t.stopPropagation()};this.disabled=undefined;this.label=undefined;this.removable=undefined;this.separator=undefined;this.value=undefined;this.ariaLabel=undefined}componentWillLoad(){r(this)}ariaLabelObserver(){r(this)}get removeLabel(){return n("tecton.element.dropdownItem.remove",[this.label||""])}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get innerLabel(){return this.label||this.hostElement.textContent}get removeBtn(){return this.hostElement.shadowRoot.querySelector(".remove-dropdown-item")}onHostElementFocus(){if(event.target===this.hostElement){this.focusItem()}}focusItem(){this.dropdownItemBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}focusRemoveBtn(){this.removeBtn&&this.removeBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}render(){if(!!this.separator){return this.separatorDOM()}return this.itemDOM()}separatorDOM(){return e("div",{class:"dropdown-separator",role:"separator","test-id":"dropdownItemSeparator"})}itemDOM(){return e("div",{class:"dropdown-item-wrapper"},e("q2-btn",{class:"dropdown-item",label:this.innerLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onItemClick,onKeyDown:this.onItemKeydown,onFocus:this.onItemFocus,"test-id":"dropdownItem"},e("div",{class:"dropdown-item-content"},e("slot",null))),!!this.removable&&e("q2-btn",{class:"remove-dropdown-item",label:this.removeLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onRemoveBtnClick,onKeyDown:this.onRemoveBtnKeydown,onFocus:this.onRemoveBtnFocus,"test-id":"removeDropdownItem"},e("q2-icon",{type:"close"})))}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};a.style=d;export{a as q2_dropdown_item};
2
- //# sourceMappingURL=p-65ed80a5.entry.js.map
1
+ import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{h as r,l as n}from"./p-84190698.js";const i="*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";const d=i;const a=class{constructor(e){t(this,e);this.onItemClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"select",value:this.value||""},bubbles:true}))};this.onItemKeydown=t=>{if(["ArrowRight","Right"].includes(t.key)){this.focusRemoveBtn()}};this.onItemFocus=t=>{t.stopPropagation()};this.onRemoveBtnClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"remove",value:this.value||""},bubbles:true}))};this.onRemoveBtnKeydown=t=>{if(["ArrowLeft","Left"].includes(t.key)){this.focusItem()}};this.onRemoveBtnFocus=t=>{t.stopPropagation()};this.disabled=undefined;this.label=undefined;this.removable=undefined;this.separator=undefined;this.value=undefined;this.ariaLabel=undefined}componentWillLoad(){r(this)}ariaLabelObserver(){r(this)}get removeLabel(){return n("tecton.element.dropdownItem.remove",[this.label||""])}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get innerLabel(){return this.label||this.hostElement.textContent}get removeBtn(){return this.hostElement.shadowRoot.querySelector(".remove-dropdown-item")}onHostElementFocus(){if(event.target===this.hostElement){this.focusItem()}}focusItem(){this.dropdownItemBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}focusRemoveBtn(){this.removeBtn&&this.removeBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}render(){if(!!this.separator){return this.separatorDOM()}return this.itemDOM()}separatorDOM(){return e("div",{class:"dropdown-separator",role:"separator","test-id":"dropdownItemSeparator"})}itemDOM(){return e("div",{class:"dropdown-item-wrapper"},e("q2-btn",{class:"dropdown-item",label:this.innerLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onItemClick,onKeyDown:this.onItemKeydown,onFocus:this.onItemFocus,"test-id":"dropdownItem"},e("div",{class:"dropdown-item-content"},e("slot",null))),!!this.removable&&e("q2-btn",{class:"remove-dropdown-item",label:this.removeLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onRemoveBtnClick,onKeyDown:this.onRemoveBtnKeydown,onFocus:this.onRemoveBtnFocus,"test-id":"removeDropdownItem"},e("q2-icon",{type:"close"})))}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};a.style=d;export{a as q2_dropdown_item};
2
+ //# sourceMappingURL=p-f450db0b.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{o as a,f as i}from"./p-42302f6f.js";const r="*{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}*{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}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";const n=r;const c=class{constructor(e){t(this,e);this.renderTrigger=0;this.clickable=undefined}componentDidLoad(){if(typeof MutationObserver!=="undefined"){const t=new MutationObserver((()=>this.renderTrigger+=1));t.observe(this.hostElement,{childList:true,subtree:true,attributes:true});this.mutationObserver=t}a(this.hostElement)}delegateFocus(t){var e;if(this.clickable){(e=this.itemElement)===null||e===void 0?void 0:e.focus()}else{t.preventDefault()}}get actionClasses(){const t=["action"];if(!this.hasBulletSlotContent){t.push(`action-no-bullet`)}return t.join(" ")}get bulletClasses(){const t=["bullet"];if(!this.hasFooterSlotContent){t.push(`bullet-no-footer`)}return t.join(" ")}get footerClasses(){const t=["footer"];if(!this.hasActionSlotContent&&!this.hasBulletSlotContent){t.push(`footer-no-action-nor-bullet`)}else if(!this.hasActionSlotContent){t.push(`footer-no-action`)}else if(!this.hasBulletSlotContent){t.push(`footer-no-bullet`)}return t.join(" ")}get hasActionSlotContent(){return i(this.hostElement,"action")}get hasBodySlotContent(){return i(this.hostElement,"body")}get hasBulletSlotContent(){return i(this.hostElement,"bullet")}get hasHeaderSlotContent(){return i(this.hostElement,"header")}get hasFooterSlotContent(){return i(this.hostElement,"footer")}get itemClasses(){const t=["item"];if(!this.hasActionSlotContent&&!this.hasBulletSlotContent){t.push(`item-no-action-nor-bullet`)}else if(!this.hasActionSlotContent){t.push(`item-no-action`)}else if(!this.hasBulletSlotContent){t.push(`item-no-bullet`)}if(!this.hasFooterSlotContent){t.push(`item-no-footer`)}return t.join(" ")}get mainClasses(){const t=["main"];if(!this.hasActionSlotContent&&!this.hasBulletSlotContent){t.push(`main-no-action-nor-bullet`)}else if(!this.hasBulletSlotContent){t.push(`main-no-bullet`)}return t.join(" ")}render(){const{clickable:t}=this;return e("div",{key:"e47a8eca70918d8b62cd3122d7644545deecf980","test-id":"itemContainer",class:this.itemClasses,ref:t=>this.itemElement=t,role:t?"button":undefined,tabIndex:t?0:undefined},this.hasBulletSlotContent&&e("div",{key:"c9a92c8cb52de32d6f1ada5a18568fe9c725d228",class:this.bulletClasses},e("slot",{key:"ff2e786d4e87b3007a9cdef5e542032b539bafe7",name:"bullet"})),e("div",{key:"5eabdf0c77e39b3122a6175b0345de03835d2268",class:this.mainClasses},this.hasHeaderSlotContent&&e("div",{key:"a896ca8f38e6e74fe103301f627b2fd89af5dfe6",class:"header"},e("slot",{key:"74bf5817d988bb2ff071b87fe4f38839139e4e6b",name:"header"})),this.hasBodySlotContent&&e("div",{key:"054dd186f287e72263d1a4bdcc14d5f1bafc17ce",class:"body"},e("slot",{key:"eaeec1e3dfb76e488dad07cb6f54ddc47c62fe4c",name:"body"}))),this.hasActionSlotContent&&e("div",{key:"aa7917a7ff6873210b2f847b0b3c6ee4f14b960d",class:this.actionClasses},e("slot",{key:"4c7d248e21810ee0af44421161ed5bb64ee259d1",name:"action"})),this.hasFooterSlotContent&&e("div",{key:"1e129f8c181f6d2d11fafd1fad67733ffd4b07cc",class:this.footerClasses},e("slot",{key:"4b677f2888bbb65b525a6603b9f7e4e4d1f8f8bf",name:"footer"})))}get hostElement(){return o(this)}};c.style=n;export{c as q2_item};
2
- //# sourceMappingURL=p-32e57e9f.entry.js.map
1
+ import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{o as a,f as i}from"./p-84190698.js";const r="*{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}*{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}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";const n=r;const c=class{constructor(e){t(this,e);this.renderTrigger=0;this.clickable=undefined}componentDidLoad(){if(typeof MutationObserver!=="undefined"){const t=new MutationObserver((()=>this.renderTrigger+=1));t.observe(this.hostElement,{childList:true,subtree:true,attributes:true});this.mutationObserver=t}a(this.hostElement)}delegateFocus(t){var e;if(this.clickable){(e=this.itemElement)===null||e===void 0?void 0:e.focus()}else{t.preventDefault()}}get actionClasses(){const t=["action"];if(!this.hasBulletSlotContent){t.push(`action-no-bullet`)}return t.join(" ")}get bulletClasses(){const t=["bullet"];if(!this.hasFooterSlotContent){t.push(`bullet-no-footer`)}return t.join(" ")}get footerClasses(){const t=["footer"];if(!this.hasActionSlotContent&&!this.hasBulletSlotContent){t.push(`footer-no-action-nor-bullet`)}else if(!this.hasActionSlotContent){t.push(`footer-no-action`)}else if(!this.hasBulletSlotContent){t.push(`footer-no-bullet`)}return t.join(" ")}get hasActionSlotContent(){return i(this.hostElement,"action")}get hasBodySlotContent(){return i(this.hostElement,"body")}get hasBulletSlotContent(){return i(this.hostElement,"bullet")}get hasHeaderSlotContent(){return i(this.hostElement,"header")}get hasFooterSlotContent(){return i(this.hostElement,"footer")}get itemClasses(){const t=["item"];if(!this.hasActionSlotContent&&!this.hasBulletSlotContent){t.push(`item-no-action-nor-bullet`)}else if(!this.hasActionSlotContent){t.push(`item-no-action`)}else if(!this.hasBulletSlotContent){t.push(`item-no-bullet`)}if(!this.hasFooterSlotContent){t.push(`item-no-footer`)}return t.join(" ")}get mainClasses(){const t=["main"];if(!this.hasActionSlotContent&&!this.hasBulletSlotContent){t.push(`main-no-action-nor-bullet`)}else if(!this.hasBulletSlotContent){t.push(`main-no-bullet`)}return t.join(" ")}render(){const{clickable:t}=this;return e("div",{key:"ce737f24d1ef503c916c69cc05289e7a4515e2f5","test-id":"itemContainer",class:this.itemClasses,ref:t=>this.itemElement=t,role:t?"button":undefined,tabIndex:t?0:undefined},this.hasBulletSlotContent&&e("div",{key:"a881a9cf8ba8f6476cb6d059feefc8372fdd3812",class:this.bulletClasses},e("slot",{key:"65e691900697671c596f5dc7d6153fb61de2cf76",name:"bullet"})),e("div",{key:"fa160b4955d806674069e0be8bc58b873720d43e",class:this.mainClasses},this.hasHeaderSlotContent&&e("div",{key:"abf0b9a23d1c8f0ed60d79979821feb7d8549970",class:"header"},e("slot",{key:"02c2fff60bcd138da194417725f91c4a60f6536d",name:"header"})),this.hasBodySlotContent&&e("div",{key:"0152eb33c1e50b4d21f2f2d17e1a54f87a95cd9a",class:"body"},e("slot",{key:"6f902b7116b90e67cd1c320a83dc0ced5d4d5307",name:"body"}))),this.hasActionSlotContent&&e("div",{key:"82a7da347afd34c7a8d8cc2d806700d7fa911e88",class:this.actionClasses},e("slot",{key:"a863cbc215f1e3d67bc40b58e348281d0ab336e9",name:"action"})),this.hasFooterSlotContent&&e("div",{key:"3258a9d72fa42ef630ab1dbad84d7248ba9a907c",class:this.footerClasses},e("slot",{key:"6ddf529a02ed675990446ed5aff94212417eb21f",name:"footer"})))}get hostElement(){return o(this)}};c.style=n;export{c as q2_item};
2
+ //# sourceMappingURL=p-fb7dd7ab.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n display: block;\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n.action {\n --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n align-items: center;\n display: flex;\n grid-row: 1;\n justify-content: center;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n text-align: center;\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n @Element() hostElement: HTMLElement;\n mutationObserver: MutationObserver;\n itemElement: HTMLDivElement;\n\n // #endregion\n // #region State() Variables\n\n @State() renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /** Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n overrideFocus(this.hostElement);\n }\n // #endregion\n // #region Local methods\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (this.clickable) {\n this.itemElement?.focus();\n } else {\n event.preventDefault();\n }\n }\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasBulletSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get bulletClasses() {\n const classes = ['bullet'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`footer-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasBulletSlotContent() {\n return hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`item-no-bullet`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`main-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render methods\n\n render() {\n const { clickable } = this;\n return (\n <div\n test-id=\"itemContainer\"\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n >\n {this.hasBulletSlotContent && (\n <div class={this.bulletClasses}>\n <slot name=\"bullet\" />\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{r as t,c as a,h as e,F as i,g as r}from"./p-a5f18e27.js";import{c as o,l as n,i as s,o as c}from"./p-42302f6f.js";const l="*{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;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";const b=l;const d=class{constructor(e){t(this,e);this.change=a(this,"change",7);this.settled=a(this,"settled",7);this.guid=o();this.scheduledAfterRender=[];this.lastScrolled=new Date(null).getTime();this.updateTabData=()=>{this.updateTabPaneProps();this.setTabs()};this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue;t.guid=this.guid;t.index=a}))};this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})=>({label:t&&n(t)||"",value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})))};this.onTabClick=t=>{const a=t.target.closest('button[role="tab"]').dataset.value;const e=this.value===a;if(e)return;this.change.emit({value:a})};this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault();this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault();this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault();this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault();this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault();this.change.emit({value:a});break}};this.moveToAdjacentTab=(t,a)=>{const e=this.tabs.map((({value:t})=>t)).indexOf(t);let i;switch(a){case"next":i=Math.min(e+1,this.tabs.length-1);break;case"prev":i=Math.max(e-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1;break}if(e===i)return;this.moveFocus(i,false)};this.moveFocus=(t,a=true)=>{const e=this.tabs[t].value;const i=this.listElement.querySelector(`[data-value="${e}"]`);i.focus({preventScroll:a});const r=i.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:r,behavior:"smooth"});return i};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:e}=this.listElement;this.scrollEnabled=a>e;this.showScrollLeft=t>0;this.showScrollRight=a>Math.ceil(t)+e};this.onScrollBtnClick=t=>{const{scrollLeft:a,scrollWidth:e,clientWidth:i}=this.listElement;const r=Math.floor(i/2);let o=0;if(t==="left"){o=-Math.min(r,Math.abs(a))}else{o=Math.min(r,Math.abs(e-a-i))}this.listElement.scrollBy({left:o,behavior:"smooth"})};this.onSlotChange=()=>{this.checkScrollState()};this.color=undefined;this.name=undefined;this.noPrint=false;this.type=undefined;this.value=undefined;this.hasLeft=false;this.hasRight=false;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false;this.tabs=undefined}resizeIframe(){var t,a;return(a=(t=window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||a===void 0?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");if(t.length===0){return[]}return Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}onResize(){this.checkScrollState()}onFocus(t){if(!s(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}onBadge(){this.setTabs()}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.settled.emit()}componentDidLoad(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.observe(this.listElement);this.checkScrollState();c(this.hostElement);const a=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{const t=this.tabs.length>0;if(!t)return;const e=this.moveFocus(Math.max(a,0));this.value=e.dataset.value;e.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect();this.mutationObserver.disconnect();this.resizeObserver=null;this.mutationObserver=null}valueObserver(){this.updateTabData();this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));if(t>-1){this.scheduledAfterRender.push((()=>this.moveFocus(t,false)))}}nameObserver(){this.updateTabData()}render(){return e(i,{key:"09622574aaa5bca54c9b37398fb46edeb577cfc6"},e("div",{key:"c2e864d343919252f6b42f34cb413e13e3503cad",class:"tab-container"},this.scrollEnabled&&e(i,{key:"f4b70c0b8731ba26d3603d34f67d4064dedb406b"},e("div",{key:"57f8a4ea2334e6067be3264e5c0d7a96fc61f839",class:"gradient-left",hidden:!this.showScrollLeft}),e("div",{key:"a00e6c0e2e927603924db4dfb8a1561425471138",class:"gradient-right",hidden:!this.showScrollRight}),e("q2-btn",{key:"e89500dd1bd69fb6d36cf84a5a29bd9388d7ced2",class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},e("q2-icon",{key:"2b8216d238f83144f4169f156850a75d342e7533",type:"chevron-left",label:"scroll left"})),e("q2-btn",{key:"af48812b20977617efd714a864af725c9cac4a82",class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},e("q2-icon",{key:"455339159c7c9b3254428e0bce20578c663a7264",type:"chevron-right",label:"scroll right"}))),e("ul",{key:"e4d34f7a48a6b616e75e0acc96ad7edf3f7c87a2",onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),e("div",{key:"1e2471c87e744f1e1f096d13749bce78c420a4fb",class:"tab-content"},e("slot",{key:"6694c82b4d54c05aca9796f94e4970a16e896398",onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:i,value:r}=t;const o=this.selectedTabValue===r;return e("li",{role:"presentation"},e("button",{id:`tab-${this.guid}-${a}`,"data-value":r,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":"false",onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},t.badgeCount===undefined?i:this.generateTabWithBadge(t,o)))}generateTabWithBadge(t,a){let i;if(!t.badgeStatus&&a)i=t.badgeTheme||"primary";let r;if(t.badgeDescription)r=n(t.badgeDescription);else if(t.badgeStatus)r=n(`tecton.element.tab.pane.${t.badgeStatus}`,[t.badgeCount]);else r=n("tecton.element.tab.pane.new");return e("div",{class:"tab-pane-badge","aria-label":`${t.label}, ${t.badgeCount} ${r}`},t.label,e("q2-badge",{value:t.badgeCount,theme:i,status:t.badgeStatus}))}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};d.style=b;export{d as q2_tab_container};
2
- //# sourceMappingURL=p-f45b3488.entry.js.map
1
+ import{r as t,c as a,h as e,F as i,g as r}from"./p-a5f18e27.js";import{c as o,l as n,i as s,o as c}from"./p-84190698.js";const l="*{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;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";const b=l;const d=class{constructor(e){t(this,e);this.change=a(this,"change",7);this.settled=a(this,"settled",7);this.guid=o();this.scheduledAfterRender=[];this.lastScrolled=new Date(null).getTime();this.updateTabData=()=>{this.updateTabPaneProps();this.setTabs()};this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue;t.guid=this.guid;t.index=a}))};this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})=>({label:t&&n(t)||"",value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})))};this.onTabClick=t=>{const a=t.target.closest('button[role="tab"]').dataset.value;const e=this.value===a;if(e)return;this.change.emit({value:a})};this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault();this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault();this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault();this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault();this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault();this.change.emit({value:a});break}};this.moveToAdjacentTab=(t,a)=>{const e=this.tabs.map((({value:t})=>t)).indexOf(t);let i;switch(a){case"next":i=Math.min(e+1,this.tabs.length-1);break;case"prev":i=Math.max(e-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1;break}if(e===i)return;this.moveFocus(i,false)};this.moveFocus=(t,a=true)=>{const e=this.tabs[t].value;const i=this.listElement.querySelector(`[data-value="${e}"]`);i.focus({preventScroll:a});const r=i.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:r,behavior:"smooth"});return i};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:e}=this.listElement;this.scrollEnabled=a>e;this.showScrollLeft=t>0;this.showScrollRight=a>Math.ceil(t)+e};this.onScrollBtnClick=t=>{const{scrollLeft:a,scrollWidth:e,clientWidth:i}=this.listElement;const r=Math.floor(i/2);let o=0;if(t==="left"){o=-Math.min(r,Math.abs(a))}else{o=Math.min(r,Math.abs(e-a-i))}this.listElement.scrollBy({left:o,behavior:"smooth"})};this.onSlotChange=()=>{this.checkScrollState()};this.color=undefined;this.name=undefined;this.noPrint=false;this.type=undefined;this.value=undefined;this.hasLeft=false;this.hasRight=false;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false;this.tabs=undefined}resizeIframe(){var t,a;return(a=(t=window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||a===void 0?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");if(t.length===0){return[]}return Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}onResize(){this.checkScrollState()}onFocus(t){if(!s(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}onBadge(){this.setTabs()}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.settled.emit()}componentDidLoad(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.observe(this.listElement);this.checkScrollState();c(this.hostElement);const a=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{const t=this.tabs.length>0;if(!t)return;const e=this.moveFocus(Math.max(a,0));this.value=e.dataset.value;e.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect();this.mutationObserver.disconnect();this.resizeObserver=null;this.mutationObserver=null}valueObserver(){this.updateTabData();this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));if(t>-1){this.scheduledAfterRender.push((()=>this.moveFocus(t,false)))}}nameObserver(){this.updateTabData()}render(){return e(i,{key:"09622574aaa5bca54c9b37398fb46edeb577cfc6"},e("div",{key:"c2e864d343919252f6b42f34cb413e13e3503cad",class:"tab-container"},this.scrollEnabled&&e(i,{key:"f4b70c0b8731ba26d3603d34f67d4064dedb406b"},e("div",{key:"57f8a4ea2334e6067be3264e5c0d7a96fc61f839",class:"gradient-left",hidden:!this.showScrollLeft}),e("div",{key:"a00e6c0e2e927603924db4dfb8a1561425471138",class:"gradient-right",hidden:!this.showScrollRight}),e("q2-btn",{key:"e89500dd1bd69fb6d36cf84a5a29bd9388d7ced2",class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},e("q2-icon",{key:"2b8216d238f83144f4169f156850a75d342e7533",type:"chevron-left",label:"scroll left"})),e("q2-btn",{key:"af48812b20977617efd714a864af725c9cac4a82",class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},e("q2-icon",{key:"455339159c7c9b3254428e0bce20578c663a7264",type:"chevron-right",label:"scroll right"}))),e("ul",{key:"e4d34f7a48a6b616e75e0acc96ad7edf3f7c87a2",onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),e("div",{key:"1e2471c87e744f1e1f096d13749bce78c420a4fb",class:"tab-content"},e("slot",{key:"6694c82b4d54c05aca9796f94e4970a16e896398",onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:i,value:r}=t;const o=this.selectedTabValue===r;return e("li",{role:"presentation"},e("button",{id:`tab-${this.guid}-${a}`,"data-value":r,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":"false",onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},t.badgeCount===undefined?i:this.generateTabWithBadge(t,o)))}generateTabWithBadge(t,a){let i;if(!t.badgeStatus&&a)i=t.badgeTheme||"primary";let r;if(t.badgeDescription)r=n(t.badgeDescription);else if(t.badgeStatus)r=n(`tecton.element.tab.pane.${t.badgeStatus}`,[t.badgeCount]);else r=n("tecton.element.tab.pane.new");return e("div",{class:"tab-pane-badge","aria-label":`${t.label}, ${t.badgeCount} ${r}`},t.label,e("q2-badge",{value:t.badgeCount,theme:i,status:t.badgeStatus}))}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};d.style=b;export{d as q2_tab_container};
2
+ //# sourceMappingURL=p-fce6bc58.entry.js.map