@pnx-mixtape/mxds 0.0.2 → 0.0.4

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 (265) hide show
  1. package/README.md +13 -13
  2. package/package.json +5 -4
  3. package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap +3 -3
  4. package/src/Atom/Background/_background.css +1 -22
  5. package/src/Atom/Blockquote/_blockquote.css +1 -1
  6. package/src/Atom/Button/Button.stories.ts +4 -6
  7. package/src/Atom/Button/README.md +3 -3
  8. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +23 -11
  9. package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +2 -2
  10. package/src/Atom/Button/_buttons-styles.css +1 -1
  11. package/src/Atom/Button/_buttons.css +5 -1
  12. package/src/Atom/Button/button.twig +6 -4
  13. package/src/Atom/Button/twig/story-button.twig +11 -0
  14. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +1 -1
  15. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +2 -2
  16. package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +1 -1
  17. package/src/Atom/Heading/_headings.css +1 -1
  18. package/src/Atom/Heading/heading.twig +19 -1
  19. package/src/Atom/Icon/README.md +1 -1
  20. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +3 -3
  21. package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +3 -3
  22. package/src/Atom/Icon/_extended-set.css +1 -1
  23. package/src/Atom/Icon/_icon.css +5 -5
  24. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +1 -1
  25. package/src/Atom/Image/_image.css +1 -1
  26. package/src/Atom/Link/Link.stories.ts +31 -7
  27. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +46 -6
  28. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +3 -3
  29. package/src/Atom/Link/_links.css +24 -2
  30. package/src/Atom/Link/link.twig +8 -6
  31. package/src/Atom/Link/twig/story-link.twig +11 -0
  32. package/src/Atom/Media/Media.stories.ts +17 -1
  33. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +17 -2
  34. package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +2 -2
  35. package/src/Atom/Media/_media.css +1 -1
  36. package/src/Atom/Media/media.twig +1 -5
  37. package/src/Atom/Media/twig/story-media.twig +11 -0
  38. package/src/Atom/NavList/__snapshots__/NavList.stories.ts.snap +1 -1
  39. package/src/Atom/NavList/nav-list.css +1 -1
  40. package/src/Atom/README.md +1 -1
  41. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +1 -1
  42. package/src/Atom/Spacing/_spacing.css +1 -1
  43. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +4 -4
  44. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +1 -1
  45. package/src/Atom/Table/_table.css +1 -1
  46. package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +1 -1
  47. package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap +2 -2
  48. package/src/Atom/Text/_text-align.css +1 -1
  49. package/src/Atom/Text/_text-sizes.css +1 -1
  50. package/src/Atom/Video/Video.stories.ts +5 -3
  51. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +3 -13
  52. package/src/Atom/Video/_video.css +6 -1
  53. package/src/Atom/Video/video.twig +10 -4
  54. package/src/Atom/_animated.css +1 -1
  55. package/src/Atom/_flow-legacy.css +1 -1
  56. package/src/Atom/_flow.css +1 -1
  57. package/src/Atom/_generic.css +1 -1
  58. package/src/Atom/_hr.css +1 -1
  59. package/src/Atom/base.css +2 -2
  60. package/src/Component/Accordion/README.md +7 -17
  61. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +4 -4
  62. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +1 -1
  63. package/src/Component/Accordion/accordion.css +2 -2
  64. package/src/Component/Accordion/accordion.entry.js +2 -0
  65. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +1 -1
  66. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +2 -2
  67. package/src/Component/Breadcrumb/breadcrumb.css +1 -1
  68. package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +12 -0
  69. package/src/Component/Callout/callout.css +1 -1
  70. package/src/Component/Card/README.md +7 -13
  71. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +34 -24
  72. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +3 -3
  73. package/src/Component/Card/card.css +3 -3
  74. package/src/Component/ContentBlock/README.md +7 -13
  75. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +6 -23
  76. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +1 -1
  77. package/src/Component/ContentBlock/content-block.css +2 -2
  78. package/src/Component/Dialog/README.md +15 -49
  79. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +2 -2
  80. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +1 -1
  81. package/src/Component/Dialog/dialog.css +3 -3
  82. package/src/Component/Dialog/dialog.entry.js +1 -0
  83. package/src/Component/DropMenu/README.md +19 -4
  84. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +1 -1
  85. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +1 -1
  86. package/src/Component/DropMenu/drop-menu.css +1 -1
  87. package/src/Component/DropMenu/drop-menu.entry.js +1 -0
  88. package/src/Component/{InPageAlert/Elements/InPageAlert.ts → GlobalAlert/Elements/ClosableAlert.ts} +21 -10
  89. package/src/Component/GlobalAlert/GlobalAlert.stories.ts +49 -0
  90. package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +33 -0
  91. package/src/Component/GlobalAlert/GlobalAlert.tsx +50 -0
  92. package/src/Component/GlobalAlert/README.md +27 -0
  93. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +43 -0
  94. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +48 -0
  95. package/src/Component/GlobalAlert/global-alert.css +55 -0
  96. package/src/Component/GlobalAlert/global-alert.entry.js +1 -0
  97. package/src/Component/GlobalAlert/global-alert.twig +30 -0
  98. package/src/Component/GlobalAlert/twig/story-global-alert.twig +14 -0
  99. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +74 -0
  100. package/src/Component/HeroBanner/__snapshots__/{PageTitle.stories.tsx.snap → HeroBanner.stories.tsx.snap} +4 -4
  101. package/src/Component/HeroBanner/hero-banner.css +1 -1
  102. package/src/Component/HeroBanner/hero-banner.twig +1 -0
  103. package/src/Component/InPageAlert/InPageAlert.stories.ts +20 -22
  104. package/src/Component/InPageAlert/InPageAlert.stories.tsx +5 -5
  105. package/src/Component/InPageAlert/InPageAlert.tsx +15 -41
  106. package/src/Component/InPageAlert/README.md +4 -4
  107. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +9 -36
  108. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +56 -56
  109. package/src/Component/InPageAlert/in-page-alert.css +2 -2
  110. package/src/Component/InPageAlert/in-page-alert.twig +13 -16
  111. package/src/Component/InPageAlert/twig/story-in-page-alert.twig +11 -0
  112. package/src/Component/InPageNavigation/README.md +10 -15
  113. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +6 -70
  114. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +1 -1
  115. package/src/Component/InPageNavigation/in-page-navigation.css +2 -2
  116. package/src/Component/InPageNavigation/in-page-navigation.entry.js +1 -0
  117. package/src/Component/LinkList/README.md +3 -3
  118. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +24 -55
  119. package/src/Component/LinkList/link-list.css +1 -1
  120. package/src/Component/Navigation/README.md +16 -7
  121. package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap +1 -1
  122. package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap +1 -1
  123. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +1 -1
  124. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +1 -1
  125. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +2 -2
  126. package/src/Component/Navigation/_navigation-collapsible.css +1 -1
  127. package/src/Component/Navigation/_navigation-dropdown.css +1 -1
  128. package/src/Component/Navigation/_navigation-mega.css +1 -1
  129. package/src/Component/Navigation/_navigation.css +1 -1
  130. package/src/Component/Navigation/navigation.entry.js +1 -0
  131. package/src/Component/Pagination/README.md +3 -3
  132. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +1 -1
  133. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +1 -1
  134. package/src/Component/Pagination/pagination.css +1 -1
  135. package/src/Component/Sticky/README.md +12 -5
  136. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +9 -82
  137. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +1 -1
  138. package/src/Component/Sticky/sticky.css +2 -2
  139. package/src/Component/Sticky/sticky.entry.js +1 -0
  140. package/src/Component/Tabs/README.md +11 -4
  141. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +1 -1
  142. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +1 -1
  143. package/src/Component/Tabs/tabs.css +2 -2
  144. package/src/Component/Tabs/tabs.entry.js +1 -0
  145. package/src/Component/Tag/README.md +2 -2
  146. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +3 -3
  147. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +1 -1
  148. package/src/Component/Tag/tag.css +1 -1
  149. package/src/Component/Tile/__snapshots__/Tile.stories.ts.snap +1 -1
  150. package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap +2 -2
  151. package/src/Component/Tile/tiles.css +1 -1
  152. package/src/Form/README.md +2 -2
  153. package/src/Form/form.css +12 -12
  154. package/src/Layout/Footer/FooterMenu/__snapshots__/FooterMenu.stories.ts.snap +1 -1
  155. package/src/Layout/Footer/FooterMenu/footer-menu.css +1 -1
  156. package/src/Layout/Footer/footer.css +1 -1
  157. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +33 -90
  158. package/src/Layout/Grid/container-grid.css +2 -2
  159. package/src/Layout/Grid/grid.css +2 -2
  160. package/src/Layout/Header/_header.css +1 -1
  161. package/src/Layout/Header/_toggles.css +1 -1
  162. package/src/Layout/Header/header.entry.js +1 -0
  163. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +2 -2
  164. package/src/Layout/Masthead/masthead.css +5 -5
  165. package/src/Layout/Masthead/masthead.twig +2 -2
  166. package/src/Layout/Page/README.md +2 -2
  167. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +1 -1
  168. package/src/Layout/Page/page.css +2 -2
  169. package/src/Layout/README.md +3 -2
  170. package/src/Layout/Section/Section.stories.ts +1 -2
  171. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +59 -0
  172. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +80 -0
  173. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +91 -0
  174. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +22 -14
  175. package/src/Layout/Section/section.css +4 -4
  176. package/src/Layout/Section/twig/section-story.twig +1 -1
  177. package/src/Layout/Sidebar/sidebar.css +1 -1
  178. package/src/Utility/Drupal/README.md +1 -1
  179. package/src/Utility/README.md +1 -1
  180. package/src/Utility/_layout-utils.css +1 -1
  181. package/src/Utility/utilities.css +3 -3
  182. package/src/elements.ts +1 -1
  183. package/dist/build/Accordion.js +0 -61
  184. package/dist/build/Accordion.js.map +0 -1
  185. package/dist/build/AccordionDiv.js +0 -62
  186. package/dist/build/AccordionDiv.js.map +0 -1
  187. package/dist/build/AccordionGroup.js +0 -85
  188. package/dist/build/AccordionGroup.js.map +0 -1
  189. package/dist/build/AccordionMobile.js +0 -31
  190. package/dist/build/AccordionMobile.js.map +0 -1
  191. package/dist/build/Dialog.js +0 -116
  192. package/dist/build/Dialog.js.map +0 -1
  193. package/dist/build/DropMenu.js +0 -132
  194. package/dist/build/DropMenu.js.map +0 -1
  195. package/dist/build/GlobalToggle.js +0 -103
  196. package/dist/build/GlobalToggle.js.map +0 -1
  197. package/dist/build/InPageAlert.js +0 -61
  198. package/dist/build/InPageAlert.js.map +0 -1
  199. package/dist/build/InPageNavigation.js +0 -92
  200. package/dist/build/InPageNavigation.js.map +0 -1
  201. package/dist/build/Navigation.js +0 -126
  202. package/dist/build/Navigation.js.map +0 -1
  203. package/dist/build/Sticky.js +0 -63
  204. package/dist/build/Sticky.js.map +0 -1
  205. package/dist/build/Tabs.js +0 -164
  206. package/dist/build/Tabs.js.map +0 -1
  207. package/dist/build/accordion.css +0 -108
  208. package/dist/build/base.css +0 -1000
  209. package/dist/build/breadcrumb.css +0 -47
  210. package/dist/build/breakpoint-loader.js +0 -52
  211. package/dist/build/breakpoint-loader.js.map +0 -1
  212. package/dist/build/button.css +0 -126
  213. package/dist/build/callout.css +0 -11
  214. package/dist/build/card.css +0 -135
  215. package/dist/build/chunks/js.cookie-CiMiGxWx.js +0 -101
  216. package/dist/build/chunks/js.cookie-CiMiGxWx.js.map +0 -1
  217. package/dist/build/chunks/polyfills-CJ5uTmUJ.js +0 -749
  218. package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +0 -1
  219. package/dist/build/chunks/popover-wbPSyFRj.js +0 -654
  220. package/dist/build/chunks/popover-wbPSyFRj.js.map +0 -1
  221. package/dist/build/chunks/utilities-BIk0P2KX.js +0 -61
  222. package/dist/build/chunks/utilities-BIk0P2KX.js.map +0 -1
  223. package/dist/build/constants.css +0 -120
  224. package/dist/build/container-grid.css +0 -207
  225. package/dist/build/content-block.css +0 -23
  226. package/dist/build/cookie-compliance.js +0 -122
  227. package/dist/build/cookie-compliance.js.map +0 -1
  228. package/dist/build/dialog.css +0 -98
  229. package/dist/build/disclosure-widget.js +0 -124
  230. package/dist/build/disclosure-widget.js.map +0 -1
  231. package/dist/build/drop-menu.css +0 -78
  232. package/dist/build/drupal.css +0 -74
  233. package/dist/build/footer-menu.css +0 -32
  234. package/dist/build/footer.css +0 -61
  235. package/dist/build/form.css +0 -589
  236. package/dist/build/grid.css +0 -200
  237. package/dist/build/header.css +0 -131
  238. package/dist/build/hero-banner.css +0 -62
  239. package/dist/build/icon.css +0 -399
  240. package/dist/build/in-page-alert.css +0 -94
  241. package/dist/build/in-page-navigation.css +0 -17
  242. package/dist/build/index.css +0 -4980
  243. package/dist/build/io-loader.js +0 -44
  244. package/dist/build/io-loader.js.map +0 -1
  245. package/dist/build/keyboard.js +0 -101
  246. package/dist/build/keyboard.js.map +0 -1
  247. package/dist/build/link-list.css +0 -72
  248. package/dist/build/masthead.css +0 -39
  249. package/dist/build/nav-list.css +0 -29
  250. package/dist/build/navigation.css +0 -371
  251. package/dist/build/page.css +0 -184
  252. package/dist/build/pagination.css +0 -123
  253. package/dist/build/section.css +0 -160
  254. package/dist/build/sidebar.css +0 -105
  255. package/dist/build/sticky.css +0 -47
  256. package/dist/build/tabs.css +0 -106
  257. package/dist/build/tag.css +0 -67
  258. package/dist/build/tiles.css +0 -61
  259. package/dist/build/utilities.css +0 -175
  260. package/src/Component/Card/__snapshots__/CardGrid.stories.ts.snap +0 -89
  261. package/src/Component/HeroBanner/__snapshots__/PageTitle.stories.ts.snap +0 -31
  262. package/src/Layout/Section/__snapshots__/SectionBackground.stories.ts.snap +0 -55
  263. package/src/Layout/Section/__snapshots__/SectionsBreakouts.stories.ts.snap +0 -78
  264. package/src/Layout/Section/__snapshots__/SectionsFlowsGroups.stories.ts.snap +0 -89
  265. package/src/index.css +0 -27
