@ministryofjustice/frontend 4.0.0 → 5.0.0

package/moj/components/alert/alert.spec.helper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert.spec.helper.mjs","sources":["../../../../src/moj/components/alert/alert.spec.helper.mjs"],"sourcesContent":["export const pageTemplate = `\n  <main>\n  <div id=\"alert-1\" role=\"region\"  class=\"moj-alert moj-alert--information moj-alert--with-heading\" aria-label=\"information: This contains information\" data-module=\"moj-alert\" data-dismissible=\"true\">\n    <div>\n      <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.2165 3.45151C11.733 2.82332 13.3585 2.5 15 2.5C16.6415 2.5 18.267 2.82332 19.7835 3.45151C21.3001 4.07969 22.6781 5.00043 23.8388 6.16117C24.9996 7.3219 25.9203 8.69989 26.5485 10.2165C27.1767 11.733 27.5 13.3585 27.5 15C27.5 18.3152 26.183 21.4946 23.8388 23.8388C21.4946 26.183 18.3152 27.5 15 27.5C13.3585 27.5 11.733 27.1767 10.2165 26.5485C8.69989 25.9203 7.3219 24.9996 6.16117 23.8388C3.81696 21.4946 2.5 18.3152 2.5 15C2.5 11.6848 3.81696 8.50537 6.16117 6.16117C7.3219 5.00043 8.69989 4.07969 10.2165 3.45151ZM16.3574 22.4121H13.6621V12.95H16.3574V22.4121ZM13.3789 9.20898C13.3789 8.98763 13.4212 8.7793 13.5059 8.58398C13.5905 8.38216 13.7044 8.20964 13.8477 8.06641C13.9974 7.91667 14.1699 7.79948 14.3652 7.71484C14.5605 7.63021 14.7721 7.58789 15 7.58789C15.2214 7.58789 15.4297 7.63021 15.625 7.71484C15.8268 7.79948 15.9993 7.91667 16.1426 8.06641C16.2923 8.20964 16.4095 8.38216 16.4941 8.58398C16.5788 8.7793 16.6211 8.98763 16.6211 9.20898C16.6211 9.43685 16.5788 9.64844 16.4941 9.84375C16.4095 10.0391 16.2923 10.2116 16.1426 10.3613C15.9993 10.5046 15.8268 10.6185 15.625 10.7031C15.4297 10.7878 15.2214 10.8301 15 10.8301C14.7721 10.8301 14.5605 10.7878 14.3652 10.7031C14.1699 10.6185 13.9974 10.5046 13.8477 10.3613C13.7044 10.2116 13.5905 10.0391 13.5059 9.84375C13.4212 9.64844 13.3789 9.43685 13.3789 9.20898Z\" fill=\"currentColor\"/></svg>\n    </div>\n    <div class=\"moj-alert__content\">\n        <h2 class=\"govuk-heading-m\">This contains information</h2>\n        Content that informs you of a thing. It really is so very informative, that&#39;s why it needs so much content and is really, exceedingly verbose.\n    </div>\n    <div class=\"moj-alert__action\">\n      <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n    </div>\n  </div>\n\n  <h1 id=\"h1\">Heading 1</h1>\n  <section>\n    <h2 id=\"h2\">heading 2</h2>\n    <div id=\"alert-2\" role=\"region\" class=\"moj-alert moj-alert--information\" aria-label=\"information: You might like to know\" data-module=\"moj-alert\" data-dismissible=\"true\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.2165 3.45151C11.733 2.82332 13.3585 2.5 15 2.5C16.6415 2.5 18.267 2.82332 19.7835 3.45151C21.3001 4.07969 22.6781 5.00043 23.8388 6.16117C24.9996 7.3219 25.9203 8.69989 26.5485 10.2165C27.1767 11.733 27.5 13.3585 27.5 15C27.5 18.3152 26.183 21.4946 23.8388 23.8388C21.4946 26.183 18.3152 27.5 15 27.5C13.3585 27.5 11.733 27.1767 10.2165 26.5485C8.69989 25.9203 7.3219 24.9996 6.16117 23.8388C3.81696 21.4946 2.5 18.3152 2.5 15C2.5 11.6848 3.81696 8.50537 6.16117 6.16117C7.3219 5.00043 8.69989 4.07969 10.2165 3.45151ZM16.3574 22.4121H13.6621V12.95H16.3574V22.4121ZM13.3789 9.20898C13.3789 8.98763 13.4212 8.7793 13.5059 8.58398C13.5905 8.38216 13.7044 8.20964 13.8477 8.06641C13.9974 7.91667 14.1699 7.79948 14.3652 7.71484C14.5605 7.63021 14.7721 7.58789 15 7.58789C15.2214 7.58789 15.4297 7.63021 15.625 7.71484C15.8268 7.79948 15.9993 7.91667 16.1426 8.06641C16.2923 8.20964 16.4095 8.38216 16.4941 8.58398C16.5788 8.7793 16.6211 8.98763 16.6211 9.20898C16.6211 9.43685 16.5788 9.64844 16.4941 9.84375C16.4095 10.0391 16.2923 10.2116 16.1426 10.3613C15.9993 10.5046 15.8268 10.6185 15.625 10.7031C15.4297 10.7878 15.2214 10.8301 15 10.8301C14.7721 10.8301 14.5605 10.7878 14.3652 10.7031C14.1699 10.6185 13.9974 10.5046 13.8477 10.3613C13.7044 10.2116 13.5905 10.0391 13.5059 9.84375C13.4212 9.64844 13.3789 9.43685 13.3789 9.20898Z\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"moj-alert__content\">Content that informs you of a thing. <a href=\"#\">More information</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n\n    <div id=\"alert-3\"role=\"region\" class=\"moj-alert moj-alert--success\" aria-label=\"success: Woohoo!\" data-module=\"moj-alert\" data-dismissible=\"true\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path d=\"M11.2869 24.6726L2.00415 15.3899L4.62189 12.7722L11.2869 19.4186L25.3781 5.32739L27.9958 7.96369L11.2869 24.6726Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <div class=\"moj-alert__content\">That thing just successfully occurred. <a href=\"#\">Celebrate here</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n    <div id=\"alert-4\" role=\"region\" class=\"moj-alert moj-alert--warning\" aria-label=\"warning: Something&#39;s not quite right\"  data-module=\"moj-alert\" data-dismissible=\"true\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 2.44922L28.75 26.1992H1.25L15 2.44922ZM13.5107 9.49579H16.4697L16.2431 17.7678H13.7461L13.5107 9.49579ZM13.1299 21.82C13.1299 21.5661 13.1787 21.3285 13.2764 21.1071C13.374 20.8793 13.5075 20.6807 13.6768 20.5114C13.8525 20.3421 14.0544 20.2087 14.2822 20.111C14.5101 20.0134 14.7542 19.9645 15.0146 19.9645C15.2686 19.9645 15.5062 20.0134 15.7275 20.111C15.9554 20.2087 16.154 20.3421 16.3232 20.5114C16.4925 20.6807 16.626 20.8793 16.7236 21.1071C16.8213 21.3285 16.8701 21.5661 16.8701 21.82C16.8701 22.0804 16.8213 22.3246 16.7236 22.5524C16.626 22.7803 16.4925 22.9789 16.3232 23.1481C16.154 23.3174 15.9554 23.4509 15.7275 23.5485C15.5062 23.6462 15.2686 23.695 15.0146 23.695C14.7542 23.695 14.5101 23.6462 14.2822 23.5485C14.0544 23.4509 13.8525 23.3174 13.6768 23.1481C13.5075 22.9789 13.374 22.7803 13.2764 22.5524C13.1787 22.3246 13.1299 22.0804 13.1299 21.82Z\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"moj-alert__content\">You should be aware of this thing. <a href=\"#\">More information</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n    <div id=\"alert-5\" role=\"region\" class=\"moj-alert moj-alert--error\"  aria-label=\"error: Woah, hold up!\"  data-module=\"moj-alert\" data-dismissible=\"true\" data-dismissible=\"true\" data-focus-on-dismiss-selector=\"#focusOnMe\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.1777 2.5H9.82233L2.5 9.82233V20.1777L9.82233 27.5H20.1777L27.5 20.1777V9.82233L20.1777 2.5ZM10.9155 8.87769L15.0001 12.9623L19.0847 8.87771L21.1224 10.9154L17.0378 15L21.1224 19.0846L19.0847 21.1222L15.0001 17.0376L10.9155 21.1223L8.87782 19.0846L12.9624 15L8.87783 10.9153L10.9155 8.87769Z\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"moj-alert__content\">Bad things happened. <a href=\"#\">Contact us</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n    <div id=\"focusOnMe\">I will receive focus</div>\n  </section>\n</main>\n`\n"],"names":[],"mappings":"AAAY,MAAC,YAAY,GAAG;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"alert.spec.helper.mjs","sources":["../../../../src/moj/components/alert/alert.spec.helper.mjs"],"sourcesContent":["export const pageTemplate = `\n  <main>\n  <div id=\"alert-1\" role=\"region\"  class=\"moj-alert moj-alert--information moj-alert--with-heading\" aria-label=\"information: This contains information\" data-module=\"moj-alert\" data-dismissible=\"true\">\n    <div>\n      <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.2165 3.45151C11.733 2.82332 13.3585 2.5 15 2.5C16.6415 2.5 18.267 2.82332 19.7835 3.45151C21.3001 4.07969 22.6781 5.00043 23.8388 6.16117C24.9996 7.3219 25.9203 8.69989 26.5485 10.2165C27.1767 11.733 27.5 13.3585 27.5 15C27.5 18.3152 26.183 21.4946 23.8388 23.8388C21.4946 26.183 18.3152 27.5 15 27.5C13.3585 27.5 11.733 27.1767 10.2165 26.5485C8.69989 25.9203 7.3219 24.9996 6.16117 23.8388C3.81696 21.4946 2.5 18.3152 2.5 15C2.5 11.6848 3.81696 8.50537 6.16117 6.16117C7.3219 5.00043 8.69989 4.07969 10.2165 3.45151ZM16.3574 22.4121H13.6621V12.95H16.3574V22.4121ZM13.3789 9.20898C13.3789 8.98763 13.4212 8.7793 13.5059 8.58398C13.5905 8.38216 13.7044 8.20964 13.8477 8.06641C13.9974 7.91667 14.1699 7.79948 14.3652 7.71484C14.5605 7.63021 14.7721 7.58789 15 7.58789C15.2214 7.58789 15.4297 7.63021 15.625 7.71484C15.8268 7.79948 15.9993 7.91667 16.1426 8.06641C16.2923 8.20964 16.4095 8.38216 16.4941 8.58398C16.5788 8.7793 16.6211 8.98763 16.6211 9.20898C16.6211 9.43685 16.5788 9.64844 16.4941 9.84375C16.4095 10.0391 16.2923 10.2116 16.1426 10.3613C15.9993 10.5046 15.8268 10.6185 15.625 10.7031C15.4297 10.7878 15.2214 10.8301 15 10.8301C14.7721 10.8301 14.5605 10.7878 14.3652 10.7031C14.1699 10.6185 13.9974 10.5046 13.8477 10.3613C13.7044 10.2116 13.5905 10.0391 13.5059 9.84375C13.4212 9.64844 13.3789 9.43685 13.3789 9.20898Z\" fill=\"currentColor\"/></svg>\n    </div>\n    <div class=\"moj-alert__content\">\n        <h2 class=\"govuk-heading-m\">This contains information</h2>\n        Content that informs you of a thing. It really is so very informative, that&#39;s why it needs so much content and is really, exceedingly verbose.\n    </div>\n    <div class=\"moj-alert__action\">\n      <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n    </div>\n  </div>\n\n  <h1 id=\"h1\">Heading 1</h1>\n  <section>\n    <h2 id=\"h2\">heading 2</h2>\n    <div id=\"alert-2\" role=\"region\" class=\"moj-alert moj-alert--information\" aria-label=\"information: You might like to know\" data-module=\"moj-alert\" data-dismissible=\"true\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.2165 3.45151C11.733 2.82332 13.3585 2.5 15 2.5C16.6415 2.5 18.267 2.82332 19.7835 3.45151C21.3001 4.07969 22.6781 5.00043 23.8388 6.16117C24.9996 7.3219 25.9203 8.69989 26.5485 10.2165C27.1767 11.733 27.5 13.3585 27.5 15C27.5 18.3152 26.183 21.4946 23.8388 23.8388C21.4946 26.183 18.3152 27.5 15 27.5C13.3585 27.5 11.733 27.1767 10.2165 26.5485C8.69989 25.9203 7.3219 24.9996 6.16117 23.8388C3.81696 21.4946 2.5 18.3152 2.5 15C2.5 11.6848 3.81696 8.50537 6.16117 6.16117C7.3219 5.00043 8.69989 4.07969 10.2165 3.45151ZM16.3574 22.4121H13.6621V12.95H16.3574V22.4121ZM13.3789 9.20898C13.3789 8.98763 13.4212 8.7793 13.5059 8.58398C13.5905 8.38216 13.7044 8.20964 13.8477 8.06641C13.9974 7.91667 14.1699 7.79948 14.3652 7.71484C14.5605 7.63021 14.7721 7.58789 15 7.58789C15.2214 7.58789 15.4297 7.63021 15.625 7.71484C15.8268 7.79948 15.9993 7.91667 16.1426 8.06641C16.2923 8.20964 16.4095 8.38216 16.4941 8.58398C16.5788 8.7793 16.6211 8.98763 16.6211 9.20898C16.6211 9.43685 16.5788 9.64844 16.4941 9.84375C16.4095 10.0391 16.2923 10.2116 16.1426 10.3613C15.9993 10.5046 15.8268 10.6185 15.625 10.7031C15.4297 10.7878 15.2214 10.8301 15 10.8301C14.7721 10.8301 14.5605 10.7878 14.3652 10.7031C14.1699 10.6185 13.9974 10.5046 13.8477 10.3613C13.7044 10.2116 13.5905 10.0391 13.5059 9.84375C13.4212 9.64844 13.3789 9.43685 13.3789 9.20898Z\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"moj-alert__content\">Content that informs you of a thing. <a href=\"#\">More information</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n\n    <div id=\"alert-3\"role=\"region\" class=\"moj-alert moj-alert--success\" aria-label=\"success: Woohoo!\" data-module=\"moj-alert\" data-dismissible=\"true\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path d=\"M11.2869 24.6726L2.00415 15.3899L4.62189 12.7722L11.2869 19.4186L25.3781 5.32739L27.9958 7.96369L11.2869 24.6726Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <div class=\"moj-alert__content\">That thing just successfully occurred. <a href=\"#\">Celebrate here</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n    <div id=\"alert-4\" role=\"region\" class=\"moj-alert moj-alert--warning\" aria-label=\"warning: Something&#39;s not quite right\"  data-module=\"moj-alert\" data-dismissible=\"true\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 2.44922L28.75 26.1992H1.25L15 2.44922ZM13.5107 9.49579H16.4697L16.2431 17.7678H13.7461L13.5107 9.49579ZM13.1299 21.82C13.1299 21.5661 13.1787 21.3285 13.2764 21.1071C13.374 20.8793 13.5075 20.6807 13.6768 20.5114C13.8525 20.3421 14.0544 20.2087 14.2822 20.111C14.5101 20.0134 14.7542 19.9645 15.0146 19.9645C15.2686 19.9645 15.5062 20.0134 15.7275 20.111C15.9554 20.2087 16.154 20.3421 16.3232 20.5114C16.4925 20.6807 16.626 20.8793 16.7236 21.1071C16.8213 21.3285 16.8701 21.5661 16.8701 21.82C16.8701 22.0804 16.8213 22.3246 16.7236 22.5524C16.626 22.7803 16.4925 22.9789 16.3232 23.1481C16.154 23.3174 15.9554 23.4509 15.7275 23.5485C15.5062 23.6462 15.2686 23.695 15.0146 23.695C14.7542 23.695 14.5101 23.6462 14.2822 23.5485C14.0544 23.4509 13.8525 23.3174 13.6768 23.1481C13.5075 22.9789 13.374 22.7803 13.2764 22.5524C13.1787 22.3246 13.1299 22.0804 13.1299 21.82Z\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"moj-alert__content\">You should be aware of this thing. <a href=\"#\">More information</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n    <div id=\"alert-5\" role=\"region\" class=\"moj-alert moj-alert--error\"  aria-label=\"error: Woah, hold up!\"  data-module=\"moj-alert\" data-dismissible=\"true\" data-dismissible=\"true\" data-focus-on-dismiss-selector=\"#focusOnMe\">\n      <div>\n        <svg class=\"moj-alert__icon\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" height=\"30\" width=\"30\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.1777 2.5H9.82233L2.5 9.82233V20.1777L9.82233 27.5H20.1777L27.5 20.1777V9.82233L20.1777 2.5ZM10.9155 8.87769L15.0001 12.9623L19.0847 8.87771L21.1224 10.9154L17.0378 15L21.1224 19.0846L19.0847 21.1222L15.0001 17.0376L10.9155 21.1223L8.87782 19.0846L12.9624 15L8.87783 10.9153L10.9155 8.87769Z\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"moj-alert__content\">Bad things happened. <a href=\"#\">Contact us</a></div>\n      <div class=\"moj-alert__action\">\n        <button class=\"moj-alert__dismiss\" hidden>Dismiss</button>\n      </div>\n    </div>\n\n    <div id=\"focusOnMe\">I will receive focus</div>\n  </section>\n</main>\n`\n"],"names":["pageTemplate"],"mappings":"AAAO,MAAMA,YAAY,GAAG;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;"}

