q2-tecton-elements 1.57.2 → 1.58.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (274) hide show
  1. package/dist/bundle-report.json +68 -70
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/q2-action-group_2.cjs.entry.js +2 -2
  4. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  5. package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
  6. package/dist/cjs/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.cjs.js.map +1 -1
  7. package/dist/cjs/q2-badge_7.cjs.entry.js +14 -12
  8. package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
  9. package/dist/cjs/q2-calendar.cjs.entry.js +35 -33
  10. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  11. package/dist/cjs/q2-calendar.entry.cjs.js.map +1 -1
  12. package/dist/cjs/q2-carousel-pane.cjs.entry.js +2 -2
  13. package/dist/cjs/q2-carousel.cjs.entry.js +2 -2
  14. package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
  15. package/dist/cjs/q2-carousel.entry.cjs.js.map +1 -1
  16. package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
  18. package/dist/cjs/q2-chart-donut.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  20. package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/q2-checkbox.entry.cjs.js.map +1 -1
  22. package/dist/cjs/q2-context.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-currency.cjs.entry.js +1 -1
  24. package/dist/cjs/q2-detail.cjs.entry.js +1 -1
  25. package/dist/cjs/q2-example.cjs.entry.js +1 -1
  26. package/dist/cjs/q2-file-picker.cjs.entry.js +21 -13
  27. package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
  28. package/dist/cjs/q2-file-picker.entry.cjs.js.map +1 -1
  29. package/dist/cjs/q2-form.cjs.entry.js +1 -1
  30. package/dist/cjs/q2-formatted-text.cjs.entry.js +1 -1
  31. package/dist/cjs/q2-item.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-legend.cjs.entry.js +1 -1
  33. package/dist/cjs/q2-link_2.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-loading-element.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-loading-element.cjs.entry.js.map +1 -1
  36. package/dist/cjs/q2-loading-element.entry.cjs.js.map +1 -1
  37. package/dist/cjs/q2-message.cjs.entry.js +7 -7
  38. package/dist/cjs/q2-message.cjs.entry.js.map +1 -1
  39. package/dist/cjs/q2-message.entry.cjs.js.map +1 -1
  40. package/dist/cjs/q2-modal.cjs.entry.js +1 -1
  41. package/dist/cjs/q2-month-picker.cjs.entry.js +2 -2
  42. package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
  43. package/dist/cjs/q2-option-list.q2-popover.entry.cjs.js.map +1 -1
  44. package/dist/cjs/q2-option-list_2.cjs.entry.js +2 -2
  45. package/dist/cjs/q2-option-list_2.cjs.entry.js.map +1 -1
  46. package/dist/cjs/q2-pagination.cjs.entry.js +3 -3
  47. package/dist/cjs/q2-pill.cjs.entry.js +1 -1
  48. package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
  49. package/dist/cjs/q2-section.cjs.entry.js +2 -2
  50. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
  51. package/dist/cjs/q2-stepper.cjs.entry.js +35 -15
  52. package/dist/cjs/q2-stepper.cjs.entry.js.map +1 -1
  53. package/dist/cjs/q2-stepper.entry.cjs.js.map +1 -1
  54. package/dist/cjs/q2-tag.cjs.entry.js +1 -1
  55. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  56. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  57. package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
  58. package/dist/collection/components/q2-action-group/q2-action-group.js +1 -1
  59. package/dist/collection/components/q2-action-sheet/q2-action-sheet.js +1 -1
  60. package/dist/collection/components/q2-avatar/q2-avatar.js +1 -1
  61. package/dist/collection/components/q2-calendar/q2-calendar.css +2 -2
  62. package/dist/collection/components/q2-calendar/q2-calendar.js +34 -32
  63. package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
  64. package/dist/collection/components/q2-calendar/q2-month-picker.js +2 -2
  65. package/dist/collection/components/q2-carousel/q2-carousel.js +2 -2
  66. package/dist/collection/components/q2-carousel/q2-carousel.js.map +1 -1
  67. package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js +2 -2
  68. package/dist/collection/components/q2-chart-area/q2-chart-area.js +1 -1
  69. package/dist/collection/components/q2-chart-bar/q2-chart-bar.js +1 -1
  70. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +1 -1
  71. package/dist/collection/components/q2-checkbox/q2-checkbox.css +3 -3
  72. package/dist/collection/components/q2-context/q2-context.js +1 -1
  73. package/dist/collection/components/q2-currency/q2-currency.js +1 -1
  74. package/dist/collection/components/q2-detail/q2-detail.js +1 -1
  75. package/dist/collection/components/q2-example/q2-example.js +1 -1
  76. package/dist/collection/components/q2-file-picker/q2-file-picker.js +31 -23
  77. package/dist/collection/components/q2-file-picker/q2-file-picker.js.map +1 -1
  78. package/dist/collection/components/q2-form/q2-form.js +1 -1
  79. package/dist/collection/components/q2-formatted-text/q2-formatted-text.js +1 -1
  80. package/dist/collection/components/q2-input/formatting/phone.js +1 -1
  81. package/dist/collection/components/q2-input/formatting/phone.js.map +1 -1
  82. package/dist/collection/components/q2-input/q2-input.css +1 -1
  83. package/dist/collection/components/q2-input/q2-input.js +10 -8
  84. package/dist/collection/components/q2-input/q2-input.js.map +1 -1
  85. package/dist/collection/components/q2-item/q2-item.js +1 -1
  86. package/dist/collection/components/q2-legend/q2-legend.js +1 -1
  87. package/dist/collection/components/q2-list/q2-list.js +1 -1
  88. package/dist/collection/components/q2-loading/q2-loading.css +10 -0
  89. package/dist/collection/components/q2-loading/skeleton/q2-loading-element/styles.css +1 -0
  90. package/dist/collection/components/q2-message/q2-message.css +30 -17
  91. package/dist/collection/components/q2-message/q2-message.js +6 -6
  92. package/dist/collection/components/q2-message/q2-message.js.map +1 -1
  93. package/dist/collection/components/q2-modal/q2-modal.js +1 -1
  94. package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
  95. package/dist/collection/components/q2-pagination/q2-pagination.js +3 -3
  96. package/dist/collection/components/q2-pill/q2-pill.js +1 -1
  97. package/dist/collection/components/q2-popover/q2-popover.js +8 -4
  98. package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
  99. package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
  100. package/dist/collection/components/q2-resize-observer/q2-resize-observer.js +1 -1
  101. package/dist/collection/components/q2-section/q2-section.js +2 -2
  102. package/dist/collection/components/q2-stepper/q2-stepper.css +4 -4
  103. package/dist/collection/components/q2-stepper/q2-stepper.js +40 -16
  104. package/dist/collection/components/q2-stepper/q2-stepper.js.map +1 -1
  105. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +1 -1
  106. package/dist/collection/components/q2-tab-container/q2-tab-container.js +2 -2
  107. package/dist/collection/components/q2-tab-container/q2-tab-container.js.map +1 -1
  108. package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
  109. package/dist/collection/components/q2-tag/q2-tag.js +1 -1
  110. package/dist/collection/components/q2-textarea/q2-textarea.js +1 -1
  111. package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
  112. package/dist/components/q2-action-group2.js +1 -1
  113. package/dist/components/q2-action-sheet.js +1 -1
  114. package/dist/components/q2-avatar2.js +1 -1
  115. package/dist/components/q2-calendar.js +35 -33
  116. package/dist/components/q2-calendar.js.map +1 -1
  117. package/dist/components/q2-carousel-pane.js +2 -2
  118. package/dist/components/q2-carousel.js +2 -2
  119. package/dist/components/q2-carousel.js.map +1 -1
  120. package/dist/components/q2-chart-area.js +1 -1
  121. package/dist/components/q2-chart-bar.js +1 -1
  122. package/dist/components/q2-chart-donut.js +1 -1
  123. package/dist/components/q2-checkbox2.js +1 -1
  124. package/dist/components/q2-checkbox2.js.map +1 -1
  125. package/dist/components/q2-context.js +1 -1
  126. package/dist/components/q2-currency.js +1 -1
  127. package/dist/components/q2-detail.js +1 -1
  128. package/dist/components/q2-example.js +1 -1
  129. package/dist/components/q2-file-picker.js +21 -13
  130. package/dist/components/q2-file-picker.js.map +1 -1
  131. package/dist/components/q2-form.js +1 -1
  132. package/dist/components/q2-formatted-text.js +1 -1
  133. package/dist/components/q2-input2.js +12 -10
  134. package/dist/components/q2-input2.js.map +1 -1
  135. package/dist/components/q2-item2.js +1 -1
  136. package/dist/components/q2-legend2.js +1 -1
  137. package/dist/components/q2-list2.js +1 -1
  138. package/dist/components/q2-loading-element.js +1 -1
  139. package/dist/components/q2-loading-element.js.map +1 -1
  140. package/dist/components/q2-loading2.js +1 -1
  141. package/dist/components/q2-loading2.js.map +1 -1
  142. package/dist/components/q2-message2.js +7 -7
  143. package/dist/components/q2-message2.js.map +1 -1
  144. package/dist/components/q2-modal.js +1 -1
  145. package/dist/components/q2-month-picker.js +2 -2
  146. package/dist/components/q2-optgroup2.js +1 -1
  147. package/dist/components/q2-pagination.js +3 -3
  148. package/dist/components/q2-pill.js +1 -1
  149. package/dist/components/q2-popover2.js +2 -2
  150. package/dist/components/q2-popover2.js.map +1 -1
  151. package/dist/components/q2-relative-time.js +1 -1
  152. package/dist/components/q2-resize-observer2.js +1 -1
  153. package/dist/components/q2-section.js +2 -2
  154. package/dist/components/q2-stepper-vertical.js +1 -1
  155. package/dist/components/q2-stepper.js +38 -17
  156. package/dist/components/q2-stepper.js.map +1 -1
  157. package/dist/components/q2-tab-container.js +2 -2
  158. package/dist/components/q2-tab-container.js.map +1 -1
  159. package/dist/components/q2-tab-pane.js +1 -1
  160. package/dist/components/q2-tag.js +1 -1
  161. package/dist/components/q2-textarea.js +1 -1
  162. package/dist/components/tecton-tab-pane.js +2 -2
  163. package/dist/esm/loader.js +1 -1
  164. package/dist/esm/q2-action-group_2.entry.js +2 -2
  165. package/dist/esm/q2-action-sheet.entry.js +1 -1
  166. package/dist/esm/q2-avatar.entry.js +1 -1
  167. package/dist/esm/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.js.map +1 -1
  168. package/dist/esm/q2-badge_7.entry.js +16 -14
  169. package/dist/esm/q2-badge_7.entry.js.map +1 -1
  170. package/dist/esm/q2-calendar.entry.js +35 -33
  171. package/dist/esm/q2-calendar.entry.js.map +1 -1
  172. package/dist/esm/q2-carousel-pane.entry.js +2 -2
  173. package/dist/esm/q2-carousel.entry.js +2 -2
  174. package/dist/esm/q2-carousel.entry.js.map +1 -1
  175. package/dist/esm/q2-chart-area.entry.js +1 -1
  176. package/dist/esm/q2-chart-bar.entry.js +1 -1
  177. package/dist/esm/q2-chart-donut.entry.js +1 -1
  178. package/dist/esm/q2-checkbox.entry.js +1 -1
  179. package/dist/esm/q2-checkbox.entry.js.map +1 -1
  180. package/dist/esm/q2-context.entry.js +1 -1
  181. package/dist/esm/q2-currency.entry.js +1 -1
  182. package/dist/esm/q2-detail.entry.js +1 -1
  183. package/dist/esm/q2-example.entry.js +1 -1
  184. package/dist/esm/q2-file-picker.entry.js +21 -13
  185. package/dist/esm/q2-file-picker.entry.js.map +1 -1
  186. package/dist/esm/q2-form.entry.js +1 -1
  187. package/dist/esm/q2-formatted-text.entry.js +1 -1
  188. package/dist/esm/q2-item.entry.js +1 -1
  189. package/dist/esm/q2-legend.entry.js +1 -1
  190. package/dist/esm/q2-link_2.entry.js +1 -1
  191. package/dist/esm/q2-loading-element.entry.js +1 -1
  192. package/dist/esm/q2-loading-element.entry.js.map +1 -1
  193. package/dist/esm/q2-message.entry.js +7 -7
  194. package/dist/esm/q2-message.entry.js.map +1 -1
  195. package/dist/esm/q2-modal.entry.js +1 -1
  196. package/dist/esm/q2-month-picker.entry.js +2 -2
  197. package/dist/esm/q2-optgroup.entry.js +1 -1
  198. package/dist/esm/q2-option-list.q2-popover.entry.js.map +1 -1
  199. package/dist/esm/q2-option-list_2.entry.js +2 -2
  200. package/dist/esm/q2-option-list_2.entry.js.map +1 -1
  201. package/dist/esm/q2-pagination.entry.js +3 -3
  202. package/dist/esm/q2-pill.entry.js +1 -1
  203. package/dist/esm/q2-relative-time.entry.js +1 -1
  204. package/dist/esm/q2-section.entry.js +2 -2
  205. package/dist/esm/q2-stepper-vertical.entry.js +1 -1
  206. package/dist/esm/q2-stepper.entry.js +35 -15
  207. package/dist/esm/q2-stepper.entry.js.map +1 -1
  208. package/dist/esm/q2-tag.entry.js +1 -1
  209. package/dist/esm/q2-tecton-elements.js +1 -1
  210. package/dist/esm/q2-textarea.entry.js +1 -1
  211. package/dist/esm/tecton-tab-pane.entry.js +2 -2
  212. package/dist/jest.setup.js +7 -0
  213. package/dist/jest.setup.js.map +1 -1
  214. package/dist/q2-tecton-elements/q2-action-group_2.entry.js +7 -7
  215. package/dist/q2-tecton-elements/q2-action-sheet.entry.js +8 -8
  216. package/dist/q2-tecton-elements/q2-avatar.entry.js +6 -6
  217. package/dist/q2-tecton-elements/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.esm.js.map +1 -1
  218. package/dist/q2-tecton-elements/q2-badge_7.entry.js +319 -314
  219. package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
  220. package/dist/q2-tecton-elements/q2-calendar.entry.esm.js.map +1 -1
  221. package/dist/q2-tecton-elements/q2-calendar.entry.js +151 -146
  222. package/dist/q2-tecton-elements/q2-calendar.entry.js.map +1 -1
  223. package/dist/q2-tecton-elements/q2-carousel-pane.entry.js +3 -3
  224. package/dist/q2-tecton-elements/q2-carousel.entry.esm.js.map +1 -1
  225. package/dist/q2-tecton-elements/q2-carousel.entry.js +2 -2
  226. package/dist/q2-tecton-elements/q2-carousel.entry.js.map +1 -1
  227. package/dist/q2-tecton-elements/q2-chart-area.entry.js +4 -4
  228. package/dist/q2-tecton-elements/q2-chart-bar.entry.js +2 -2
  229. package/dist/q2-tecton-elements/q2-chart-donut.entry.js +63 -63
  230. package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map +1 -1
  231. package/dist/q2-tecton-elements/q2-checkbox.entry.js +33 -33
  232. package/dist/q2-tecton-elements/q2-checkbox.entry.js.map +1 -1
  233. package/dist/q2-tecton-elements/q2-context.entry.js +11 -11
  234. package/dist/q2-tecton-elements/q2-currency.entry.js +6 -6
  235. package/dist/q2-tecton-elements/q2-detail.entry.js +3 -3
  236. package/dist/q2-tecton-elements/q2-example.entry.js +1 -1
  237. package/dist/q2-tecton-elements/q2-file-picker.entry.esm.js.map +1 -1
  238. package/dist/q2-tecton-elements/q2-file-picker.entry.js +21 -13
  239. package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
  240. package/dist/q2-tecton-elements/q2-form.entry.js +2 -2
  241. package/dist/q2-tecton-elements/q2-formatted-text.entry.js +2 -2
  242. package/dist/q2-tecton-elements/q2-item.entry.js +12 -12
  243. package/dist/q2-tecton-elements/q2-legend.entry.js +2 -2
  244. package/dist/q2-tecton-elements/q2-link_2.entry.js +9 -9
  245. package/dist/q2-tecton-elements/q2-loading-element.entry.esm.js.map +1 -1
  246. package/dist/q2-tecton-elements/q2-loading-element.entry.js +1 -1
  247. package/dist/q2-tecton-elements/q2-message.entry.esm.js.map +1 -1
  248. package/dist/q2-tecton-elements/q2-message.entry.js +32 -32
  249. package/dist/q2-tecton-elements/q2-message.entry.js.map +1 -1
  250. package/dist/q2-tecton-elements/q2-modal.entry.js +21 -21
  251. package/dist/q2-tecton-elements/q2-month-picker.entry.js +13 -13
  252. package/dist/q2-tecton-elements/q2-optgroup.entry.js +4 -4
  253. package/dist/q2-tecton-elements/q2-option-list.q2-popover.entry.esm.js.map +1 -1
  254. package/dist/q2-tecton-elements/q2-option-list_2.entry.js +16 -16
  255. package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map +1 -1
  256. package/dist/q2-tecton-elements/q2-pagination.entry.js +24 -24
  257. package/dist/q2-tecton-elements/q2-pill.entry.js +13 -13
  258. package/dist/q2-tecton-elements/q2-relative-time.entry.js +4 -4
  259. package/dist/q2-tecton-elements/q2-section.entry.js +11 -11
  260. package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +4 -4
  261. package/dist/q2-tecton-elements/q2-stepper.entry.esm.js.map +1 -1
  262. package/dist/q2-tecton-elements/q2-stepper.entry.js +77 -59
  263. package/dist/q2-tecton-elements/q2-stepper.entry.js.map +1 -1
  264. package/dist/q2-tecton-elements/q2-tag.entry.js +5 -5
  265. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  266. package/dist/q2-tecton-elements/q2-textarea.entry.js +5 -5
  267. package/dist/q2-tecton-elements/tecton-tab-pane.entry.js +6 -6
  268. package/dist/types/components/q2-calendar/q2-calendar.d.ts +1 -1
  269. package/dist/types/components/q2-file-picker/q2-file-picker.d.ts +48 -24
  270. package/dist/types/components/q2-input/q2-input.d.ts +4 -3
  271. package/dist/types/components/q2-popover/q2-popover.d.ts +6 -2
  272. package/dist/types/components/q2-stepper/q2-stepper.d.ts +2 -0
  273. package/dist/types/components.d.ts +33 -20
  274. package/package.json +3 -3
