govuk_publishing_components 44.1.0 → 44.2.0

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs

@@ -0,0 +1,85 @@
+import { getBreakpoint } from '../../common/index.mjs';
+import { ElementError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+
+/**
+ * Service Navigation component
+ *
+ * @preserve
+ */
+class ServiceNavigation extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for header
+   */
+  constructor($root) {
+    super($root);
+    this.$menuButton = void 0;
+    this.$menu = void 0;
+    this.menuIsOpen = false;
+    this.mql = null;
+    const $menuButton = this.$root.querySelector('.govuk-js-service-navigation-toggle');
+    if (!$menuButton) {
+      return this;
+    }
+    const menuId = $menuButton.getAttribute('aria-controls');
+    if (!menuId) {
+      throw new ElementError({
+        component: ServiceNavigation,
+        identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+      });
+    }
+    const $menu = document.getElementById(menuId);
+    if (!$menu) {
+      throw new ElementError({
+        component: ServiceNavigation,
+        element: $menu,
+        identifier: `Navigation (\`<ul id="${menuId}">\`)`
+      });
+    }
+    this.$menu = $menu;
+    this.$menuButton = $menuButton;
+    this.setupResponsiveChecks();
+    this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
+  }
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('tablet');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        component: ServiceNavigation,
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      });
+    }
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', () => this.checkMode());
+    } else {
+      this.mql.addListener(() => this.checkMode());
+    }
+    this.checkMode();
+  }
+  checkMode() {
+    if (!this.mql || !this.$menu || !this.$menuButton) {
+      return;
+    }
+    if (this.mql.matches) {
+      this.$menu.removeAttribute('hidden');
+      this.$menuButton.setAttribute('hidden', '');
+    } else {
+      this.$menuButton.removeAttribute('hidden');
+      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
+      if (this.menuIsOpen) {
+        this.$menu.removeAttribute('hidden');
+      } else {
+        this.$menu.setAttribute('hidden', '');
+      }
+    }
+  }
+  handleMenuButtonClick() {
+    this.menuIsOpen = !this.menuIsOpen;
+    this.checkMode();
+  }
+}
+ServiceNavigation.moduleName = 'govuk-service-navigation';
+
+export { ServiceNavigation };
+//# sourceMappingURL=service-navigation.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"service-navigation.mjs","sources":["../../../../src/govuk/components/service-navigation/service-navigation.mjs"],"sourcesContent":["import { getBreakpoint } from '../../common/index.mjs'\nimport { ElementError } from '../../errors/index.mjs'\nimport { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'\n\n/**\n * Service Navigation component\n *\n * @preserve\n */\nexport class ServiceNavigation extends GOVUKFrontendComponent {\n  /** @private */\n  $menuButton\n\n  /** @private */\n  $menu\n\n  /**\n   * Remember the open/closed state of the nav so we can maintain it when the\n   * screen is resized.\n   *\n   * @private\n   */\n  menuIsOpen = false\n\n  /**\n   * A global const for storing a matchMedia instance which we'll use to detect\n   * when a screen size change happens. We rely on it being null if the feature\n   * isn't available to initially apply hidden attributes\n   *\n   * @private\n   * @type {MediaQueryList | null}\n   */\n  mql = null\n\n  /**\n   * @param {Element | null} $root - HTML element to use for header\n   */\n  constructor($root) {\n    super($root)\n\n    const $menuButton = this.$root.querySelector(\n      '.govuk-js-service-navigation-toggle'\n    )\n\n    // Headers don't necessarily have a navigation. When they don't, the menu\n    // toggle won't be rendered by our macro (or may be omitted when writing\n    // plain HTML)\n    if (!$menuButton) {\n      return this\n    }\n\n    const menuId = $menuButton.getAttribute('aria-controls')\n    if (!menuId) {\n      throw new ElementError({\n        component: ServiceNavigation,\n        identifier:\n          'Navigation button (`<button class=\"govuk-js-service-navigation-toggle\">`) attribute (`aria-controls`)'\n      })\n    }\n\n    const $menu = document.getElementById(menuId)\n    if (!$menu) {\n      throw new ElementError({\n        component: ServiceNavigation,\n        element: $menu,\n        identifier: `Navigation (\\`<ul id=\"${menuId}\">\\`)`\n      })\n    }\n\n    this.$menu = $menu\n    this.$menuButton = $menuButton\n\n    this.setupResponsiveChecks()\n\n    this.$menuButton.addEventListener('click', () =>\n      this.handleMenuButtonClick()\n    )\n  }\n\n  /**\n   * Setup viewport resize check\n   *\n   * @private\n   */\n  setupResponsiveChecks() {\n    const breakpoint = getBreakpoint('tablet')\n\n    if (!breakpoint.value) {\n      throw new ElementError({\n        component: ServiceNavigation,\n        identifier: `CSS custom property (\\`${breakpoint.property}\\`) on pseudo-class \\`:root\\``\n      })\n    }\n\n    // Media query list for GOV.UK Frontend desktop breakpoint\n    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)\n\n    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need\n    // to be able to fall back to the deprecated MediaQueryList.addListener\n    if ('addEventListener' in this.mql) {\n      this.mql.addEventListener('change', () => this.checkMode())\n    } else {\n      // @ts-expect-error Property 'addListener' does not exist\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      this.mql.addListener(() => this.checkMode())\n    }\n\n    this.checkMode()\n  }\n\n  /**\n   * Sync menu state\n   *\n   * Uses the global variable menuIsOpen to correctly set the accessible and\n   * visual states of the menu and the menu button.\n   * Additionally will force the menu to be visible and the menu button to be\n   * hidden if the matchMedia is triggered to desktop.\n   *\n   * @private\n   */\n  checkMode() {\n    if (!this.mql || !this.$menu || !this.$menuButton) {\n      return\n    }\n\n    if (this.mql.matches) {\n      this.$menu.removeAttribute('hidden')\n      this.$menuButton.setAttribute('hidden', '')\n    } else {\n      this.$menuButton.removeAttribute('hidden')\n      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString())\n\n      if (this.menuIsOpen) {\n        this.$menu.removeAttribute('hidden')\n      } else {\n        this.$menu.setAttribute('hidden', '')\n      }\n    }\n  }\n\n  /**\n   * Handle menu button click\n   *\n   * When the menu button is clicked, change the visibility of the menu and then\n   * sync the accessibility state and menu button state\n   *\n   * @private\n   */\n  handleMenuButtonClick() {\n    this.menuIsOpen = !this.menuIsOpen\n    this.checkMode()\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-service-navigation'\n}\n"],"names":["ServiceNavigation","GOVUKFrontendComponent","constructor","$root","$menuButton","$menu","menuIsOpen","mql","querySelector","menuId","getAttribute","ElementError","component","identifier","document","getElementById","element","setupResponsiveChecks","addEventListener","handleMenuButtonClick","breakpoint","getBreakpoint","value","property","window","matchMedia","checkMode","addListener","matches","removeAttribute","setAttribute","toString","moduleName"],"mappings":"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"}

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-default.html