package/moj/components/badge/_badge.scss

@@ -54,3 +54,5 @@
     @include govuk-font($size: 16, $weight: "bold");
   }
 }
+
+/*# sourceMappingURL=_badge.scss.map */

package/moj/components/badge/_badge.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/badge/_badge.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,qBAAqB;EACrB,2BAA2B;EAC3B,qCAAqC;EACrC,8BAA8B;EAC9B,oBAAoB;EACpB,0BAA0B;EAC1B,yBAAyB;EACzB,sBAAsB;EACtB,+CAA+C;;EAE/C;IACE,oCAAoC;IACpC,6BAA6B;EAC/B;;EAEA;IACE,2CAA2C;IAC3C,oCAAoC;EACtC;;EAEA;IACE,iCAAiC;IACjC,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;IACnC,4BAA4B;EAC9B;;EAEA;IACE,kCAAkC;IAClC,2BAA2B;EAC7B;;EAEA;IACE,mCAAmC;IACnC,4BAA4B;EAC9B;;EAEA;IACE,uCAAuC;IACvC,gCAAgC;EAClC;;EAEA;IACE,+CAA+C;EACjD;AACF","file":"_badge.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #BADGE\n   ========================================================================== */\n\n.moj-badge {\n  display: inline-block;\n  padding: 0 govuk-spacing(1);\n  border: 2px solid $govuk-brand-colour;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  color: $govuk-brand-colour;\n  text-transform: uppercase;\n  vertical-align: middle;\n  @include govuk-font($size: 14, $weight: \"bold\");\n\n  &--purple {\n    border-color: govuk-colour(\"purple\");\n    color: govuk-colour(\"purple\");\n  }\n\n  &--bright-purple {\n    border-color: govuk-colour(\"bright-purple\");\n    color: govuk-colour(\"bright-purple\");\n  }\n\n  &--red {\n    border-color: govuk-colour(\"red\");\n    color: govuk-colour(\"red\");\n  }\n\n  &--green {\n    border-color: govuk-colour(\"green\");\n    color: govuk-colour(\"green\");\n  }\n\n  &--blue {\n    border-color: govuk-colour(\"blue\");\n    color: govuk-colour(\"blue\");\n  }\n\n  &--black {\n    border-color: govuk-colour(\"black\");\n    color: govuk-colour(\"black\");\n  }\n\n  &--grey {\n    border-color: govuk-colour(\"dark-grey\");\n    color: govuk-colour(\"dark-grey\");\n  }\n\n  &--large {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n}\n"]}

