@nationalarchives/frontend 0.1.8-prerelease → 0.1.10-prerelease

package/nationalarchives/components/grid/grid.stories.js

@@ -1,5 +1,4 @@
 import Header from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -14,7 +13,7 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
@@ -47,7 +46,7 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  classes: "tna-container--demo",
+  classes: "tna-grid--demo",
   columns: [
     {
       html: "<p>Full width</p>",
@@ -189,6 +188,6 @@ const responsiveColumn = {
   widthTiny: "full",
 };
 Responsive.args = {
-  classes: "tna-container--demo",
+  classes: "tna-grid--demo",
   columns: Array(12).fill({ ...responsiveColumn }),
 };

package/nationalarchives/components/grid/template.njk

@@ -1,47 +1,47 @@
 {%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.maxWidth -%}
-    {%- set containerClasses = containerClasses.concat('tna-container--max') -%}
+  {%- set containerClasses = containerClasses.concat('tna-container--max') -%}
 {%- endif -%}
 {%- if params.noPadding -%}
-    {%- set containerClasses = containerClasses.concat('tna-container--no-padding') -%}
+  {%- set containerClasses = containerClasses.concat('tna-container--no-padding') -%}
 {%- endif -%}
 {%- if params.noPaddingAll -%}
-    {%- set containerClasses = containerClasses.concat('tna-container--no-padding-all') -%}
+  {%- set containerClasses = containerClasses.concat('tna-container--no-padding-all') -%}
 {%- endif -%}
 <{{ htmlElement }} class="tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {%- for item in params.columns -%}
-    {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}
-    {%- set columnClasses = [item.classes] if item.classes else [] -%}
-    {%- if item.width -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--full') if item.width == 'full' else ( columnClasses.concat('tna-column--width-' + item.width) ) -%}
-    {%- endif -%}
-    {%- if item.widthMedium -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--full-medium') if item.widthMedium == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthMedium + '-medium') ) -%}
-    {%- endif -%}
-    {%- if item.widthSmall -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--full-small') if item.widthSmall == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthSmall + '-small') ) -%}
-    {%- endif -%}
-    {%- if item.widthTiny -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--full-tiny') if item.widthTiny == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthTiny + '-tiny') ) -%}
-    {%- endif -%}
-    {%- if item.flex -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flex) -%}
-    {%- endif -%}
-    {%- if item.flexMedium -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexMedium + '-medium') -%}
-    {%- endif -%}
-    {%- if item.flexSmall -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexSmall + '-small') -%}
-    {%- endif -%}
-    {%- if item.flexTiny -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexTiny + '-tiny') -%}
-    {%- endif -%}
-    {%- if item.noPadding -%}
-        {%- set columnClasses = columnClasses.concat('tna-column--noPadding') -%}
-    {%- endif -%}
-    <{{ columnHtmlElement }} class="tna-column {{ columnClasses | join(' ') }}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ item.html | safe }}
-    </{{ columnHtmlElement }}>
+  {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}
+  {%- set columnClasses = [item.classes] if item.classes else [] -%}
+  {%- if item.width -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--full') if item.width == 'full' else ( columnClasses.concat('tna-column--width-' + item.width) ) -%}
+  {%- endif -%}
+  {%- if item.widthMedium -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--full-medium') if item.widthMedium == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthMedium + '-medium') ) -%}
+  {%- endif -%}
+  {%- if item.widthSmall -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--full-small') if item.widthSmall == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthSmall + '-small') ) -%}
+  {%- endif -%}
+  {%- if item.widthTiny -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--full-tiny') if item.widthTiny == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthTiny + '-tiny') ) -%}
+  {%- endif -%}
+  {%- if item.flex -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flex) -%}
+  {%- endif -%}
+  {%- if item.flexMedium -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexMedium + '-medium') -%}
+  {%- endif -%}
+  {%- if item.flexSmall -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexSmall + '-small') -%}
+  {%- endif -%}
+  {%- if item.flexTiny -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexTiny + '-tiny') -%}
+  {%- endif -%}
+  {%- if item.noPadding -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--noPadding') -%}
+  {%- endif -%}
+  <{{ columnHtmlElement }} class="tna-column {{ columnClasses | join(' ') }}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    {{ item.html | safe }}
+  </{{ columnHtmlElement }}>
 {%- endfor -%}
 </{{ htmlElement }}>

package/nationalarchives/components/header/_index.scss

@@ -0,0 +1,452 @@
+@use "sass:math";
+@use "../../variables/colour";
+@use "../../variables/grid";
+@use "../../variables/typography";
+@use "../../tools/media";
+@use "../../tools/typography" as tools;
+
+.tna-header {
+  color: #fff;
+
+  background-color: colour.$tna-black;
+
+  &__exit {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    text-align: right;
+
+    background-color: colour.$dark;
+  }
+
+  &__exit-link {
+    color: #fff;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+
+      // .tna-header__exit-link-icon {
+      //   border-color: colour.$tna-yellow;
+
+      //   &::before {
+      //     border-top-color: colour.$tna-yellow;
+      //     border-right-color: colour.$tna-yellow;
+      //   }
+
+      //   &::after {
+      //     background-color: colour.$tna-yellow;
+      //   }
+      // }
+    }
+  }
+
+  &__exit-link-icon {
+    width: 0.825rem;
+    height: 0.825rem;
+    margin-right: 0.125rem;
+    margin-left: 0.5rem;
+
+    display: inline-block;
+
+    position: relative;
+
+    vertical-align: middle;
+
+    border: 0.125rem #fff solid;
+
+    &::before {
+      position: absolute;
+      top: -0.25rem;
+      right: -0.25rem;
+      z-index: 2;
+
+      border: 0.25rem transparent solid;
+      border-top-color: #fff;
+      border-right-color: #fff;
+
+      content: "";
+    }
+
+    &::after {
+      width: 0.25rem;
+      height: 0.825rem;
+
+      position: absolute;
+      top: -0.125rem;
+      right: -0.125rem;
+      z-index: 1;
+
+      background-color: #fff;
+
+      outline: 0.2rem colour.$dark solid;
+
+      transform: rotate(45deg) translateX(50%);
+      transform-origin: 100% 0;
+
+      content: "";
+    }
+  }
+
+  &__contents {
+    &.tna-container {
+      justify-content: space-between;
+    }
+  }
+
+  &__logo {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  &__logo-link {
+    display: -ms-flexbox;
+    display: flex;
+    align-items: flex-end;
+
+    color: inherit;
+    text-decoration: none;
+
+    &--href {
+      &:hover {
+        outline: 0.375rem #fff solid;
+      }
+    }
+  }
+
+  .tna-logo {
+    width: 6.25rem;
+    height: 6.25rem;
+
+    display: inline-block;
+  }
+
+  .tna-logo__foreground {
+    fill: #fff;
+  }
+
+  .tna-logo__background {
+  }
+
+  &__logo-strapline {
+    margin: 0 0.75rem;
+
+    display: inline-block;
+
+    line-height: 2.125;
+    text-transform: uppercase;
+  }
+
+  &__navigation-toggle {
+    align-self: center;
+  }
+
+  &__hamburger {
+    width: 2rem;
+    height: 0.25rem;
+
+    display: block;
+
+    background-color: #fff;
+
+    transition: height 1ms 200ms;
+
+    &::before,
+    &::after {
+      height: 0.25rem;
+
+      display: block;
+
+      position: absolute;
+      right: 0;
+      left: 0;
+
+      background-color: inherit;
+
+      transition:
+        top 200ms 200ms,
+        bottom 200ms 200ms,
+        transform 200ms;
+
+      content: "";
+    }
+
+    &::before {
+      top: 0;
+    }
+
+    &::after {
+      bottom: 0;
+    }
+  }
+
+  &__navigation-toggle-button {
+    height: 2rem;
+    padding: 0;
+
+    display: block;
+
+    position: relative;
+
+    appearance: none;
+
+    font-size: 0;
+
+    background: none;
+
+    border: 0 transparent solid;
+    border-width: 0.25rem 0;
+
+    cursor: pointer;
+
+    &--opened {
+      .tna-header__hamburger {
+        height: 0;
+
+        &::before,
+        &::after {
+          transition:
+            top 200ms,
+            bottom 200ms,
+            transform 200ms 200ms;
+        }
+
+        &::before {
+          top: 0.625rem;
+
+          transform: rotate(-135deg);
+        }
+
+        &::after {
+          bottom: 0.625rem;
+
+          transform: rotate(135deg);
+        }
+      }
+    }
+  }
+
+  &--yellow,
+  &--pink,
+  &--orange,
+  &--green,
+  &--blue {
+    color: colour.$tna-black;
+
+    .tna-header__logo-link {
+      &:hover {
+        outline-color: #000;
+      }
+    }
+
+    .tna-logo__foreground {
+      fill: #000;
+    }
+
+    .tna-header__hamburger {
+      background-color: colour.$tna-black;
+    }
+  }
+
+  &--yellow {
+    background-color: colour.$tna-yellow;
+  }
+
+  &--pink {
+    background-color: colour.$tna-pink;
+  }
+
+  &--orange {
+    background-color: colour.$tna-orange;
+  }
+
+  &--green {
+    background-color: colour.$tna-green;
+  }
+
+  &--blue {
+    background-color: colour.$tna-blue;
+  }
+
+  &__navigation {
+    display: -ms-flexbox;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+
+  &__navigation-items {
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+
+    white-space: nowrap;
+  }
+
+  &__navigation-item {
+    margin-left: 0.75rem;
+
+    display: inline-block;
+  }
+
+  &__navigation-item-link {
+    padding: 0.5rem 1rem;
+
+    display: inline-block;
+
+    color: inherit;
+    font-family: typography.$font-family-heading;
+    text-decoration: none;
+    line-height: 2;
+
+    transition:
+      color 200ms,
+      background-color 200ms;
+
+    &:hover,
+    &--selected {
+      // color: colour.$tna-black;
+      @include colour.colour-font("dark-font");
+
+      // background-color: #fff;
+      @include colour.colour-background("page-background");
+
+      transition:
+        color 50ms,
+        background-color 50ms;
+    }
+  }
+
+  @include media.on-larger-than-mobile {
+    .tna-header__navigation-toggle {
+      display: none;
+    }
+  }
+
+  @include media.on-mobile {
+    $compensated-container-padding: grid.$gutter-width-mobile + 0.75rem;
+
+    &__contents {
+      &.tna-container {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+
+    &__logo {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+
+      &.tna-column {
+        padding-right: $compensated-container-padding;
+        padding-left: $compensated-container-padding;
+      }
+    }
+
+    .tna-logo {
+      width: 4.5rem;
+      height: 4.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.55;
+    }
+
+    &__navigation-toggle {
+      &.tna-column {
+        padding-right: $compensated-container-padding;
+        padding-left: 0;
+      }
+    }
+
+    &__navigation {
+      // color: colour.$base-font-colour;
+      @include colour.colour-font("base-font");
+      @include tools.relative-font-size(20);
+
+      &.tna-column {
+        padding-right: 0;
+        padding-left: 0;
+      }
+
+      .tna-template--js-enabled & {
+        display: none;
+
+        &--open {
+          display: block;
+        }
+      }
+    }
+
+    &__navigation-items {
+      width: 100%;
+
+      // background-color: #fff;
+      @include colour.colour-background("page-background");
+    }
+
+    &__navigation-item {
+      margin: 0;
+
+      display: block;
+
+      // border-bottom: 1px colour.$keyline-colour solid;
+      border-bottom: 1px solid;
+      @include colour.colour-border("keyline");
+    }
+
+    &__navigation-item-link {
+      padding-right: $compensated-container-padding;
+      padding-left: $compensated-container-padding;
+
+      display: block;
+
+      position: relative;
+
+      line-height: 1.6;
+
+      &::after {
+        width: 0;
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+
+        // background-color: colour.$tna-black;
+        @include colour.colour-background("dark-font");
+
+        transition: width 200ms;
+
+        content: "";
+      }
+
+      &:hover {
+        &::after {
+          width: 0.25rem;
+
+          transition: width 50ms;
+        }
+      }
+
+      &--selected {
+        &::after,
+        &:hover::after {
+          width: 0.5rem;
+        }
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    .tna-logo {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.25;
+    }
+  }
+}

package/nationalarchives/components/header/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "header",
+  "fixtures": []
+}

package/nationalarchives/components/header/header.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():(t.TNAFrontend=t.TNAFrontend||{},t.TNAFrontend["components/header/header"]=e())}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Header:()=>o});function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,(void 0,a=function(t,e){if("object"!==n(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!==n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(o.key),"symbol"===n(a)?a:String(a)),o)}var a}var o=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButtonWrapper=e&&e.querySelector(".tna-header__navigation-toggle"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)")}var e,n;return e=t,(n=[{key:"init",value:function(){var t=this;if(this.$module&&this.$toggleButtonWrapper&&this.$navigation){var e="menu-content-".concat(([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})));this.$navigation.setAttribute("id",e),this.$toggleButton=document.createElement("button"),this.$toggleButton.innerText="Menu",this.$toggleButton.setAttribute("aria-controls",e),this.$toggleButton.setAttribute("aria-haspopup","true"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button"),this.$hamburger=document.createElement("div"),this.$hamburger.classList.add("tna-header__hamburger"),this.$toggleButton.appendChild(this.$hamburger),this.$toggleButtonWrapper.appendChild(this.$toggleButton),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return t.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return t.syncState()})):this.mql.addListener((function(){return t.syncState()}))}}},{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}else{this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var n=0;n<this.$links.length;n++)this.$links[n].setAttribute("tabindex","0")}}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
+//# sourceMappingURL=header.js.map