@@ -0,0 +1,57 @@
+
+  <div class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/1">
+                                    
+Navigation item 1
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/2">
+                                    
+Navigation item 2
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/3">
+                                    
+Navigation item 3
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/4">
+                                    
+Navigation item 4
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </div>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html

@@ -0,0 +1,49 @@
+
+  <div class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/1">
+                                    
+<em>Navigation item 1</em>
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/2">
+                                    
+<em>Navigation item 2</em>
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/3">
+                                    
+<em>Navigation item 3</em>
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </div>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html

@@ -0,0 +1,153 @@
+
+  <div class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/benefits">
+                                    
+Benefits
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/births-deaths-marriages">
+                                    
+Births, deaths, marriages and care
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/business">
+                                    
+Business and self-employed
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/childcare-parenting">
+                                    
+Childcare and parenting
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/citizenship">
+                                    
+Citizenship and living in the UK
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/justice">
+                                    
+Crime, justice and the law
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/disabilities">
+                                    
+Disabled people
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/driving">
+                                    
+Driving and transport
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/education">
+                                    
+Education and learning
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/employing-people">
+                                    
+Employing people
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/environment-countryside">
+                                    
+Environment and countryside
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/housing-local-services">
+                                    
+Housing and local services
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/tax">
+                                    
+Money and tax
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/abroad">
+                                    
+Passports, travel and living abroad
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/visas-immigration">
+                                    
+Visas and immigration
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/browse/working">
+                                    
+Working, jobs and pensions
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </div>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-long-service-name.html

@@ -0,0 +1,20 @@
+
+  <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+        <span class="govuk-service-navigation__service-name">
+            <a href="#/" class="govuk-service-navigation__link">
+              Apply to receive a rare holofoil Charizard Pokémon card from the King
+            </a>
+        </span>
+
+      
+    </div>
+
+    </div>
+
+  </section>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html

@@ -0,0 +1,58 @@
+
+  <div class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/1">
+                                    
+Navigation item 1
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+                  <a class="govuk-service-navigation__link" href="#/2" aria-current="page">
+                                    
+                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>
+
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/3">
+                                    
+Navigation item 3
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/4">
+                                    
+Navigation item 4
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </div>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-an-active-item.html

@@ -0,0 +1,58 @@
+
+  <div class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/1">
+                                    
+Navigation item 1
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+                  <a class="govuk-service-navigation__link" href="#/2" aria-current="true">
+                                    
+                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>
+
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/3">
+                                    
+Navigation item 3
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/4">
+                                    
+Navigation item 4
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </div>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html

@@ -0,0 +1,49 @@
+
+  <div class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <span class="govuk-service-navigation__text">
+                                    
+Navigation item 1
+                  </span>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <span class="govuk-service-navigation__text">
+                                    
+<em>Navigation item 2</em>
+                  </span>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <span class="govuk-service-navigation__text">
+                                    
+Navigation item 3
+                  </span>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </div>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-link.html

@@ -0,0 +1,20 @@
+
+  <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+        <span class="govuk-service-navigation__service-name">
+            <a href="#/" class="govuk-service-navigation__link">
+              Service name
+            </a>
+        </span>
+
+      
+    </div>
+
+    </div>
+
+  </section>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html

@@ -0,0 +1,63 @@
+
+  <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+        <span class="govuk-service-navigation__service-name">
+            <a href="#/" class="govuk-service-navigation__link">
+              Apply for a juggling license
+            </a>
+        </span>
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/1">
+                                    
+Navigation item 1
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+                  <a class="govuk-service-navigation__link" href="#/2" aria-current="true">
+                                    
+                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>
+
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/3">
+                                    
+Navigation item 3
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/4">
+                                    
+Navigation item 4
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </section>

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name.html

@@ -0,0 +1,18 @@
+
+  <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+        <span class="govuk-service-navigation__service-name">
+            <span class="govuk-service-navigation__text">Service name</span>
+        </span>
+
+      
+    </div>
+
+    </div>
+
+  </section>