package/moj/components/banner/_banner.scss

@@ -50,3 +50,5 @@
   border-color: govuk-colour("red");
   color: govuk-colour("red");
 }
+
+/*# sourceMappingURL=_banner.scss.map */

package/moj/components/banner/_banner.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/banner/_banner.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,+BAA+B;EAC/B,yBAAyB;EACzB,qCAAqC;EACrC,0BAA0B;EAC1B,YAAY,EAAE,+DAA+D;AAC/E;;AAEA;EACE,8BAA8B;EAC9B,WAAW;EACX,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,gBAAgB;EAChB,4BAA4B;EAC5B,8BAA8B;AAChC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;+EAC+E;;AAE/E;EACE,mCAAmC;EACnC,4BAA4B;AAC9B;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;AAC5B","file":"_banner.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #BANNER\n   ========================================================================== */\n\n.moj-banner {\n  margin-bottom: govuk-spacing(6);\n  padding: govuk-spacing(2);\n  border: 5px solid $govuk-brand-colour;\n  color: $govuk-brand-colour;\n  font-size: 0; // Removes white space when using inline-block on child element.\n}\n\n.moj-banner__icon {\n  margin-right: govuk-spacing(2);\n  float: left;\n  fill: currentcolor;\n}\n\n.moj-banner__message {\n  display: block;\n  overflow: hidden;\n  color: govuk-colour(\"black\");\n  @include govuk-font($size: 19);\n}\n\n.moj-banner__message h2 {\n  margin-bottom: govuk-spacing(2);\n}\n\n.moj-banner__message h2:last-child,\n.moj-banner__message p:last-child {\n  margin-bottom: 0;\n}\n\n.moj-banner__assistive {\n  @include govuk-visually-hidden;\n}\n\n/* Style variants\n   ========================================================================== */\n\n.moj-banner--success {\n  border-color: govuk-colour(\"green\");\n  color: govuk-colour(\"green\");\n}\n\n.moj-banner--warning {\n  border-color: govuk-colour(\"red\");\n  color: govuk-colour(\"red\");\n}\n"]}