package/nationalarchives/components/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/header/header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/header/header\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButtonWrapper =\n      $module && $module.querySelector(\".tna-header__navigation-toggle\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n  }\n\n  init() {\n    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {\n      return;\n    }\n\n    // const uniqueLinkIds = []\n\n    // for (let i = 0; i < this.$links.length; i++) {\n    //   const uniqueLinkId = uuidv4()\n    //   this.$links[i].setAttribute(\"id\", uniqueLinkId);\n    //   uniqueLinkIds.push(uniqueLinkId)\n    // }\n\n    const uniqueId = `menu-content-${uuidv4()}`;\n    this.$navigation.setAttribute(\"id\", uniqueId);\n    // this.$navigation.setAttribute(\"aria-owns\", uniqueLinkIds.join(\",\"));\n\n    this.$toggleButton = document.createElement(\"button\");\n    this.$toggleButton.innerText = \"Menu\";\n    this.$toggleButton.setAttribute(\"aria-controls\", uniqueId);\n    this.$toggleButton.setAttribute(\"aria-haspopup\", \"true\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-toggle-button\");\n\n    this.$hamburger = document.createElement(\"div\");\n    this.$hamburger.classList.add(\"tna-header__hamburger\");\n\n    this.$toggleButton.appendChild(this.$hamburger);\n    this.$toggleButtonWrapper.appendChild(this.$toggleButton);\n\n    this.syncState();\n\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n      // this.mql.addEventListener(\"change\", this.syncState.bind(this));\n    } else {\n      this.mql.addListener(() => this.syncState());\n      // this.mql.addListener(this.syncState.bind(this));\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.$navigation.classList.add(\"tna-header__navigation--open\");\n        this.$navigation.hidden = false;\n        this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n        this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n        this.$toggleButton.classList.add(\n          \"tna-header__navigation-toggle-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"0\");\n        }\n      } else {\n        this.$navigation.classList.remove(\"tna-header__navigation--open\");\n        this.$navigation.hidden = true;\n        this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n        this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n        this.$toggleButton.classList.remove(\n          \"tna-header__navigation-toggle-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"-1\");\n        }\n      }\n    } else {\n      this.$navigation.classList.add(\"tna-header__navigation--open\");\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n      this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n      this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n      for (let i = 0; i < this.$links.length; i++) {\n        this.$links[i].setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n}\n","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_classCallCheck","this","$toggleButtonWrapper","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","_this","uniqueId","concat","replace","c","crypto","getRandomValues","Uint8Array","toString","setAttribute","$toggleButton","document","createElement","innerText","classList","add","$hamburger","appendChild","syncState","addEventListener","handleToggleNavigation","addListener","matches","hidden","i","length","remove"],"sourceRoot":""}