@@ -150,7 +150,7 @@ export class Q2Modal {
150
150
  render() {
151
151
  const interiorClasses = `interior`;
152
152
  const renderStatus = `${this.renderStatus || ''}`;
153
- return (h("dialog", { key: 'c6b6002502f686562ae700042eb7fd152021f4f6', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'f6c61983e79c27513fed34ea92f905ca5eb699a1', class: interiorClasses }, this.title && (h("header", { key: 'c7981b41c80380b083aab04022eefb0800cb707b' }, this.title && h("h2", { key: 'd0d0342778ac062c458ed8097428b42a096142fe', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'aeca66091724d28929789f44af34598a72713eef', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '5b6326968992541f77a419b8068798a0918f7104', type: "close" }))))), h("div", { key: 'e70b93261328c3e05553083f2a34ddad827fc11f', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '3e9419015e12401dfccd7c81fa4d7cb18c59883b', class: "icon" }, h("q2-icon", { key: '51dd720ee574b72288b4bfcc6c262736f08e0850', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: 'f12055cbb6e36232d2c624e4859ce9eb0bc5e9a2', class: "image" }, h("img", { key: '0a54f5011dd03a5befd7501a051761d5d2fbef05', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '56a43361385741149a862a479bf6bc0a8177c90f', name: "content" }), this.description && h("p", { key: 'cc0cc09de43df43f8036dba69e947e5c362d29d1', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'e78f11b089f9acd3e55f19104b1aa4f2d957010a', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'a93afc716f1c4b546fb8ec52409043ea3e0e45b5' }, h("q2-action-group", { key: '14569cd0b17e4276573390f8528a12fb2bd6d81a', "full-width": true }, h("slot", { key: '2f063302e5b97c2fa8af300068b61e966219eaff', name: "action" }))))));
153
+ return (h("dialog", { key: 'ce212f43dd6cb9e7b217e74c74f331c8a36a2205', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '7e7b4923441fc13beff0c6c550130013a2b5ab0d', class: interiorClasses }, this.title && (h("header", { key: '0c835401db9bd2af8fb92283df9bcf937b18eee1' }, this.title && h("h2", { key: 'd224d870d657447179b8f712d69aabe8d381aa5e', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '5f553689bc823d12c885b35e8538cdf2548f8fab', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '21cf9ec4089163f72fa23ba4bf130b228c9f545b', type: "close" }))))), h("div", { key: 'cda5fe00244f2ed8e3c900a4541f5df09bae180e', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'df199a47b46b8f11a5f5da1d9b98dda105377797', class: "icon" }, h("q2-icon", { key: '707147eb728e0e958633458854be33293bd5815a', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '7db1cc562f2fbd9466b20f087a218873d946c9e7', class: "image" }, h("img", { key: '35e8ded7396fca2de54d35b4f6d0e2b42f256f85', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '11d89229187aaba0e45f97df0d00e8a232587d4e', name: "content" }), this.description && h("p", { key: '3728d5734e097d8a58d64d124917388d1a114d39', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'b39306184739ffca2b516fac78837ea00bf6c6dd', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '635e4de7bcfd0c94d08e7cdc3abbf504e503c838' }, h("q2-action-group", { key: 'aabfd93e3196659074323761bc30e99288f2cd7e', "full-width": true }, h("slot", { key: 'f2b7164303dc242493f444d68b4d24d500fe6033', name: "action" }))))));
154
154
  }