package/moj/components/button-menu/README.md

@@ -28,12 +28,16 @@ The macro
 
 The JavaScript
 
-```js
-new MOJFrontend.ButtonGroup({
-  container: $('.moj-button-group'),
-  mq: '(min-width: 45em)',
-  buttonText: 'Actions'
-});
+```mjs
+import { ButtonMenu } from '@ministryofjustice/frontend'
+
+const $buttonMenu = document.querySelector('.app-button-menu')
+
+new ButtonMenu($buttonMenu, {
+  alignMenu: 'right',
+  buttonText: 'Menu title',
+  buttonClasses: 'govuk-button--secondary'
+})
 ```
 
 ## Arguments

package/moj/components/button-menu/_button-menu.scss

@@ -6,7 +6,8 @@
   position: relative;
 }
 
-.moj-button-menu__toggle-button {
+.moj-button-menu__toggle-button,
+.moj-button-menu__single-button {
   margin-bottom: 0;
   vertical-align: baseline;
 }
@@ -27,13 +28,17 @@
 }
 
 .moj-button-menu__wrapper {
-  position: absolute;
   z-index: 10;
-  width: 200px;
   margin: 5px 0 0; // 2px shadow, 3px gap
   padding: 0;
   list-style: none;
 
+  &,
+  .moj-button-group--inline {
+    position: absolute;
+    width: 200px;
+  }
+
   &--right {
     right: 0;
   }
@@ -112,3 +117,5 @@
     box-shadow: 0 2px 0 $govuk-focus-text-colour;
   }
 }
+
+/*# sourceMappingURL=_button-menu.scss.map */

package/moj/components/button-menu/_button-menu.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/button-menu/_button-menu.scss"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,uCAAuC;;AAEvC;EACE,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;;EAEE,gBAAgB;EAChB,wBAAwB;AAC1B;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,QAAQ;AACV;;AAEA;EACE,eAAe;EACf,yBAAyB;AAC3B;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,WAAW;EACX,eAAe,EAAE,qBAAqB;EACtC,UAAU;EACV,gBAAgB;;EAEhB;;IAEE,kBAAkB;IAClB,YAAY;EACd;;EAEA;IACE,QAAQ;EACV;AACF;;AAEA,0BAA0B;AAC1B;EACE,qBAAqB;EACrB,WAAW,EAAE,2BAA2B;EACxC,8BAA8B;EAC9B,+BAA+B;EAC/B,wBAAwB;;EAExB;IACE,eAAe;EACjB;AACF;;AAEA,uBAAuB;AACvB;EACE,sBAAsB;EACtB,qBAAqB;EACrB,kBAAkB;EAClB,WAAW;EACX,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,yBAAyB;EACzB,0DAA0D;EAC1D,+CAA+C;EAC/C,gBAAgB;EAChB,yBAAyB;EACzB,4CAA4C;EAC5C,gBAAgB;EAChB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;EACxB,gBAAgB;EAChB,kDAAkD;;EAElD;;;;IAIE,yBAAyB;IACzB,qBAAqB;EACvB;;EAEA;;IAEE,4BAA4B;EAC9B;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,8CAA8C;EAChD;;EAEA;IACE,WAAW;IACX,iCAAiC;IACjC,6CAA6C;IAC7C,+CAA+C;EACjD;;EAEA;IACE,iCAAiC;IACjC,+BAA+B;IAC/B,qCAAqC;IACrC,4CAA4C;EAC9C;AACF","file":"_button-menu.scss","sourcesContent":["@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-button-menu {\n  display: inline-block;\n  position: relative;\n}\n\n.moj-button-menu__toggle-button,\n.moj-button-menu__single-button {\n  margin-bottom: 0;\n  vertical-align: baseline;\n}\n\n.moj-button-menu__toggle-button span {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.moj-button-menu__toggle-button svg {\n  margin-top: 2px;\n  transform: rotate(180deg);\n}\n\n.moj-button-menu__toggle-button[aria-expanded=\"true\"] svg {\n  transform: rotate(0deg);\n}\n\n.moj-button-menu__wrapper {\n  z-index: 10;\n  margin: 5px 0 0; // 2px shadow, 3px gap\n  padding: 0;\n  list-style: none;\n\n  &,\n  .moj-button-group--inline {\n    position: absolute;\n    width: 200px;\n  }\n\n  &--right {\n    right: 0;\n  }\n}\n\n/* Menu items with no JS */\n.moj-button-menu__item {\n  display: inline-block;\n  width: auto; // Override GDS’s 100% width\n  margin-right: govuk-spacing(2);\n  margin-bottom: govuk-spacing(2);\n  vertical-align: baseline;\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n/* Menu items with JS */\n.moj-button-menu li > .moj-button-menu__item {\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  width: 100%;\n  margin-top: 0;\n  margin-right: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  padding: govuk-spacing(2);\n  border: $govuk-border-width-form-element solid transparent;\n  border-bottom: 1px solid $moj-button-menu-color;\n  border-radius: 0;\n  color: $govuk-text-colour;\n  background-color: govuk-colour(\"light-grey\");\n  text-align: left;\n  vertical-align: top;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  @include govuk-font($size: 19, $line-height: 19px);\n\n  &:link,\n  &:visited,\n  &:active,\n  &:hover {\n    color: $govuk-text-colour;\n    text-decoration: none;\n  }\n\n  &:active,\n  &:hover {\n    color: govuk-colour(\"white\");\n  }\n\n  // Fix unwanted button padding in Firefox\n  &::-moz-focus-inner {\n    padding: 0;\n    border: 0;\n  }\n\n  &:hover {\n    background-color: $moj-button-menu-hover-color;\n  }\n\n  &:focus {\n    z-index: 10;\n    border-color: $govuk-focus-colour;\n    outline: $govuk-focus-width solid transparent;\n    box-shadow: inset 0 0 0 1px $govuk-focus-colour;\n  }\n\n  &:focus:not(:active):not(:hover) {\n    border-color: $govuk-focus-colour;\n    color: $govuk-focus-text-colour;\n    background-color: $govuk-focus-colour;\n    box-shadow: 0 2px 0 $govuk-focus-text-colour;\n  }\n}\n"]}

package/moj/components/button-menu/button-menu.bundle.js

@@ -0,0 +1,299 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
+
+  class ButtonMenu {
+    /**
+     * @param {Element | null} $module - HTML element to use for button menu
+     * @param {ButtonMenuConfig} [config] - Button menu config
+     */
+    constructor($module, config = {}) {
+      if (!$module || !($module instanceof HTMLElement)) {
+        return this;
+      }
+      const schema = Object.freeze({
+        properties: {
+          buttonText: {
+            type: 'string'
+          },
+          buttonClasses: {
+            type: 'string'
+          },
+          alignMenu: {
+            type: 'string'
+          }
+        }
+      });
+      const defaults = {
+        buttonText: 'Actions',
+        alignMenu: 'left',
+        buttonClasses: ''
+      };
+      // data attributes override JS config, which overrides defaults
+      this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
+      this.$module = $module;
+
+      // If only one button is provided, don't initiate a menu and toggle button
+      // if classes have been provided for the toggleButton, apply them to the single item
+      if (this.$module.children.length === 1) {
+        const button = this.$module.children[0];
+        button.classList.forEach(className => {
+          if (className.startsWith('govuk-button-')) {
+            button.classList.remove(className);
+          }
+          button.classList.remove('moj-button-menu__item');
+          button.classList.add('moj-button-menu__single-button');
+        });
+        if (this.config.buttonClasses) {
+          button.classList.add(...this.config.buttonClasses.split(' '));
+        }
+      }
+      // Otherwise intialise a button menu
+      if (this.$module.children.length > 1) {
+        this.initMenu();
+      }
+    }
+    initMenu() {
+      this.$menu = this.createMenu();
+      this.$module.insertAdjacentHTML('afterbegin', this.toggleTemplate());
+      this.setupMenuItems();
+      this.$menuToggle = this.$module.querySelector(':scope > button');
+      this.items = this.$menu.querySelectorAll('a, button');
+      this.$menuToggle.addEventListener('click', event => {
+        this.toggleMenu(event);
+      });
+      this.$module.addEventListener('keydown', event => {
+        this.handleKeyDown(event);
+      });
+      document.addEventListener('click', event => {
+        if (!this.$module.contains(event.target)) {
+          this.closeMenu(false);
+        }
+      });
+    }
+    createMenu() {
+      const $menu = document.createElement('ul');
+      $menu.setAttribute('role', 'list');
+      $menu.hidden = true;
+      $menu.classList.add('moj-button-menu__wrapper');
+      if (this.config.alignMenu === 'right') {
+        $menu.classList.add('moj-button-menu__wrapper--right');
+      }
+      this.$module.appendChild($menu);
+      while (this.$module.firstChild !== $menu) {
+        $menu.appendChild(this.$module.firstChild);
+      }
+      return $menu;
+    }
+    setupMenuItems() {
+      Array.from(this.$menu.children).forEach(item => {
+        // wrap item in li tag
+        const listItem = document.createElement('li');
+        this.$menu.insertBefore(listItem, item);
+        listItem.appendChild(item);
+        item.setAttribute('tabindex', '-1');
+        if (item.tagName === 'BUTTON') {
+          item.setAttribute('type', 'button');
+        }
+        item.classList.forEach(className => {
+          if (className.startsWith('govuk-button')) {
+            item.classList.remove(className);
+          }
+        });
+
+        // add a slight delay after click before closing the menu, makes it *feel* better
+        item.addEventListener('click', () => {
+          setTimeout(() => {
+            this.closeMenu(false);
+          }, 50);
+        });
+      });
+    }
+    toggleTemplate() {
+      return `
+    <button type="button" class="govuk-button moj-button-menu__toggle-button ${this.config.buttonClasses || ''}" aria-haspopup="true" aria-expanded="false">
+      <span>
+       ${this.config.buttonText}
+       <svg width="11" height="5" viewBox="0 0 11 5"  xmlns="http://www.w3.org/2000/svg">
+         <path d="M5.5 0L11 5L0 5L5.5 0Z" fill="currentColor"/>
+       </svg>
+      </span>
+    </button>`;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isOpen() {
+      return this.$menuToggle.getAttribute('aria-expanded') === 'true';
+    }
+    toggleMenu(event) {
+      event.preventDefault();
+
+      // If menu is triggered with mouse don't move focus to first item
+      const keyboardEvent = event.detail === 0;
+      const focusIndex = keyboardEvent ? 0 : -1;
+      if (this.isOpen()) {
+        this.closeMenu();
+      } else {
+        this.openMenu(focusIndex);
+      }
+    }
+
+    /**
+     * Opens the menu and optionally sets the focus to the item with given index
+     *
+     * @param {number} focusIndex - The index of the item to focus
+     */
+    openMenu(focusIndex = 0) {
+      this.$menu.hidden = false;
+      this.$menuToggle.setAttribute('aria-expanded', 'true');
+      if (focusIndex !== -1) {
+        this.focusItem(focusIndex);
+      }
+    }
+
+    /**
+     * Closes the menu and optionally returns focus back to menuToggle
+     *
+     * @param {boolean} moveFocus - whether to return focus to the toggle button
+     */
+    closeMenu(moveFocus = true) {
+      this.$menu.hidden = true;
+      this.$menuToggle.setAttribute('aria-expanded', 'false');
+      if (moveFocus) {
+        this.$menuToggle.focus();
+      }
+    }
+
+    /**
+     * Focuses the menu item at the specified index
+     *
+     * @param {number} index - the index of the item to focus
+     */
+    focusItem(index) {
+      if (index >= this.items.length) index = 0;
+      if (index < 0) index = this.items.length - 1;
+      const menuItem = this.items.item(index);
+      if (menuItem) {
+        menuItem.focus();
+      }
+    }
+    currentFocusIndex() {
+      const activeElement = document.activeElement;
+      const menuItems = Array.from(this.items);
+      return menuItems.indexOf(activeElement);
+    }
+    handleKeyDown(event) {
+      if (event.target === this.$menuToggle) {
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            this.openMenu();
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            this.openMenu(this.items.length - 1);
+            break;
+        }
+      }
+      if (this.$menu.contains(event.target) && this.isOpen()) {
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            if (this.currentFocusIndex() !== -1) {
+              this.focusItem(this.currentFocusIndex() + 1);
+            }
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            if (this.currentFocusIndex() !== -1) {
+              this.focusItem(this.currentFocusIndex() - 1);
+            }
+            break;
+          case 'Home':
+            event.preventDefault();
+            this.focusItem(0);
+            break;
+          case 'End':
+            event.preventDefault();
+            this.focusItem(this.items.length - 1);
+            break;
+        }
+      }
+      if (event.key === 'Escape' && this.isOpen()) {
+        this.closeMenu();
+      }
+      if (event.key === 'Tab' && this.isOpen()) {
+        this.closeMenu(false);
+      }
+    }
+
+    /**
+     * Parse dataset
+     *
+     * Loop over an object and normalise each value using {@link normaliseString},
+     * optionally expanding nested `i18n.field`
+     *
+     * @param {Schema} schema - component schema
+     * @param {DOMStringMap} dataset - HTML element dataset
+     * @returns {object} Normalised dataset
+     */
+    parseDataset(schema, dataset) {
+      const parsed = {};
+      for (const [field,,] of Object.entries(schema.properties)) {
+        if (field in dataset) {
+          if (dataset[field]) {
+            parsed[field] = dataset[field];
+          }
+        }
+      }
+      return parsed;
+    }
+
+    /**
+     * Config merging function
+     *
+     * Takes any number of objects and combines them together, with
+     * greatest priority on the LAST item passed in.
+     *
+     * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+     * @returns {{ [key: string]: unknown }} A merged config object
+     */
+    mergeConfigs(...configObjects) {
+      const formattedConfigObject = {};
+
+      // Loop through each of the passed objects
+      for (const configObject of configObjects) {
+        for (const key of Object.keys(configObject)) {
+          const option = formattedConfigObject[key];
+          const override = configObject[key];
+
+          // Push their keys one-by-one into formattedConfigObject. Any duplicate
+          // keys with object values will be merged, otherwise the new value will
+          // override the existing value.
+          if (typeof option === 'object' && typeof override === 'object') {
+            // @ts-expect-error Index signature for type 'string' is missing
+            formattedConfigObject[key] = this.mergeConfigs(option, override);
+          } else {
+            formattedConfigObject[key] = override;
+          }
+        }
+      }
+      return formattedConfigObject;
+    }
+  }
+
+  /**
+   * @typedef {object} ButtonMenuConfig
+   * @property {string} [buttonText='Actions'] - Label for the toggle button
+   * @property {"left" | "right"} [alignMenu='left'] - the alignment of the menu
+   * @property {string} [buttonClasses='govuk-button--secondary'] - css classes applied to the toggle button
+   */
+
+  exports.ButtonMenu = ButtonMenu;
+
+}));
+//# sourceMappingURL=button-menu.bundle.js.map

package/moj/components/button-menu/button-menu.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-menu.bundle.js","sources":["../../../../src/moj/components/button-menu/button-menu.mjs"],"sourcesContent":["export class ButtonMenu {\n  /**\n   * @param {Element | null} $module - HTML element to use for button menu\n   * @param {ButtonMenuConfig} [config] - Button menu config\n   */\n  constructor($module, config = {}) {\n    if (!$module || !($module instanceof HTMLElement)) {\n      return this\n    }\n\n    const schema = Object.freeze({\n      properties: {\n        buttonText: { type: 'string' },\n        buttonClasses: { type: 'string' },\n        alignMenu: { type: 'string' }\n      }\n    })\n\n    const defaults = {\n      buttonText: 'Actions',\n      alignMenu: 'left',\n      buttonClasses: ''\n    }\n    // data attributes override JS config, which overrides defaults\n    this.config = this.mergeConfigs(\n      defaults,\n      config,\n      this.parseDataset(schema, $module.dataset)\n    )\n\n    this.$module = $module\n\n    // If only one button is provided, don't initiate a menu and toggle button\n    // if classes have been provided for the toggleButton, apply them to the single item\n    if (this.$module.children.length === 1) {\n      const button = this.$module.children[0]\n      button.classList.forEach((className) => {\n        if (className.startsWith('govuk-button-')) {\n          button.classList.remove(className)\n        }\n        button.classList.remove('moj-button-menu__item')\n        button.classList.add('moj-button-menu__single-button')\n      })\n      if (this.config.buttonClasses) {\n        button.classList.add(...this.config.buttonClasses.split(' '))\n      }\n    }\n    // Otherwise intialise a button menu\n    if (this.$module.children.length > 1) {\n      this.initMenu()\n    }\n  }\n\n  initMenu() {\n    this.$menu = this.createMenu()\n    this.$module.insertAdjacentHTML('afterbegin', this.toggleTemplate())\n    this.setupMenuItems()\n\n    this.$menuToggle = this.$module.querySelector(':scope > button')\n    this.items = this.$menu.querySelectorAll('a, button')\n\n    this.$menuToggle.addEventListener('click', (event) => {\n      this.toggleMenu(event)\n    })\n\n    this.$module.addEventListener('keydown', (event) => {\n      this.handleKeyDown(event)\n    })\n\n    document.addEventListener('click', (event) => {\n      if (!this.$module.contains(event.target)) {\n        this.closeMenu(false)\n      }\n    })\n  }\n\n  createMenu() {\n    const $menu = document.createElement('ul')\n    $menu.setAttribute('role', 'list')\n    $menu.hidden = true\n    $menu.classList.add('moj-button-menu__wrapper')\n    if (this.config.alignMenu === 'right') {\n      $menu.classList.add('moj-button-menu__wrapper--right')\n    }\n\n    this.$module.appendChild($menu)\n    while (this.$module.firstChild !== $menu) {\n      $menu.appendChild(this.$module.firstChild)\n    }\n\n    return $menu\n  }\n\n  setupMenuItems() {\n    Array.from(this.$menu.children).forEach((item) => {\n      // wrap item in li tag\n      const listItem = document.createElement('li')\n      this.$menu.insertBefore(listItem, item)\n      listItem.appendChild(item)\n\n      item.setAttribute('tabindex', '-1')\n\n      if (item.tagName === 'BUTTON') {\n        item.setAttribute('type', 'button')\n      }\n\n      item.classList.forEach((className) => {\n        if (className.startsWith('govuk-button')) {\n          item.classList.remove(className)\n        }\n      })\n\n      // add a slight delay after click before closing the menu, makes it *feel* better\n      item.addEventListener('click', () => {\n        setTimeout(() => {\n          this.closeMenu(false)\n        }, 50)\n      })\n    })\n  }\n\n  toggleTemplate() {\n    return `\n    <button type=\"button\" class=\"govuk-button moj-button-menu__toggle-button ${this.config.buttonClasses || ''}\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      <span>\n       ${this.config.buttonText}\n       <svg width=\"11\" height=\"5\" viewBox=\"0 0 11 5\"  xmlns=\"http://www.w3.org/2000/svg\">\n         <path d=\"M5.5 0L11 5L0 5L5.5 0Z\" fill=\"currentColor\"/>\n       </svg>\n      </span>\n    </button>`\n  }\n\n  /**\n   * @returns {boolean}\n   */\n  isOpen() {\n    return this.$menuToggle.getAttribute('aria-expanded') === 'true'\n  }\n\n  toggleMenu(event) {\n    event.preventDefault()\n\n    // If menu is triggered with mouse don't move focus to first item\n    const keyboardEvent = event.detail === 0\n    const focusIndex = keyboardEvent ? 0 : -1\n\n    if (this.isOpen()) {\n      this.closeMenu()\n    } else {\n      this.openMenu(focusIndex)\n    }\n  }\n\n  /**\n   * Opens the menu and optionally sets the focus to the item with given index\n   *\n   * @param {number} focusIndex - The index of the item to focus\n   */\n  openMenu(focusIndex = 0) {\n    this.$menu.hidden = false\n    this.$menuToggle.setAttribute('aria-expanded', 'true')\n    if (focusIndex !== -1) {\n      this.focusItem(focusIndex)\n    }\n  }\n\n  /**\n   * Closes the menu and optionally returns focus back to menuToggle\n   *\n   * @param {boolean} moveFocus - whether to return focus to the toggle button\n   */\n  closeMenu(moveFocus = true) {\n    this.$menu.hidden = true\n    this.$menuToggle.setAttribute('aria-expanded', 'false')\n    if (moveFocus) {\n      this.$menuToggle.focus()\n    }\n  }\n\n  /**\n   * Focuses the menu item at the specified index\n   *\n   * @param {number} index - the index of the item to focus\n   */\n  focusItem(index) {\n    if (index >= this.items.length) index = 0\n    if (index < 0) index = this.items.length - 1\n\n    const menuItem = this.items.item(index)\n    if (menuItem) {\n      menuItem.focus()\n    }\n  }\n\n  currentFocusIndex() {\n    const activeElement = document.activeElement\n    const menuItems = Array.from(this.items)\n\n    return menuItems.indexOf(activeElement)\n  }\n\n  handleKeyDown(event) {\n    if (event.target === this.$menuToggle) {\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault()\n          this.openMenu()\n          break\n        case 'ArrowUp':\n          event.preventDefault()\n          this.openMenu(this.items.length - 1)\n          break\n      }\n    }\n\n    if (this.$menu.contains(event.target) && this.isOpen()) {\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault()\n          if (this.currentFocusIndex() !== -1) {\n            this.focusItem(this.currentFocusIndex() + 1)\n          }\n          break\n        case 'ArrowUp':\n          event.preventDefault()\n          if (this.currentFocusIndex() !== -1) {\n            this.focusItem(this.currentFocusIndex() - 1)\n          }\n          break\n        case 'Home':\n          event.preventDefault()\n          this.focusItem(0)\n          break\n        case 'End':\n          event.preventDefault()\n          this.focusItem(this.items.length - 1)\n          break\n      }\n    }\n\n    if (event.key === 'Escape' && this.isOpen()) {\n      this.closeMenu()\n    }\n    if (event.key === 'Tab' && this.isOpen()) {\n      this.closeMenu(false)\n    }\n  }\n\n  /**\n   * Parse dataset\n   *\n   * Loop over an object and normalise each value using {@link normaliseString},\n   * optionally expanding nested `i18n.field`\n   *\n   * @param {Schema} schema - component schema\n   * @param {DOMStringMap} dataset - HTML element dataset\n   * @returns {object} Normalised dataset\n   */\n  parseDataset(schema, dataset) {\n    const parsed = {}\n\n    for (const [field, ,] of Object.entries(schema.properties)) {\n      if (field in dataset) {\n        if (dataset[field]) {\n          parsed[field] = dataset[field]\n        }\n      }\n    }\n\n    return parsed\n  }\n\n  /**\n   * Config merging function\n   *\n   * Takes any number of objects and combines them together, with\n   * greatest priority on the LAST item passed in.\n   *\n   * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge\n   * @returns {{ [key: string]: unknown }} A merged config object\n   */\n  mergeConfigs(...configObjects) {\n    const formattedConfigObject = {}\n\n    // Loop through each of the passed objects\n    for (const configObject of configObjects) {\n      for (const key of Object.keys(configObject)) {\n        const option = formattedConfigObject[key]\n        const override = configObject[key]\n\n        // Push their keys one-by-one into formattedConfigObject. Any duplicate\n        // keys with object values will be merged, otherwise the new value will\n        // override the existing value.\n        if (typeof option === 'object' && typeof override === 'object') {\n          // @ts-expect-error Index signature for type 'string' is missing\n          formattedConfigObject[key] = this.mergeConfigs(option, override)\n        } else {\n          formattedConfigObject[key] = override\n        }\n      }\n    }\n\n    return formattedConfigObject\n  }\n}\n\n/**\n * @typedef {object} ButtonMenuConfig\n * @property {string} [buttonText='Actions'] - Label for the toggle button\n * @property {\"left\" | \"right\"} [alignMenu='left'] - the alignment of the menu\n * @property {string} [buttonClasses='govuk-button--secondary'] - css classes applied to the toggle button\n */\n"],"names":["ButtonMenu","constructor","$module","config","HTMLElement","schema","Object","freeze","properties","buttonText","type","buttonClasses","alignMenu","defaults","mergeConfigs","parseDataset","dataset","children","length","button","classList","forEach","className","startsWith","remove","add","split","initMenu","$menu","createMenu","insertAdjacentHTML","toggleTemplate","setupMenuItems","$menuToggle","querySelector","items","querySelectorAll","addEventListener","event","toggleMenu","handleKeyDown","document","contains","target","closeMenu","createElement","setAttribute","hidden","appendChild","firstChild","Array","from","item","listItem","insertBefore","tagName","setTimeout","isOpen","getAttribute","preventDefault","keyboardEvent","detail","focusIndex","openMenu","focusItem","moveFocus","focus","index","menuItem","currentFocusIndex","activeElement","menuItems","indexOf","key","parsed","field","entries","configObjects","formattedConfigObject","configObject","keys","option","override"],"mappings":"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"}