@@ -1 +0,0 @@
1
- {"version":3,"file":"InPageAlert.js","sources":["../../src/Component/InPageAlert/Elements/InPageAlert.ts"],"sourcesContent":["/**\n * @file InPageAlerts\n *\n * When a InPageAlert is closed the id is written to local storage.\n * This is checked as the page is re-rendered, if a InPageAlert with the same ID is\n * created it will be removed from the dom.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageAlert extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n connectedCallback(): void {\n this.id = this.id || this.generatedId()\n if (this.localStorage) {\n this.controller.abort()\n this.remove()\n return\n }\n const { signal }: AbortController = this.controller\n this.close?.addEventListener(\"click\", this.handleClose, { signal })\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n this.close.remove()\n }\n\n /**\n * Handle close button click event.\n */\n handleClose = (): void => {\n this.controller.abort()\n this.remove()\n this.localStorage = \"true\"\n const newEvent: CustomEvent<{ id: string; target: InPageAlert }> =\n new CustomEvent(\"InPageAlert-close\", {\n bubbles: true,\n cancelable: true,\n detail: {\n id: this.id,\n target: this,\n },\n })\n this.dispatchEvent(newEvent)\n }\n\n get localStorage(): string {\n return localStorage.getItem(this.id)\n }\n\n set localStorage(value: string) {\n localStorage.setItem(this.id, value)\n }\n\n get close(): HTMLButtonElement {\n let closeBtn: HTMLButtonElement = this.querySelector(\".icon--close\")\n if (!closeBtn) {\n closeBtn = createElement(\n `<button class=\"icon icon--close\" aria-controls=\"${this.id}\" aria-label=\"Close InPageAlert\" type=\"button\"></button>`,\n ) as HTMLButtonElement\n this.appendChild(closeBtn)\n }\n return closeBtn\n }\n\n generatedId(): string {\n const id = `mx-alert-${Math.floor(Math.random() * Math.floor(10000))}`\n return makeAnchor(id, 20)\n }\n}\n\ncustomElements.define(\"mx-closable-alert\", InPageAlert)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-closable-alert\": InPageAlert\n }\n}\n"],"names":[],"mappings":";AAUA,MAAqB,oBAAoB,YAAY;AAAA,EAInD,cAAc;AACN;AAwBR,SAAA,cAAc,MAAY;AACxB,WAAK,WAAW;AAChB,WAAK,OAAO;AACZ,WAAK,eAAe;AACd,YAAA,WACJ,IAAI,YAAY,qBAAqB;AAAA,QACnC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN,IAAI,KAAK;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACH,WAAK,cAAc,QAAQ;AAAA,IAAA;AApCtB,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,SAAK,KAAK,KAAK,MAAM,KAAK,YAAY;AACtC,QAAI,KAAK,cAAc;AACrB,WAAK,WAAW;AAChB,WAAK,OAAO;AACZ;AAAA,IACF;AACM,UAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,SAAK,OAAO,iBAAiB,SAAS,KAAK,aAAa,EAAE,QAAQ;AAAA,EACpE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;AAChB,SAAK,MAAM;EACb;AAAA,EAqBA,IAAI,eAAuB;AAClB,WAAA,aAAa,QAAQ,KAAK,EAAE;AAAA,EACrC;AAAA,EAEA,IAAI,aAAa,OAAe;AACjB,iBAAA,QAAQ,KAAK,IAAI,KAAK;AAAA,EACrC;AAAA,EAEA,IAAI,QAA2B;AACzB,QAAA,WAA8B,KAAK,cAAc,cAAc;AACnE,QAAI,CAAC,UAAU;AACF,iBAAA;AAAA,QACT,mDAAmD,KAAK,EAAE;AAAA,MAAA;AAE5D,WAAK,YAAY,QAAQ;AAAA,IAC3B;AACO,WAAA;AAAA,EACT;AAAA,EAEA,cAAsB;AACd,UAAA,KAAK,YAAY,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM,GAAK,CAAC,CAAC;AAC7D,WAAA,WAAW,IAAI,EAAE;AAAA,EAC1B;AACF;AAEA,eAAe,OAAO,qBAAqB,WAAW;"}
@@ -1,92 +0,0 @@
1
- import { m as makeAnchor, c as createElement } from "./chunks/utilities-BIk0P2KX.js";
2
- class InPageNavigation extends HTMLElement {
3
- constructor() {
4
- super();
5
- this.handleClick = (target) => {
6
- this.active = this.items.find((item) => item.link === target);
7
- if (!this.links || !this.active) return;
8
- this.links.forEach((link) => link.classList.remove("is-active"));
9
- this.active.link.classList.add("is-active");
10
- };
11
- this.internals_ = this.attachInternals();
12
- this.controller = new AbortController();
13
- this.headingLevels = this.dataset?.headings || "h2";
14
- this.items = [];
15
- }
16
- connectedCallback() {
17
- if (!this.menu || !this.headings) return;
18
- this.headings.forEach((heading) => {
19
- const listItem = this.generateListItem(heading);
20
- const link = this.generateAnchor(heading);
21
- this.items.push({ link, heading });
22
- listItem.appendChild(link);
23
- this.menu?.appendChild(listItem);
24
- });
25
- const { signal } = this.controller;
26
- this.menu.addEventListener(
27
- "click",
28
- (e) => {
29
- const { target } = e;
30
- if (!(target instanceof HTMLAnchorElement)) return;
31
- this.handleClick(target);
32
- },
33
- {
34
- signal
35
- }
36
- );
37
- }
38
- disconnectedCallback() {
39
- if (!this.menu || !this.headings) return;
40
- this.menu.textContent = "";
41
- this.items = [];
42
- this.controller.abort();
43
- }
44
- get menu() {
45
- const menu = this.querySelector("ul, ol");
46
- if (!menu) {
47
- throw new Error(`${this.localName} must contain a <ul> or <ol> element.`);
48
- }
49
- return menu;
50
- }
51
- get container() {
52
- const selector = this.getAttribute("data-content");
53
- if (!selector) {
54
- throw new Error(
55
- `${this.localName} must have a [data-content] attribute that contains the content selector.`
56
- );
57
- }
58
- return this.closest(selector) || this.parentElement.querySelector(selector);
59
- }
60
- get headings() {
61
- return this.container?.querySelectorAll(this.headingLevels);
62
- }
63
- get links() {
64
- return this.menu?.querySelectorAll("a");
65
- }
66
- generatedId(heading) {
67
- const string = heading?.textContent?.trim();
68
- return !string ? "" : makeAnchor(string);
69
- }
70
- generateAnchor(heading) {
71
- const { textContent, id } = heading;
72
- const linkText = heading.getAttribute("data-in-page-navigation-title") || textContent;
73
- const targetID = id || this.generatedId(heading);
74
- if (!id) heading.id = targetID;
75
- const item = createElement(
76
- `<a href="#${targetID}" class="icon icon--chevron-right">${linkText}</a>`
77
- );
78
- return item;
79
- }
80
- generateListItem(heading) {
81
- const { tagName } = heading;
82
- const item = createElement(
83
- `<li class="in-page-navigation__level--${tagName.toLowerCase()}"></li>`
84
- );
85
- return item;
86
- }
87
- }
88
- customElements.define("mx-in-page-navigation", InPageNavigation);
89
- export {
90
- InPageNavigation as default
91
- };
92
- //# sourceMappingURL=InPageNavigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InPageNavigation.js","sources":["../../src/Component/InPageNavigation/Elements/InPageNavigation.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageNavigation extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n headingLevels: string\n items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]\n active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n this.headingLevels = this.dataset?.headings || \"h2\"\n this.items = []\n }\n\n connectedCallback(): void {\n if (!this.menu || !this.headings) return\n\n this.headings.forEach((heading: HTMLHeadingElement) => {\n const listItem: HTMLLIElement = this.generateListItem(heading)\n const link: HTMLAnchorElement = this.generateAnchor(heading)\n this.items.push({ link, heading })\n listItem.appendChild(link)\n this.menu?.appendChild(listItem)\n })\n\n const { signal }: AbortController = this.controller\n\n // Open on toggle click.\n this.menu.addEventListener(\n \"click\",\n (e: MouseEvent): void => {\n const { target } = e\n if (!(target instanceof HTMLAnchorElement)) return\n this.handleClick(target)\n },\n {\n signal,\n },\n )\n }\n\n disconnectedCallback(): void {\n if (!this.menu || !this.headings) return\n this.menu.textContent = \"\"\n this.items = []\n this.controller.abort()\n }\n\n handleClick = (target: EventTarget | null): void => {\n this.active = this.items.find(item => item.link === target)\n if (!this.links || !this.active) return\n this.links.forEach(link => link.classList.remove(\"is-active\"))\n this.active.link.classList.add(\"is-active\")\n }\n\n get menu(): HTMLUListElement | HTMLOListElement | null {\n const menu: HTMLUListElement | HTMLOListElement | null =\n this.querySelector(\"ul, ol\")\n if (!menu) {\n throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)\n }\n return menu\n }\n\n get container(): HTMLElement | null {\n const selector: string | null = this.getAttribute(\"data-content\")\n if (!selector) {\n throw new Error(\n `${this.localName} must have a [data-content] attribute that contains the content selector.`,\n )\n }\n return this.closest(selector) || this.parentElement.querySelector(selector)\n }\n\n get headings(): NodeListOf<HTMLHeadingElement> | undefined {\n return this.container?.querySelectorAll(this.headingLevels)\n }\n\n get links(): NodeListOf<HTMLAnchorElement> | undefined {\n return this.menu?.querySelectorAll(\"a\")\n }\n\n generatedId(heading: HTMLHeadingElement): string {\n const string: string | undefined = heading?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n\n generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {\n const { textContent, id } = heading\n const linkText: string | null =\n heading.getAttribute(\"data-in-page-navigation-title\") || textContent\n const targetID: string = id || this.generatedId(heading)\n if (!id) heading.id = targetID\n const item: Element = createElement(\n `<a href=\"#${targetID}\" class=\"icon icon--chevron-right\">${linkText}</a>`,\n )\n\n return item as HTMLAnchorElement\n }\n\n generateListItem(heading: HTMLHeadingElement): HTMLLIElement {\n const { tagName } = heading\n const item: Element = createElement(\n `<li class=\"in-page-navigation__level--${tagName.toLowerCase()}\"></li>`,\n )\n\n return item as HTMLLIElement\n }\n}\n\ncustomElements.define(\"mx-in-page-navigation\", InPageNavigation)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-in-page-navigation\": InPageNavigation\n }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,yBAAyB,YAAY;AAAA,EAOxD,cAAc;AACN;AAyCR,SAAA,cAAc,CAAC,WAAqC;AAClD,WAAK,SAAS,KAAK,MAAM,KAAK,CAAQ,SAAA,KAAK,SAAS,MAAM;AAC1D,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AACjC,WAAK,MAAM,QAAQ,CAAA,SAAQ,KAAK,UAAU,OAAO,WAAW,CAAC;AAC7D,WAAK,OAAO,KAAK,UAAU,IAAI,WAAW;AAAA,IAAA;AA5CrC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACjB,SAAA,gBAAgB,KAAK,SAAS,YAAY;AAC/C,SAAK,QAAQ;EACf;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAE7B,SAAA,SAAS,QAAQ,CAAC,YAAgC;AAC/C,YAAA,WAA0B,KAAK,iBAAiB,OAAO;AACvD,YAAA,OAA0B,KAAK,eAAe,OAAO;AAC3D,WAAK,MAAM,KAAK,EAAE,MAAM,QAAS,CAAA;AACjC,eAAS,YAAY,IAAI;AACpB,WAAA,MAAM,YAAY,QAAQ;AAAA,IAAA,CAChC;AAEK,UAAA,EAAE,OAAO,IAAqB,KAAK;AAGzC,SAAK,KAAK;AAAA,MACR;AAAA,MACA,CAAC,MAAwB;AACjB,cAAA,EAAE,OAAW,IAAA;AACf,YAAA,EAAE,kBAAkB,mBAAoB;AAC5C,aAAK,YAAY,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAClC,SAAK,KAAK,cAAc;AACxB,SAAK,QAAQ;AACb,SAAK,WAAW;EAClB;AAAA,EASA,IAAI,OAAmD;AAC/C,UAAA,OACJ,KAAK,cAAc,QAAQ;AAC7B,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,uCAAuC;AAAA,IAC1E;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,YAAgC;AAC5B,UAAA,WAA0B,KAAK,aAAa,cAAc;AAChE,QAAI,CAAC,UAAU;AACb,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO,KAAK,QAAQ,QAAQ,KAAK,KAAK,cAAc,cAAc,QAAQ;AAAA,EAC5E;AAAA,EAEA,IAAI,WAAuD;AACzD,WAAO,KAAK,WAAW,iBAAiB,KAAK,aAAa;AAAA,EAC5D;AAAA,EAEA,IAAI,QAAmD;AAC9C,WAAA,KAAK,MAAM,iBAAiB,GAAG;AAAA,EACxC;AAAA,EAEA,YAAY,SAAqC;AACzC,UAAA,SAA6B,SAAS,aAAa,KAAK;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AAAA,EAEA,eAAe,SAAgD;AACvD,UAAA,EAAE,aAAa,GAAO,IAAA;AAC5B,UAAM,WACJ,QAAQ,aAAa,+BAA+B,KAAK;AAC3D,UAAM,WAAmB,MAAM,KAAK,YAAY,OAAO;AACnD,QAAA,CAAC,GAAI,SAAQ,KAAK;AACtB,UAAM,OAAgB;AAAA,MACpB,aAAa,QAAQ,sCAAsC,QAAQ;AAAA,IAAA;AAG9D,WAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,SAA4C;AACrD,UAAA,EAAE,QAAY,IAAA;AACpB,UAAM,OAAgB;AAAA,MACpB,yCAAyC,QAAQ,YAAA,CAAa;AAAA,IAAA;AAGzD,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,yBAAyB,gBAAgB;"}
@@ -1,126 +0,0 @@
1
- import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
2
- import Keyboard from "./keyboard.js";
3
- import DisclosureWidget from "./disclosure-widget.js";
4
- class Navigation extends HTMLElement {
5
- constructor() {
6
- super();
7
- this.handleDisclosure = ({ detail }) => {
8
- const { isOpen, id } = detail;
9
- const { item } = this.subNavs.get(id);
10
- item.classList.toggle("nav--open");
11
- if (isOpen) {
12
- this.keyboard.attachPopup(id, this.handleCloseAny);
13
- } else {
14
- this.keyboard.detachPopup(id);
15
- }
16
- };
17
- this.handleCloseAny = () => {
18
- this.subNavs.forEach(({ widget }) => {
19
- if (!widget) return;
20
- if (widget.isOpen) widget.handleToggle();
21
- });
22
- };
23
- this.handleFlyout = (event) => {
24
- const target = event.target;
25
- const parent = target.closest("li");
26
- if (!parent) return;
27
- const subnav = parent.querySelector(":scope > ul");
28
- if (!subnav) return;
29
- this.subNavs.forEach(({ widget, list }) => {
30
- if (!widget) return;
31
- if (widget.isOpen) widget.handleToggle();
32
- if (list.id === subnav.id) widget.handleToggle();
33
- });
34
- };
35
- this.handleBreakpoint = ({
36
- matches
37
- }) => {
38
- if (matches) {
39
- this.addEventListener("mouseover", this.handleFlyout);
40
- this.addEventListener("mouseleave", this.handleCloseAny);
41
- if (this.edgeCheck) this.handleEdgeCheck();
42
- } else {
43
- this.removeEventListener("mouseover", this.handleFlyout);
44
- this.removeEventListener("mouseleave", this.handleCloseAny);
45
- }
46
- };
47
- this.internals_ = this.attachInternals();
48
- this.controller = new AbortController();
49
- this.flyout = this.hasAttribute("flyout");
50
- }
51
- connectedCallback() {
52
- const { signal } = this.controller;
53
- this.keyboard = new Keyboard();
54
- this.keyboard.attachEventListeners(signal);
55
- this.addEventListener("focusin", () => {
56
- this.keyboard.attachMenu(this, this.links);
57
- });
58
- this.addEventListener("focusout", () => {
59
- this.keyboard.detachMenu();
60
- });
61
- if (!this.lists.length) return;
62
- this.subNavs = /* @__PURE__ */ new Map();
63
- this.lists.forEach((list, index) => {
64
- const item = list.closest("li");
65
- const link = item.querySelector(":scope > a");
66
- const id = makeAnchor(`subnav-${index}-${link.textContent}`, 30);
67
- const trigger = item.querySelector(
68
- ":scope > button.nav__toggle"
69
- );
70
- if (item && link && trigger) {
71
- const labelId = `list-label-${id}`;
72
- link.setAttribute("id", labelId);
73
- list.setAttribute("id", id);
74
- list.setAttribute("aria-labelledby", labelId);
75
- const widget = new DisclosureWidget(trigger, list);
76
- widget.init();
77
- this.subNavs.set(id, { item, trigger, list, link, widget });
78
- }
79
- });
80
- this.addEventListener("disclosure-toggle", this.handleDisclosure);
81
- if (!this.flyout) return;
82
- this.edgeCheck = this.hasAttribute("edgeCheck");
83
- this.mq = this.getAttribute("mq") || "(min-width: 720px)";
84
- this.handleBreakpoint(this.breakpoint);
85
- this.breakpoint.addEventListener("change", this.handleBreakpoint, {
86
- signal
87
- });
88
- }
89
- disconnectedCallback() {
90
- this.controller.abort();
91
- this.subNavs.forEach((subNav) => subNav.widget.detach());
92
- }
93
- handleEdgeCheck() {
94
- const windowInnerWidth = window.innerWidth;
95
- const edgeCheck = new IntersectionObserver(
96
- ([{ boundingClientRect, target }], obs) => {
97
- if (windowInnerWidth < boundingClientRect.right)
98
- target.classList.add("nav--reverse");
99
- obs.disconnect();
100
- }
101
- );
102
- this.subNavs.forEach(({ list }) => {
103
- edgeCheck.observe(list);
104
- const nestedLists = list.querySelectorAll("ul");
105
- nestedLists.forEach((nestedList) => edgeCheck.observe(nestedList));
106
- });
107
- }
108
- get links() {
109
- const links = this.querySelectorAll("a");
110
- if (!links.length) {
111
- throw new Error(`${this.localName} must links`);
112
- }
113
- return links;
114
- }
115
- get lists() {
116
- return this.querySelectorAll("li > ul");
117
- }
118
- get breakpoint() {
119
- return window.matchMedia(this.mq);
120
- }
121
- }
122
- customElements.define("mx-nav", Navigation);
123
- export {
124
- Navigation as default
125
- };
126
- //# sourceMappingURL=Navigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Navigation.js","sources":["../../src/Component/Navigation/Elements/Navigation.ts"],"sourcesContent":["/**\n * Main Navigation\n * @file Drop down navigation handler.\n */\n\nimport {\n Keyboard,\n makeAnchor,\n DisclosureWidget,\n DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\ntype SubNavType = {\n list: HTMLElement\n trigger: HTMLButtonElement\n link: HTMLAnchorElement\n item?: HTMLLIElement\n widget?: DisclosureWidget\n linkWidget?: DisclosureWidget\n}\n\nexport default class Navigation extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n keyboard: Keyboard\n subNavs?: Map<string, SubNavType>\n flyout?: boolean\n edgeCheck!: boolean\n mq!: string\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n this.flyout = this.hasAttribute(\"flyout\")\n }\n\n connectedCallback(): void {\n const { signal }: AbortController = this.controller\n\n // Add keyboard navigation events.\n this.keyboard = new Keyboard()\n this.keyboard.attachEventListeners(signal)\n\n // Add keyboard focus handler for menu links.\n this.addEventListener(\"focusin\", () => {\n this.keyboard.attachMenu(this, this.links)\n })\n this.addEventListener(\"focusout\", () => {\n this.keyboard.detachMenu()\n })\n\n if (!this.lists.length) return\n this.subNavs = new Map()\n this.lists.forEach((list: HTMLUListElement, index: number): void => {\n const item: HTMLLIElement = list.closest(\"li\")\n const link: HTMLAnchorElement = item.querySelector(\":scope > a\")\n const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)\n const trigger: HTMLButtonElement = item.querySelector(\n \":scope > button.nav__toggle\",\n )\n if (item && link && trigger) {\n const labelId = `list-label-${id}`\n link.setAttribute(\"id\", labelId)\n list.setAttribute(\"id\", id)\n list.setAttribute(\"aria-labelledby\", labelId)\n const widget = new DisclosureWidget(trigger, list)\n widget.init()\n this.subNavs.set(id, { item, trigger, list, link, widget })\n }\n })\n\n this.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n\n if (!this.flyout) return\n this.edgeCheck = this.hasAttribute(\"edgeCheck\")\n this.mq = this.getAttribute(\"mq\") || \"(min-width: 720px)\"\n this.handleBreakpoint(this.breakpoint)\n this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n signal,\n })\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())\n }\n\n handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n const { isOpen, id } = detail\n const { item } = this.subNavs.get(id)\n item.classList.toggle(\"nav--open\")\n if (isOpen) {\n this.keyboard.attachPopup(id, this.handleCloseAny)\n } else {\n this.keyboard.detachPopup(id)\n }\n }\n\n handleCloseAny = (): void => {\n this.subNavs.forEach(({ widget }: SubNavType): void => {\n if (!widget) return\n if (widget.isOpen) widget.handleToggle()\n })\n }\n\n handleFlyout = (event: MouseEvent): void => {\n const target = event.target as HTMLElement\n const parent: HTMLLIElement = target.closest(\"li\")\n if (!parent) return\n const subnav: HTMLUListElement = parent.querySelector(\":scope > ul\")\n if (!subnav) return\n this.subNavs.forEach(({ widget, list }: SubNavType): void => {\n if (!widget) return\n if (widget.isOpen) widget.handleToggle()\n if (list.id === subnav.id) widget.handleToggle()\n })\n }\n\n handleBreakpoint = ({\n matches,\n }: MediaQueryList | MediaQueryListEvent): void => {\n if (matches) {\n this.addEventListener(\"mouseover\", this.handleFlyout)\n this.addEventListener(\"mouseleave\", this.handleCloseAny)\n if (this.edgeCheck) this.handleEdgeCheck()\n } else {\n this.removeEventListener(\"mouseover\", this.handleFlyout)\n this.removeEventListener(\"mouseleave\", this.handleCloseAny)\n }\n }\n\n handleEdgeCheck() {\n const windowInnerWidth: number = window.innerWidth\n const edgeCheck: IntersectionObserver = new IntersectionObserver(\n ([{ boundingClientRect, target }], obs) => {\n if (windowInnerWidth < boundingClientRect.right)\n target.classList.add(\"nav--reverse\")\n obs.disconnect()\n },\n )\n this.subNavs.forEach(({ list }: SubNavType): void => {\n edgeCheck.observe(list)\n const nestedLists: NodeListOf<HTMLUListElement> =\n list.querySelectorAll(\"ul\")\n nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))\n })\n }\n\n get links(): NodeListOf<HTMLAnchorElement> | null {\n const links: NodeListOf<HTMLAnchorElement> | null =\n this.querySelectorAll(\"a\")\n if (!links.length) {\n throw new Error(`${this.localName} must links`)\n }\n return links\n }\n\n get lists(): NodeListOf<HTMLUListElement> | null {\n return this.querySelectorAll(\"li > ul\")\n }\n\n get breakpoint(): MediaQueryList {\n return window.matchMedia(this.mq)\n }\n}\n\ncustomElements.define(\"mx-nav\", Navigation)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-nav\": Navigation\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1,63 +0,0 @@
1
- import { c as createElement } from "./chunks/utilities-BIk0P2KX.js";
2
- class Sticky extends HTMLElement {
3
- constructor() {
4
- super();
5
- this.root = null;
6
- this.rootMargin = "0px 0px 0px 0px";
7
- this.thresholds = [0];
8
- this.internals_ = this.attachInternals();
9
- }
10
- connectedCallback() {
11
- this.offsetPropName = this.getAttribute("offsetpropname");
12
- const options = {
13
- root: this.root,
14
- rootMargin: this.rootMargin,
15
- thresholds: this.thresholds
16
- };
17
- this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {
18
- const isSticky = boundingClientRect.y < 0;
19
- this.classList.toggle("is-stuck", isSticky);
20
- const newEvent = new CustomEvent("sticky-toggle", {
21
- bubbles: true,
22
- cancelable: true,
23
- detail: {
24
- isSticky,
25
- options,
26
- target: this
27
- }
28
- });
29
- this.dispatchEvent(newEvent);
30
- }, options);
31
- this.iO.observe(this.trigger);
32
- if (!this.offsetPropName) return;
33
- this.rO = new ResizeObserver((entries) => {
34
- entries.forEach(({ borderBoxSize }) => {
35
- const [{ blockSize }] = borderBoxSize;
36
- document.body.style.setProperty(
37
- this.offsetPropName,
38
- `${blockSize.toFixed(1)}px`
39
- );
40
- });
41
- });
42
- this.rO.observe(this);
43
- }
44
- disconnectedCallback() {
45
- this.iO.unobserve(this.trigger);
46
- this.rO.disconnect();
47
- }
48
- get trigger() {
49
- let trigger = this.querySelector(".sticky__trigger");
50
- if (!trigger) {
51
- trigger = createElement(
52
- '<div class="sticky__trigger"></div>'
53
- );
54
- this.insertAdjacentElement("beforebegin", trigger);
55
- }
56
- return trigger;
57
- }
58
- }
59
- customElements.define("mx-sticky", Sticky);
60
- export {
61
- Sticky as default
62
- };
63
- //# sourceMappingURL=Sticky.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Sticky.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n root: IntersectionObserver[\"root\"]\n rootMargin: IntersectionObserver[\"rootMargin\"]\n thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n internals_: ElementInternals\n iO: IntersectionObserver\n rO?: ResizeObserver\n offsetPropName?: string\n root?: IOOptions[\"root\"] = null\n rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n thresholds?: IOOptions[\"thresholds\"] = [0]\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n }\n\n connectedCallback(): void {\n this.offsetPropName = this.getAttribute(\"offsetpropname\")\n const options: IOOptions = {\n root: this.root,\n rootMargin: this.rootMargin,\n thresholds: this.thresholds,\n }\n\n // Toggle \"is-stuck\" and emit event.\n this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n const isSticky: boolean = boundingClientRect.y < 0\n this.classList.toggle(\"is-stuck\", isSticky)\n const newEvent: CustomEvent<{\n isSticky: boolean\n options: IOOptions\n target: Sticky\n }> = new CustomEvent(\"sticky-toggle\", {\n bubbles: true,\n cancelable: true,\n detail: {\n isSticky,\n options,\n target: this,\n },\n })\n this.dispatchEvent(newEvent)\n }, options)\n this.iO.observe(this.trigger)\n\n // If offsetPropName, record its height.\n if (!this.offsetPropName) return\n this.rO = new ResizeObserver(entries => {\n entries.forEach(({ borderBoxSize }) => {\n const [{ blockSize }] = borderBoxSize\n document.body.style.setProperty(\n this.offsetPropName,\n `${blockSize.toFixed(1)}px`,\n )\n })\n })\n this.rO.observe(this)\n }\n\n disconnectedCallback(): void {\n this.iO.unobserve(this.trigger)\n this.rO.disconnect()\n }\n\n get trigger(): HTMLDivElement {\n let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n if (!trigger) {\n trigger = createElement(\n '<div class=\"sticky__trigger\"></div>',\n ) as HTMLDivElement\n this.insertAdjacentElement(\"beforebegin\", trigger)\n }\n return trigger\n }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-sticky\": Sticky\n }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACN;AALmB,SAAA,OAAA;AACY,SAAA,aAAA;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIlC,SAAA,aAAa,KAAK;EACzB;AAAA,EAEA,oBAA0B;AACnB,SAAA,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAId,SAAA,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AACzD,YAAA,WAAoB,mBAAmB,IAAI;AAC5C,WAAA,UAAU,OAAO,YAAY,QAAQ;AACpC,YAAA,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,OAC1B,OAAO;AACL,SAAA,GAAG,QAAQ,KAAK,OAAO;AAGxB,QAAA,CAAC,KAAK,eAAgB;AACrB,SAAA,KAAK,IAAI,eAAe,CAAW,YAAA;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,WAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MACzB,CACD;AAAA,IAAA,CACF;AACI,SAAA,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AACtB,SAAA,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG;EACV;AAAA,EAEA,IAAI,UAA0B;AACxB,QAAA,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACF,gBAAA;AAAA,QACR;AAAA,MAAA;AAEG,WAAA,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}
@@ -1,164 +0,0 @@
1
- import "./DropMenu.js";
2
- class Tabs extends HTMLElement {
3
- constructor() {
4
- super();
5
- this.tabFocus = 0;
6
- this.handleKeydown = ({ key }) => {
7
- if (key === "ArrowRight" || key === "ArrowLeft") {
8
- this.triggers[this.tabFocus].setAttribute("tabindex", "-1");
9
- if (key === "ArrowRight") {
10
- this.tabFocus += 1;
11
- if (this.tabFocus >= this.triggers.length) {
12
- this.tabFocus = 0;
13
- }
14
- } else if (key === "ArrowLeft") {
15
- this.tabFocus -= 1;
16
- if (this.tabFocus < 0) {
17
- this.tabFocus = this.triggers.length - 1;
18
- }
19
- }
20
- this.triggers[this.tabFocus].setAttribute("tabindex", "0");
21
- this.triggers[this.tabFocus].focus();
22
- }
23
- };
24
- this.handleClick = (event) => {
25
- const target = event.target;
26
- if (!(target instanceof HTMLButtonElement)) return;
27
- event.preventDefault();
28
- const id = target.getAttribute("aria-controls");
29
- this.handleTabChange(id);
30
- };
31
- this.handleDropMenuSelect = (event) => {
32
- const target = event.detail.target;
33
- if (!(target instanceof HTMLButtonElement)) return;
34
- const id = target.getAttribute("aria-controls");
35
- this.handleTabChange(id);
36
- };
37
- this.handleTabChange = (id) => {
38
- this.active = id;
39
- this.handleUrlParams(id);
40
- const { panel, tab, button } = this.tabs.get(id);
41
- panel.focus({ preventScroll: true });
42
- const newEvent = new CustomEvent("tab-toggle", {
43
- bubbles: true,
44
- cancelable: true,
45
- detail: { id, tab, button, panel }
46
- });
47
- this.dispatchEvent(newEvent);
48
- };
49
- this.handleUrlParams = (id) => {
50
- const urlParams = new URLSearchParams(
51
- window.location.search
52
- );
53
- if (urlParams.get("tab") === id) return;
54
- urlParams.set("tab", id);
55
- window.history.replaceState(
56
- {},
57
- "",
58
- `${window.location.pathname}?${urlParams.toString()}`
59
- );
60
- };
61
- this.internals_ = this.attachInternals();
62
- this.controller = new AbortController();
63
- }
64
- connectedCallback() {
65
- if (!this.triggers || !this.panels) return;
66
- this.locationHash = window.location.hash;
67
- this.tabs = /* @__PURE__ */ new Map();
68
- this.triggers.forEach((tab) => {
69
- const id = tab.getAttribute("aria-controls");
70
- const panel = this.querySelector(`#${id}`);
71
- const button = this.dropMenu.querySelector(
72
- `[aria-controls=${id}]`
73
- );
74
- if (id && panel && button) {
75
- const labelId = `tab-label-${id}`;
76
- tab.setAttribute("id", labelId);
77
- tab.setAttribute("role", "tab");
78
- tab.setAttribute("aria-selected", "false");
79
- tab.setAttribute("tab-index", "-1");
80
- panel.setAttribute("aria-labelledby", labelId);
81
- panel.setAttribute("role", "tabpanel");
82
- panel.setAttribute("tab-index", "0");
83
- this.tabs.set(id, { panel, tab, button });
84
- }
85
- });
86
- const { signal } = this.controller;
87
- this.menu.addEventListener("click", this.handleClick, { signal });
88
- this.menu.addEventListener("keydown", this.handleKeydown, { signal });
89
- this.dropMenu.addEventListener(
90
- "drop-menu-select",
91
- this.handleDropMenuSelect,
92
- { signal }
93
- );
94
- const hashEl = this.locationHash ? this.querySelector(this.locationHash) : null;
95
- if (hashEl) {
96
- this.active = hashEl.id;
97
- } else if (!this.active) {
98
- this.active = this.panels[0].id;
99
- }
100
- }
101
- disconnectedCallback() {
102
- this.controller.abort();
103
- }
104
- get dropMenu() {
105
- const dropMenu = this.querySelector(".drop-menu");
106
- if (!dropMenu) {
107
- throw new Error(`${this.localName} must contain a .drop-menu`);
108
- }
109
- return dropMenu;
110
- }
111
- get dropMenuTrigger() {
112
- const trigger = this.querySelector(
113
- ".drop-menu__trigger"
114
- );
115
- if (!trigger) {
116
- throw new Error(`${this.localName} must contain a .drop-menu__trigger`);
117
- }
118
- return trigger;
119
- }
120
- get menu() {
121
- const menu = this.querySelector(".tab__list");
122
- if (!menu) {
123
- throw new Error(`${this.localName} must contain a .tab__list`);
124
- }
125
- menu.setAttribute("role", "tablist");
126
- return menu;
127
- }
128
- get triggers() {
129
- const triggers = this.querySelectorAll(".tab__list button");
130
- if (!triggers.length) {
131
- throw new Error(`${this.localName} must contain .tab__list buttons`);
132
- }
133
- return triggers;
134
- }
135
- get panels() {
136
- const panels = this.querySelectorAll(".tab__panel");
137
- if (!panels.length) {
138
- throw new Error(`${this.localName} must contain .tab__panel's`);
139
- }
140
- return panels;
141
- }
142
- get active() {
143
- return this.querySelector('[aria-selected="true"]');
144
- }
145
- set active(id) {
146
- this.tabs.forEach(({ tab, panel }, key) => {
147
- if (key === id) {
148
- tab.setAttribute("aria-selected", "true");
149
- tab.setAttribute("tab-index", "0");
150
- panel.removeAttribute("inert");
151
- this.dropMenuTrigger.textContent = tab.textContent;
152
- } else {
153
- tab.setAttribute("aria-selected", "false");
154
- tab.setAttribute("tab-index", "-1");
155
- panel.setAttribute("inert", "");
156
- }
157
- });
158
- }
159
- }
160
- customElements.define("mx-tabs", Tabs);
161
- export {
162
- Tabs as default
163
- };
164
- //# sourceMappingURL=Tabs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\nimport \"../../DropMenu/Elements/DropMenu\"\nimport type { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\n\ntype TabsType = {\n panel: HTMLElement\n tab: HTMLButtonElement\n button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n tabs?: Map<string, TabsType>\n locationHash?: string\n tabFocus?: number = 0\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n connectedCallback(): void {\n if (!this.triggers || !this.panels) return\n this.locationHash = window.location.hash\n\n this.tabs = new Map()\n this.triggers.forEach((tab: HTMLButtonElement): void => {\n const id: string = tab.getAttribute(\"aria-controls\")\n const panel: HTMLElement = this.querySelector(`#${id}`)\n const button: HTMLButtonElement = this.dropMenu.querySelector(\n `[aria-controls=${id}]`,\n )\n if (id && panel && button) {\n const labelId = `tab-label-${id}`\n tab.setAttribute(\"id\", labelId)\n tab.setAttribute(\"role\", \"tab\")\n tab.setAttribute(\"aria-selected\", \"false\")\n tab.setAttribute(\"tab-index\", \"-1\")\n panel.setAttribute(\"aria-labelledby\", labelId)\n panel.setAttribute(\"role\", \"tabpanel\")\n panel.setAttribute(\"tab-index\", \"0\")\n this.tabs.set(id, { panel, tab, button })\n }\n })\n\n const { signal }: AbortController = this.controller\n this.menu.addEventListener(\"click\", this.handleClick, { signal })\n this.menu.addEventListener(\"keydown\", this.handleKeydown, { signal })\n\n this.dropMenu.addEventListener(\n \"drop-menu-select\",\n this.handleDropMenuSelect,\n { signal },\n )\n\n const hashEl: HTMLElement | null = this.locationHash\n ? this.querySelector(this.locationHash)\n : null\n if (hashEl) {\n this.active = hashEl.id\n } else if (!this.active) {\n this.active = this.panels[0].id\n }\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n }\n\n handleKeydown = ({ key }: KeyboardEvent): void => {\n if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n if (key === \"ArrowRight\") {\n this.tabFocus += 1\n // If we're at the end, go to the start\n if (this.tabFocus >= this.triggers.length) {\n this.tabFocus = 0\n }\n // Move left\n } else if (key === \"ArrowLeft\") {\n this.tabFocus -= 1\n // If we're at the start, move to the end\n if (this.tabFocus < 0) {\n this.tabFocus = this.triggers.length - 1\n }\n }\n this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n this.triggers[this.tabFocus].focus()\n }\n }\n\n handleClick = (event: MouseEvent): void => {\n const target = event.target as HTMLButtonElement\n if (!(target instanceof HTMLButtonElement)) return\n event.preventDefault()\n const id: string = target.getAttribute(\"aria-controls\")\n this.handleTabChange(id)\n }\n\n handleDropMenuSelect = (event: DropMenuEvent): void => {\n const target = event.detail.target as HTMLButtonElement\n if (!(target instanceof HTMLButtonElement)) return\n const id = target.getAttribute(\"aria-controls\")\n this.handleTabChange(id)\n }\n\n handleTabChange = (id: string): void => {\n this.active = id\n this.handleUrlParams(id)\n const { panel, tab, button } = this.tabs.get(id)\n panel.focus({ preventScroll: true })\n const newEvent: CustomEvent<{\n id: string\n tab: HTMLButtonElement\n button: HTMLButtonElement\n panel: HTMLElement\n }> = new CustomEvent(\"tab-toggle\", {\n bubbles: true,\n cancelable: true,\n detail: { id, tab, button, panel },\n })\n this.dispatchEvent(newEvent)\n }\n\n get dropMenu(): HTMLDivElement | null {\n const dropMenu: HTMLDivElement | null = this.querySelector(\".drop-menu\")\n if (!dropMenu) {\n throw new Error(`${this.localName} must contain a .drop-menu`)\n }\n return dropMenu\n }\n\n get dropMenuTrigger(): HTMLButtonElement | null {\n const trigger: HTMLButtonElement | null = this.querySelector(\n \".drop-menu__trigger\",\n )\n if (!trigger) {\n throw new Error(`${this.localName} must contain a .drop-menu__trigger`)\n }\n return trigger\n }\n\n get menu(): HTMLDivElement | null {\n const menu: HTMLDivElement | null = this.querySelector(\".tab__list\")\n if (!menu) {\n throw new Error(`${this.localName} must contain a .tab__list`)\n }\n menu.setAttribute(\"role\", \"tablist\")\n return menu\n }\n\n get triggers(): NodeListOf<HTMLButtonElement> | null {\n const triggers: NodeListOf<HTMLButtonElement> | null =\n this.querySelectorAll(\".tab__list button\")\n if (!triggers.length) {\n throw new Error(`${this.localName} must contain .tab__list buttons`)\n }\n return triggers\n }\n\n get panels(): NodeListOf<HTMLElement> | null {\n const panels: NodeListOf<HTMLElement> | null =\n this.querySelectorAll(\".tab__panel\")\n if (!panels.length) {\n throw new Error(`${this.localName} must contain .tab__panel's`)\n }\n return panels\n }\n\n get active(): HTMLButtonElement {\n return this.querySelector('[aria-selected=\"true\"]')\n }\n\n set active(id: string) {\n this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n if (key === id) {\n tab.setAttribute(\"aria-selected\", \"true\")\n tab.setAttribute(\"tab-index\", \"0\")\n panel.removeAttribute(\"inert\")\n this.dropMenuTrigger.textContent = tab.textContent\n } else {\n tab.setAttribute(\"aria-selected\", \"false\")\n tab.setAttribute(\"tab-index\", \"-1\")\n panel.setAttribute(\"inert\", \"\")\n }\n })\n }\n\n handleUrlParams = (id: string): void => {\n const urlParams: URLSearchParams = new URLSearchParams(\n window.location.search,\n )\n if (urlParams.get(\"tab\") === id) return\n urlParams.set(\"tab\", id)\n window.history.replaceState(\n {},\n \"\",\n `${window.location.pathname}?${urlParams.toString()}`,\n )\n }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-tabs\": Tabs\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1,108 +0,0 @@
1
- /**
2
- * Accordion
3
- */
4
-
5
- @layer defaults {
6
- details summary {
7
- list-style-type: none;
8
- }
9
-
10
- details summary:is(::-webkit-details-marker, ::marker) {
11
- display: none;
12
- content: "";
13
- }
14
-
15
- :is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
16
- display: block;
17
- }
18
- :where(:is(div.accordion, mx-accordiondiv)) .accordion__toggle {
19
- -webkit-appearance: none;
20
- -moz-appearance: none;
21
- appearance: none;
22
- color: inherit;
23
- font-size: inherit;
24
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
25
- background: initial;
26
- border: medium none currentcolor;
27
- border: initial;
28
- padding: 0;
29
- padding: initial;
30
- }
31
-
32
- :where(:is(div.accordion, mx-accordiondiv)) .accordion__content[inert] {
33
- display: none;
34
- }
35
- }
36
-
37
- @layer components {
38
- .accordion__title {
39
- margin-block-end: var(--spacing-m);
40
- display: flex;
41
- flex-flow: row wrap;
42
- gap: var(--spacing-s);
43
- align-items: center;
44
- }
45
-
46
- .accordions__toggle-all {
47
- margin-inline-start: auto;
48
- }
49
-
50
- .accordion {
51
- contain: layout;
52
- }
53
-
54
- .accordion .accordion__toggle {
55
- cursor: pointer;
56
- inline-size: 100%;
57
- }
58
-
59
- .accordion:is(> h2, > h3, > h4, > h5, > h6) {
60
- all: unset;
61
- }
62
-
63
- .accordion--divided {
64
- border-block-end: 1px solid
65
- var(--line-colour, var(--colour-border));
66
- border-block-end: var(--line-width, 1px) solid
67
- var(--line-colour, var(--colour-border));
68
- }
69
-
70
- .accordion--divided .accordion__toggle {
71
- padding-block: var(--vertical-padding, var(--spacing-xxs));
72
- padding-inline: 0;
73
- padding-inline: var(--horizontal-padding, 0);
74
- display: flex;
75
- justify-content: space-between;
76
- align-items: center;
77
- }
78
-
79
- .accordion--divided .accordion__toggle .button--icon-only {
80
- flex-shrink: 0;
81
- margin-inline-start: var(--spacing-xxs);
82
- }
83
- .accordion--divided:is([open], [data-open="true"]) .accordion__toggle .button--icon-only {
84
- transform: rotate(180deg);
85
- }
86
-
87
- .accordion--divided:is([open], [data-open="true"]) .accordion__content {
88
- border-block-start: 1px solid
89
- var(--line-colour, var(--colour-border));
90
- border-block-start: var(--line-width, 1px) solid
91
- var(--line-colour, var(--colour-border));
92
- padding-block: var(--vertical-padding, var(--spacing-xxs));
93
- padding-inline: 0;
94
- padding-inline: var(--horizontal-padding, 0);
95
- }
96
- }
97
-
98
- /**
99
- * Print stylesheet
100
- */
101
-
102
- @media print {
103
- .accordion .accordion__content {
104
- display: block !important;
105
- }
106
- }
107
-
108
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCOztJQUVBO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7O0VBRUE7SUFDRSxlQUFlO0VBVWpCOztJQVJFO01BQ0UsZUFBZTtNQUNmLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFVBQVU7SUFDWjs7RUFHRjtJQUNFOzhDQUMwQztJQUQxQzs4Q0FDMEM7RUE2QjVDOztJQTNCRTtNQUNFLDBEQUEwRDtNQUMxRCxpQkFBNEM7TUFBNUMsNENBQTRDO01BQzVDLGFBQWE7TUFDYiw4QkFBOEI7TUFDOUIsbUJBQW1CO0lBTXJCOztNQUpFO1FBQ0UsY0FBYztRQUNkLHVDQUF1QztNQUN6QztRQUtFO1VBQ0UseUJBQXlCO1FBQzNCOztNQUdGO1FBQ0U7a0RBQzBDO1FBRDFDO2tEQUMwQztRQUMxQywwREFBMEQ7UUFDMUQsaUJBQTRDO1FBQTVDLDRDQUE0QztNQUM5QztBQUdOOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJhY2NvcmRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBBY2NvcmRpb25cbiAqL1xuXG5AbGF5ZXIgZGVmYXVsdHMge1xuICBkZXRhaWxzIHtcbiAgICAmIHN1bW1hcnkge1xuICAgICAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xuXG4gICAgICAmOmlzKDo6LXdlYmtpdC1kZXRhaWxzLW1hcmtlciwgOjptYXJrZXIpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICA6aXMobXgtYWNjb3JkaW9uLCBteC1hY2NvcmRpb25kaXYsIG14LWFjY29yZGlvbm1vYmlsZSkge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgOndoZXJlKDppcyhkaXYuYWNjb3JkaW9uLCBteC1hY2NvcmRpb25kaXYpKSB7XG4gICAgJiAuYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuICAgICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgICAgYmFja2dyb3VuZDogaW5pdGlhbDtcbiAgICAgIGJvcmRlcjogaW5pdGlhbDtcbiAgICAgIHBhZGRpbmc6IGluaXRpYWw7XG4gICAgfVxuXG4gICAgJiAuYWNjb3JkaW9uX19jb250ZW50W2luZXJ0XSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxufVxuXG5AbGF5ZXIgY29tcG9uZW50cyB7XG4gIC5hY2NvcmRpb25fX3RpdGxlIHtcbiAgICBtYXJnaW4tYmxvY2stZW5kOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1mbG93OiByb3cgd3JhcDtcbiAgICBnYXA6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxuXG4gIC5hY2NvcmRpb25zX190b2dnbGUtYWxsIHtcbiAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuICB9XG5cbiAgLmFjY29yZGlvbiB7XG4gICAgY29udGFpbjogbGF5b3V0O1xuXG4gICAgJiAuYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuXG4gICAgJjppcyg+IGgyLCA+IGgzLCA+IGg0LCA+IGg1LCA+IGg2KSB7XG4gICAgICBhbGw6IHVuc2V0O1xuICAgIH1cbiAgfVxuXG4gIC5hY2NvcmRpb24tLWRpdmlkZWQge1xuICAgIGJvcmRlci1ibG9jay1lbmQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG5cbiAgICAmIC5hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS12ZXJ0aWNhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4cykpO1xuICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgJiAuYnV0dG9uLS1pY29uLW9ubHkge1xuICAgICAgICBmbGV4LXNocmluazogMDtcbiAgICAgICAgbWFyZ2luLWlubGluZS1zdGFydDogdmFyKC0tc3BhY2luZy14eHMpO1xuICAgICAgfVxuICAgIH1cblxuICAgICY6aXMoW29wZW5dLCBbZGF0YS1vcGVuPVwidHJ1ZVwiXSkge1xuICAgICAgJiAuYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgICAmIC5idXR0b24tLWljb24tb25seSB7XG4gICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5hY2NvcmRpb25fX2NvbnRlbnQge1xuICAgICAgICBib3JkZXItYmxvY2stc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS12ZXJ0aWNhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4cykpO1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCAwKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBQcmludCBzdHlsZXNoZWV0XG4gKi9cblxuQG1lZGlhIHByaW50IHtcbiAgLmFjY29yZGlvbiB7XG4gICAgJiAuYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG4iXX0= */