155
155
  static get is() { return "q2-modal"; }
156
156
  static get encapsulation() { return "shadow"; }
@@ -48,7 +48,7 @@ export class Q2Optgroup {
48
48
  // #endregion
49
49
  // #region Render Methods
50
50
  render() {
51
- return (h("div", { key: '5614e8cb820bde0068955d3661a7a637ad896edb', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '44803d82f01c356cfa5b6b944a0572ec0e990054', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '1c1d4a7214fc9ab8d0a58aa7e68be3e4beaf36cd', class: "q2-optgroup-options" }, h("slot", { key: '4d69d3939b308456b7db28740aa08dc927b03a1d' }))));
51
+ return (h("div", { key: '0f8403da29d7afc8a1923ae7ff5019cc00304a06', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'e7819a536272ff24a1b6e909c2bbf6296efcd022', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '89512227cb963d634b8be6552bc59f060892b449', class: "q2-optgroup-options" }, h("slot", { key: '4e8f413d05a363d1a4f3c3a8364d596354fd1ca8' }))));
52
52
  }
53
53
  static get is() { return "q2-optgroup"; }
54
54
  static get encapsulation() { return "shadow"; }
@@ -247,7 +247,7 @@ export class Q2Pagination {
247
247
  total,
248
248
  });
249
249
  }
