@nanoporetech-digital/components 5.10.0 → 5.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (737) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/cjs/{algolia-data-6841724e.js → algolia-data-dba27b97.js} +2 -2
  3. package/dist/cjs/{algolia-data-6841724e.js.map → algolia-data-dba27b97.js.map} +1 -1
  4. package/dist/cjs/{algoliasearch-lite.esm.browser-992a2eff.js → algoliasearch-lite.esm.browser-b74ca774.js} +30 -5
  5. package/dist/cjs/algoliasearch-lite.esm.browser-b74ca774.js.map +1 -0
  6. package/dist/cjs/{component-store-6d7b8855.js → component-store-149aeffe.js} +2 -2
  7. package/dist/cjs/{component-store-6d7b8855.js.map → component-store-149aeffe.js.map} +1 -1
  8. package/dist/cjs/fade-dcabf3c1.js +211 -0
  9. package/dist/cjs/fade-dcabf3c1.js.map +1 -0
  10. package/dist/cjs/{form-control-8db579a2.js → form-control-f100407e.js} +2 -2
  11. package/dist/cjs/{form-control-8db579a2.js.map → form-control-f100407e.js.map} +1 -1
  12. package/dist/cjs/fullscreen-d24940a1.js +133 -0
  13. package/dist/cjs/fullscreen-d24940a1.js.map +1 -0
  14. package/dist/cjs/{global-3a6a7873.js → global-a5710651.js} +7 -7
  15. package/dist/cjs/{global-3a6a7873.js.map → global-a5710651.js.map} +1 -1
  16. package/dist/cjs/{index-1d3ebe1a.js → index-14451c95.js} +8 -6
  17. package/dist/cjs/index-14451c95.js.map +1 -0
  18. package/dist/cjs/{index-0f470227.js → index-f6f89d47.js} +2 -2
  19. package/dist/cjs/{index-0f470227.js.map → index-f6f89d47.js.map} +1 -1
  20. package/dist/cjs/lazyload-f6be7590.js +95 -0
  21. package/dist/cjs/lazyload-f6be7590.js.map +1 -0
  22. package/dist/cjs/loader.cjs.js +4 -4
  23. package/dist/cjs/loader.cjs.js.map +1 -1
  24. package/dist/cjs/nano-accordion.cjs.entry.js +1 -1
  25. package/dist/cjs/nano-alert.cjs.entry.js +3 -3
  26. package/dist/cjs/nano-alert.cjs.entry.js.map +1 -1
  27. package/dist/cjs/nano-algolia-filter.cjs.entry.js +3 -3
  28. package/dist/cjs/nano-algolia-filter.cjs.entry.js.map +1 -1
  29. package/dist/cjs/nano-algolia-pagination.cjs.entry.js +2 -7
  30. package/dist/cjs/nano-algolia-pagination.cjs.entry.js.map +1 -1
  31. package/dist/cjs/nano-algolia-results.cjs.entry.js +2 -2
  32. package/dist/cjs/nano-algolia-results.cjs.entry.js.map +1 -1
  33. package/dist/cjs/nano-algolia.cjs.entry.js +982 -26
  34. package/dist/cjs/nano-algolia.cjs.entry.js.map +1 -1
  35. package/dist/cjs/nano-aspect-ratio.cjs.entry.js +1 -1
  36. package/dist/cjs/nano-checkbox-group.cjs.entry.js +10 -4
  37. package/dist/cjs/nano-checkbox-group.cjs.entry.js.map +1 -1
  38. package/dist/cjs/nano-checkbox.cjs.entry.js +4 -2
  39. package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
  40. package/dist/cjs/nano-components.cjs.js +4 -4
  41. package/dist/cjs/nano-components.cjs.js.map +1 -1
  42. package/dist/cjs/nano-datalist_3.cjs.entry.js +4 -4
  43. package/dist/cjs/nano-datalist_3.cjs.entry.js.map +1 -1
  44. package/dist/cjs/nano-date-input.cjs.entry.js +1 -1
  45. package/dist/cjs/nano-date-picker.cjs.entry.js +2 -2
  46. package/dist/cjs/nano-date-picker.cjs.entry.js.map +1 -1
  47. package/dist/cjs/nano-demo.cjs.entry.js +1 -1
  48. package/dist/cjs/nano-details.cjs.entry.js +2 -2
  49. package/dist/cjs/nano-details.cjs.entry.js.map +1 -1
  50. package/dist/cjs/nano-dialog.cjs.entry.js +5 -5
  51. package/dist/cjs/nano-dialog.cjs.entry.js.map +1 -1
  52. package/dist/cjs/nano-drawer.cjs.entry.js +5 -5
  53. package/dist/cjs/nano-drawer.cjs.entry.js.map +1 -1
  54. package/dist/cjs/nano-dropdown.cjs.entry.js +1 -1
  55. package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
  56. package/dist/cjs/nano-field-validator.cjs.entry.js +7 -5
  57. package/dist/cjs/nano-field-validator.cjs.entry.js.map +1 -1
  58. package/dist/cjs/nano-file-upload.cjs.entry.js +2 -2
  59. package/dist/cjs/nano-file-upload.cjs.entry.js.map +1 -1
  60. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +4 -4
  61. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  62. package/dist/cjs/nano-global-nav.cjs.entry.js +122 -153
  63. package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
  64. package/dist/cjs/nano-global-search-results.cjs.entry.js +3 -3
  65. package/dist/cjs/nano-global-search-results.cjs.entry.js.map +1 -1
  66. package/dist/cjs/nano-grid-item.cjs.entry.js +1 -1
  67. package/dist/cjs/nano-grid_2.cjs.entry.js +2 -2
  68. package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -1
  69. package/dist/cjs/nano-hero.cjs.entry.js +2 -2
  70. package/dist/cjs/nano-hero.cjs.entry.js.map +1 -1
  71. package/dist/cjs/nano-icon-button_2.cjs.entry.js +24 -4
  72. package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
  73. package/dist/cjs/nano-icon.cjs.entry.js +4 -4
  74. package/dist/cjs/nano-icon.cjs.entry.js.map +1 -1
  75. package/dist/cjs/nano-input.cjs.entry.js +3 -3
  76. package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
  77. package/dist/cjs/nano-menu-drawer.cjs.entry.js +2 -2
  78. package/dist/cjs/nano-menu-drawer.cjs.entry.js.map +1 -1
  79. package/dist/cjs/nano-overflow-nav.cjs.entry.js +2 -2
  80. package/dist/cjs/nano-overflow-nav.cjs.entry.js.map +1 -1
  81. package/dist/cjs/nano-progress-bar.cjs.entry.js +2 -2
  82. package/dist/cjs/nano-progress-bar.cjs.entry.js.map +1 -1
  83. package/dist/cjs/nano-range.cjs.entry.js +2 -2
  84. package/dist/cjs/nano-range.cjs.entry.js.map +1 -1
  85. package/dist/cjs/nano-rating.cjs.entry.js +2 -2
  86. package/dist/cjs/nano-rating.cjs.entry.js.map +1 -1
  87. package/dist/cjs/nano-resize-observe_2.cjs.entry.js +1 -1
  88. package/dist/cjs/nano-slide.cjs.entry.js +1 -1
  89. package/dist/cjs/nano-slides-2f3dcc02.js +2975 -0
  90. package/dist/cjs/nano-slides-2f3dcc02.js.map +1 -0
  91. package/dist/cjs/nano-slides.cjs.entry.js +3 -4292
  92. package/dist/cjs/nano-slides.cjs.entry.js.map +1 -1
  93. package/dist/cjs/nano-sortable.cjs.entry.js +1 -1
  94. package/dist/cjs/nano-spinner.cjs.entry.js +2 -2
  95. package/dist/cjs/nano-spinner.cjs.entry.js.map +1 -1
  96. package/dist/cjs/nano-split-pane.cjs.entry.js +1 -1
  97. package/dist/cjs/nano-sticker.cjs.entry.js +3 -2
  98. package/dist/cjs/nano-sticker.cjs.entry.js.map +1 -1
  99. package/dist/cjs/nano-tab-content.cjs.entry.js +1 -1
  100. package/dist/cjs/nano-tab-group.cjs.entry.js +4 -4
  101. package/dist/cjs/nano-tab-group.cjs.entry.js.map +1 -1
  102. package/dist/cjs/nano-tab.cjs.entry.js +2 -2
  103. package/dist/cjs/nano-tab.cjs.entry.js.map +1 -1
  104. package/dist/cjs/{nano-table-72d5dc63.js → nano-table-26845696.js} +5 -5
  105. package/dist/cjs/{nano-table-72d5dc63.js.map → nano-table-26845696.js.map} +1 -1
  106. package/dist/cjs/nano-table.cjs.entry.js +3 -3
  107. package/dist/cjs/page-dots-ae2cefb4.js +140 -0
  108. package/dist/cjs/page-dots-ae2cefb4.js.map +1 -0
  109. package/dist/cjs/{scroll-fc1b8387.js → scroll-e8c21f80.js} +8 -4
  110. package/dist/cjs/scroll-e8c21f80.js.map +1 -0
  111. package/dist/cjs/{table.worker-3df34efe.js → table.worker-a5996745.js} +4 -4
  112. package/dist/cjs/table.worker-a5996745.js.map +1 -0
  113. package/dist/collection/collection-manifest.json +1 -1
  114. package/dist/collection/components/alert/alert.css +1 -2
  115. package/dist/collection/components/algolia/algolia-data.js.map +1 -1
  116. package/dist/collection/components/algolia/algolia-filter.js.map +1 -1
  117. package/dist/collection/components/algolia/algolia-pagination.js +0 -5
  118. package/dist/collection/components/algolia/algolia-pagination.js.map +1 -1
  119. package/dist/collection/components/algolia/algolia-results.js.map +1 -1
  120. package/dist/collection/components/algolia/algolia.js +4 -27
  121. package/dist/collection/components/algolia/algolia.js.map +1 -1
  122. package/dist/collection/components/algolia/lib/squirrelly/browser.js +10 -0
  123. package/dist/collection/components/algolia/lib/squirrelly/browser.js.map +1 -0
  124. package/dist/collection/components/algolia/lib/squirrelly/compile-string.js +151 -0
  125. package/dist/collection/components/algolia/lib/squirrelly/compile-string.js.map +1 -0
  126. package/dist/collection/components/algolia/lib/squirrelly/compile.js +44 -0
  127. package/dist/collection/components/algolia/lib/squirrelly/compile.js.map +1 -0
  128. package/dist/collection/components/algolia/lib/squirrelly/config.js +68 -0
  129. package/dist/collection/components/algolia/lib/squirrelly/config.js.map +1 -0
  130. package/dist/collection/components/algolia/lib/squirrelly/container-utils.js +57 -0
  131. package/dist/collection/components/algolia/lib/squirrelly/container-utils.js.map +1 -0
  132. package/dist/collection/components/algolia/lib/squirrelly/containers.js +128 -0
  133. package/dist/collection/components/algolia/lib/squirrelly/containers.js.map +1 -0
  134. package/dist/collection/components/algolia/lib/squirrelly/err.js +39 -0
  135. package/dist/collection/components/algolia/lib/squirrelly/err.js.map +1 -0
  136. package/dist/collection/components/algolia/lib/squirrelly/parse.js +327 -0
  137. package/dist/collection/components/algolia/lib/squirrelly/parse.js.map +1 -0
  138. package/dist/collection/components/algolia/lib/squirrelly/render.js +62 -0
  139. package/dist/collection/components/algolia/lib/squirrelly/render.js.map +1 -0
  140. package/dist/collection/components/algolia/lib/squirrelly/storage.js +32 -0
  141. package/dist/collection/components/algolia/lib/squirrelly/storage.js.map +1 -0
  142. package/dist/collection/components/algolia/lib/squirrelly/utils.js +102 -0
  143. package/dist/collection/components/algolia/lib/squirrelly/utils.js.map +1 -0
  144. package/dist/collection/{utils → components/algolia/lib}/template.js +1 -2
  145. package/dist/collection/components/algolia/lib/template.js.map +1 -0
  146. package/dist/collection/components/checkbox/checkbox-group.css +17 -15
  147. package/dist/collection/components/checkbox/checkbox-group.js +29 -2
  148. package/dist/collection/components/checkbox/checkbox-group.js.map +1 -1
  149. package/dist/collection/components/checkbox/checkbox.css +20 -22
  150. package/dist/collection/components/checkbox/checkbox.js +2 -0
  151. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  152. package/dist/collection/components/date-picker/date-picker.css +5 -10
  153. package/dist/collection/components/details/details.css +4 -4
  154. package/dist/collection/components/dialog/dialog.css +3 -6
  155. package/dist/collection/components/dialog/dialog.js +1 -1
  156. package/dist/collection/components/dialog/dialog.js.map +1 -1
  157. package/dist/collection/components/drawer/drawer.css +18 -24
  158. package/dist/collection/components/drawer/drawer.js +1 -1
  159. package/dist/collection/components/drawer/drawer.js.map +1 -1
  160. package/dist/collection/components/dropdown/dropdown.js +1 -1
  161. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  162. package/dist/collection/components/field-validator/field-validator.js +5 -3
  163. package/dist/collection/components/field-validator/field-validator.js.map +1 -1
  164. package/dist/collection/components/file-upload/file-upload.css +16 -30
  165. package/dist/collection/components/global-nav/global-nav.js +118 -157
  166. package/dist/collection/components/global-nav/global-nav.js.map +1 -1
  167. package/dist/collection/components/global-nav/style/global-nav.css +97 -138
  168. package/dist/collection/components/global-search-results/global-search-results.css +85 -127
  169. package/dist/collection/components/global-search-results/global-search-results.js +1 -1
  170. package/dist/collection/components/global-search-results/global-search-results.js.map +1 -1
  171. package/dist/collection/components/hero/hero.css +13 -26
  172. package/dist/collection/components/icon/icon.css +6 -6
  173. package/dist/collection/components/icon/icon.js +2 -2
  174. package/dist/collection/components/icon/icon.js.map +1 -1
  175. package/dist/collection/components/img/img.css +7 -17
  176. package/dist/collection/components/input/input.css +15 -36
  177. package/dist/collection/components/menu/menu.css +1 -1
  178. package/dist/collection/components/menu/menu.js +1 -1
  179. package/dist/collection/components/menu/menu.js.map +1 -1
  180. package/dist/collection/components/menu-drawer/menu-drawer.css +5 -14
  181. package/dist/collection/components/nav-item/nav-item.css +25 -46
  182. package/dist/collection/components/option/option.css +3 -5
  183. package/dist/collection/components/overflow-nav/overflow-nav.css +16 -27
  184. package/dist/collection/components/progress-bar/progress-bar.css +2 -2
  185. package/dist/collection/components/range/range.css +17 -19
  186. package/dist/collection/components/rating/rating.css +2 -8
  187. package/dist/collection/components/select/select.css +30 -53
  188. package/dist/collection/components/slides/lib/js/animate.js +29 -54
  189. package/dist/collection/components/slides/lib/js/animate.js.map +1 -0
  190. package/dist/collection/components/slides/lib/js/cell.js +12 -24
  191. package/dist/collection/components/slides/lib/js/cell.js.map +1 -0
  192. package/dist/collection/components/slides/lib/js/drag.js +65 -116
  193. package/dist/collection/components/slides/lib/js/drag.js.map +1 -0
  194. package/dist/collection/components/slides/lib/js/fade.js +52 -79
  195. package/dist/collection/components/slides/lib/js/fade.js.map +1 -0
  196. package/dist/collection/components/slides/lib/js/flickity.js +118 -206
  197. package/dist/collection/components/slides/lib/js/flickity.js.map +1 -0
  198. package/dist/collection/components/slides/lib/js/fullscreen.js +21 -40
  199. package/dist/collection/components/slides/lib/js/fullscreen.js.map +1 -0
  200. package/dist/collection/components/slides/lib/js/index.js +4 -6
  201. package/dist/collection/components/slides/lib/js/index.js.map +1 -0
  202. package/dist/collection/components/slides/lib/js/lazyload.js +21 -36
  203. package/dist/collection/components/slides/lib/js/lazyload.js.map +1 -0
  204. package/dist/collection/components/slides/lib/js/page-dots.js +21 -45
  205. package/dist/collection/components/slides/lib/js/page-dots.js.map +1 -0
  206. package/dist/collection/components/slides/lib/js/player.js +12 -40
  207. package/dist/collection/components/slides/lib/js/player.js.map +1 -0
  208. package/dist/collection/components/slides/lib/js/prev-next-button.js +24 -52
  209. package/dist/collection/components/slides/lib/js/prev-next-button.js.map +1 -0
  210. package/dist/collection/components/slides/lib/js/slide.js +10 -15
  211. package/dist/collection/components/slides/lib/js/slide.js.map +1 -0
  212. package/dist/collection/components/slides/lib/js/utils/event-emitter.js +75 -0
  213. package/dist/collection/components/slides/lib/js/utils/event-emitter.js.map +1 -0
  214. package/dist/collection/components/slides/lib/js/utils/gestures.js +436 -0
  215. package/dist/collection/components/slides/lib/js/utils/gestures.js.map +1 -0
  216. package/dist/collection/components/slides/lib/js/utils/get-size.js +160 -0
  217. package/dist/collection/components/slides/lib/js/utils/get-size.js.map +1 -0
  218. package/dist/collection/components/slides/lib/js/utils/utils.js +166 -0
  219. package/dist/collection/components/slides/lib/js/utils/utils.js.map +1 -0
  220. package/dist/collection/components/slides/slides.css +18 -19
  221. package/dist/collection/components/slides/slides.js +31 -5
  222. package/dist/collection/components/slides/slides.js.map +1 -1
  223. package/dist/collection/components/spinner/spinner.css +1 -2
  224. package/dist/collection/components/sticker/sticker.js +2 -1
  225. package/dist/collection/components/sticker/sticker.js.map +1 -1
  226. package/dist/collection/components/table/table.css +29 -48
  227. package/dist/collection/components/tabs/tab-group.css +10 -14
  228. package/dist/collection/components/tabs/tab.css +8 -18
  229. package/dist/collection/components/tooltip/tooltip.css +34 -31
  230. package/dist/collection/components/tooltip/tooltip.js +23 -3
  231. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  232. package/dist/collection/global/script/global.js +6 -6
  233. package/dist/collection/global/script/global.js.map +1 -1
  234. package/dist/collection/utils/scroll.js +7 -3
  235. package/dist/collection/utils/scroll.js.map +1 -1
  236. package/dist/components/algolia-data.js.map +1 -1
  237. package/dist/components/algolia.js +978 -23
  238. package/dist/components/algolia.js.map +1 -1
  239. package/dist/components/algoliasearch-lite.esm.browser.js +29 -4
  240. package/dist/components/algoliasearch-lite.esm.browser.js.map +1 -1
  241. package/dist/components/date-picker.js +1 -1
  242. package/dist/components/date-picker.js.map +1 -1
  243. package/dist/components/dropdown.js +1 -1
  244. package/dist/components/dropdown.js.map +1 -1
  245. package/dist/components/fade.js +208 -0
  246. package/dist/components/fade.js.map +1 -0
  247. package/dist/components/fullscreen.js +130 -0
  248. package/dist/components/fullscreen.js.map +1 -0
  249. package/dist/components/icon.js +3 -3
  250. package/dist/components/icon.js.map +1 -1
  251. package/dist/components/img.js +1 -1
  252. package/dist/components/img.js.map +1 -1
  253. package/dist/components/index.js +6 -6
  254. package/dist/components/index.js.map +1 -1
  255. package/dist/components/input.js +1 -1
  256. package/dist/components/input.js.map +1 -1
  257. package/dist/components/lazyload.js +92 -0
  258. package/dist/components/lazyload.js.map +1 -0
  259. package/dist/components/menu.js +2 -2
  260. package/dist/components/menu.js.map +1 -1
  261. package/dist/components/nano-alert.js +1 -1
  262. package/dist/components/nano-alert.js.map +1 -1
  263. package/dist/components/nano-algolia-filter.js.map +1 -1
  264. package/dist/components/nano-algolia-pagination.js +0 -5
  265. package/dist/components/nano-algolia-pagination.js.map +1 -1
  266. package/dist/components/nano-algolia-results.js.map +1 -1
  267. package/dist/components/nano-checkbox-group.js +10 -3
  268. package/dist/components/nano-checkbox-group.js.map +1 -1
  269. package/dist/components/nano-checkbox.js +3 -1
  270. package/dist/components/nano-checkbox.js.map +1 -1
  271. package/dist/components/nano-details.js +1 -1
  272. package/dist/components/nano-details.js.map +1 -1
  273. package/dist/components/nano-dialog.js +2 -2
  274. package/dist/components/nano-dialog.js.map +1 -1
  275. package/dist/components/nano-drawer.js +2 -2
  276. package/dist/components/nano-drawer.js.map +1 -1
  277. package/dist/components/nano-field-validator.js +5 -3
  278. package/dist/components/nano-field-validator.js.map +1 -1
  279. package/dist/components/nano-file-upload.js +1 -1
  280. package/dist/components/nano-file-upload.js.map +1 -1
  281. package/dist/components/nano-global-nav.js +119 -152
  282. package/dist/components/nano-global-nav.js.map +1 -1
  283. package/dist/components/nano-global-search-results.js +2 -2
  284. package/dist/components/nano-global-search-results.js.map +1 -1
  285. package/dist/components/nano-hero.js +1 -1
  286. package/dist/components/nano-hero.js.map +1 -1
  287. package/dist/components/nano-menu-drawer.js +1 -1
  288. package/dist/components/nano-menu-drawer.js.map +1 -1
  289. package/dist/components/nano-overflow-nav.js +1 -1
  290. package/dist/components/nano-overflow-nav.js.map +1 -1
  291. package/dist/components/nano-range.js +1 -1
  292. package/dist/components/nano-range.js.map +1 -1
  293. package/dist/components/nano-rating.js +1 -1
  294. package/dist/components/nano-rating.js.map +1 -1
  295. package/dist/components/nano-slides.js +760 -2090
  296. package/dist/components/nano-slides.js.map +1 -1
  297. package/dist/components/nano-tab-group.js +1 -1
  298. package/dist/components/nano-tab-group.js.map +1 -1
  299. package/dist/components/nano-tab.js +1 -1
  300. package/dist/components/nano-tab.js.map +1 -1
  301. package/dist/components/nav-item.js +1 -1
  302. package/dist/components/nav-item.js.map +1 -1
  303. package/dist/components/option.js +1 -1
  304. package/dist/components/option.js.map +1 -1
  305. package/dist/components/page-dots.js +137 -0
  306. package/dist/components/page-dots.js.map +1 -0
  307. package/dist/components/progress-bar.js +1 -1
  308. package/dist/components/progress-bar.js.map +1 -1
  309. package/dist/components/scroll.js +7 -3
  310. package/dist/components/scroll.js.map +1 -1
  311. package/dist/components/select.js +1 -1
  312. package/dist/components/select.js.map +1 -1
  313. package/dist/components/spinner.js +1 -1
  314. package/dist/components/spinner.js.map +1 -1
  315. package/dist/components/sticker.js +2 -1
  316. package/dist/components/sticker.js.map +1 -1
  317. package/dist/components/table.js +1 -1
  318. package/dist/components/table.js.map +1 -1
  319. package/dist/components/tooltip.js +24 -4
  320. package/dist/components/tooltip.js.map +1 -1
  321. package/dist/esm/{algolia-data-ebf2a439.js → algolia-data-1b42827c.js} +2 -2
  322. package/dist/esm/{algolia-data-ebf2a439.js.map → algolia-data-1b42827c.js.map} +1 -1
  323. package/dist/esm/{algoliasearch-lite.esm.browser-04891fdc.js → algoliasearch-lite.esm.browser-d71a28dc.js} +30 -5
  324. package/dist/esm/algoliasearch-lite.esm.browser-d71a28dc.js.map +1 -0
  325. package/dist/esm/{component-store-54df2005.js → component-store-f7eb0a56.js} +2 -2
  326. package/dist/esm/{component-store-54df2005.js.map → component-store-f7eb0a56.js.map} +1 -1
  327. package/dist/esm/fade-1aa7a6db.js +209 -0
  328. package/dist/esm/fade-1aa7a6db.js.map +1 -0
  329. package/dist/esm/{form-control-eb06e009.js → form-control-881fa3af.js} +2 -2
  330. package/dist/esm/{form-control-eb06e009.js.map → form-control-881fa3af.js.map} +1 -1
  331. package/dist/esm/fullscreen-86fa276a.js +131 -0
  332. package/dist/esm/fullscreen-86fa276a.js.map +1 -0
  333. package/dist/esm/{global-f6e05656.js → global-be484e8c.js} +7 -7
  334. package/dist/esm/{global-f6e05656.js.map → global-be484e8c.js.map} +1 -1
  335. package/dist/esm/{index-e8891229.js → index-3003356f.js} +2 -2
  336. package/dist/esm/{index-e8891229.js.map → index-3003356f.js.map} +1 -1
  337. package/dist/esm/{index-06666022.js → index-9695db0a.js} +8 -6
  338. package/dist/esm/index-9695db0a.js.map +1 -0
  339. package/dist/esm/lazyload-994232a6.js +93 -0
  340. package/dist/esm/lazyload-994232a6.js.map +1 -0
  341. package/dist/esm/loader.js +5 -5
  342. package/dist/esm/loader.js.map +1 -1
  343. package/dist/esm/nano-accordion.entry.js +1 -1
  344. package/dist/esm/nano-alert.entry.js +3 -3
  345. package/dist/esm/nano-alert.entry.js.map +1 -1
  346. package/dist/esm/nano-algolia-filter.entry.js +3 -3
  347. package/dist/esm/nano-algolia-filter.entry.js.map +1 -1
  348. package/dist/esm/nano-algolia-pagination.entry.js +2 -7
  349. package/dist/esm/nano-algolia-pagination.entry.js.map +1 -1
  350. package/dist/esm/nano-algolia-results.entry.js +2 -2
  351. package/dist/esm/nano-algolia-results.entry.js.map +1 -1
  352. package/dist/esm/nano-algolia.entry.js +982 -26
  353. package/dist/esm/nano-algolia.entry.js.map +1 -1
  354. package/dist/esm/nano-aspect-ratio.entry.js +1 -1
  355. package/dist/esm/nano-checkbox-group.entry.js +10 -4
  356. package/dist/esm/nano-checkbox-group.entry.js.map +1 -1
  357. package/dist/esm/nano-checkbox.entry.js +4 -2
  358. package/dist/esm/nano-checkbox.entry.js.map +1 -1
  359. package/dist/esm/nano-components.js +5 -5
  360. package/dist/esm/nano-components.js.map +1 -1
  361. package/dist/esm/nano-datalist_3.entry.js +4 -4
  362. package/dist/esm/nano-datalist_3.entry.js.map +1 -1
  363. package/dist/esm/nano-date-input.entry.js +1 -1
  364. package/dist/esm/nano-date-picker.entry.js +2 -2
  365. package/dist/esm/nano-date-picker.entry.js.map +1 -1
  366. package/dist/esm/nano-demo.entry.js +1 -1
  367. package/dist/esm/nano-details.entry.js +2 -2
  368. package/dist/esm/nano-details.entry.js.map +1 -1
  369. package/dist/esm/nano-dialog.entry.js +5 -5
  370. package/dist/esm/nano-dialog.entry.js.map +1 -1
  371. package/dist/esm/nano-drawer.entry.js +5 -5
  372. package/dist/esm/nano-drawer.entry.js.map +1 -1
  373. package/dist/esm/nano-dropdown.entry.js +1 -1
  374. package/dist/esm/nano-dropdown.entry.js.map +1 -1
  375. package/dist/esm/nano-field-validator.entry.js +7 -5
  376. package/dist/esm/nano-field-validator.entry.js.map +1 -1
  377. package/dist/esm/nano-file-upload.entry.js +2 -2
  378. package/dist/esm/nano-file-upload.entry.js.map +1 -1
  379. package/dist/esm/nano-global-nav-user-profile_3.entry.js +4 -4
  380. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  381. package/dist/esm/nano-global-nav.entry.js +122 -153
  382. package/dist/esm/nano-global-nav.entry.js.map +1 -1
  383. package/dist/esm/nano-global-search-results.entry.js +3 -3
  384. package/dist/esm/nano-global-search-results.entry.js.map +1 -1
  385. package/dist/esm/nano-grid-item.entry.js +1 -1
  386. package/dist/esm/nano-grid_2.entry.js +2 -2
  387. package/dist/esm/nano-grid_2.entry.js.map +1 -1
  388. package/dist/esm/nano-hero.entry.js +2 -2
  389. package/dist/esm/nano-hero.entry.js.map +1 -1
  390. package/dist/esm/nano-icon-button_2.entry.js +24 -4
  391. package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
  392. package/dist/esm/nano-icon.entry.js +4 -4
  393. package/dist/esm/nano-icon.entry.js.map +1 -1
  394. package/dist/esm/nano-input.entry.js +3 -3
  395. package/dist/esm/nano-input.entry.js.map +1 -1
  396. package/dist/esm/nano-menu-drawer.entry.js +2 -2
  397. package/dist/esm/nano-menu-drawer.entry.js.map +1 -1
  398. package/dist/esm/nano-overflow-nav.entry.js +2 -2
  399. package/dist/esm/nano-overflow-nav.entry.js.map +1 -1
  400. package/dist/esm/nano-progress-bar.entry.js +2 -2
  401. package/dist/esm/nano-progress-bar.entry.js.map +1 -1
  402. package/dist/esm/nano-range.entry.js +2 -2
  403. package/dist/esm/nano-range.entry.js.map +1 -1
  404. package/dist/esm/nano-rating.entry.js +2 -2
  405. package/dist/esm/nano-rating.entry.js.map +1 -1
  406. package/dist/esm/nano-resize-observe_2.entry.js +1 -1
  407. package/dist/esm/nano-slide.entry.js +1 -1
  408. package/dist/esm/nano-slides-9908c44d.js +2970 -0
  409. package/dist/esm/nano-slides-9908c44d.js.map +1 -0
  410. package/dist/esm/nano-slides.entry.js +2 -4295
  411. package/dist/esm/nano-slides.entry.js.map +1 -1
  412. package/dist/esm/nano-sortable.entry.js +1 -1
  413. package/dist/esm/nano-spinner.entry.js +2 -2
  414. package/dist/esm/nano-spinner.entry.js.map +1 -1
  415. package/dist/esm/nano-split-pane.entry.js +1 -1
  416. package/dist/esm/nano-sticker.entry.js +3 -2
  417. package/dist/esm/nano-sticker.entry.js.map +1 -1
  418. package/dist/esm/nano-tab-content.entry.js +1 -1
  419. package/dist/esm/nano-tab-group.entry.js +4 -4
  420. package/dist/esm/nano-tab-group.entry.js.map +1 -1
  421. package/dist/esm/nano-tab.entry.js +2 -2
  422. package/dist/esm/nano-tab.entry.js.map +1 -1
  423. package/dist/esm/{nano-table-5af42ba4.js → nano-table-55d753cb.js} +5 -5
  424. package/dist/esm/{nano-table-5af42ba4.js.map → nano-table-55d753cb.js.map} +1 -1
  425. package/dist/esm/nano-table.entry.js +3 -3
  426. package/dist/esm/page-dots-467ace2e.js +138 -0
  427. package/dist/esm/page-dots-467ace2e.js.map +1 -0
  428. package/dist/esm/{scroll-ec7ac257.js → scroll-ac332213.js} +8 -4
  429. package/dist/esm/scroll-ac332213.js.map +1 -0
  430. package/dist/esm/{table.worker-3cae908c.js → table.worker-34706ecc.js} +4 -4
  431. package/dist/esm/table.worker-34706ecc.js.map +1 -0
  432. package/dist/nano-components/{p-74a7fc4f.js → active-element-75b7c8a0.js} +1 -1
  433. package/dist/nano-components/algolia-data-1b42827c.js +5 -0
  434. package/dist/nano-components/{p-a26bdb65.js.map → algolia-data-1b42827c.js.map} +1 -1
  435. package/dist/nano-components/algoliasearch-lite.esm.browser-d71a28dc.js +5 -0
  436. package/dist/nano-components/algoliasearch-lite.esm.browser-d71a28dc.js.map +1 -0
  437. package/dist/nano-components/component-store-f7eb0a56.js +5 -0
  438. package/dist/nano-components/{p-dd5687db.js.map → component-store-f7eb0a56.js.map} +1 -1
  439. package/dist/nano-components/{p-cecb9af1.js → date-utils-6b7a6e1f.js} +1 -1
  440. package/dist/nano-components/{p-cdfc507e.js → dom-8599fac1.js} +1 -1
  441. package/dist/nano-components/{p-842cf127.js → drag-1723a4cc.js} +1 -1
  442. package/dist/nano-components/{p-9bfdee71.js → events-6a805b42.js} +1 -1
  443. package/dist/nano-components/fade-1aa7a6db.js +5 -0
  444. package/dist/nano-components/fade-1aa7a6db.js.map +1 -0
  445. package/dist/nano-components/{p-f8f89998.js → focus-visible-8b2c14da.js} +1 -1
  446. package/dist/nano-components/form-control-881fa3af.js +5 -0
  447. package/dist/nano-components/{p-dc805ecc.js.map → form-control-881fa3af.js.map} +1 -1
  448. package/dist/nano-components/fullscreen-86fa276a.js +5 -0
  449. package/dist/nano-components/fullscreen-86fa276a.js.map +1 -0
  450. package/dist/nano-components/{p-d4f6ec9f.js → global-be484e8c.js} +2 -2
  451. package/dist/nano-components/{p-d4f6ec9f.js.map → global-be484e8c.js.map} +1 -1
  452. package/dist/nano-components/index-3003356f.js +5 -0
  453. package/dist/nano-components/{p-70747f20.js.map → index-3003356f.js.map} +1 -1
  454. package/dist/nano-components/{p-d6a04b3a.js → index-9695db0a.js} +2 -2
  455. package/dist/nano-components/{p-d6a04b3a.js.map → index-9695db0a.js.map} +1 -1
  456. package/dist/nano-components/{p-bb07c3d0.js → index-f626f476.js} +1 -1
  457. package/dist/nano-components/index.esm.js +1 -1
  458. package/dist/nano-components/index.esm.js.map +1 -1
  459. package/dist/nano-components/lazyload-994232a6.js +5 -0
  460. package/dist/nano-components/lazyload-994232a6.js.map +1 -0
  461. package/dist/nano-components/{p-2155fc2c.js → local-my-account-6662da72.js} +1 -1
  462. package/dist/nano-components/{p-ee045579.js → math-c02ddfda.js} +1 -1
  463. package/dist/nano-components/modal-bd9638c0.js +5 -0
  464. package/dist/nano-components/{p-2234694a.js.map → modal-bd9638c0.js.map} +1 -1
  465. package/dist/nano-components/nano-accordion.entry.js +5 -0
  466. package/dist/nano-components/{p-9f60ff14.entry.js.map → nano-accordion.entry.js.map} +1 -1
  467. package/dist/nano-components/nano-alert.entry.js +5 -0
  468. package/dist/nano-components/{p-191352c4.entry.js.map → nano-alert.entry.js.map} +1 -1
  469. package/dist/nano-components/nano-algolia-filter.entry.js +5 -0
  470. package/dist/nano-components/nano-algolia-filter.entry.js.map +1 -0
  471. package/dist/nano-components/nano-algolia-pagination.entry.js +5 -0
  472. package/dist/nano-components/nano-algolia-pagination.entry.js.map +1 -0
  473. package/dist/nano-components/nano-algolia-results.entry.js +5 -0
  474. package/dist/nano-components/nano-algolia-results.entry.js.map +1 -0
  475. package/dist/nano-components/nano-algolia.entry.js +5 -0
  476. package/dist/nano-components/nano-algolia.entry.js.map +1 -0
  477. package/dist/nano-components/nano-aspect-ratio.entry.js +5 -0
  478. package/dist/nano-components/{p-87329424.entry.js.map → nano-aspect-ratio.entry.js.map} +1 -1
  479. package/dist/nano-components/nano-checkbox-group.entry.js +5 -0
  480. package/dist/nano-components/nano-checkbox-group.entry.js.map +1 -0
  481. package/dist/nano-components/nano-checkbox.entry.js +5 -0
  482. package/dist/nano-components/nano-checkbox.entry.js.map +1 -0
  483. package/dist/nano-components/nano-components.css +1 -1
  484. package/dist/nano-components/nano-components.esm.js +1 -1
  485. package/dist/nano-components/nano-components.esm.js.map +1 -1
  486. package/dist/nano-components/nano-datalist_3.entry.js +5 -0
  487. package/dist/nano-components/nano-datalist_3.entry.js.map +1 -0
  488. package/dist/nano-components/nano-date-input.entry.js +5 -0
  489. package/dist/nano-components/{p-d4e44f93.entry.js.map → nano-date-input.entry.js.map} +1 -1
  490. package/dist/nano-components/nano-date-picker.entry.js +5 -0
  491. package/dist/nano-components/{p-efd3e121.entry.js.map → nano-date-picker.entry.js.map} +1 -1
  492. package/dist/nano-components/nano-demo.entry.js +5 -0
  493. package/dist/nano-components/{p-e98835e2.entry.js.map → nano-demo.entry.js.map} +1 -1
  494. package/dist/nano-components/nano-details.entry.js +5 -0
  495. package/dist/nano-components/nano-details.entry.js.map +1 -0
  496. package/dist/nano-components/nano-dialog.entry.js +5 -0
  497. package/dist/nano-components/{p-79fff4fd.entry.js.map → nano-dialog.entry.js.map} +1 -1
  498. package/dist/nano-components/nano-drawer.entry.js +5 -0
  499. package/dist/nano-components/nano-drawer.entry.js.map +1 -0
  500. package/dist/nano-components/nano-dropdown.entry.js +5 -0
  501. package/dist/nano-components/nano-dropdown.entry.js.map +1 -0
  502. package/dist/nano-components/nano-field-validator.entry.js +5 -0
  503. package/dist/nano-components/nano-field-validator.entry.js.map +1 -0
  504. package/dist/nano-components/nano-file-upload.entry.js +5 -0
  505. package/dist/nano-components/nano-file-upload.entry.js.map +1 -0
  506. package/dist/nano-components/nano-global-nav-user-profile_3.entry.js +5 -0
  507. package/dist/nano-components/nano-global-nav-user-profile_3.entry.js.map +1 -0
  508. package/dist/nano-components/nano-global-nav.entry.js +5 -0
  509. package/dist/nano-components/nano-global-nav.entry.js.map +1 -0
  510. package/dist/nano-components/nano-global-search-results.entry.js +5 -0
  511. package/dist/nano-components/nano-global-search-results.entry.js.map +1 -0
  512. package/dist/nano-components/nano-grid-item.entry.js +5 -0
  513. package/dist/nano-components/{p-9c290055.entry.js.map → nano-grid-item.entry.js.map} +1 -1
  514. package/dist/nano-components/nano-grid_2.entry.js +5 -0
  515. package/dist/nano-components/{p-7c82af28.entry.js.map → nano-grid_2.entry.js.map} +1 -1
  516. package/dist/nano-components/nano-hero.entry.js +5 -0
  517. package/dist/nano-components/{p-328ef9d3.entry.js.map → nano-hero.entry.js.map} +1 -1
  518. package/dist/nano-components/nano-icon-button_2.entry.js +5 -0
  519. package/dist/nano-components/nano-icon-button_2.entry.js.map +1 -0
  520. package/dist/nano-components/nano-icon.entry.js +5 -0
  521. package/dist/nano-components/nano-icon.entry.js.map +1 -0
  522. package/dist/nano-components/nano-input.entry.js +5 -0
  523. package/dist/nano-components/nano-input.entry.js.map +1 -0
  524. package/dist/nano-components/nano-menu-drawer.entry.js +5 -0
  525. package/dist/nano-components/nano-menu-drawer.entry.js.map +1 -0
  526. package/dist/nano-components/nano-overflow-nav.entry.js +5 -0
  527. package/dist/nano-components/nano-overflow-nav.entry.js.map +1 -0
  528. package/dist/nano-components/nano-progress-bar.entry.js +5 -0
  529. package/dist/nano-components/nano-progress-bar.entry.js.map +1 -0
  530. package/dist/nano-components/nano-range.entry.js +5 -0
  531. package/dist/nano-components/nano-range.entry.js.map +1 -0
  532. package/dist/nano-components/nano-rating.entry.js +5 -0
  533. package/dist/nano-components/nano-rating.entry.js.map +1 -0
  534. package/dist/nano-components/nano-resize-observe_2.entry.js +5 -0
  535. package/dist/nano-components/{p-e6a0675e.entry.js.map → nano-resize-observe_2.entry.js.map} +1 -1
  536. package/dist/nano-components/nano-slide.entry.js +5 -0
  537. package/dist/nano-components/{p-3d8fb8a1.entry.js.map → nano-slide.entry.js.map} +1 -1
  538. package/dist/nano-components/nano-slides-9908c44d.js +20 -0
  539. package/dist/nano-components/nano-slides-9908c44d.js.map +1 -0
  540. package/dist/nano-components/nano-slides.entry.js +5 -0
  541. package/dist/nano-components/nano-sortable.entry.js +5 -0
  542. package/dist/nano-components/{p-3ae362ae.entry.js.map → nano-sortable.entry.js.map} +1 -1
  543. package/dist/nano-components/nano-spinner.entry.js +5 -0
  544. package/dist/nano-components/{p-9925e504.entry.js.map → nano-spinner.entry.js.map} +1 -1
  545. package/dist/nano-components/nano-split-pane.entry.js +5 -0
  546. package/dist/nano-components/{p-6c4171fa.entry.js.map → nano-split-pane.entry.js.map} +1 -1
  547. package/dist/nano-components/nano-sticker.entry.js +5 -0
  548. package/dist/nano-components/nano-sticker.entry.js.map +1 -0
  549. package/dist/nano-components/nano-tab-content.entry.js +5 -0
  550. package/dist/nano-components/{p-3f40e370.entry.js.map → nano-tab-content.entry.js.map} +1 -1
  551. package/dist/nano-components/nano-tab-group.entry.js +5 -0
  552. package/dist/nano-components/nano-tab-group.entry.js.map +1 -0
  553. package/dist/nano-components/nano-tab.entry.js +5 -0
  554. package/dist/nano-components/{p-3cac5f6d.entry.js.map → nano-tab.entry.js.map} +1 -1
  555. package/dist/nano-components/nano-table-55d753cb.js +5 -0
  556. package/dist/nano-components/nano-table-55d753cb.js.map +1 -0
  557. package/dist/nano-components/nano-table.entry.js +5 -0
  558. package/dist/nano-components/page-dots-467ace2e.js +5 -0
  559. package/dist/nano-components/page-dots-467ace2e.js.map +1 -0
  560. package/dist/nano-components/{p-cd1fd454.js → popover-e5e7a641.js} +1 -1
  561. package/dist/nano-components/scroll-ac332213.js +5 -0
  562. package/dist/nano-components/scroll-ac332213.js.map +1 -0
  563. package/dist/nano-components/{p-dc565459.js → slot-8126e238.js} +1 -1
  564. package/dist/nano-components/{p-f88fa15c.js → tabbable-26a66a22.js} +1 -1
  565. package/dist/nano-components/table.worker-34706ecc.js +5 -0
  566. package/dist/nano-components/{p-411bb8f1.js → theme-82feb8cf.js} +1 -1
  567. package/dist/nano-components/{p-7bff5224.js → throttle-ac4fcefa.js} +1 -1
  568. package/dist/nano-components/{p-c3e8e3f9.js → transitions-fb09eb32.js} +1 -1
  569. package/dist/themes/nanopore.cn.css +1 -1
  570. package/dist/themes/nanopore.cn.css.map +1 -1
  571. package/dist/themes/nanopore.css +1 -1
  572. package/dist/themes/nanopore.css.map +1 -1
  573. package/dist/types/components/algolia/algolia-data.d.ts +1 -1
  574. package/dist/types/components/algolia/algolia-filter.d.ts +1 -1
  575. package/dist/types/components/algolia/algolia-pagination.d.ts +1 -1
  576. package/dist/types/components/algolia/algolia-results.d.ts +1 -1
  577. package/dist/types/components/algolia/algolia.d.ts +1 -7
  578. package/dist/types/components/algolia/lib/squirrelly/browser.d.ts +6 -0
  579. package/dist/types/components/algolia/lib/squirrelly/compile-string.d.ts +5 -0
  580. package/dist/types/components/algolia/lib/squirrelly/compile.d.ts +3 -0
  581. package/dist/types/components/algolia/lib/squirrelly/config.d.ts +48 -0
  582. package/dist/types/components/algolia/lib/squirrelly/container-utils.d.ts +8 -0
  583. package/dist/types/components/algolia/lib/squirrelly/containers.d.ts +18 -0
  584. package/dist/types/components/algolia/lib/squirrelly/err.d.ts +6 -0
  585. package/dist/types/components/algolia/lib/squirrelly/parse.d.ts +23 -0
  586. package/dist/types/components/algolia/lib/squirrelly/render.d.ts +3 -0
  587. package/dist/types/components/algolia/lib/squirrelly/storage.d.ts +13 -0
  588. package/dist/types/components/algolia/lib/squirrelly/utils.d.ts +8 -0
  589. package/dist/types/components/algolia/lib/template.d.ts +2 -0
  590. package/dist/types/components/checkbox/checkbox-group.d.ts +5 -0
  591. package/dist/types/components/global-nav/global-nav.d.ts +15 -20
  592. package/dist/types/components/slides/lib/js/animate.d.ts +2 -0
  593. package/dist/types/components/slides/lib/js/cell.d.ts +1 -0
  594. package/dist/types/components/slides/lib/js/drag.d.ts +1 -0
  595. package/dist/types/components/slides/lib/js/fade.d.ts +1 -0
  596. package/dist/types/components/slides/lib/js/flickity.d.ts +23 -0
  597. package/dist/types/components/slides/lib/js/fullscreen.d.ts +1 -0
  598. package/dist/types/components/slides/lib/js/index.d.ts +5 -0
  599. package/dist/types/components/slides/lib/js/lazyload.d.ts +1 -0
  600. package/dist/types/components/slides/lib/js/page-dots.d.ts +1 -0
  601. package/dist/types/components/slides/lib/js/player.d.ts +1 -0
  602. package/dist/types/components/slides/lib/js/prev-next-button.d.ts +1 -0
  603. package/dist/types/components/slides/lib/js/slide.d.ts +1 -0
  604. package/dist/types/components/slides/lib/js/utils/event-emitter.d.ts +1 -0
  605. package/dist/types/components/slides/lib/js/utils/gestures.d.ts +26 -0
  606. package/dist/types/components/slides/lib/js/utils/get-size.d.ts +6 -0
  607. package/dist/types/components/slides/lib/js/utils/utils.d.ts +5 -0
  608. package/dist/types/components/slides/slides-interface.d.ts +17 -7
  609. package/dist/types/components/slides/slides.d.ts +5 -0
  610. package/dist/types/components.d.ts +10 -10
  611. package/dist/types/utils/scroll.d.ts +5 -1
  612. package/docs-json.json +33 -24
  613. package/docs-vscode.json +4 -0
  614. package/hydrate/index.js +4147 -3953
  615. package/package.json +5 -8
  616. package/dist/cjs/_commonjsHelpers-29614748.js +0 -30
  617. package/dist/cjs/_commonjsHelpers-29614748.js.map +0 -1
  618. package/dist/cjs/algoliasearch-lite.esm.browser-992a2eff.js.map +0 -1
  619. package/dist/cjs/index-1d3ebe1a.js.map +0 -1
  620. package/dist/cjs/scroll-fc1b8387.js.map +0 -1
  621. package/dist/cjs/table.worker-3df34efe.js.map +0 -1
  622. package/dist/collection/components/slides/lib/js/add-remove-cell.js +0 -128
  623. package/dist/collection/components/slides/lib/js/images-loaded.js +0 -24
  624. package/dist/collection/components/slides/slides-interface.js +0 -2
  625. package/dist/collection/components/slides/slides-interface.js.map +0 -1
  626. package/dist/collection/utils/template.js.map +0 -1
  627. package/dist/components/_commonjsHelpers.js +0 -26
  628. package/dist/components/_commonjsHelpers.js.map +0 -1
  629. package/dist/esm/_commonjsHelpers-04a0e019.js +0 -26
  630. package/dist/esm/_commonjsHelpers-04a0e019.js.map +0 -1
  631. package/dist/esm/algoliasearch-lite.esm.browser-04891fdc.js.map +0 -1
  632. package/dist/esm/index-06666022.js.map +0 -1
  633. package/dist/esm/scroll-ec7ac257.js.map +0 -1
  634. package/dist/esm/table.worker-3cae908c.js.map +0 -1
  635. package/dist/nano-components/p-0563e812.entry.js +0 -5
  636. package/dist/nano-components/p-0563e812.entry.js.map +0 -1
  637. package/dist/nano-components/p-0bc40dd1.entry.js +0 -5
  638. package/dist/nano-components/p-0bc40dd1.entry.js.map +0 -1
  639. package/dist/nano-components/p-0e0f07f0.entry.js +0 -5
  640. package/dist/nano-components/p-0e0f07f0.entry.js.map +0 -1
  641. package/dist/nano-components/p-0e4da739.entry.js +0 -5
  642. package/dist/nano-components/p-0e4da739.entry.js.map +0 -1
  643. package/dist/nano-components/p-16e75af9.entry.js +0 -5
  644. package/dist/nano-components/p-16e75af9.entry.js.map +0 -1
  645. package/dist/nano-components/p-17eb456c.entry.js +0 -5
  646. package/dist/nano-components/p-17eb456c.entry.js.map +0 -1
  647. package/dist/nano-components/p-191352c4.entry.js +0 -5
  648. package/dist/nano-components/p-1987f7a9.js +0 -5
  649. package/dist/nano-components/p-1a55e282.entry.js +0 -5
  650. package/dist/nano-components/p-1a55e282.entry.js.map +0 -1
  651. package/dist/nano-components/p-2234694a.js +0 -5
  652. package/dist/nano-components/p-2a105609.entry.js +0 -5
  653. package/dist/nano-components/p-2a105609.entry.js.map +0 -1
  654. package/dist/nano-components/p-2c0218e6.entry.js +0 -5
  655. package/dist/nano-components/p-2c0218e6.entry.js.map +0 -1
  656. package/dist/nano-components/p-328ef9d3.entry.js +0 -5
  657. package/dist/nano-components/p-359b7cd2.entry.js +0 -5
  658. package/dist/nano-components/p-359b7cd2.entry.js.map +0 -1
  659. package/dist/nano-components/p-36c3ded8.entry.js +0 -5
  660. package/dist/nano-components/p-36c3ded8.entry.js.map +0 -1
  661. package/dist/nano-components/p-3ae362ae.entry.js +0 -5
  662. package/dist/nano-components/p-3cac5f6d.entry.js +0 -5
  663. package/dist/nano-components/p-3d8fb8a1.entry.js +0 -5
  664. package/dist/nano-components/p-3eeaba47.entry.js +0 -5
  665. package/dist/nano-components/p-3eeaba47.entry.js.map +0 -1
  666. package/dist/nano-components/p-3f40e370.entry.js +0 -5
  667. package/dist/nano-components/p-51133e62.entry.js +0 -5
  668. package/dist/nano-components/p-51133e62.entry.js.map +0 -1
  669. package/dist/nano-components/p-54c4a2f5.entry.js +0 -5
  670. package/dist/nano-components/p-54c4a2f5.entry.js.map +0 -1
  671. package/dist/nano-components/p-5fc3035d.entry.js +0 -5
  672. package/dist/nano-components/p-5fc3035d.entry.js.map +0 -1
  673. package/dist/nano-components/p-650aa197.entry.js +0 -5
  674. package/dist/nano-components/p-650aa197.entry.js.map +0 -1
  675. package/dist/nano-components/p-67ab5a5f.entry.js +0 -5
  676. package/dist/nano-components/p-67ab5a5f.entry.js.map +0 -1
  677. package/dist/nano-components/p-688f1a55.entry.js +0 -5
  678. package/dist/nano-components/p-688f1a55.entry.js.map +0 -1
  679. package/dist/nano-components/p-6c4171fa.entry.js +0 -5
  680. package/dist/nano-components/p-70747f20.js +0 -5
  681. package/dist/nano-components/p-7670058b.entry.js +0 -5
  682. package/dist/nano-components/p-7670058b.entry.js.map +0 -1
  683. package/dist/nano-components/p-79fff4fd.entry.js +0 -5
  684. package/dist/nano-components/p-7c82af28.entry.js +0 -5
  685. package/dist/nano-components/p-87329424.entry.js +0 -5
  686. package/dist/nano-components/p-8fe51abf.js +0 -5
  687. package/dist/nano-components/p-935968b8.entry.js +0 -23
  688. package/dist/nano-components/p-935968b8.entry.js.map +0 -1
  689. package/dist/nano-components/p-9925e504.entry.js +0 -5
  690. package/dist/nano-components/p-9c290055.entry.js +0 -5
  691. package/dist/nano-components/p-9f60ff14.entry.js +0 -5
  692. package/dist/nano-components/p-a225e976.entry.js +0 -5
  693. package/dist/nano-components/p-a225e976.entry.js.map +0 -1
  694. package/dist/nano-components/p-a26bdb65.js +0 -5
  695. package/dist/nano-components/p-abd11243.entry.js +0 -5
  696. package/dist/nano-components/p-abd11243.entry.js.map +0 -1
  697. package/dist/nano-components/p-b27b56d3.js +0 -5
  698. package/dist/nano-components/p-b27b56d3.js.map +0 -1
  699. package/dist/nano-components/p-c80336b2.entry.js +0 -5
  700. package/dist/nano-components/p-c80336b2.entry.js.map +0 -1
  701. package/dist/nano-components/p-cad86fb8.js +0 -5
  702. package/dist/nano-components/p-cad86fb8.js.map +0 -1
  703. package/dist/nano-components/p-d4e44f93.entry.js +0 -5
  704. package/dist/nano-components/p-dc4020f8.js +0 -5
  705. package/dist/nano-components/p-dc4020f8.js.map +0 -1
  706. package/dist/nano-components/p-dc6cb252.entry.js +0 -5
  707. package/dist/nano-components/p-dc6cb252.entry.js.map +0 -1
  708. package/dist/nano-components/p-dc805ecc.js +0 -5
  709. package/dist/nano-components/p-dd5687db.js +0 -5
  710. package/dist/nano-components/p-e6a0675e.entry.js +0 -5
  711. package/dist/nano-components/p-e98835e2.entry.js +0 -5
  712. package/dist/nano-components/p-efd3e121.entry.js +0 -5
  713. package/dist/nano-components/p-f73f52ed.entry.js +0 -5
  714. package/dist/nano-components/p-f73f52ed.entry.js.map +0 -1
  715. package/dist/nano-components/p-fbde7010.entry.js +0 -5
  716. package/dist/nano-components/p-fcbc9122.entry.js +0 -5
  717. package/dist/nano-components/p-fcbc9122.entry.js.map +0 -1
  718. package/dist/types/utils/template.d.ts +0 -2
  719. /package/dist/nano-components/{p-74a7fc4f.js.map → active-element-75b7c8a0.js.map} +0 -0
  720. /package/dist/nano-components/{p-cecb9af1.js.map → date-utils-6b7a6e1f.js.map} +0 -0
  721. /package/dist/nano-components/{p-cdfc507e.js.map → dom-8599fac1.js.map} +0 -0
  722. /package/dist/nano-components/{p-842cf127.js.map → drag-1723a4cc.js.map} +0 -0
  723. /package/dist/nano-components/{p-9bfdee71.js.map → events-6a805b42.js.map} +0 -0
  724. /package/dist/nano-components/{p-f8f89998.js.map → focus-visible-8b2c14da.js.map} +0 -0
  725. /package/dist/nano-components/{p-bb07c3d0.js.map → index-f626f476.js.map} +0 -0
  726. /package/dist/nano-components/{p-1987f7a9.js.map → local-my-account-6662da72.js.map} +0 -0
  727. /package/dist/nano-components/{p-ee045579.js.map → math-c02ddfda.js.map} +0 -0
  728. /package/dist/nano-components/{p-2155fc2c.js.map → nano-slides.entry.js.map} +0 -0
  729. /package/dist/nano-components/{p-8fe51abf.js.map → nano-table.entry.js.map} +0 -0
  730. /package/dist/nano-components/{p-cd1fd454.js.map → popover-e5e7a641.js.map} +0 -0
  731. /package/dist/nano-components/{p-dc565459.js.map → slot-8126e238.js.map} +0 -0
  732. /package/dist/nano-components/{p-f88fa15c.js.map → tabbable-26a66a22.js.map} +0 -0
  733. /package/dist/nano-components/{p-fbde7010.entry.js.map → table.worker-34706ecc.js.map} +0 -0
  734. /package/dist/nano-components/{p-f258383d.js → table.worker-f258383d.js} +0 -0
  735. /package/dist/nano-components/{p-411bb8f1.js.map → theme-82feb8cf.js.map} +0 -0
  736. /package/dist/nano-components/{p-7bff5224.js.map → throttle-ac4fcefa.js.map} +0 -0
  737. /package/dist/nano-components/{p-c3e8e3f9.js.map → transitions-fb09eb32.js.map} +0 -0
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{h as i,g as t,a as e,r as n,c as s}from"./index-9695db0a.js";const r=(()=>{try{return!!new CSSStyleSheet}catch(i){return false}})();const o=new WeakMap;function a(n={}){return(s,a)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=a}const{componentWillLoad:d,render:u,componentWillRender:g}=s;if(!d)console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${s.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);if(r){const i=i=>{if(!i[n.cacheKeyProperty]||o.get(i)&&o.get(i)===i[n.cacheKeyProperty])return;o.set(i,i[n.cacheKeyProperty]);const e=t(i);const r=typeof i[a]==="function"?i[a]():i[a];const h=e.shadowRoot||document;h.adoptedStyleSheets=[...h.adoptedStyleSheets||[],c(i,s,r,n)]};s.componentWillLoad=function(){const t=d&&d.call(this);i(this);return t};s.componentWillRender=function(){const t=g&&g.call(this);i(this);return t}}else{s.render=function(){const t=typeof this[a]==="function"?this[a]():this[a];let n=u.call(this);if(l(n)){h(n,s.constructor.name,t)}else{n=i(e,null,n);if(!("attachShadow"in HTMLElement.prototype)){h(n,s.constructor.name,t)}else{if(!s.__constructableStyle){const i=document.createElement("style");i.setAttribute("type","text/css");i.setAttribute("constructible-style",s.constructor.name);i.innerHTML=t;s.__constructableStyle=i;document.head.appendChild(i)}}}return n}}}}function h(t,e,n){(d(t)||[]).push(i("style",{type:"text/css","constructible-style":e},n))}function c(i,t,e,n){if(!t.__constructableStyle){t.__constructableStyle={}}const s=i[n.cacheKeyProperty];if(!t.__constructableStyle[s]){t.__constructableStyle[s]=new CSSStyleSheet;t.__constructableStyle[s].replace(e)}return t.__constructableStyle[s]}function l(i){for(const t in i){if(i.hasOwnProperty(t)){if(i[t]===e){return true}}}return false}function d(i){for(const t in i){if(i.hasOwnProperty(t)){if(Array.isArray(i[t])){return i[t]}}}}const u=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:"grid size: s";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{display:none;background:rgba(126, 195, 241, 0.25)}';var g=undefined&&undefined.__decorate||function(i,t,e,n){var s=arguments.length,r=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(i,t,e,n);else for(var a=i.length-1;a>=0;a--)if(o=i[a])r=(s<3?o(r):s>3?o(t,e,r):o(t,e))||r;return s>3&&r&&Object.defineProperty(t,e,r),r};var p=undefined&&undefined.__metadata||function(i,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(i,t)};const f=class{constructor(i){n(this,i);this.grids=[];this.styles=()=>{const i=`\n ${this.grids.map((i=>`\n @container (min-width: ${!!Number(i.breakpoint+1)?Number(i.breakpoint)+1+"px":i.breakpoint}) {\n [cache-key="${this.cacheKey}"].grid {\n --current-grid-size: "grid size: ${i.name}";\n ${i.template?`grid-template: ${i.template};`:`grid-template-columns: repeat(${i.cols}, minmax(calc((100% / ${i.cols}) - var(--grid-col-gap)), 1fr));`}\n }\n ${[...Array(i.cols)].map(((t,e)=>{const n=e+1;return`\n [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-col-start-${n}"],\n ::slotted([grid-states~="${i.name}-col-start-${n}"]) {\n grid-column-start: ${n} !important;\n }\n [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-col-span-${n}"],\n ::slotted([grid-states~="${i.name}-col-span-${n}"]) {\n grid-column-end: span ${n} !important;\n }\n `})).join("")}\n ${[...Array(24)].map(((t,e)=>{const n=e+1;return`\n [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-row-start-${n}"],\n ::slotted([grid-states~="${i.name}-row-start-${n}"]) {\n grid-row-start: ${n} !important;\n }\n [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-row-span-${n}"],\n ::slotted([grid-states~="${i.name}-row-span-${n}"]) {\n grid-row-end: span ${n} !important;\n }\n `})).join("")}\n ${this.showHelper?`\n [cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${i.cols}) {\n display: block !important;\n }\n `:""}\n }\n `)).join("")}\n `;return i};this.cacheKey=undefined;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.sTpl=undefined;this.mTpl=undefined;this.lTpl=undefined;this.xlTpl=undefined;this.xxlTpl=undefined;this.showHelper=false}constructSizeArray(){this.grids=[];if(this.sCols)this.grids.push({cols:this.sCols,breakpoint:0,name:"s",template:this.sTpl});if(this.mCols)this.grids.push({cols:this.mCols,breakpoint:this.sSize,name:"m",template:this.mTpl});if(this.lCols)this.grids.push({cols:this.lCols,breakpoint:this.mSize,name:"l",template:this.lTpl});if(this.xlCols)this.grids.push({cols:this.xlCols,breakpoint:this.lSize,name:"xl",template:this.xlTpl});if(this.xxlCols)this.grids.push({cols:this.xxlCols,breakpoint:this.xlSize,name:"xxl",template:this.xxlTpl});this.cacheKey=this.grids.map((i=>`${i.cols}-${i.breakpoint}-${i.template||""}`)).join("")+"-helper-"+this.showHelper}componentWillLoad(){this.constructSizeArray()}render(){return i(e,null,i("div",{part:"grid",class:"grid","cache-key":this.cacheKey},i("slot",null)),this.showHelper&&i("div",{class:"grid grid--helper",part:"helper","cache-key":this.cacheKey},[...Array(24)].map((()=>i("div",{class:"grid__helper-item"})))))}static get watchers(){return{sTpl:["constructSizeArray"],mTpl:["constructSizeArray"],lTpl:["constructSizeArray"],xlTpl:["constructSizeArray"],xxlTpl:["constructSizeArray"],sSize:["constructSizeArray"],mSize:["constructSizeArray"],lSize:["constructSizeArray"],xlSize:["constructSizeArray"],sCols:["constructSizeArray"],mCols:["constructSizeArray"],lCols:["constructSizeArray"],xlCols:["constructSizeArray"],xxlCols:["constructSizeArray"],showHelper:["constructSizeArray"]}}};g([a({cacheKeyProperty:"cacheKey"}),p("design:type",Object)],f.prototype,"styles",void 0);f.style=u;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const b=class{constructor(i){n(this,i);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,e]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:e,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const t=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return i("div",{class:"img"},i("nano-skeleton",{class:"img__loader"}),!!this.background&&i("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:t},i("slot",null)),i("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),i("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return t(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};b.style=m;export{f as nano_grid,b as nano_img};
5
+ //# sourceMappingURL=nano-grid_2.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["supportsConstructibleStylesheets","CSSStyleSheet","e","cacheKeys","WeakMap","ConstructibleStyle","opts","target","propertyKey","cacheKeyProperty","componentWillLoad","render","componentWillRender","console","warn","constructor","name","addStylesheet","instance","get","set","host","getElement","cssText","root","shadowRoot","document","adoptedStyleSheets","getOrCreateStylesheet","willLoadResult","call","this","willRenderResult","renderedNode","isHost","appendStyleToHost","h","Host","HTMLElement","prototype","__constructableStyle","style","createElement","setAttribute","innerHTML","head","appendChild","node","targetName","getHostChildren","push","type","key","replace","prop","hasOwnProperty","Array","isArray","gridCss","Grid","grids","styles","css","map","bp","Number","breakpoint","cacheKey","template","cols","_","i","gItm","join","showHelper","constructSizeArray","sCols","sTpl","mCols","sSize","mTpl","lCols","mSize","lTpl","xlCols","lSize","xlTpl","xxlCols","xlSize","xxlTpl","part","class","__decorate","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","emit","setTimeout","hasLoaded","onError","nanoImgError","onResize","Object","entries","detail","forEach","active","srcOpts","keys","sort","src","length","_src","slice","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","split","bpSrc","filter","lazyChanged","lazy","load","window","removeIO","io","IntersectionObserver","data","isIntersecting","observe","loadError","loadSrc","nanoImgWillLoad","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","onNanoResizeStateChange","states"],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n try {\n return !!new CSSStyleSheet();\n } catch (e) {\n return false;\n }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n target: ComponentInterface,\n propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n return (target: ComponentInterface, propertyKey: string) => {\n if (!opts.cacheKeyProperty) {\n opts.cacheKeyProperty = propertyKey;\n }\n\n const { componentWillLoad, render, componentWillRender } = target;\n if (!componentWillLoad)\n console.warn(\n `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n );\n\n if (supportsConstructibleStylesheets) {\n const addStylesheet = (instance: ComponentInterface) => {\n if (\n !instance[opts.cacheKeyProperty] ||\n (cacheKeys.get(instance) &&\n cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n )\n return;\n\n cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n const host = getElement(instance);\n const cssText =\n typeof instance[propertyKey] === 'function'\n ? instance[propertyKey]()\n : instance[propertyKey];\n const root = (host.shadowRoot || document) as any;\n root.adoptedStyleSheets = [\n ...(root.adoptedStyleSheets || []),\n getOrCreateStylesheet(instance, target, cssText, opts),\n ];\n };\n\n target.componentWillLoad = function () {\n const willLoadResult =\n componentWillLoad && componentWillLoad.call(this);\n addStylesheet(this);\n return willLoadResult;\n };\n\n target.componentWillRender = function () {\n const willRenderResult =\n componentWillRender && componentWillRender.call(this);\n addStylesheet(this);\n return willRenderResult;\n };\n } else {\n target.render = function () {\n const cssText =\n typeof this[propertyKey] === 'function'\n ? this[propertyKey]()\n : this[propertyKey];\n let renderedNode: VNode = render.call(this);\n\n if (isHost(renderedNode)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n renderedNode = <Host>{renderedNode}</Host>;\n\n if (!('attachShadow' in HTMLElement.prototype)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n if (!target.__constructableStyle) {\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute(\n 'constructible-style',\n target.constructor.name\n );\n style.innerHTML = cssText;\n target.__constructableStyle = style;\n document.head.appendChild(style);\n }\n }\n }\n\n return renderedNode;\n };\n }\n };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n (getHostChildren(node) || []).push(\n <style type=\"text/css\" constructible-style={targetName}>\n {cssText}\n </style>\n );\n}\n\nfunction getOrCreateStylesheet(\n instance: ComponentInterface,\n target: ComponentInterface,\n cssText: string,\n opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n if (!target.__constructableStyle) {\n target.__constructableStyle = {};\n }\n\n const key = instance[opts.cacheKeyProperty];\n\n if (!target.__constructableStyle[key]) {\n target.__constructableStyle[key] = new CSSStyleSheet();\n target.__constructableStyle[key].replace(cssText);\n }\n\n return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (node[prop] === Host) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (Array.isArray(node[prop])) {\n return node[prop];\n }\n }\n }\n}\n\nexport interface ConstructibleStyleOptions {\n /**\n * Set this in case an instance of a component could produce different styles based on variables.\n * This will ensure that you get new styles for each mode.\n * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n */\n cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n */\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"grid size: s\";\n\n container-type: inline-size;\n display: block;\n\n .grid {\n display: grid;\n gap: var(--grid-row-gap) var(--grid-col-gap);\n block-size: inherit;\n min-block-size: inherit;\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n position: relative;\n\n .grid--helper {\n position: absolute;\n inset: 0;\n pointer-events: none;\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n inline-size: 100%;\n inset-inline-start: 0;\n text-align: center;\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: rgb(0 0 0 / 20%);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n\n .grid__helper-item {\n display: none;\n background: hsl(204deg 80% 72% / 25%);\n }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number | string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) sSize: number | string = 300;\n\n /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) mSize: number | string = 550;\n\n /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) lSize: number | string = 800;\n\n /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) xxlCols: number;\n\n /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n @Prop() sTpl?: string;\n\n /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n @Prop() mTpl?: string;\n\n /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n @Prop() lTpl?: string;\n\n /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n @Prop() xlTpl?: string;\n\n /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n @Prop() xxlTpl?: string;\n\n /** shows a grid helper to visualise where columns are */\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lCols)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = /* css */ `\n ${this.grids\n .map(\n (bp) => /* css */ `\n @container (min-width: ${\n !!Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper\n ? /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n : ''\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n /**\n * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n */\n --padding: 0;\n\n display: inline-block;\n object-fit: cover;\n object-position: center;\n background-size: cover;\n background-position: center;\n\n * {\n border-radius: inherit;\n }\n}\n\n:host([background]:not([background='false'])) {\n display: block;\n}\n\n.img {\n position: relative;\n object-fit: inherit;\n object-position: inherit;\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: inherit;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 100%;\n z-index: -1;\n}\n\n.img__image,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\n }\n }\n}\n\n.img__image {\n object-fit: inherit;\n object-position: inherit;\n max-inline-size: 100%;\n min-block-size: inherit;\n max-block-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: auto;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 1px;\n position: absolute;\n z-index: -1;\n }\n }\n}\n\n.img__bg {\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n overflow: auto;\n padding: var(--padding);\n\n &.no-height {\n position: absolute;\n inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /** This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n @Prop() alt?: string;\n\n /** The image URL. This attribute is mandatory for the `<img>` element. */\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /** Render image lazily, when it comes into the browser viewport **/\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n /** Render the image as a background image **/\n @Prop() background?: boolean;\n\n /** When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content **/\n @Prop() autoHeight: 'content' | 'image' = 'content';\n\n /** Emitted when the img src has been set */\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /** Emitted when the image has finished loading */\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /** Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src || this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"],"mappings":";;;gEAGA,MAAMA,EAAmC,MACvC,IACE,QAAS,IAAIC,a,CACb,MAAOC,GACP,OAAO,K,CAEV,EANwC,GAQzC,MAAMC,EAAiD,IAAIC,Q,SAsB3CC,EACdC,EAAkC,IAElC,MAAO,CAACC,EAA4BC,KAClC,IAAKF,EAAKG,iBAAkB,CAC1BH,EAAKG,iBAAmBD,C,CAG1B,MAAME,kBAAEA,EAAiBC,OAAEA,EAAMC,oBAAEA,GAAwBL,EAC3D,IAAKG,EACHG,QAAQC,KACN,yFAAyFP,EAAOQ,YAAYC,mHAGhH,GAAIhB,EAAkC,CACpC,MAAMiB,EAAiBC,IACrB,IACGA,EAASZ,EAAKG,mBACdN,EAAUgB,IAAID,IACbf,EAAUgB,IAAID,KAAcA,EAASZ,EAAKG,kBAE5C,OAEFN,EAAUiB,IAAIF,EAAUA,EAASZ,EAAKG,mBACtC,MAAMY,EAAOC,EAAWJ,GACxB,MAAMK,SACGL,EAASV,KAAiB,WAC7BU,EAASV,KACTU,EAASV,GACf,MAAMgB,EAAQH,EAAKI,YAAcC,SACjCF,EAAKG,mBAAqB,IACpBH,EAAKG,oBAAsB,GAC/BC,EAAsBV,EAAUX,EAAQgB,EAASjB,GAClD,EAGHC,EAAOG,kBAAoB,WACzB,MAAMmB,EACJnB,GAAqBA,EAAkBoB,KAAKC,MAC9Cd,EAAcc,MACd,OAAOF,C,EAGTtB,EAAOK,oBAAsB,WAC3B,MAAMoB,EACJpB,GAAuBA,EAAoBkB,KAAKC,MAClDd,EAAcc,MACd,OAAOC,C,MAEJ,CACLzB,EAAOI,OAAS,WACd,MAAMY,SACGQ,KAAKvB,KAAiB,WACzBuB,KAAKvB,KACLuB,KAAKvB,GACX,IAAIyB,EAAsBtB,EAAOmB,KAAKC,MAEtC,GAAIG,EAAOD,GAAe,CACxBE,EAAkBF,EAAc1B,EAAOQ,YAAYC,KAAMO,E,KACpD,CACLU,EAAeG,EAACC,EAAI,KAAEJ,GAEtB,KAAM,iBAAkBK,YAAYC,WAAY,CAC9CJ,EAAkBF,EAAc1B,EAAOQ,YAAYC,KAAMO,E,KACpD,CACL,IAAKhB,EAAOiC,qBAAsB,CAChC,MAAMC,EAAQf,SAASgB,cAAc,SACrCD,EAAME,aAAa,OAAQ,YAC3BF,EAAME,aACJ,sBACApC,EAAOQ,YAAYC,MAErByB,EAAMG,UAAYrB,EAClBhB,EAAOiC,qBAAuBC,EAC9Bf,SAASmB,KAAKC,YAAYL,E,GAKhC,OAAOR,C,GAIf,CAEA,SAASE,EAAkBY,EAAMC,EAAYzB,IAC1C0B,EAAgBF,IAAS,IAAIG,KAC5Bd,EAAA,SAAOe,KAAK,WAAU,sBAAsBH,GACzCzB,GAGP,CAEA,SAASK,EACPV,EACAX,EACAgB,EACAjB,GAEA,IAAKC,EAAOiC,qBAAsB,CAChCjC,EAAOiC,qBAAuB,E,CAGhC,MAAMY,EAAMlC,EAASZ,EAAKG,kBAE1B,IAAKF,EAAOiC,qBAAqBY,GAAM,CACrC7C,EAAOiC,qBAAqBY,GAAO,IAAInD,cACvCM,EAAOiC,qBAAqBY,GAAKC,QAAQ9B,E,CAG3C,OAAOhB,EAAOiC,qBAAqBY,EACrC,CAEA,SAASlB,EAAOa,GACd,IAAK,MAAMO,KAAQP,EAAM,CACvB,GAAIA,EAAKQ,eAAeD,GAAO,CAC7B,GAAIP,EAAKO,KAAUjB,EAAM,CACvB,OAAO,I,GAIb,OAAO,KACT,CAEA,SAASY,EAAgBF,GACvB,IAAK,MAAMO,KAAQP,EAAM,CACvB,GAAIA,EAAKQ,eAAeD,GAAO,CAC7B,GAAIE,MAAMC,QAAQV,EAAKO,IAAQ,CAC7B,OAAOP,EAAKO,E,GAIpB,CCrKA,MAAMI,EAAU,y+B,ugBCsBHC,EAAI,M,yBACP5B,KAAA6B,MAKF,GAkH0D7B,KAAA8B,OAC9D,KACE,MAAMC,EAAgB,WACpB/B,KAAK6B,MACJG,KACEC,GAAiB,wCAEdC,OAAQD,EAAGE,WAAwB,GACjCD,OAAOD,EAAGE,YAAc,EAAI,KAC5BF,EAAGE,0CAEOnC,KAAKoC,qEACkBH,EAAGhD,yBAEpCgD,EAAGI,SACC,kBAAkBJ,EAAGI,YACrB,iCAAiCJ,EAAGK,6BAA6BL,EAAGK,sEAG1E,IAAIb,MAAMQ,EAAGK,OACZN,KAAI,CAACO,EAAGC,KACP,MAAMC,EAAOD,EAAI,EACjB,MAAiB,mCACDxC,KAAKoC,oCAAoCH,EAAGhD,kBAAkBwD,oDACjDR,EAAGhD,kBAAkBwD,kDACzBA,qEAETzC,KAAKoC,oCAAoCH,EAAGhD,iBAAiBwD,oDAChDR,EAAGhD,iBAAiBwD,qDACrBA,oDAE7B,IAEAC,KAAK,sBACJ,IAAIjB,MAAM,KACTO,KAAI,CAACO,EAAGC,KACP,MAAMC,EAAOD,EAAI,EACjB,MAAiB,qCACDxC,KAAKoC,oCAAoCH,EAAGhD,kBAAkBwD,sDACjDR,EAAGhD,kBAAkBwD,iDAC5BA,yEAENzC,KAAKoC,oCAAoCH,EAAGhD,iBAAiBwD,sDAChDR,EAAGhD,iBAAiBwD,oDACxBA,wDAE1B,IAEAC,KAAK,oBAER1C,KAAK2C,WACS,iCACE3C,KAAKoC,yCAAyCH,EAAGK,2FAI7D,8BAKTI,KAAK,YAER,OAAOX,CAAG,E,mCA5KoC,I,WAIA,I,WAIA,I,YAIC,I,mOAiCJ,K,CAiB/Ca,qBACE5C,KAAK6B,MAAQ,GAEb,GAAI7B,KAAK6C,MACP7C,KAAK6B,MAAMV,KAAK,CACdmB,KAAMtC,KAAK6C,MACXV,WAAY,EACZlD,KAAM,IACNoD,SAAUrC,KAAK8C,OAEnB,GAAI9C,KAAK+C,MACP/C,KAAK6B,MAAMV,KAAK,CACdmB,KAAMtC,KAAK+C,MACXZ,WAAYnC,KAAKgD,MACjB/D,KAAM,IACNoD,SAAUrC,KAAKiD,OAEnB,GAAIjD,KAAKkD,MACPlD,KAAK6B,MAAMV,KAAK,CACdmB,KAAMtC,KAAKkD,MACXf,WAAYnC,KAAKmD,MACjBlE,KAAM,IACNoD,SAAUrC,KAAKoD,OAEnB,GAAIpD,KAAKqD,OACPrD,KAAK6B,MAAMV,KAAK,CACdmB,KAAMtC,KAAKqD,OACXlB,WAAYnC,KAAKsD,MACjBrE,KAAM,KACNoD,SAAUrC,KAAKuD,QAEnB,GAAIvD,KAAKwD,QACPxD,KAAK6B,MAAMV,KAAK,CACdmB,KAAMtC,KAAKwD,QACXrB,WAAYnC,KAAKyD,OACjBxE,KAAM,MACNoD,SAAUrC,KAAK0D,SAGnB1D,KAAKoC,SACHpC,KAAK6B,MACFG,KAAKC,GAAO,GAAGA,EAAGK,QAAQL,EAAGE,cAAcF,EAAGI,UAAY,OAC1DK,KAAK,IACR,WACA1C,KAAK2C,U,CAqEThE,oBACEqB,KAAK4C,oB,CAGPhE,SACE,OACEyB,EAACC,EAAI,KACHD,EAAA,OAAKsD,KAAK,OAAOC,MAAM,OAAM,YAAY5D,KAAKoC,UAC5C/B,EAAA,cAEDL,KAAK2C,YACJtC,EAAA,OACEuD,MAAM,oBACND,KAAK,SAAQ,YACF3D,KAAKoC,UAEf,IAAIX,MAAM,KAAKO,KAAI,IAClB3B,EAAA,OAAKuD,MAAM,yB,2dAnFvBC,EAAA,CAACvF,EAAmB,CAAEI,iBAAkB,a,gEC9I1C,MAAMoF,EAAS,i3D,MCuBFC,EAAG,M,oKAEN/D,KAAAgE,QAA+D,GAiG/DhE,KAAAiE,OAAS,KACfjE,KAAKkE,eAAeC,OACpBC,YAAW,IAAOpE,KAAKqE,UAAY,MAAO,GAAG,EAGvCrE,KAAAsE,QAAU,KAChBtE,KAAKuE,aAAaJ,MAAM,EAGlBnE,KAAAwE,SAAYrG,IAClBsG,OAAOC,QAAQvG,EAAEwG,QAAQC,SAAQ,EAAE3C,EAAI4C,MACrC7E,KAAKgE,QAAQ/B,GAAI4C,OAASA,CAAM,IAIlC,MAAMC,EAAU,GAChBL,OAAOM,KAAK/E,KAAKgE,SACdgB,OACAJ,SAAS3C,IACR,GAAIjC,KAAKgE,QAAQ/B,GAAI4C,OAAQC,EAAQ3D,KAAKnB,KAAKgE,QAAQ/B,GAAIgD,IAAI,IAGnE,GAAIH,EAAQI,OAAQlF,KAAKmF,KAAOL,EAAQM,OAAO,GAAG,QAE7CpF,KAAKmF,KAAOnF,KAAKiF,GAAG,E,+DAnHG,M,eACD,K,0FAwCL,K,0CAWkB,S,CAhD1CI,cACErF,KAAKqE,UAAY,MACjBrE,KAAKsF,O,CAUPC,aACEvF,KAAKmF,KAAOnF,KAAKiF,G,CAOnBO,gBACE,IAAKxF,KAAKyF,OAAQ,cAEXzF,KAAKgE,QACZhE,KAAKgE,QAAU,GAEfhE,KAAK0F,UAAY1F,KAAKyF,OACnBE,MAAM,KACN3D,KAAK4D,IACJ,MAAO3D,EAAIgD,GAAOW,EAAMD,MAAM,KAAKE,QAAQ5D,GAAOA,EAAGiD,SACrDlF,KAAKgE,QAAQ/B,GAAM,CAAEgD,IAAKA,EAAKJ,OAAQ,OACvC,OAAO5C,CAAE,IAEVS,KAAK,K,CAMVoD,cACE,IAAK9F,KAAK+F,KAAM/F,KAAKgG,M,CAmBfV,QACN,IAAKtF,KAAKmF,MAAQnF,KAAKqE,UAAW,OAClC,IAAKrE,KAAK+F,KAAM,CACd/F,KAAKgG,OACL,M,CAEF,UACUC,SAAmB,aAC3B,yBAA0BA,OAC1B,CACAjG,KAAKkG,WACLlG,KAAKmG,GAAK,IAAIC,sBAAsBC,IAClC,GAAIA,EAAK,GAAGC,eAAgB,CAC1BtG,KAAKgG,OACLhG,KAAKkG,U,KAITlG,KAAKmG,GAAGI,QAAQvG,KAAKV,K,MAChB8E,YAAW,IAAMpE,KAAKgG,QAAQ,I,CAG/BA,OACNhG,KAAKwG,UAAYxG,KAAKsE,QACtBtE,KAAKyG,QAAUzG,KAAKmF,KACpBnF,KAAK0G,gBAAgBvC,M,CA8Bf+B,WACN,GAAIlG,KAAKmG,GAAI,CACXnG,KAAKmG,GAAGQ,aACR3G,KAAKmG,GAAKS,S,EAIdC,oBACE7G,KAAKuF,aACLvF,KAAKwF,gBACLxF,KAAK8F,a,CAGPgB,mBACE9G,KAAKsF,O,CAGPyB,uBACE/G,KAAKkG,U,CAGPtH,SACE,MAAMoI,IAAYhH,KAAKyG,QACnB,CAAE,mBAAoB,OAAOzG,KAAKyG,YAClC,GAEJ,OACEpG,EAAA,OAAKuD,MAAM,OACTvD,EAAA,iBAAeuD,MAAM,kBAClB5D,KAAKiH,YACN5G,EAAA,OACEuD,MAAO,CACLsD,OAAQlH,KAAKqE,UACb8C,QAAS,KACT,YAAanH,KAAKoH,aAAe,SAEnC1G,MAAOsG,GAEP3G,EAAA,cAGJA,EAAA,OACEuD,MAAO,CACLyD,WAAY,KACZH,OAAQlH,KAAKqE,UACbiD,KAAMtH,KAAKiH,WACX,YAAajH,KAAKoH,aAAe,WAEnCG,SAAS,QACTtC,IAAiCjF,KAAKyG,QACtCe,QAAgDZ,UAChDa,IAAKzH,KAAKyH,IACVxD,OAAQjE,KAAKiE,OACbK,QAAStE,KAAKwG,YAEhBnG,EAAA,uBACEuD,MAAM,gBACN8D,wBAAyB1H,KAAKwE,SAC9BmD,OAAQ3H,KAAK0F,Y"}
1
+ {"version":3,"names":["supportsConstructibleStylesheets","CSSStyleSheet","e","cacheKeys","WeakMap","ConstructibleStyle","opts","target","propertyKey","cacheKeyProperty","componentWillLoad","render","componentWillRender","console","warn","constructor","name","addStylesheet","instance","get","set","host","getElement","cssText","root","shadowRoot","document","adoptedStyleSheets","getOrCreateStylesheet","willLoadResult","call","this","willRenderResult","renderedNode","isHost","appendStyleToHost","h","Host","HTMLElement","prototype","__constructableStyle","style","createElement","setAttribute","innerHTML","head","appendChild","node","targetName","getHostChildren","push","type","key","replace","prop","hasOwnProperty","Array","isArray","gridCss","Grid","grids","styles","css","map","bp","Number","breakpoint","cacheKey","template","cols","_","i","gItm","join","showHelper","constructSizeArray","sCols","sTpl","mCols","sSize","mTpl","lCols","mSize","lTpl","xlCols","lSize","xlTpl","xxlCols","xlSize","xxlTpl","part","class","__decorate","imgCss","Img","_srcSet","onLoad","nanoImgDidLoad","emit","setTimeout","hasLoaded","onError","nanoImgError","onResize","Object","entries","detail","forEach","active","srcOpts","keys","sort","src","length","_src","slice","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","imgStates","split","bpSrc","filter","lazyChanged","lazy","load","window","removeIO","io","IntersectionObserver","data","isIntersecting","observe","loadError","loadSrc","nanoImgWillLoad","disconnect","undefined","connectedCallback","componentDidLoad","disconnectedCallback","bgStyle","background","loaded","img__bg","autoHeight","img__image","hide","decoding","loading","alt","onNanoResizeStateChange","states"],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n try {\n return !!new CSSStyleSheet();\n } catch (e) {\n return false;\n }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n target: ComponentInterface,\n propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n return (target: ComponentInterface, propertyKey: string) => {\n if (!opts.cacheKeyProperty) {\n opts.cacheKeyProperty = propertyKey;\n }\n\n const { componentWillLoad, render, componentWillRender } = target;\n if (!componentWillLoad)\n console.warn(\n `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n );\n\n if (supportsConstructibleStylesheets) {\n const addStylesheet = (instance: ComponentInterface) => {\n if (\n !instance[opts.cacheKeyProperty] ||\n (cacheKeys.get(instance) &&\n cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n )\n return;\n\n cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n const host = getElement(instance);\n const cssText =\n typeof instance[propertyKey] === 'function'\n ? instance[propertyKey]()\n : instance[propertyKey];\n const root = (host.shadowRoot || document) as any;\n root.adoptedStyleSheets = [\n ...(root.adoptedStyleSheets || []),\n getOrCreateStylesheet(instance, target, cssText, opts),\n ];\n };\n\n target.componentWillLoad = function () {\n const willLoadResult =\n componentWillLoad && componentWillLoad.call(this);\n addStylesheet(this);\n return willLoadResult;\n };\n\n target.componentWillRender = function () {\n const willRenderResult =\n componentWillRender && componentWillRender.call(this);\n addStylesheet(this);\n return willRenderResult;\n };\n } else {\n target.render = function () {\n const cssText =\n typeof this[propertyKey] === 'function'\n ? this[propertyKey]()\n : this[propertyKey];\n let renderedNode: VNode = render.call(this);\n\n if (isHost(renderedNode)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n renderedNode = <Host>{renderedNode}</Host>;\n\n if (!('attachShadow' in HTMLElement.prototype)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n if (!target.__constructableStyle) {\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute(\n 'constructible-style',\n target.constructor.name\n );\n style.innerHTML = cssText;\n target.__constructableStyle = style;\n document.head.appendChild(style);\n }\n }\n }\n\n return renderedNode;\n };\n }\n };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n (getHostChildren(node) || []).push(\n <style type=\"text/css\" constructible-style={targetName}>\n {cssText}\n </style>\n );\n}\n\nfunction getOrCreateStylesheet(\n instance: ComponentInterface,\n target: ComponentInterface,\n cssText: string,\n opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n if (!target.__constructableStyle) {\n target.__constructableStyle = {};\n }\n\n const key = instance[opts.cacheKeyProperty];\n\n if (!target.__constructableStyle[key]) {\n target.__constructableStyle[key] = new CSSStyleSheet();\n target.__constructableStyle[key].replace(cssText);\n }\n\n return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (node[prop] === Host) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (Array.isArray(node[prop])) {\n return node[prop];\n }\n }\n }\n}\n\nexport interface ConstructibleStyleOptions {\n /**\n * Set this in case an instance of a component could produce different styles based on variables.\n * This will ensure that you get new styles for each mode.\n * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n */\n cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n */\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"grid size: s\";\n\n container-type: inline-size;\n display: block;\n\n .grid {\n display: grid;\n gap: var(--grid-row-gap) var(--grid-col-gap);\n block-size: inherit;\n min-block-size: inherit;\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n position: relative;\n\n .grid--helper {\n position: absolute;\n inset: 0;\n pointer-events: none;\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n inline-size: 100%;\n inset-inline-start: 0;\n text-align: center;\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: rgb(0 0 0 / 20%);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n\n .grid__helper-item {\n display: none;\n background: hsl(204deg 80% 72% / 25%);\n }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number | string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) sSize: number | string = 300;\n\n /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) mSize: number | string = 550;\n\n /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) lSize: number | string = 800;\n\n /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) xxlCols: number;\n\n /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n @Prop() sTpl?: string;\n\n /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n @Prop() mTpl?: string;\n\n /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n @Prop() lTpl?: string;\n\n /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n @Prop() xlTpl?: string;\n\n /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n @Prop() xxlTpl?: string;\n\n /** shows a grid helper to visualise where columns are */\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lCols)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = /* css */ `\n ${this.grids\n .map(\n (bp) => /* css */ `\n @container (min-width: ${\n !!Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper\n ? /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n : ''\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n /**\n * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n */\n --padding: 0;\n\n display: inline-block;\n object-fit: cover;\n object-position: center;\n background-size: cover;\n background-position: center;\n\n * {\n border-radius: inherit;\n }\n}\n\n:host([background]:not([background='false'])) {\n display: block;\n}\n\n.img {\n position: relative;\n object-fit: inherit;\n object-position: inherit;\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n min-inline-size: inherit;\n block-size: inherit;\n inline-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 100%;\n z-index: -1;\n}\n\n.img__image,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\n }\n }\n}\n\n.img__image {\n object-fit: inherit;\n object-position: inherit;\n min-block-size: inherit;\n min-inline-size: inherit;\n block-size: inherit;\n inline-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 1px;\n position: absolute;\n z-index: -1;\n }\n }\n}\n\n.img__bg {\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n overflow: auto;\n padding: var(--padding);\n\n &.no-height {\n position: absolute;\n inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /** This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n @Prop() alt?: string;\n\n /** The image URL. This attribute is mandatory for the `<img>` element. */\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /** Render image lazily, when it comes into the browser viewport **/\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n /** Render the image as a background image **/\n @Prop() background?: boolean;\n\n /** When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content **/\n @Prop() autoHeight: 'content' | 'image' = 'content';\n\n /** Emitted when the img src has been set */\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /** Emitted when the image has finished loading */\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /** Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src || this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{r as n,h as o,a as t,g as e}from"./index-9695db0a.js";const i=":host {\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n --nano-loader-base: #4a4a4a;\n --nano-loader-tint: #7d7d7d;\n --theme-color: #fff;\n --theme-tint-color: #90c6e7;\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n:host([theme=light]) {\n --nano-loader-base: #fff;\n --nano-loader-tint: white;\n --theme-color: #4a4a4a;\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n --color: #4a4a4a;\n}\n\n.hero {\n position: relative;\n}\n@container (min-width: 800px) {\n .hero {\n --quote-size: 3rem;\n }\n}\n.hero--rtl {\n --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n overflow: hidden;\n}\n.hero__bg-slot {\n position: absolute;\n inset: 0;\n}\n.hero__ctas {\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n}\n@media (max-width: 52em) {\n .hero__ctas {\n display: none;\n }\n}\n@media (max-width: 58em) {\n .hero__ctas {\n margin-block-end: -48px;\n }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n}\n.hero__img {\n display: block;\n --padding: inherit;\n}\n.hero__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n display: block;\n}\n@container (min-width: 800px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n}\n@container (min-width: 900px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n}\n.hero__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n background: none;\n}\n.hero__content {\n max-inline-size: 1440px;\n display: block;\n --grid-row-gap: 0;\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n}\n@container (min-width: 800px) {\n .hero__content {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n}\n@container (min-width: 900px) {\n .hero__content {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n}\n.hero__primary {\n margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n margin-block: 0;\n margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n font-size: 2rem;\n}\n@container (min-width: 800px) {\n .hero__primary {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n }\n .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n}\n@container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n}\n.hero__primary-content {\n max-inline-size: 45rem;\n --color: #fff;\n display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n padding-block: 10px 0;\n padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n .hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n .hero__primary-content ::slotted(.button[slot=primary-content]) {\n margin-block-start: 20px !important;\n }\n}\n.hero__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n display: flex;\n align-items: center;\n}\n@container (min-width: 800px) {\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n}\n@container (min-width: 900px) {\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n}\n.hero__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n}\n@container (min-width: 800px) {\n .hero__icon-box {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n margin-block-end: 0;\n}\n.hero__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n}\n@container (min-width: 800px) {\n .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n}\n.hero__quote::before, .hero__quote::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n}\n.hero__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n}\n@container (min-width: 800px) {\n .hero--sub .hero__content {\n margin-block-start: 40px;\n }\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n margin-block-start: 8px !important;\n }\n .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n margin-block-end: 18px !important;\n }\n}\n@container (min-width: 900px) {\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n}";const r=class{constructor(t){n(this,t);this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?o("div",{class:"hero__ctas"},o("slot",{name:"secondary-ctas"})):"",o("div",{class:"hero__scrim"},o("slot",{name:"scrim"})),o("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},o("div",{"grid-states":"xl-col-span-2"},o("div",{class:"hero__breadcrumbs"},o("slot",{name:"breadcrumb"}))),o("div",{"grid-states":this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},o("div",{class:"hero__primary"},o("div",{class:"hero__primary-content"},o("slot",{name:"back-btn"}),o("div",null,o("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&o("div",{"grid-states":"xl-col-span-1 xl-col-start-2 xl-row-start-2"},o("div",{class:"hero__secondary"},o("slot",{name:"secondary-content"}),this.hasIconBox&&o("div",{class:"hero__icon-box"},o("slot",{name:"icon-box"}),o("slot",{name:"icon-box-item"})),this.hasQuote&&o("div",{class:"hero__quote-content"},o("span",{class:"hero__quote"},o("slot",{name:"quote"})),o("div",{class:"hero__quote-author"},o("slot",{name:"quote-author"}))))))];this.hasIconBox=undefined;this.hasScrim=undefined;this.hasSecondaryContent=undefined;this.hasQuote=undefined;this.hasBg=undefined;this.hasBackBtn=undefined;this.hasCtas=undefined;this.breadCrumbs=undefined;this.iconBoxItems=undefined;this.imgSrc=undefined;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top"}breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){if(!window["MutationObserver"])return;if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.host,{childList:true})}processSlottedContent(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return o(t,null,o("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":n,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},o("div",{class:"hero__bg-wrap"},!!this.imgSrc&&o("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},o(this.HeroContent,null)),!this.imgSrc&&[o("div",{class:"hero__bg-slot"},o("slot",{name:"background"})),o(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=i;export{r as nano_hero};
5
+ //# sourceMappingURL=nano-hero.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["heroCss","Hero","this","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","largeScreenBP","hasSecondaryContent","hasQuote","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","window","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","hero","theme","level","lazy","background","srcSet","imgSrcSet","src"],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get($colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n\n --nano-loader-base: #{map.get($colors, black)};\n --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n --theme-color: #{map.get($colors, white)};\n --theme-tint-color: #{map.get($colors, lightblue)};\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get($colors, white)};\n --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n --theme-color: #{map.get($colors, black)};\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get($colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n @container (min-width: 800px) {\n --quote-size: 3rem;\n }\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n inset: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-block-end: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n @container (min-width: 800px) {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n @container (min-width: 900px) {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n ::slotted(*[slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-inline-size: 1440px;\n display: block;\n\n --grid-row-gap: 0;\n\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n\n @container (min-width: 800px) {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n\n @container (min-width: 900px) {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin-block: 0;\n margin-inline: 16px;\n }\n\n .hero--backbtn & {\n margin-inline-start: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n @container (min-width: 800px) {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n }\n\n @container (min-width: 900px) {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n }\n\n &__primary-content {\n max-inline-size: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding-block: 10px 0;\n padding-inline: 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n }\n\n @container (min-width: 800px) {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n @container (min-width: 800px) {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n @container (min-width: 900px) {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n }\n\n &__icon-box {\n background: rgb(0 0 0 / 70%);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n @container (min-width: 800px) {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']) {\n margin-block-end: 0;\n }\n }\n\n &__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n\n @container (min-width: 800px) {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content {\n @container (min-width: 800px) {\n margin-block-start: 40px;\n\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']) {\n margin-block-end: 18px !important;\n }\n }\n\n @container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /** src for background image. For more control use the `background` slot instead. */\n @Prop() imgSrc?: string;\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() imgSrcSet?: string = null;\n\n /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n @Prop() largeScreenBP: number = 900;\n\n /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n @Prop() theme: 'dark' | 'light' = 'dark';\n\n /** Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' | 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.host.querySelector('[slot=\"quote\"]') ||\n !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <div grid-states=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </div>\n <div\n grid-states={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </div>\n {this.hasSecondaryContent && (\n <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </div>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host>\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["heroCss","Hero","this","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","largeScreenBP","hasSecondaryContent","hasQuote","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","window","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","hero","theme","level","lazy","background","srcSet","imgSrcSet","src"],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get($colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n\n --nano-loader-base: #{map.get($colors, black)};\n --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n --theme-color: #{map.get($colors, white)};\n --theme-tint-color: #{map.get($colors, lightblue)};\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get($colors, white)};\n --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n --theme-color: #{map.get($colors, black)};\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get($colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n @container (min-width: 800px) {\n --quote-size: 3rem;\n }\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n inset: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-block-end: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n @container (min-width: 800px) {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n @container (min-width: 900px) {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n ::slotted(*[slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-inline-size: 1440px;\n display: block;\n\n --grid-row-gap: 0;\n\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n\n @container (min-width: 800px) {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n\n @container (min-width: 900px) {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin-block: 0;\n margin-inline: 16px;\n }\n\n .hero--backbtn & {\n margin-inline-start: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n @container (min-width: 800px) {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n }\n\n @container (min-width: 900px) {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n }\n\n &__primary-content {\n max-inline-size: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding-block: 10px 0;\n padding-inline: 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n }\n\n @container (min-width: 800px) {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n @container (min-width: 800px) {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n @container (min-width: 900px) {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n }\n\n &__icon-box {\n background: rgb(0 0 0 / 70%);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n @container (min-width: 800px) {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']) {\n margin-block-end: 0;\n }\n }\n\n &__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n\n @container (min-width: 800px) {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content {\n @container (min-width: 800px) {\n margin-block-start: 40px;\n\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']) {\n margin-block-end: 18px !important;\n }\n }\n\n @container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /** src for background image. For more control use the `background` slot instead. */\n @Prop() imgSrc?: string;\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() imgSrcSet?: string = null;\n\n /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n @Prop() largeScreenBP: number = 900;\n\n /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n @Prop() theme: 'dark' | 'light' = 'dark';\n\n /** Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' | 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.host.querySelector('[slot=\"quote\"]') ||\n !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <div grid-states=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </div>\n <div\n grid-states={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </div>\n {this.hasSecondaryContent && (\n <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </div>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host>\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{r as t,h as o,a as i,g as n,c as e}from"./index-9695db0a.js";import{f as s}from"./focus-visible-8b2c14da.js";import{P as r}from"./popover-e5e7a641.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const l=class{constructor(o){t(this,o);this.handleClick=t=>{if(this.type==="button")return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type;i.style.display="none";o.appendChild(i);i.click();i.remove()}};this.iconName=undefined;this.iconSrc=undefined;this.type="button";this.name=undefined;this.value=undefined;this.label=undefined;this.showTooltip=false;this.disabled=false;this.href=undefined;this.rel=undefined;this.target=undefined;this.form=undefined}async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement){return t}if(typeof t==="string"){const o=document.getElementById(t);if(o instanceof HTMLFormElement){return o}}return null}componentDidLoad(){s.observe(this.button)}connectedCallback(){if(this.button)s.observe(this.button)}disconnectedCallback(){s.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return o(i,{"aria-disabled":this.disabled?"true":null},o(t,{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,rel:this.rel||undefined,type:!this.href&&this.type?this.type:undefined},o("span",{class:"icon-button__label"},this.label),o("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"})))}render(){if(this.showTooltip){return o("nano-tooltip",{content:this.label},this.content())}return this.content()}get host(){return n(this)}};l.style=a;const p=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0.125s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;--background:var(--nano-tooltip-bg-color, #4a4a4a);--color:var(--nano-tooltip-color, #fff);display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:var(--background);font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:var(--color);opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:var(--background);transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner .tooltip{transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);border-block-end:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);border-block-start:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;border-inline-start:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;border-inline-end:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const h=class{constructor(o){t(this,o);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.isVisible=false;this.label="";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.hoist=false;this.trigger="hover focus"}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}handleOpenChange(){this.open?this.show():this.hide()}async show(){var t;if(this.isVisible||this.disabled){return}const o=this.nanoShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(typeof((t=this.tooltipPositioner)===null||t===void 0?void 0:t.showPopover)==="function"){this.hoist=true;this.popover.show();this.tooltipPositioner.showPopover()}else{this.popover.show()}}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide();setTimeout((()=>{var t;if(!this.open&&typeof((t=this.positioner)===null||t===void 0?void 0:t.hidePopover)==="function"){this.positioner.hidePopover()}}),300)}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new r(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover)this.popover.destroy()}render(){return o(i,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},o("slot",{onSlotchange:this.handleSlotChange}),o("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner",popover:"manual"},o("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},o("slot",{name:"content",onSlotchange:()=>this.setLabel()},this.content),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return n(this)}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};h.style=p;export{l as nano_icon_button,h as nano_tooltip};
5
+ //# sourceMappingURL=nano-icon-button_2.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["iconButtonCss","IconButton","this","handleClick","ev","type","formEl","findForm","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","async","button","focus","form","host","closest","HTMLFormElement","el","getElementById","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","href","undefined","h","Host","disabled","onClick","part","ref","class","name","value","target","rel","label","iconName","src","iconSrc","lazy","render","showTooltip","tooltipCss","Tooltip","isVisible","handleBlur","hasTrigger","hide","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","getTarget","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","querySelectorAll","textContent","map","node","join","trim","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","_a","tooltipPositioner","showPopover","hoist","popover","slHide","nanoHide","setTimeout","positioner","hidePopover","children","find","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","syncOptions","setOptions","strategy","placement","distance","skidding","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","hidden","componentDidUpdate","destroy","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onSlotchange","role"],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /**\n * @prop --color: defaults to #{map.get($colors, palegrey)};\n * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get($colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n * @prop --box-shadow: defaults to none;\n */\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{map.get($colors, darkblue--faded)};\n --hover-color: #{map.get($colors, blue)};\n --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n --background: transparent;\n --padding: #{$spacing-small};\n --box-shadow: none;\n\n border-radius: var(--border-radius);\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: inherit;\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n box-shadow: var(--box-shadow);\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button__label {\n @include visually-hide();\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n @Element() host: HTMLNanoIconButtonElement;\n\n /** The name of the icon to draw. */\n @Prop() iconName?: string;\n\n /** An external URL of an SVG file. */\n @Prop() iconSrc?: string;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n @Prop({ reflect: true }) name?: string;\n\n /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n @Prop({ reflect: true }) value?: string;\n\n /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. */\n @Prop() label!: string;\n\n /** display the label as a `<nano-tooltip />` */\n @Prop() showTooltip: boolean = false;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. */\n @Prop() href: string | undefined;\n\n /** Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n @Prop() rel: string | undefined;\n\n /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n @Prop() target: string | undefined;\n\n /** The HTML form element or form element id.\n * Used to submit a form when the button is not a child of the form. */\n @Prop() form: HTMLFormElement | string;\n\n /** Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /**\n * Finds the form element based on the provided `form` selector\n * or element reference provided.\n * @returns the found form element (if found)\n */\n private findForm(): HTMLFormElement | null {\n const { form, host } = this;\n if (!form) return host.closest('form');\n\n if (form instanceof HTMLFormElement) {\n return form;\n }\n if (typeof form === 'string') {\n const el = document.getElementById(form);\n if (el instanceof HTMLFormElement) {\n return el;\n }\n }\n return null;\n }\n\n private handleClick = (ev: Event) => {\n if (this.type === 'button') return;\n const formEl = this.findForm();\n\n if (formEl) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n formEl.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n };\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n <TagType\n onClick={this.handleClick}\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n name={this.name}\n value={this.value}\n href={this.href || undefined}\n target={this.href && this.target ? this.target : undefined}\n rel={this.rel || undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <span class=\"icon-button__label\">{this.label}</span>\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n </Host>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n }\n return this.content();\n }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n --max-width: 20rem;\n --hide-delay: 0.125s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n --background: #{$tooltip-bg-color};\n --color: #{$tooltip-color};;\n\n /* autoprefixer: ignore next */\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-inline-size: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: var(--background);\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: var(--color);\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n inline-size: 0;\n block-size: 0;\n color: var(--background);\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n border: 0;\n background: none;\n padding: 0;\n overflow: visible;\n color: unset;\n\n &::backdrop { display: none; }\n\n &[popover],\n &:popover-open {\n inset: unset;\n }\n\n #{$self} {\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n inset-block-end: 100%;\n inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n border-block-end: #{$tooltip-arrow-size} solid;\n border-inline-start: #{$tooltip-arrow-size} solid transparent;\n border-inline-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n inset-inline-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n inset-inline: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n inset-block-start: 100%;\n inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n border-block-start: #{$tooltip-arrow-size} solid;\n border-inline-start: #{$tooltip-arrow-size} solid transparent;\n border-inline-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n inset-inline-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n inset-inline: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n inset-block-start: calc(50% - #{$tooltip-arrow-size});\n inset-inline-start: 100%;\n border-inline-start: #{$tooltip-arrow-size} solid;\n border-block-start: #{$tooltip-arrow-size} solid transparent;\n border-block-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n inset-block-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n inset-block: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n inset-block-start: calc(50% - #{$tooltip-arrow-size});\n inset-inline-end: 100%;\n border-inline-end: #{$tooltip-arrow-size} solid;\n border-block-start: #{$tooltip-arrow-size} solid transparent;\n border-block-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n inset-block-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n inset-block: auto #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: HTMLElement;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-label');\n }\n newTarget.setAttribute('aria-label', this.label);\n this._target = newTarget;\n }\n\n private label = '';\n\n @Element() host: HTMLNanoTooltipElement;\n\n /** The tooltip's content. Alternatively, you can use the content slot. */\n @Prop() content = '';\n\n @Watch('content')\n setLabel() {\n const contentSlotNodes = Array.from(\n this.host.querySelectorAll('[slot=\"content\"]')\n );\n const textContent = contentSlotNodes\n .map((node) => node.textContent)\n .join(' ')\n .trim();\n\n if (!this.target) {\n this.target = this.getTarget();\n\n if (!this.target) return;\n }\n\n this.label = textContent || this.content;\n this.target.setAttribute('aria-label', this.label);\n }\n\n /**\n * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @Prop() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** Set to true to disable the tooltip so it won't show when triggered. */\n @Prop() disabled = false;\n\n /** The distance in pixels from which to offset the tooltip away from its target. */\n @Prop() distance = 10;\n\n /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** The distance in pixels from which to offset the tooltip along its target. */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop({ mutable: true }) hoist = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the tooltip has shown and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the tooltip has hidden and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /** Shows the tooltip. */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible || this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n // @ts-ignore\n if (typeof this.tooltipPositioner?.showPopover === 'function') {\n this.hoist = true;\n this.popover.show();\n // @ts-ignore\n this.tooltipPositioner.showPopover();\n } else {\n this.popover.show();\n }\n }\n\n /** Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n\n setTimeout(() => {\n // @ts-ignore\n if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n // @ts-ignore\n this.positioner.hidePopover();\n }\n }, 300);\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n this.setLabel();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n if (this.popover) this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n // @ts-expect-error\n popover=\"manual\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n {this.content}\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;;8JAAA,MAAMA,EAAgB,g6C,MCqBTC,EAAU,M,yBAyEbC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,OAAS,SAAU,OAC5B,MAAMC,EAASJ,KAAKK,WAEpB,GAAID,EAAQ,CACVF,EAAGI,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOH,KAAKG,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAOQ,YAAYL,GACnBA,EAAWM,QACXN,EAAWO,Q,4DAzEgD,S,+EAahC,M,cAGK,M,iFAoBpCC,iBACEf,KAAKgB,OAAOC,O,CAQNZ,WACN,MAAMa,KAAEA,EAAIC,KAAEA,GAASnB,KACvB,IAAKkB,EAAM,OAAOC,EAAKC,QAAQ,QAE/B,GAAIF,aAAgBG,gBAAiB,CACnC,OAAOH,C,CAET,UAAWA,IAAS,SAAU,CAC5B,MAAMI,EAAKd,SAASe,eAAeL,GACnC,GAAII,aAAcD,gBAAiB,CACjC,OAAOC,C,EAGX,OAAO,I,CAmBTE,mBACEC,EAAaC,QAAQ1B,KAAKgB,O,CAG5BW,oBACE,GAAI3B,KAAKgB,OAAQS,EAAaC,QAAQ1B,KAAKgB,O,CAG7CY,uBACEH,EAAaI,UAAU7B,KAAKgB,O,CAGtBc,UACN,MAAMC,EAA0B/B,KAAKgC,OAASC,UAAY,SAAW,IAErE,OACEC,EAACC,EAAI,iBAAgBnC,KAAKoC,SAAW,OAAS,MAC5CF,EAACH,EAAO,CACNM,QAASrC,KAAKC,YACdqC,KAAK,OACLC,IAAMjB,GAAQtB,KAAKgB,OAASM,EAC5BkB,MAAO,CACL,cAAe,KACf,wBAAyBxC,KAAKoC,UAEhCK,KAAMzC,KAAKyC,KACXC,MAAO1C,KAAK0C,MACZV,KAAMhC,KAAKgC,MAAQC,UACnBU,OAAQ3C,KAAKgC,MAAQhC,KAAK2C,OAAS3C,KAAK2C,OAASV,UACjDW,IAAK5C,KAAK4C,KAAOX,UACjB9B,MAAOH,KAAKgC,MAAQhC,KAAKG,KAAOH,KAAKG,KAAO8B,WAE5CC,EAAA,QAAMM,MAAM,sBAAsBxC,KAAK6C,OACvCX,EAAA,aACEO,KAAMzC,KAAK8C,SACXC,IAAK/C,KAAKgD,QAAO,cACL,OACZC,KAAM,MACNX,KAAK,U,CAOfY,SACE,GAAIlD,KAAKmD,YAAa,CACpB,OAAOjB,EAAA,gBAAcJ,QAAS9B,KAAK6C,OAAQ7C,KAAK8B,U,CAElD,OAAO9B,KAAK8B,S,uCC/JhB,MAAMsB,EAAa,g+G,MCuBNC,EAAO,M,yLACVrD,KAAAsD,UAAY,MAiBZtD,KAAA6C,MAAQ,GAoLR7C,KAAAuD,WAAa,KACnB,GAAIvD,KAAKwD,WAAW,SAAU,CAC5BxD,KAAKyD,M,GAIDzD,KAAAC,YAAc,KACpB,GAAID,KAAKwD,WAAW,SAAU,CAC5BxD,KAAK0D,KAAO1D,KAAKyD,OAASzD,KAAK2D,M,GAI3B3D,KAAA4D,YAAc,KACpB,GAAI5D,KAAKwD,WAAW,SAAU,CAC5BxD,KAAK2D,M,GAID3D,KAAA6D,cAAiBC,IAEvB,GAAI9D,KAAK0D,MAAQI,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNhE,KAAKyD,M,GAIDzD,KAAAiE,gBAAkB,KACxB,GAAIjE,KAAKwD,WAAW,SAAU,CAC5BxD,KAAK2D,M,GAID3D,KAAAkE,eAAiB,KACvB,GAAIlE,KAAKwD,WAAW,SAAU,CAC5BxD,KAAKyD,M,GAIDzD,KAAAmE,iBAAmB,KACzBnE,KAAK2C,OAAS3C,KAAKoE,WAAW,E,aAtNd,G,eAsCD,M,cAGE,M,cAGA,G,UAG4B,M,cAG5B,E,WAMc,M,aAOP,a,CA/EdzB,aACV,OAAO3C,KAAKqE,O,CAEF1B,WAAO2B,GACjB,GAAIA,IAActE,KAAKqE,SAAWrE,KAAKqE,QAAS,CAC9CrE,KAAKqE,QAAQE,gBAAgB,a,CAE/BD,EAAUE,aAAa,aAAcxE,KAAK6C,OAC1C7C,KAAKqE,QAAUC,C,CAWjBG,WACE,MAAMC,EAAmBC,MAAMC,KAC7B5E,KAAKmB,KAAK0D,iBAAiB,qBAE7B,MAAMC,EAAcJ,EACjBK,KAAKC,GAASA,EAAKF,cACnBG,KAAK,KACLC,OAEH,IAAKlF,KAAK2C,OAAQ,CAChB3C,KAAK2C,OAAS3C,KAAKoE,YAEnB,IAAKpE,KAAK2C,OAAQ,M,CAGpB3C,KAAK6C,MAAQiC,GAAe9E,KAAK8B,QACjC9B,KAAK2C,OAAO6B,aAAa,aAAcxE,KAAK6C,M,CA+C9CsC,mBACEnF,KAAK0D,KAAO1D,KAAK2D,OAAS3D,KAAKyD,M,CAqBjC1C,a,MAEE,GAAIf,KAAKsD,WAAatD,KAAKoC,SAAU,CACnC,M,CAEF,MAAMgD,EAASpF,KAAKqF,SAASC,OAC7B,GAAIF,EAAOG,iBAAkB,CAC3BvF,KAAK0D,KAAO,MACZ,M,CAGF1D,KAAKsD,UAAY,KACjBtD,KAAK0D,KAAO,KAEZ,WAAW8B,EAAAxF,KAAKyF,qBAAiB,MAAAD,SAAA,SAAAA,EAAEE,eAAgB,WAAY,CAC7D1F,KAAK2F,MAAQ,KACb3F,KAAK4F,QAAQjC,OAEb3D,KAAKyF,kBAAkBC,a,KAClB,CACL1F,KAAK4F,QAAQjC,M,EAMjB5C,aAEE,IAAKf,KAAKsD,UAAW,CACnB,M,CAGF,MAAMuC,EAAS7F,KAAK8F,SAASR,OAC7B,GAAIO,EAAON,iBAAkB,CAC3BvF,KAAK0D,KAAO,KACZ,M,CAGF1D,KAAKsD,UAAY,MACjBtD,KAAK0D,KAAO,MACZ1D,KAAK4F,QAAQnC,OAEbsC,YAAW,K,MAET,IAAK/F,KAAK0D,cAAe8B,EAAAxF,KAAKgG,cAAU,MAAAR,SAAA,SAAAA,EAAES,eAAgB,WAAY,CAEpEjG,KAAKgG,WAAWC,a,IAEjB,I,CAKG7B,YAEN,MAAMzB,EAAS,IAAIgC,MAAMC,KAAK5E,KAAKmB,KAAK+E,WAAWC,MAChD7E,GACCA,EAAG8E,QAAQC,gBAAkB,SAC7B/E,EAAGgF,aAAa,UAAY,YAGhC,IAAK3D,EAAQ,CACX,MAAM,IAAI4D,MAAM,sD,CAGlB,OAAO5D,C,CAGDa,WAAWgD,GACjB,MAAMC,EAAWzG,KAAK0G,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAGnBK,cACN7G,KAAK4F,QAAQkB,WAAW,CACtBC,SAAU/G,KAAK2F,MAAQ,QAAU,WACjCqB,UAAWhH,KAAKgH,UAChBC,SAAUjH,KAAKiH,SACfC,SAAUlH,KAAKkH,SACfC,kBAAmBnH,KAAKoH,QACxBC,YAAa,IAAMrH,KAAKsH,cAAchC,OACtCiC,YAAa,IAAMvH,KAAKwH,cAAclC,Q,CAkD1C9D,mBACExB,KAAK2C,OAAS3C,KAAKoE,YACnBpE,KAAK4F,QAAU,IAAI6B,EAAQzH,KAAK2C,OAAQ3C,KAAKyF,mBAC7CzF,KAAK6G,cACL7G,KAAKyE,WAGLzE,KAAKyF,kBAAkBiC,QAAU1H,KAAK0D,KACtC,GAAI1D,KAAK0D,KAAM,CACb1D,KAAK2D,M,EAITgE,qBACE3H,KAAK6G,a,CAGPjF,uBACE,GAAI5B,KAAK4F,QAAS5F,KAAK4F,QAAQgC,S,CAGjC1E,SACE,OACEhB,EAACC,EAAI,CACH0F,UAAW7H,KAAK6D,cAChBiE,YAAa9H,KAAKiE,gBAClB8D,WAAY/H,KAAKkE,eACjB8D,OAAQhI,KAAKuD,WACb0E,QAASjI,KAAK4D,YACdvB,QAASrC,KAAKC,aAEdiC,EAAA,QAAMgG,aAAclI,KAAKmE,mBACzBjC,EAAA,OACEK,IAAMjB,GAAQtB,KAAKyF,kBAAoBnE,EACvCkB,MAAM,qBAENoD,QAAQ,UAER1D,EAAA,OACEI,KAAK,OACLC,IAAMjB,GAAQtB,KAAKoH,QAAU9F,EAC7BkB,MAAO,CACL4E,QAAS,KACT,gBAAiBpH,KAAK0D,MAExByE,KAAK,UAAS,cACDnI,KAAK0D,KAAO,QAAU,QAEnCxB,EAAA,QAAMO,KAAK,UAAUyF,aAAc,IAAMlI,KAAKyE,YAC3CzE,KAAK8B,SAERI,EAAA,OAAKM,MAAM,gBAAe,6B"}
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{i as n,r as i,h as o,a as t,g as r}from"./index-9695db0a.js";import{c as s}from"./theme-82feb8cf.js";let e;const a=()=>{if(!e){const n=window;n.Nanoicons=n.Nanoicons||{};e=n.Nanoicons.map=n.Nanoicons.map||new Map}return e};const c=n=>{let i=h(n.src);if(i){return i}i=f(n.name,n.icon);if(i){return l(i)}if(n.icon){i=h(n.icon);if(i){return i}}return null};const l=i=>{const o=a().get(i);if(o){return o}return n(`../nano-assets/fontawesome-pro/svgs/${i}.svg`)};const f=(n,i)=>{if(!n&&i&&!d(i)){n=i}if(u(n)){n=m(n)}if(!u(n)||n.trim()===""){return null}const o=n.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+n);return null}return n};const h=n=>{if(u(n)){n=n.trim();if(d(n)){return n}}return null};const d=n=>n.length>0&&/(\/|\.)/.test(n);const u=n=>typeof n==="string";const m=n=>n.toLowerCase();const p=n=>{if(n){const i=document.createElement("div");i.innerHTML=n;for(let n=i.childNodes.length-1;n>=0;n--){if(i.childNodes[n].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[n])}}const o=i.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const n=o.getAttribute("class")||"";o.setAttribute("class",(n+" sc-nano-icon s-nano-icon svg").trim());if(v(o)){return i.innerHTML}}}return""};const v=n=>{if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<n.attributes.length;i++){const o=n.attributes[i].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<n.childNodes.length;i++){if(!v(n.childNodes[i])){return false}}}return true};const g=new Map;const b=new Map;const y=n=>{let i=b.get(n);if(!i){i=fetch(n).then((i=>{if(i.ok){return i.text().then((i=>{g.set(n,p(i))}))}g.set(n,"")}));b.set(n,i)}return i};const w=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const z=class{constructor(n){i(this,n);this.svgContent=undefined;this.isVisible=false;this.isLoading=true;this.color=undefined;this.ariaLabel=undefined;this.flipRtl=undefined;this.name=undefined;this.src=undefined;this.icon=undefined;this.size=undefined;this.lazy=true}setAriaLabel(){if(!this.ariaLabel&&this.el.role&&this.el.role!=="presentation"){const n=f(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(n,i,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((n=>{if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:i});t.observe(n)}else{o()}}loadIcon(){if(this.isVisible){const n=c(this);if(n){if(g.has(n)){this.svgContent=g.get(n);requestAnimationFrame((()=>this.isLoading=false))}else{y(n).then((()=>{this.svgContent=g.get(n);requestAnimationFrame((()=>this.isLoading=false))}))}}}this.setAriaLabel()}render(){const n=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return o(t,{role:this.el.role||"presentation",class:Object.assign(Object.assign({},s(this.color)),{loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!n})},this.svgContent?o("div",{class:"icon-inner",innerHTML:this.svgContent}):o("div",{class:"icon-inner"}))}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};z.style=w;export{z as nano_icon};
5
+ //# sourceMappingURL=nano-icon.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","Icon","setAriaLabel","this","ariaLabel","el","role","label","split","slice","connectedCallback","waitUntilVisible","isVisible","loadIcon","disconnectedCallback","io","disconnect","undefined","componentWillLoad","rootMargin","cb","lazy","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isLoading","render","flipRtl","ownerDocument","dir","h","Host","class","Object","assign","createColorClasses","color","loading","size"],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons || {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string | undefined,\n icon: string | undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) || iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') || '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /**\n * @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n */\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /**\n * Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * Specifies the label to use for accessibility. Defaults to the icon name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /**\n * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n */\n @Prop() flipRtl?: boolean;\n\n /**\n * Specifies which icon to use from the built-in set of icons.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() icon?: any;\n\n /**\n * The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n */\n @Prop() size?: 'small' | 'large';\n\n /**\n * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel && this.el.role && this.el.role !== 'presentation') {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl ||\n (this.name &&\n (this.name.indexOf('arrow') > -1 ||\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role={this.el.role || 'presentation'}\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{r as n,c as t,h as i,a as e,g as a}from"./index-9695db0a.js";import{c as o}from"./dom-8599fac1.js";import{c as s}from"./theme-82feb8cf.js";import{d as r,a as l}from"./throttle-ac4fcefa.js";import{F as c,a as h}from"./form-control-881fa3af.js";const p='.sc-nano-input-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n display: flex;\n gap: 1rem;\n container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n padding-block: 0;\n padding-inline: var(--padding-start) 0;\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n color: var(--label-color);\n font-size: var(--label-font-size);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n margin-block: unset;\n margin-inline: 0 5px;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n margin-block: unset;\n margin-inline: auto 0;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, "currentcolor");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n position: relative;\n inline-size: 100%;\n padding: 0 !important;\n color: currentcolor;\n display: block;\n}\n\n.nano-color.sc-nano-input-h {\n color: var(--nano-color-base);\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n}\n\n.input__native-ctrl.sc-nano-input {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n inline-size: 100%;\n max-inline-size: 100%;\n max-block-size: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n line-height: 2.5em;\n \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n line-height: 2.1em;\n min-block-size: 2.1em;\n padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-block-size: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n line-height: 1.5em;\n padding-block: var(--padding-top) 0.25em;\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n -webkit-user-select: none;\n user-select: none;\n}';let u=0;const d=class{get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(n){if(this._nativeInputWrap===n)return;this._nativeInputWrap=n;this.setDataListOpts()}constructor(i){n(this,i);this.nanoInput=t(this,"nanoInput",7);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoDidLoad=t(this,"nanoDidLoad",7);this.nanoDidUnload=t(this,"nanoDidUnload",7);this.nanoValidate=t(this,"nanoValidate",7);this.inputId=`nano-input-${u++}`;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.validate=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(n)n.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:n})};this.onInput=n=>{const t=n.target;this.value=(t===null||t===void 0?void 0:t.value)||"";this.nanoInput.emit(n)};this.onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};this.onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=n=>{if(this.clearInput&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}this.value="";this.nativeInput.value="";const t=new window.Event("change");this.nativeInput.dispatchEvent(t)};this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.errorMessage="";this.datalist=null;this._invalid=false;this.color=undefined;this.accept=undefined;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.clearOnEdit=undefined;this.debounce=0;this.disabled=false;this.inputmode=undefined;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.step=undefined;this.size=undefined;this.type="text";this.form=undefined;this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=r(this.validate,50);this.handleBlur=this.handleBlur.bind(this)}setDataListOpts(){if(!this.datalist)return;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign({},n),{skidding:-1,tetherTo:this.nativeInputWrap})}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeInput)return"";return this.nativeInput.validationMessage}shouldValidate(){if(!this.hasRendered)return;requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}debounceChanged(){this.nanoChange=l(this.nanoChange,this.debounce)}async reportValidity(n){return new Promise((t=>{if(n)this.validate();setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}async select(){if(this.nativeInput){this.nativeInput.select()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(n){if(this.nativeInput){this.nativeInput.setCustomValidity(n);this.validate()}}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.value=""}handleBlur(n){if(!this.hasFocus)return;const t=n;let i;requestAnimationFrame((()=>{if(n instanceof KeyboardEvent&&t.key){if(t.key!=="Tab")return;i=document.activeElement}else if(n instanceof FocusEvent){i=document.activeElement}else i=n.target;if(o(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:n,clearOnEdit:t}=this;return t===undefined?n==="password":t}getValue(){return this.value||""}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(!!this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((n=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const n=this.getValue();const t=this.inputId+"-lbl";const a=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const o=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const r=(({el:n,floatLabel:t,label:i,errorMessage:e,type:a,showInlineError:o,hasHelperSlot:s,hasLabelSlot:r,hideLabel:l,placeholder:c,maxlength:h,charCount:p,showCharCount:u,rtl:d,hasHelperEndSlot:f})=>({el:n,floatLabel:t,label:i,errorMessage:e,type:a,showInlineError:o,hasHelperSlot:s,hasLabelSlot:r,hideLabel:l,placeholder:c,maxlength:h,charCount:p,showCharCount:u,rtl:d,hasHelperEndSlot:f}))(this);const l=Object.assign(Object.assign({},r),{labelId:t,moreId:a,helperEndId:o,hasValue:this.hasValue(),controlId:this.inputId});const p=(({clearInput:n,readonly:t,disabled:i})=>({clearInput:n,readonly:t,disabled:i,clearControl:this.clearInput}))(this);return i(e,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},s(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},i("div",{style:{width:"100%"}},i(c,Object.assign({},l),i(h,Object.assign({},p,{onClearText:this.clearTextInput,control:this.el,ref:n=>this.nativeInputWrap=n}),this.type!=="textarea"&&i("input",{id:this.inputId,class:"input__native-ctrl",ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+a+" "+o,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onBlur:this.handleBlur,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+a+" "+o,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate,onBlur:this.handleBlur}))),i("slot",null)))}get el(){return a(this)}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};d.style=p;export{d as nano_input};
5
+ //# sourceMappingURL=nano-input.entry.js.map