250
- return (h("nav", { key: '65574c0840913f215f991c456915ec7f1f611292', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '5e6dffe8bda90a528fa1b0fed37ddd6753b34dfa', class: "description", "test-id": "description" }, pagesOnly
250
+ return (h("nav", { key: 'db7a23f5a1bed6f000a7ee7bdccd1defa45ea644', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '169fe5086eb1f2e2732f49d5a57b670519b3fe2b', class: "description", "test-id": "description" }, pagesOnly
251
251
  ? loc('tecton.element.pagination.pages', {
252
252
  current: page,
253
253
  total: totalPages,
@@ -256,10 +256,10 @@ export class Q2Pagination {
256
256
  range: currentRange,
257
257
  recordType: recordType.toLowerCase(),
258
258
  total: total.toLocaleString(),
259
- })), h("div", { key: 'd940aabbaa898184ce3808f4cd289590c4de7aa7', class: "btn-group" }, h("q2-btn", { key: '3869a2133a872579884f2d6f11d71bc30c6190b5', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '18ba7be57555d3415c158a868a0d3b41ff637fca', type: "chevron-double-left" })), h("q2-btn", { key: '0fffa23c3b65ac089f7037f85a73db858abe6793', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'e455849c1017531578f7aa2f2b220c5e8a759467', type: "chevron-left" }))), h("div", { key: '114bf174e74fc936c49f152d48f4ed33d3982706', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: 'b819219fdde37c0c89af466503ef688a9cdd2a17', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '2d64dd48b86be58ec16a1667b23a9956209a4706', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '52fdab42ff30eb9a7e7b686280339824ccedd260', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
259
+ })), h("div", { key: 'd8e4568271e8624e68d7547628d4b7b4e7193554', class: "btn-group" }, h("q2-btn", { key: '9e0fac5d647cb2442d56e11bfb7d87473b43cb53', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: 'cc95f8b05aaf5734c7177025e95a9aae26241f85', type: "chevron-double-left" })), h("q2-btn", { key: 'd6b5b6ef336255d294e21337757f0fd3669b6ab6', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'aa1a0bf2761feb5f0134124503fbd6cb8f4b4b50', type: "chevron-left" }))), h("div", { key: '9d8403c7f3c8e23931faa6ce45c68facd81d524b', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: 'aaa475f6cddfc7be29d8169fd01f41eaa624444d', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7521a7ad7a52b2cac1b2d47028fae86f35e7c515', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'dd12f1d808f9a7f320feac979057a0ede65fa64e', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
260
260
  event.stopPropagation();
261
261
  this.handlePageChange(event.detail.value);
262
- }, "test-id": "pageInput", current: "page" })), h("span", { key: '6e9c6e3187cd7d5d9f9f17be1652379d1d7c6b4f', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '813316d4b2f17957fa9df5d4369f533026ef7e99', class: "btn-group" }, h("q2-btn", { key: '70ae021b93b5ec2e5f2ef1f49845f859f83b88cd', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '2fc73957af58e0438b56fc9768158d07f3a8578b', type: "chevron-right" })), h("q2-btn", { key: '3504f6ef0487104767eafc723494ae128f941d18', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '3eafe2c506ba079b6c47e973a7c408179d0b976c', type: "chevron-double-right" }))), h("div", { key: '482e61832453e8556f50c4faca6d153b4ce1bc22', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
262
+ }, "test-id": "pageInput", current: "page" })), h("span", { key: '9d5261005a25545b952dbaadcff625c306c5d212', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'bc7b951072defc61da4432b3147b40edc56114dd', class: "btn-group" }, h("q2-btn", { key: '123a1b50c1052edca661ce95d9afd0d6cbb040a0', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '63c2ef5e896f1f69869e584ecb2b710753194174', type: "chevron-right" })), h("q2-btn", { key: 'f9ee96a6bda4268cac8bbcd7a8dcb87e0b532879', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'f86bb119418ae440de2855d6bd2e3c31e6c3fa56', type: "chevron-double-right" }))), h("div", { key: 'f17a18c45e595f013c15a2ff1ea2ec848c23c84f', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
263
263
  }
264
264
  static get is() { return "q2-pagination"; }
265
265
  static get encapsulation() { return "shadow"; }
@@ -343,7 +343,7 @@ export class Q2Pill {
343
343
  wrapperClassNames.push('has-icon');
344
344
  if (optionCount)
345
345
  wrapperClassNames.push('has-options');
346
- return (h("click-elsewhere", { key: 'a414de5290a14e5b9d39d7255a8ce4f86a7f63c5', onChange: this.onClickElsewhere }, h("div", { key: '8f4f99433a55bb3ad6905e39498abde42d8a0d50', class: wrapperClassNames.join(' ') }, h("div", { key: 'ea41a7b5ce62ebc60db610a13fcfc83e0a49b313', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '45ea8c2340415cfe808d7221139c82516428375c', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '43f856c13a43be860cf6e5fe5b56b30ccd81e2df', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '628a9a30af7ab8da9838233b5a6cfd3c77c7639c', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'ff9a727deb59bf185cd0c3ed05c610cc07c63af1', class: "popover-content" }, h("div", { key: '0b051665a5e10eb7ea847e59d438d10230509afc', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'a3d356609517be8c0c01feb85ac2eb0175aaada8', name: "popover-top" })), h("q2-option-list", { key: '351d34cd993921d2b1e123dd70af3990f7c7a69d', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '9ee96d32d484b84bcf529dd37ae23e85abead6bc' })), h("div", { key: '8371a96f73d4cb474df1c683d6c03b7fa4d8181c', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '3afc2d8be7b7e2fc8b3b74ad20292a09569e65e6', name: "popover-bottom" })))))));
346
+ return (h("click-elsewhere", { key: 'b23f13315f4794f4c793836d3bdc76bf657ee128', onChange: this.onClickElsewhere }, h("div", { key: 'd710587901ccb1b08d2e0a26a759483aadfbbae6', class: wrapperClassNames.join(' ') }, h("div", { key: 'efd441bab410f72619a9d8019fcf683e826e0d33', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'de275fb0ad3990b1d39d68616132267fe776ade6', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '43cc6e0282a7b7af9b79c9e989dfdb964d75d4cd', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'cae64cfcdad6747e594870442da594ce63dc6778', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'c51be2d63d7319c5f5f8e8681c6be80af72cdcc2', class: "popover-content" }, h("div", { key: '1ce17d9a2dca69ccd2c9be386f55989c74662cc0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'f854b422be744b7f71fa7bc3a9b0094fee20c69b', name: "popover-top" })), h("q2-option-list", { key: 'af66d5ef035c5e4b6c21bcc68cca3b1c7318ca2b', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '669bec62f53f1d632538450241904ad4178ca8d3' })), h("div", { key: 'fc32d532a46e7c68a7e536cd3f7b0fa1e41e5b2a', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'a070286f17f30638733bf83a77811982f01cfc1a', name: "popover-bottom" })))))));
347
347
  }
348
348
  static get is() { return "q2-pill"; }
349
349
  static get encapsulation() { return "shadow"; }
@@ -9,8 +9,12 @@ import { handleDeprecationWarning, waitForNextPaint } from "../../utils";
9
9
  * Each of the following Scenarios must be tested on each Device, in each Environment.
10
10
  *
11
11
  * Scenarios:
12
- * - Q2 Select non-typeable
13
- * - Q2 Select typeable
12
+ * - Q2 Select searchable
13
+ * - Q2 Select non-searchable
14
+ *
15
+ * Orientations:
16
+ * - Portrait
17
+ * - Landscape
14
18
  *
15
19
  * Devices:
16
20
  * - iOS Safari
@@ -33,7 +37,7 @@ export class Q2Popover {
33
37
  // #endregion
34
38
  // #region State Properties
35
39
  this.currentDirection = undefined;
36
- // remove `show` when Popover API is supported in iOS
40
+ // remove `show` when we transitiong fully to Popover API and get rid of 'legacy' mode
37
41
  this.show = false;
38
42
  // #endregion
39
43
  // #region Public Property API
@@ -321,7 +325,7 @@ export class Q2Popover {
321
325
  containerClasses.push('block');
322
326
  if (this.mode === 'legacy')
323
327
  containerClasses.push('legacy');
324
- return (h("div", { key: 'c9bbcb53ba8f8bb8879d96cd2f828943dea32b92', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: '4088186bfb7b320fcd8836bcef40b90a685caf9e', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '0876866b03a8708a0b401df638d3146263afc141' }))));
328
+ return (h("div", { key: 'ae6acc7b2f08dc65013e00c80bf51093c3f882c2', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: '45f5690c2a452498d825f827424eab0ddf30248f', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: 'fd353adc2a196f1b94936a8a0fb648a8df2318c6' }))));
325
329
  }
326
330
  static get is() { return "q2-popover"; }
327
331
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- {"version":3,"file":"q2-popover.js","sourceRoot":"","sources":["../../../../src/components/q2-popover/q2-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["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/**\n * ***********\n * * WARNING *\n * ***********\n * Touching this file obligates you to manually test thoroughly, because Puppeteer can't capture every edgecase.\n *\n * Each of the following Scenarios must be tested on each Device, in each Environment.\n *\n * Scenarios:\n * - Q2 Select non-typeable\n * - Q2 Select typeable\n *\n * Devices:\n * - iOS Safari\n * - Android Chrome\n * - MacOS Safari\n * - Chrome\n * - Firefox\n *\n * Environments:\n * - Standard (Outside of Iframe)\n * - SDK Extension (Inside of Iframe)\n */\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n // #region Own Properties\n\n containerElement: HTMLDivElement;\n contentElement: HTMLDivElement;\n /**\n * The number of pixels to leave between the popover and the edge of the viewport\n */\n displayBuffer = 10;\n orientationChanged: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n currentDirection: 'down' | 'up' = undefined;\n\n // remove `show` when Popover API is supported in iOS\n @State()\n show: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Aligns the popover to the left or right side of the control element. */\n @Prop({ reflect: true })\n align: 'left' | 'right' = 'left';\n\n /** Indicates the popover will match the width of its parent element. */\n @Prop({ reflect: true })\n block: boolean;\n\n /** The element that controls the popover's behavior. */\n @Prop()\n controlElement: HTMLElement;\n\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 })\n direction: 'up' | 'down';\n\n /**\n * Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n */\n @Prop()\n maxHeight: number;\n\n /** @deprecated */\n @Prop()\n minHeight: number;\n\n @Prop()\n mode: 'legacy' = null;\n\n /** Controls whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n // #endregion\n // #region Events\n\n /**\n * Emitted when the popover is opened or closed.\n */\n @Event()\n popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeViewportListeners();\n this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);\n this.containerElement = null;\n this.contentElement = null;\n this.controlElement = null;\n }\n\n componentWillLoad() {\n if (!this.supportsPopoverAPI) {\n console.warn(\n 'The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.'\n );\n this.mode = 'legacy';\n }\n }\n\n componentDidLoad() {\n this.handleMinHeight();\n if (this.supportsPopoverAPI) this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);\n if (this.open) this.determinePopDirection();\n }\n\n // #endregion\n // #region Listeners\n\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 // #endregion\n // #region Public Methods API\n\n @Method()\n async scrollContainerTo(options: ScrollToOptions) {\n this.containerElement.scrollTo(options);\n }\n\n @Method()\n async toggle() {\n this.open = !this.open;\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('minHeight')\n minHeightProvided() {\n this.handleMinHeight();\n }\n\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 if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n this.show = false;\n } else {\n this.containerElement.hidePopover();\n }\n\n await waitForNextPaint();\n this.clearCSSProperties();\n }\n }\n\n // #endregion\n // #region Local Methods\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 get providedDirection(): '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 supportsPopoverAPI(): boolean {\n return Object.hasOwn(HTMLElement.prototype, 'popover');\n }\n\n get validatedMaxHeight(): number | undefined {\n const { maxHeight } = this;\n return isNaN(maxHeight) ? undefined : maxHeight;\n }\n\n addViewportListeners() {\n window.addEventListener('resize', this.viewPortOrientationChanged);\n visualViewport?.addEventListener('resize', this.viewPortChanged);\n window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n screen?.orientation?.addEventListener('orientationchange', this.viewPortOrientationChanged);\n window.addEventListener('orientationchange', this.viewPortOrientationChanged);\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 async determinePopDirection() {\n const { containerElement, controlElement, providedDirection, 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 || providedDirection || directionWithMostSpace;\n\n switch (currentOrDetermineDirection) {\n case 'up':\n if (shouldUpdateMaxHeight) {\n const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n }\n this.setDirectionAndShow('up');\n break;\n case 'down':\n if (shouldUpdateMaxHeight) {\n const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n }\n this.setDirectionAndShow('down');\n break;\n default:\n break;\n }\n }\n\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\n };\n\n handlePopoverToggleEvent = (event: ToggleEvent) => {\n this.popoverStateChanged.emit({ open: event.newState === 'open' });\n };\n\n removeViewportListeners() {\n window.removeEventListener('resize', this.viewPortOrientationChanged);\n visualViewport?.removeEventListener('resize', this.viewPortChanged);\n window.removeEventListener('scroll', this.viewPortChanged, { capture: true });\n screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\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 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 if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n this.show = true;\n this.setAbsoluteCSSProperties();\n } else {\n this.setPopoverAPICSSProperties();\n this.containerElement.showPopover();\n }\n }\n\n setPopoverAPICSSProperties = async () => {\n const { controlElement, containerElement, currentDirection, isModule, align } = 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\n const popoverLeft: number = controlLeft;\n const popoverRight: number = window?.visualViewport?.width - controlRight;\n\n if (align === 'right') {\n containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);\n containerElement.style.setProperty('--comp-pop-left', 'unset');\n } else {\n containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);\n containerElement.style.setProperty('--comp-pop-right', 'unset');\n }\n\n if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n\n if (currentDirection === 'up') {\n if (isModule) {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);\n } else {\n containerElement.style.setProperty(\n '--comp-pop-bottom',\n `${window.innerHeight - controlTop - window?.visualViewport?.offsetTop - window.scrollY}px`\n );\n }\n }\n\n if (currentDirection === 'down') {\n if (isModule) {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n } else {\n containerElement.style.setProperty(\n '--comp-pop-top',\n `${controlBottom + (window?.visualViewport?.offsetTop ?? 0) + window.scrollY}px`\n );\n }\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 viewPortChanged = () => {\n if (!this.open) return;\n this.determinePopDirection();\n };\n\n viewPortOrientationChanged = () => {\n this.orientationChanged = true;\n this.viewPortChanged();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const containerClasses = ['container', this.currentDirection, this.align];\n if (this.show) containerClasses.push('show');\n if (this.block) containerClasses.push('block');\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 tabIndex={-1}\n popover=\"auto\"\n >\n <div\n ref={el => (this.contentElement = el)}\n class=\"content\"\n >\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}
1
+ {"version":3,"file":"q2-popover.js","sourceRoot":"","sources":["../../../../src/components/q2-popover/q2-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["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/**\n * ***********\n * * WARNING *\n * ***********\n * Touching this file obligates you to manually test thoroughly, because Puppeteer can't capture every edgecase.\n *\n * Each of the following Scenarios must be tested on each Device, in each Environment.\n *\n * Scenarios:\n * - Q2 Select searchable\n * - Q2 Select non-searchable\n *\n * Orientations:\n * - Portrait\n * - Landscape\n *\n * Devices:\n * - iOS Safari\n * - Android Chrome\n * - MacOS Safari\n * - Chrome\n * - Firefox\n *\n * Environments:\n * - Standard (Outside of Iframe)\n * - SDK Extension (Inside of Iframe)\n */\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n // #region Own Properties\n\n containerElement: HTMLDivElement;\n contentElement: HTMLDivElement;\n /**\n * The number of pixels to leave between the popover and the edge of the viewport\n */\n displayBuffer = 10;\n orientationChanged: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n currentDirection: 'down' | 'up' = undefined;\n\n // remove `show` when we transitiong fully to Popover API and get rid of 'legacy' mode\n @State()\n show: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Aligns the popover to the left or right side of the control element. */\n @Prop({ reflect: true })\n align: 'left' | 'right' = 'left';\n\n /** Indicates the popover will match the width of its parent element. */\n @Prop({ reflect: true })\n block: boolean;\n\n /** The element that controls the popover's behavior. */\n @Prop()\n controlElement: HTMLElement;\n\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 })\n direction: 'up' | 'down';\n\n /**\n * Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n */\n @Prop()\n maxHeight: number;\n\n /** @deprecated */\n @Prop()\n minHeight: number;\n\n @Prop()\n mode: 'legacy' = null;\n\n /** Controls whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n // #endregion\n // #region Events\n\n /**\n * Emitted when the popover is opened or closed.\n */\n @Event()\n popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeViewportListeners();\n this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);\n this.containerElement = null;\n this.contentElement = null;\n this.controlElement = null;\n }\n\n componentWillLoad() {\n if (!this.supportsPopoverAPI) {\n console.warn(\n 'The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.'\n );\n this.mode = 'legacy';\n }\n }\n\n componentDidLoad() {\n this.handleMinHeight();\n if (this.supportsPopoverAPI) this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);\n if (this.open) this.determinePopDirection();\n }\n\n // #endregion\n // #region Listeners\n\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 // #endregion\n // #region Public Methods API\n\n @Method()\n async scrollContainerTo(options: ScrollToOptions) {\n this.containerElement.scrollTo(options);\n }\n\n @Method()\n async toggle() {\n this.open = !this.open;\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('minHeight')\n minHeightProvided() {\n this.handleMinHeight();\n }\n\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 if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n this.show = false;\n } else {\n this.containerElement.hidePopover();\n }\n\n await waitForNextPaint();\n this.clearCSSProperties();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get isModule(): boolean {\n const isIframe = window !== window.top;\n const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n return isIframe && hasPlatformDimensions;\n }\n\n get providedDirection(): '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 supportsPopoverAPI(): boolean {\n return Object.hasOwn(HTMLElement.prototype, 'popover');\n }\n\n get validatedMaxHeight(): number | undefined {\n const { maxHeight } = this;\n return isNaN(maxHeight) ? undefined : maxHeight;\n }\n\n addViewportListeners() {\n window.addEventListener('resize', this.viewPortOrientationChanged);\n visualViewport?.addEventListener('resize', this.viewPortChanged);\n window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n screen?.orientation?.addEventListener('orientationchange', this.viewPortOrientationChanged);\n window.addEventListener('orientationchange', this.viewPortOrientationChanged);\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 async determinePopDirection() {\n const { containerElement, controlElement, providedDirection, 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 || providedDirection || directionWithMostSpace;\n\n switch (currentOrDetermineDirection) {\n case 'up':\n if (shouldUpdateMaxHeight) {\n const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n }\n this.setDirectionAndShow('up');\n break;\n case 'down':\n if (shouldUpdateMaxHeight) {\n const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n }\n this.setDirectionAndShow('down');\n break;\n default:\n break;\n }\n }\n\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\n };\n\n handlePopoverToggleEvent = (event: ToggleEvent) => {\n this.popoverStateChanged.emit({ open: event.newState === 'open' });\n };\n\n removeViewportListeners() {\n window.removeEventListener('resize', this.viewPortOrientationChanged);\n visualViewport?.removeEventListener('resize', this.viewPortChanged);\n window.removeEventListener('scroll', this.viewPortChanged, { capture: true });\n screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\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 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 if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n this.show = true;\n this.setAbsoluteCSSProperties();\n } else {\n this.setPopoverAPICSSProperties();\n this.containerElement.showPopover();\n }\n }\n\n setPopoverAPICSSProperties = async () => {\n const { controlElement, containerElement, currentDirection, isModule, align } = 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\n const popoverLeft: number = controlLeft;\n const popoverRight: number = window?.visualViewport?.width - controlRight;\n\n if (align === 'right') {\n containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);\n containerElement.style.setProperty('--comp-pop-left', 'unset');\n } else {\n containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);\n containerElement.style.setProperty('--comp-pop-right', 'unset');\n }\n\n if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n\n if (currentDirection === 'up') {\n if (isModule) {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);\n } else {\n containerElement.style.setProperty(\n '--comp-pop-bottom',\n `${window.innerHeight - controlTop - window?.visualViewport?.offsetTop - window.scrollY}px`\n );\n }\n }\n\n if (currentDirection === 'down') {\n if (isModule) {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n } else {\n containerElement.style.setProperty(\n '--comp-pop-top',\n `${controlBottom + (window?.visualViewport?.offsetTop ?? 0) + window.scrollY}px`\n );\n }\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 viewPortChanged = () => {\n if (!this.open) return;\n this.determinePopDirection();\n };\n\n viewPortOrientationChanged = () => {\n this.orientationChanged = true;\n this.viewPortChanged();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const containerClasses = ['container', this.currentDirection, this.align];\n if (this.show) containerClasses.push('show');\n if (this.block) containerClasses.push('block');\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 tabIndex={-1}\n popover=\"auto\"\n >\n <div\n ref={el => (this.contentElement = el)}\n class=\"content\"\n >\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}
@@ -148,7 +148,7 @@ export class Q2RelativeTime {
148
148
  // #region Render Methods
149
149
  render() {
150
150
  const { shouldShow, displayedMessage } = this;
151
- return h(Fragment, { key: '67e5d3fb5bef2fe8abac62da9888700fb6b789dd' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
151
+ return h(Fragment, { key: '11485c121f40eb8bcbc53ea6c9975a78e4c0e04d' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
152
152
  }
153
153
  static get is() { return "q2-relative-time"; }
154
154
  static get encapsulation() { return "shadow"; }
@@ -71,7 +71,7 @@ export class Q2ResizeObserver {
71
71
  // #endregion
72
72
  // #region Render Methods
73
73
  render() {
74
- return h("slot", { key: '093aaf3b1503ff3de3a0240b992497492afd6df1', onSlotchange: this.handleSlotChange });
74
+ return h("slot", { key: '42cd94a3b8d13c969013acbb5ac150fea5740a1c', onSlotchange: this.handleSlotChange });
75
75
  }
76
76
  static get is() { return "q2-resize-observer"; }
77
77
  static get encapsulation() { return "shadow"; }
@@ -180,9 +180,9 @@ export class Q2Section {
180
180
  wrapperClasses.push('is-transitioning');
181
181
  }
182
182
  const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
183
- return (h("section", { key: '50128c435b407661e87390b4a4cda567f1784ad1', class: "wrapper" }, h("header", { key: 'b1e4f5da065e2ae0a0310547020def177819f14e', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'a0cc7819d695de252cce4c36c408a10474c120b2', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'fe42b0f36e70ab9cb03b07574a75c4f46681f031', class: "title" }, loc(this.label)), h("div", { key: '047178d274fcc6907a9aa81edc66bd285c00dc8c', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '63fd4ef8219d436425bd8477e021518e72989587', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '3517c005e8a7bd6ba92fb7333c91a7d4f15c755c', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '4a33e0265677b621f71dd7587e3c0bb270b29707', type: "chevron-up" })))), h("div", { key: '1cba7d25a2f9e89e8a67715700f6ded50c25ef15', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
183
+ return (h("section", { key: '74d0ef889a4c502840a413dd656e89b719c63b75', class: "wrapper" }, h("header", { key: '7d37a1a51192477996cc478be8d41b670aa48e44', class: hasHeader ? 'has-header' : '' }, h("div", { key: '4580db706dad9d25e3c1e7842c3e6bb49bddc239', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'ee6b86fb8eb18fd09d97e7a1e8f1465b2214a4f8', class: "title" }, loc(this.label)), h("div", { key: '608f573fc940ef581d15ec0d6f320ec845b3d3de', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'c0c84b8da20e04ee15345d2bf08808e61de812da', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '3cbc96758e51c8256f0a49fb58210dd51cec0424', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '815be32884688e39e10c0ebfde428337601aa90c', type: "chevron-up" })))), h("div", { key: '9e1b86ab483c1c0221cb68bf4307d32a997a9c49', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
184
184
  height: this.contentHeight,
185
- } }, h("div", { key: '8c9ef9733c45987fbf25292414254765910ec7f6', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'ae56752db16f4365c2639529e0890695b3f15dfd', ref: (el) => (this.contentSlot = el) })))));
185
+ } }, h("div", { key: 'ffb7250667f48c4d695f35c7e6979198bfa99b59', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '28a65410ba3abefd898619fdffd6d7fea910b072', ref: (el) => (this.contentSlot = el) })))));
186
186
  }
187
187
  static get is() { return "q2-section"; }
188
188
  static get encapsulation() { return "shadow"; }
@@ -147,10 +147,10 @@ li {
147
147
  --comp-active-color: var(--const-stoplight-alert, #d20a0a);
148
148
  --tct-stoplight-warning: var(--comp-active-color);
149
149
  }
150
- .step-btn[aria-disabled] {
150
+ .step-btn[aria-disabled=true] {
151
151
  cursor: not-allowed;
152
152
  }
153
- .step-btn[aria-disabled], .step-btn[aria-disabled] + .step-divider {
153
+ .step-btn[aria-disabled=true], .step-btn[aria-disabled=true] + .step-divider {
154
154
  --comp-bullet-font-color: var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));
155
155
  --comp-bullet-background: var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))));
156
156
  }
@@ -193,8 +193,8 @@ li {
193
193
  .status-error .step-bubble {
194
194
  background: var(--comp-active-color);
195
195
  }
196
- [aria-selected] .step-icon,
197
- [aria-selected] .step-bubble {
196
+ [aria-selected=true] .step-icon,
197
+ [aria-selected=true] .step-bubble {
198
198
  box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
199
199
  font-weight: var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600));
200
200
  }
@@ -9,10 +9,6 @@ export class Q2Stepper {
9
9
  this.scrollEnabled = false;
10
10
  this.showScrollLeft = false;
11
11
  this.showScrollRight = false;
12
- // #endregion
13
- // #region Public Property API
14
- /** The currently selected step. */
15
- this.currentStep = 1;
16
12
  this.checkForPanes = () => {
17
13
  const { allPanes } = this;
18
14
  if (!allPanes.length)
@@ -85,13 +81,15 @@ export class Q2Stepper {
85
81
  this.resizeObserver = null;
86
82
  }
87
83
  componentWillLoad() {
88
- if (!this.lastEnabledStep)
89
- this.lastEnabledStep = this.currentStep || 1;
90
- this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
84
+ this.handleUndefinedStepProperties();
85
+ if ('ResizeObserver' in window) {
86
+ this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
87
+ }
91
88
  this.checkForPanes();
92
89
  }
93
90
  componentDidLoad() {
94
- this.resizeObserver.observe(this.listElement);
91
+ var _a;
92
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.listElement);
95
93
  this.checkScrollState();
96
94
  overrideFocus(this.hostElement);
97
95
  setTimeout(() => this.showStep(this.currentStep || 1), 0);
@@ -163,6 +161,9 @@ export class Q2Stepper {
163
161
  }
164
162
  // #endregion
165
163
  // #region Watchers
164
+ lastEnabledStepChanged() {
165
+ this.handleUndefinedStepProperties();
166
+ }
166
167
  currentStepChanged(stepNumber) {
167
168
  this.showStep(stepNumber);
168
169
  }
@@ -173,7 +174,10 @@ export class Q2Stepper {
173
174
  }
174
175
  focusStep(stepNumber, scrollIntoView, forceFocus) {
175
176
  var _a;
176
- const stepListItem = this.listElement.children[stepNumber - 1];
177
+ const { listElement } = this;
178
+ if (!listElement)
179
+ return;
180
+ const stepListItem = listElement.children[stepNumber - 1];
177
181
  const isActive = document.activeElement === this.hostElement;
178
182
  if (!stepListItem)
179
183
  return;
@@ -190,9 +194,24 @@ export class Q2Stepper {
190
194
  }
191
195
  getPaneSlotOrProperty(pane, slotName) {
192
196
  var _a;
193
- const slot = pane.querySelector(`:scope > [slot="${slotName}"]`);
197
+ const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);
194
198
  return (_a = slot === null || slot === void 0 ? void 0 : slot.outerHTML) !== null && _a !== void 0 ? _a : loc(pane[slotName]);
195
199
  }
200
+ handleUndefinedStepProperties() {
201
+ const { currentStep, lastEnabledStep } = this;
202
+ if (currentStep && lastEnabledStep)
203
+ return;
204
+ if (!currentStep && lastEnabledStep) {
205
+ this.currentStep = lastEnabledStep;
206
+ }
207
+ else if (currentStep && !lastEnabledStep) {
208
+ this.lastEnabledStep = currentStep;
209
+ }
210
+ else if (!currentStep && !lastEnabledStep) {
211
+ this.currentStep = 1;
212
+ this.lastEnabledStep = 1;
213
+ }
214
+ }
196
215
  resizeIframe() {
197
216
  var _a, _b;
198
217
  return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -221,7 +240,7 @@ export class Q2Stepper {
221
240
  // #region Render Methods
222
241
  renderStepBtn(stepIndex) {
223
242
  var _a;
224
- const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
243
+ const { allPanes, stepCount, lastEnabledStep, currentStep } = this;
225
244
  const pane = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : null;
226
245
  const { id, status } = pane;
227
246
  const label = this.getPaneSlotOrProperty(pane, 'label');
@@ -241,14 +260,14 @@ export class Q2Stepper {
241
260
  stepClasses.push(`status-${status}`);
242
261
  const isLocked = status === 'locked';
243
262
  const disabled = isLocked || stepNumber > lastEnabledStep;
244
- return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
263
+ return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
245
264
  }
246
265
  render() {
247
266
  const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
248
267
  const containerClasses = ['step-container'];
249
268
  if (scrollEnabled)
250
269
  containerClasses.push('has-scroll');
251
- return (h(Fragment, { key: 'd69bb5aa5a13aef557f0f06d2e6422dcafdd5e38' }, h("div", { key: 'b23272dd4b0b28da06de0d2eeece582b04629b2d', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '7223eb3cab06667298dbf0492492c01ad2b94442' }, h("div", { key: '192743bceef627cd3ae387f5dd789abf85fc5522', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '64057f36f27be33628bc895e3a5fec8a3d61a9aa', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '256bbeb821258249ed291b3e6017c88efeb23142', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'adfcb21fa9b06b1dd8a9a8ead2e8602f96de192b', type: "chevron-left" })), h("q2-btn", { key: '37564437d36fbd3768c97506886cf2bee5db5c73', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '61339e1714a3ff8490db08c5a6fda68f1a866163', type: "chevron-right" })))), h("ul", { key: '3cfd01161d197f5dfef7e76d591d70ec3b23daa3', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '664620a83a5d5e08bccfb9e52a1a7d8a9e78fd55', role: "list" }, h("slot", { key: 'ec106db320139b50ad35ba283f79db3b8bfcf928', onSlotchange: () => this.onSlotChange() }))));
270
+ return (h(Fragment, { key: '5419df95b8f6501a52fae65fe7473513ca81bc84' }, h("div", { key: 'b6d1b59979dba27d84a9c5632f5203ff7c935ba9', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'daba3f6608fa3a71e872dd6b02b73abde53c0973' }, h("div", { key: '3521716d2d23b250ca5b5f2b97820a5d4ce289f1', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'beb574a341d72d9c70800d722680c27fef9ebad1', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '7841ab895a979cf9f41fe3e4b5ae399253ef2d08', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'f8aa5bdbf75089a8d296ddc286c0d58ad4081da0', type: "chevron-left" })), h("q2-btn", { key: '3145907a7dd4a2faaa834b1c9148df290a6bf5b3', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '34c21546af1346207d5328c1b3e0574a4075936e', type: "chevron-right" })))), h("ul", { key: '159c1e3aad8449e5c6cae383a1314f4e2e44ecae', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '1ac4aec1790a0145490d83defdb1b9466fefa689', role: "list" }, h("slot", { key: 'fec3540f019574052f87b2a96aed47dca5cae8fc', onSlotchange: () => this.onSlotChange() }))));
252
271
  }
253
272
  static get is() { return "q2-stepper"; }
254
273
  static get encapsulation() { return "shadow"; }
@@ -281,8 +300,7 @@ export class Q2Stepper {
281
300
  },
282
301
  "getter": false,
283
302
  "setter": false,
284
- "reflect": true,
285
- "defaultValue": "1"
303
+ "reflect": true
286
304
  },
287
305
  "lastEnabledStep": {
288
306
  "type": "number",
@@ -304,7 +322,7 @@ export class Q2Stepper {
304
322
  },
305
323
  "getter": false,
306
324
  "setter": false,
307
- "reflect": false
325
+ "reflect": true
308
326
  },
309
327
  "stepCount": {
310
328
  "type": "number",
@@ -398,6 +416,12 @@ export class Q2Stepper {
398
416
  static get elementRef() { return "hostElement"; }
399
417
  static get watchers() {
400
418
  return [{
419
+ "propName": "lastEnabledStep",
420
+ "methodName": "lastEnabledStepChanged"
421
+ }, {
422
+ "propName": "currentStep",
423
+ "methodName": "lastEnabledStepChanged"
424
+ }, {
401
425
  "propName": "currentStep",
402
426
  "methodName": "currentStepChanged"
403
427
  }];
@@ -1 +1 @@
1
- {"version":3,"file":"q2-stepper.js","sourceRoot":"","sources":["../../../../src/components/q2-stepper/q2-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Method,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n // #region Own Properties\n\n listElement: HTMLUListElement;\n resizeObserver: ResizeObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n contentChangeTriggerCount: number = 0;\n\n @State()\n scrollEnabled: boolean = false;\n\n @State()\n showScrollLeft: boolean = false;\n\n @State()\n showScrollRight: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The currently selected step. */\n @Prop({ reflect: true, mutable: true })\n currentStep: number = 1;\n\n /**\n * The last step the user may navigate to.\n * @info\n * Will be managed automatically if not provided.\n */\n @Prop({ mutable: true })\n lastEnabledStep: number;\n\n /**\n * Used to determine the number of steps in the stepper.\n * @private\n */\n @Prop({ mutable: true })\n stepCount: number;\n\n // #endregion\n // #region Events\n\n /**\n * Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad() {\n if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n this.checkForPanes();\n }\n\n componentDidLoad() {\n this.resizeObserver.observe(this.listElement);\n this.checkScrollState();\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStep || 1), 0);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStep = event.detail.selectedStep || this.currentStep;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.contentChangeTriggerCount += 1;\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStep(this.currentStep, true, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler(event: CustomEvent) {\n const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n if (index > -1) {\n this.allPanes[index].status = event.detail.status;\n this.renderStepBtn(index);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /**\n * Emulates clicking a step in the stepper and emitting the change event.\n *\n * You may provide either the step number or the stepper pane id.\n *\n * If the value is invalid or the step is locked, the method will do nothing.\n * @testOnly\n */\n @Method()\n async selectStep(value: number | string) {\n let stepListItem;\n switch (typeof value) {\n case 'number':\n if (value > this.lastEnabledStep || value < 1) break;\n stepListItem = this.listElement.children[value - 1];\n if (!stepListItem) return;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n case 'string':\n const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n if (!pane) break;\n const stepIndex = this.allPanes.indexOf(pane);\n if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n stepListItem = this.listElement.children[stepIndex];\n if (!stepListItem) break;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n default:\n break;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStep')\n currentStepChanged(stepNumber: number) {\n this.showStep(stepNumber);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n checkForPanes = () => {\n const { allPanes } = this;\n if (!allPanes.length) return;\n\n this.stepCount = allPanes.length;\n };\n\n checkScrollState = () => {\n if (!this.listElement) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n this.scrollEnabled = scrollWidth > clientWidth;\n this.showScrollLeft = !!scrollLeft;\n this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n };\n\n focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n const isActive = document.activeElement === this.hostElement;\n if (!stepListItem) return;\n if (isActive || forceFocus) {\n (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n }\n\n if (scrollIntoView) {\n const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n this.listElement.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n }\n\n getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n const slot = pane.querySelector<HTMLElement>(`:scope > [slot=\"${slotName}\"]`);\n return slot?.outerHTML ?? loc(pane[slotName]);\n }\n\n onScrollBtnClick = (direction: 'left' | 'right') => {\n const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n this.listElement.scrollBy({\n left: direction === 'left' ? -scrollAmount : scrollAmount,\n behavior: 'smooth',\n });\n };\n\n onSlotChange = () => {\n this.checkForPanes();\n this.checkScrollState();\n };\n\n onStepClick = (event, selectedStep: number) => {\n event.stopPropagation();\n const { currentStep, stepCount, lastEnabledStep } = this;\n if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n this.change.emit({\n selectedStep,\n lastEnabledStep,\n currentStep,\n stepCount,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n const { lastEnabledStep, stepCount } = this;\n const { key } = event;\n\n let selectedStep;\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n selectedStep = Math.max(stepNumber - 1, 0);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedStep = Math.min(stepNumber + 1, stepCount);\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStep = 1;\n break;\n\n case 'End':\n event.preventDefault();\n selectedStep = lastEnabledStep;\n break;\n }\n\n if (!selectedStep) return;\n this.focusStep(selectedStep, true);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n showStep(stepNumber: number) {\n if (stepNumber > this.lastEnabledStep) {\n const { currentStep, stepCount } = this;\n this.lastEnabledStep = stepNumber;\n this.change.emit({\n selectedStep: null,\n lastEnabledStep: stepNumber,\n currentStep,\n stepCount,\n });\n }\n\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepNumber);\n this.focusStep(stepNumber, this.scrollEnabled);\n }\n\n showStepPane(stepNumber: number) {\n this.allPanes.forEach((pane, index) => {\n pane.isActive = stepNumber === index + 1;\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderStepBtn(stepIndex: number) {\n const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n const pane = allPanes?.[stepIndex] ?? null;\n const { id, status } = pane;\n const label = this.getPaneSlotOrProperty(pane, 'label');\n const description = this.getPaneSlotOrProperty(pane, 'description');\n\n const stepNumber = stepIndex + 1;\n const isCurrentStep = stepNumber === currentStep;\n const labelId = !!label && `label-${id}`;\n const descriptionId = !!label && !!description && `description-${id}`;\n const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n const isLocked = status === 'locked';\n const disabled = isLocked || stepNumber > lastEnabledStep;\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={isCurrentStep}\n aria-disabled={disabled ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n >\n <Fragment>\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n {labelId && (\n <div\n class=\"step-label\"\n id={labelId}\n innerHTML={label}\n ></div>\n )}\n {labelId && descriptionId && (\n <div\n class=\"step-description\"\n id={descriptionId}\n innerHTML={description}\n ></div>\n )}\n </Fragment>\n </button>\n {stepIndex ? <div class=\"step-divider\"></div> : ''}\n </li>\n );\n }\n\n render() {\n const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n const containerClasses = ['step-container'];\n if (scrollEnabled) containerClasses.push('has-scroll');\n\n return (\n <Fragment>\n <div class={containerClasses.join(' ')}>\n {scrollEnabled && (\n <Fragment>\n <div\n class=\"gradient-left\"\n hidden={!showScrollLeft}\n ></div>\n <div\n class=\"gradient-right\"\n hidden={!showScrollRight}\n ></div>\n\n <q2-btn\n class=\"btn-left\"\n hideLabel={true}\n hidden={!this.showScrollLeft}\n label={loc('tecton.element.stepper.scrollLeft')}\n onClick={() => this.onScrollBtnClick('left')}\n >\n <q2-icon type=\"chevron-left\"></q2-icon>\n </q2-btn>\n\n <q2-btn\n class=\"btn-right\"\n hideLabel={true}\n hidden={!this.showScrollRight}\n label={loc('tecton.element.stepper.scrollRight')}\n onClick={() => this.onScrollBtnClick('right')}\n >\n <q2-icon type=\"chevron-right\"></q2-icon>\n </q2-btn>\n </Fragment>\n )}\n\n <ul\n onScroll={this.checkScrollState}\n ref={el => (this.listElement = el)}\n role=\"tablist\"\n >\n {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n </ul>\n </div>\n <div role=\"list\">\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"]}
1
+ {"version":3,"file":"q2-stepper.js","sourceRoot":"","sources":["../../../../src/components/q2-stepper/q2-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EAEP,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EAEL,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAEnE,MAAM,OAAO,SAAS;IADtB;QAMI,yBAAoB,GAAmB,EAAE,CAAC;QAQ1C,aAAa;QACb,2BAA2B;QAG3B,8BAAyB,GAAW,CAAC,CAAC;QAGtC,kBAAa,GAAY,KAAK,CAAC;QAG/B,mBAAc,GAAY,KAAK,CAAC;QAGhC,oBAAe,GAAY,KAAK,CAAC;QAqJjC,kBAAa,GAAG,GAAG,EAAE;YACjB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,CAAC,MAAM;gBAAE,OAAO;YAE7B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC;QACrC,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAC9B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YAClE,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;YAC/C,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,eAAe,GAAG,WAAW,KAAK,UAAU,GAAG,WAAW,CAAC;QACpE,CAAC,CAAC;QAwCF,qBAAgB,GAAG,CAAC,SAA2B,EAAE,EAAE;YAC/C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YAElE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBACtB,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;gBACzD,QAAQ,EAAE,QAAQ;aACrB,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAK,EAAE,YAAoB,EAAE,EAAE;YAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;YACzD,IAAI,YAAY,GAAG,eAAe,IAAI,YAAY,KAAK,WAAW;gBAAE,OAAO;YAE3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,YAAY;gBACZ,eAAe;gBACf,WAAW;gBACX,SAAS;aACZ,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,KAAoB,EAAE,UAAkB,EAAE,EAAE;YACzD,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAC5C,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,YAAY,CAAC;YACjB,QAAQ,GAAG,EAAE,CAAC;gBACV,KAAK,WAAW;oBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC3C,MAAM;gBAEV,KAAK,YAAY;oBACb,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC;oBACnD,MAAM;gBAEV,KAAK,MAAM;oBACP,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,CAAC,CAAC;oBACjB,MAAM;gBAEV,KAAK,KAAK;oBACN,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,eAAe,CAAC;oBAC/B,MAAM;YACd,CAAC;YAED,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC1B,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACvC,CAAC,CAAC;KA2JL;IA3XG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACrC,IAAI,gBAAgB,IAAI,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;;QACZ,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9D,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;IACnC,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,oBAAoB,CAAC,KAAkB;QACnC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC1F,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC;QACrE,CAAC;IACL,CAAC;IAGD,oBAAoB;QAChB,IAAI,CAAC,yBAAyB,IAAI,CAAC,CAAC;IACxC,CAAC;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC;IAGD,mBAAmB,CAAC,KAAkB;QAClC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QACnF,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;YACb,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACL,CAAC;IAED,aAAa;IACb,6BAA6B;IAE7B;;;;;;;OAOG;IAEH,KAAK,CAAC,UAAU,CAAC,KAAsB;;QACnC,IAAI,YAAY,CAAC;QACjB,QAAQ,OAAO,KAAK,EAAE,CAAC;YACnB,KAAK,QAAQ;gBACT,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,KAAK,GAAG,CAAC;oBAAE,MAAM;gBACrD,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBACpD,IAAI,CAAC,YAAY;oBAAE,OAAO;gBAC1B,MAAC,YAAY,CAAC,iBAAuC,0CAAE,KAAK,EAAE,CAAC;gBAC/D,MAAM;YACV,KAAK,QAAQ;gBACT,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAA2B,IAAI,KAAK,EAAE,CAAC,CAAC;gBACnF,IAAI,CAAC,IAAI;oBAAE,MAAM;gBACjB,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAC9C,IAAI,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,SAAS,GAAG,CAAC;oBAAE,MAAM;gBACjE,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;gBACpD,IAAI,CAAC,YAAY;oBAAE,MAAM;gBACzB,MAAC,YAAY,CAAC,iBAAuC,0CAAE,KAAK,EAAE,CAAC;gBAC/D,MAAM;YACV;gBACI,MAAM;QACd,CAAC;IACL,CAAC;IAED,aAAa;IACb,mBAAmB;IAInB,sBAAsB;QAClB,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACzC,CAAC;IAGD,kBAAkB,CAAC,UAAkB;QACjC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAA2B,iBAAiB,CAAC,CAAC,CAAC;IACtG,CAAC;IAiBD,SAAS,CAAC,UAAkB,EAAE,cAAwB,EAAE,UAAoB;;QACxE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAkB,CAAC;QAC3E,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,CAAC;QAC7D,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1B,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;YACzB,MAAC,YAAY,CAAC,iBAAuC,0CAAE,KAAK,EAAE,CAAC;QACnE,CAAC;QAED,IAAI,cAAc,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,YAAY,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC;YACxE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBACtB,IAAI;gBACJ,QAAQ,EAAE,QAAQ;aACrB,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAED,qBAAqB,CAAC,IAA8B,EAAE,QAAiC;;QACnF,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC,CAAC;QAC9F,OAAO,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,mCAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,6BAA6B;QACzB,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAC9C,IAAI,WAAW,IAAI,eAAe;YAAE,OAAO;QAC3C,IAAI,CAAC,WAAW,IAAI,eAAe,EAAE,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;QACvC,CAAC;aAAM,IAAI,WAAW,IAAI,CAAC,eAAe,EAAE,CAAC;YACzC,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC;QACvC,CAAC;aAAM,IAAI,CAAC,WAAW,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1C,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACrB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC;IA4DD,YAAY;;QACR,OAAO,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,0CAAE,YAAY,kDAAI,CAAC;IACpD,CAAC;IAED,QAAQ,CAAC,UAAkB;QACvB,IAAI,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACpC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;YAClC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,UAAU;gBAC3B,WAAW;gBACX,SAAS;aACZ,CAAC,CAAC;QACP,CAAC;QAED,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACnD,CAAC;IAED,YAAY,CAAC,UAAkB;QAC3B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,UAAU,KAAK,KAAK,GAAG,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,aAAa,CAAC,SAAiB;;QAC3B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QACnE,MAAM,IAAI,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,SAAS,CAAC,mCAAI,IAAI,CAAC;QAC3C,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;QAEpE,MAAM,UAAU,GAAG,SAAS,GAAG,CAAC,CAAC;QACjC,MAAM,aAAa,GAAG,UAAU,KAAK,WAAW,CAAC;QACjD,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,IAAI,SAAS,EAAE,EAAE,CAAC;QACzC,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,IAAI,eAAe,EAAE,EAAE,CAAC;QACtE,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,+BAA+B,EAAE,CAAC,GAAG,UAAU,EAAE,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;QAEnG,IAAI,UAAU,CAAC;QACf,IAAI,MAAM,KAAK,UAAU;YAAE,UAAU,GAAG,gBAAgB,CAAC;aACpD,IAAI,MAAM,KAAK,OAAO;YAAE,UAAU,GAAG,gBAAgB,CAAC;QAE3D,MAAM,WAAW,GAAG,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,MAAM;YAAE,WAAW,CAAC,IAAI,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;QACjD,MAAM,QAAQ,GAAG,MAAM,KAAK,QAAQ,CAAC;QACrC,MAAM,QAAQ,GAAG,QAAQ,IAAI,UAAU,GAAG,eAAe,CAAC;QAE1D,OAAO,CACH,UAAI,IAAI,EAAC,cAAc;YACnB,cACI,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,IAAI,EAAC,QAAQ,qBACI,OAAO,sBACN,aAAa,gBACnB,QAAQ,mBACL,GAAG,aAAa,EAAE,mBAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,UAAU,CAAC,EACnD,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,UAAU,CAAC;gBAE5D,EAAC,QAAQ;oBACJ,UAAU,CAAC,CAAC,CAAC,CACV,WAAK,KAAK,EAAC,WAAW;wBAClB,eAAS,IAAI,EAAE,UAAU,GAAY,CACnC,CACT,CAAC,CAAC,CAAC,CACA,WAAK,KAAK,EAAC,aAAa,IAAE,UAAU,CAAO,CAC9C;oBACA,OAAO,IAAI,CACR,WACI,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,KAAK,GACb,CACV;oBACA,OAAO,IAAI,aAAa,IAAI,CACzB,WACI,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAE,aAAa,EACjB,SAAS,EAAE,WAAW,GACnB,CACV,CACM,CACN;YACR,SAAS,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,cAAc,GAAO,CAAC,CAAC,CAAC,EAAE,CACjD,CACR,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,gBAAgB,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC5C,IAAI,aAAa;YAAE,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEvD,OAAO,CACH,EAAC,QAAQ;YACL,4DAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC;gBACjC,aAAa,IAAI,CACd,EAAC,QAAQ;oBACL,4DACI,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,CAAC,cAAc,GACpB;oBACP,4DACI,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAE,CAAC,eAAe,GACrB;oBAEP,+DACI,KAAK,EAAC,UAAU,EAChB,SAAS,EAAE,IAAI,EACf,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,GAAG,CAAC,mCAAmC,CAAC,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;wBAE5C,gEAAS,IAAI,EAAC,cAAc,GAAW,CAClC;oBAET,+DACI,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,IAAI,EACf,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,GAAG,CAAC,oCAAoC,CAAC,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;wBAE7C,gEAAS,IAAI,EAAC,eAAe,GAAW,CACnC,CACF,CACd;gBAED,2DACI,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,SAAS,IAEb,SAAS,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAC7F,CACH;YACN,4DAAK,IAAI,EAAC,MAAM;gBACZ,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAI,CAC/C,CACC,CACd,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Method,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n // #region Own Properties\n\n listElement: HTMLUListElement;\n resizeObserver: ResizeObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n contentChangeTriggerCount: number = 0;\n\n @State()\n scrollEnabled: boolean = false;\n\n @State()\n showScrollLeft: boolean = false;\n\n @State()\n showScrollRight: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The currently selected step. */\n @Prop({ reflect: true, mutable: true })\n currentStep: number;\n\n /**\n * The last step the user may navigate to.\n * @info\n * Will be managed automatically if not provided.\n */\n @Prop({ reflect: true, mutable: true })\n lastEnabledStep: number;\n\n /**\n * Used to determine the number of steps in the stepper.\n * @private\n */\n @Prop({ mutable: true })\n stepCount: number;\n\n // #endregion\n // #region Events\n\n /**\n * Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad() {\n this.handleUndefinedStepProperties();\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n }\n this.checkForPanes();\n }\n\n componentDidLoad() {\n this.resizeObserver?.observe(this.listElement);\n this.checkScrollState();\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStep || 1), 0);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStep = event.detail.selectedStep || this.currentStep;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.contentChangeTriggerCount += 1;\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStep(this.currentStep, true, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler(event: CustomEvent) {\n const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n if (index > -1) {\n this.allPanes[index].status = event.detail.status;\n this.renderStepBtn(index);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /**\n * Emulates clicking a step in the stepper and emitting the change event.\n *\n * You may provide either the step number or the stepper pane id.\n *\n * If the value is invalid or the step is locked, the method will do nothing.\n * @testOnly\n */\n @Method()\n async selectStep(value: number | string) {\n let stepListItem;\n switch (typeof value) {\n case 'number':\n if (value > this.lastEnabledStep || value < 1) break;\n stepListItem = this.listElement.children[value - 1];\n if (!stepListItem) return;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n case 'string':\n const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n if (!pane) break;\n const stepIndex = this.allPanes.indexOf(pane);\n if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n stepListItem = this.listElement.children[stepIndex];\n if (!stepListItem) break;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n default:\n break;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('lastEnabledStep')\n @Watch('currentStep')\n lastEnabledStepChanged() {\n this.handleUndefinedStepProperties();\n }\n\n @Watch('currentStep')\n currentStepChanged(stepNumber: number) {\n this.showStep(stepNumber);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n checkForPanes = () => {\n const { allPanes } = this;\n if (!allPanes.length) return;\n\n this.stepCount = allPanes.length;\n };\n\n checkScrollState = () => {\n if (!this.listElement) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n this.scrollEnabled = scrollWidth > clientWidth;\n this.showScrollLeft = !!scrollLeft;\n this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n };\n\n focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n const { listElement } = this;\n if (!listElement) return;\n\n const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n const isActive = document.activeElement === this.hostElement;\n if (!stepListItem) return;\n if (isActive || forceFocus) {\n (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n }\n\n if (scrollIntoView) {\n const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n this.listElement.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n }\n\n getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n return slot?.outerHTML ?? loc(pane[slotName]);\n }\n\n handleUndefinedStepProperties() {\n const { currentStep, lastEnabledStep } = this;\n if (currentStep && lastEnabledStep) return;\n if (!currentStep && lastEnabledStep) {\n this.currentStep = lastEnabledStep;\n } else if (currentStep && !lastEnabledStep) {\n this.lastEnabledStep = currentStep;\n } else if (!currentStep && !lastEnabledStep) {\n this.currentStep = 1;\n this.lastEnabledStep = 1;\n }\n }\n\n onScrollBtnClick = (direction: 'left' | 'right') => {\n const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n this.listElement.scrollBy({\n left: direction === 'left' ? -scrollAmount : scrollAmount,\n behavior: 'smooth',\n });\n };\n\n onSlotChange = () => {\n this.checkForPanes();\n this.checkScrollState();\n };\n\n onStepClick = (event, selectedStep: number) => {\n event.stopPropagation();\n const { currentStep, stepCount, lastEnabledStep } = this;\n if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n this.change.emit({\n selectedStep,\n lastEnabledStep,\n currentStep,\n stepCount,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n const { lastEnabledStep, stepCount } = this;\n const { key } = event;\n\n let selectedStep;\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n selectedStep = Math.max(stepNumber - 1, 0);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedStep = Math.min(stepNumber + 1, stepCount);\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStep = 1;\n break;\n\n case 'End':\n event.preventDefault();\n selectedStep = lastEnabledStep;\n break;\n }\n\n if (!selectedStep) return;\n this.focusStep(selectedStep, true);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n showStep(stepNumber: number) {\n if (stepNumber > this.lastEnabledStep) {\n const { currentStep, stepCount } = this;\n this.lastEnabledStep = stepNumber;\n this.change.emit({\n selectedStep: null,\n lastEnabledStep: stepNumber,\n currentStep,\n stepCount,\n });\n }\n\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepNumber);\n this.focusStep(stepNumber, this.scrollEnabled);\n }\n\n showStepPane(stepNumber: number) {\n this.allPanes.forEach((pane, index) => {\n pane.isActive = stepNumber === index + 1;\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderStepBtn(stepIndex: number) {\n const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n const pane = allPanes?.[stepIndex] ?? null;\n const { id, status } = pane;\n const label = this.getPaneSlotOrProperty(pane, 'label');\n const description = this.getPaneSlotOrProperty(pane, 'description');\n\n const stepNumber = stepIndex + 1;\n const isCurrentStep = stepNumber === currentStep;\n const labelId = !!label && `label-${id}`;\n const descriptionId = !!label && !!description && `description-${id}`;\n const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n const isLocked = status === 'locked';\n const disabled = isLocked || stepNumber > lastEnabledStep;\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-disabled={disabled ? 'true' : undefined}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n >\n <Fragment>\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n {labelId && (\n <div\n class=\"step-label\"\n id={labelId}\n innerHTML={label}\n ></div>\n )}\n {labelId && descriptionId && (\n <div\n class=\"step-description\"\n id={descriptionId}\n innerHTML={description}\n ></div>\n )}\n </Fragment>\n </button>\n {stepIndex ? <div class=\"step-divider\"></div> : ''}\n </li>\n );\n }\n\n render() {\n const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n const containerClasses = ['step-container'];\n if (scrollEnabled) containerClasses.push('has-scroll');\n\n return (\n <Fragment>\n <div class={containerClasses.join(' ')}>\n {scrollEnabled && (\n <Fragment>\n <div\n class=\"gradient-left\"\n hidden={!showScrollLeft}\n ></div>\n <div\n class=\"gradient-right\"\n hidden={!showScrollRight}\n ></div>\n\n <q2-btn\n class=\"btn-left\"\n hideLabel={true}\n hidden={!this.showScrollLeft}\n label={loc('tecton.element.stepper.scrollLeft')}\n onClick={() => this.onScrollBtnClick('left')}\n >\n <q2-icon type=\"chevron-left\"></q2-icon>\n </q2-btn>\n\n <q2-btn\n class=\"btn-right\"\n hideLabel={true}\n hidden={!this.showScrollRight}\n label={loc('tecton.element.stepper.scrollRight')}\n onClick={() => this.onScrollBtnClick('right')}\n >\n <q2-icon type=\"chevron-right\"></q2-icon>\n </q2-btn>\n </Fragment>\n )}\n\n <ul\n onScroll={this.checkScrollState}\n ref={el => (this.listElement = el)}\n role=\"tablist\"\n >\n {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n </ul>\n </div>\n <div role=\"list\">\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"]}