govuk_publishing_components 35.3.2 → 35.3.4

data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs

@@ -1,249 +1,313 @@
-/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+import { nodeListForEach } from '../../common/index.mjs';
+import '../../vendor/polyfills/Element/prototype/classList.mjs';
+import '../../vendor/polyfills/Element/prototype/nextElementSibling.mjs';
+import '../../vendor/polyfills/Element/prototype/previousElementSibling.mjs';
+import '../../vendor/polyfills/Event.mjs';
+import '../../vendor/polyfills/Function/prototype/bind.mjs';
 
-import { nodeListForEach } from '../../common/index.mjs'
-import '../../vendor/polyfills/Element/prototype/classList.mjs'
-import '../../vendor/polyfills/Element/prototype/nextElementSibling.mjs'
-import '../../vendor/polyfills/Element/prototype/previousElementSibling.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
 
 /**
  * Tabs component
  *
  * @class
- * @param {HTMLElement} $module - HTML element to use for tabs
+ * @param {Element} $module - HTML element to use for tabs
  */
 function Tabs ($module) {
-  this.$module = $module
-  this.$tabs = $module.querySelectorAll('.govuk-tabs__tab')
+  if (!($module instanceof HTMLElement)) {
+    return this
+  }
+
+  var $tabs = $module.querySelectorAll('a.govuk-tabs__tab');
+  if (!$tabs.length) {
+    return this
+  }
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$module = $module;
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$tabs = $tabs;
+
+  /** @deprecated Will be made private in v5.0 */
+  this.keys = { left: 37, right: 39, up: 38, down: 40 };
+
+  /** @deprecated Will be made private in v5.0 */
+  this.jsHiddenClass = 'govuk-tabs__panel--hidden';
+
+  // Save bounded functions to use when removing event listeners during teardown
 
-  this.keys = { left: 37, right: 39, up: 38, down: 40 }
-  this.jsHiddenClass = 'govuk-tabs__panel--hidden'
+  /** @deprecated Will be made private in v5.0 */
+  this.boundTabClick = this.onTabClick.bind(this);
+
+  /** @deprecated Will be made private in v5.0 */
+  this.boundTabKeydown = this.onTabKeydown.bind(this);
+
+  /** @deprecated Will be made private in v5.0 */
+  this.boundOnHashChange = this.onHashChange.bind(this);
+
+  /** @deprecated Will be made private in v5.0 */
+  this.changingHash = false;
 }
 
 /**
  * Initialise component
  */
 Tabs.prototype.init = function () {
+  // Check that required elements are present
+  if (!this.$module || !this.$tabs) {
+    return
+  }
+
   if (typeof window.matchMedia === 'function') {
-    this.setupResponsiveChecks()
+    this.setupResponsiveChecks();
   } else {
-    this.setup()
+    this.setup();
   }
-}
+};
 
 /**
  * Setup viewport resize check
+ *
+ * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.setupResponsiveChecks = function () {
-  this.mql = window.matchMedia('(min-width: 40.0625em)')
-  this.mql.addListener(this.checkMode.bind(this))
-  this.checkMode()
-}
+  /** @deprecated Will be made private in v5.0 */
+  this.mql = window.matchMedia('(min-width: 40.0625em)');
+  this.mql.addListener(this.checkMode.bind(this));
+  this.checkMode();
+};
 
 /**
  * Setup or teardown handler for viewport resize check
+ *
+ * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.checkMode = function () {
   if (this.mql.matches) {
-    this.setup()
+    this.setup();
   } else {
-    this.teardown()
+    this.teardown();
   }
-}
+};
 
 /**
  * Setup tab component
+ *
+ * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.setup = function () {
-  var $module = this.$module
-  var $tabs = this.$tabs
-  var $tabList = $module.querySelector('.govuk-tabs__list')
-  var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
+  var $component = this;
+  var $module = this.$module;
+  var $tabs = this.$tabs;
+  var $tabList = $module.querySelector('.govuk-tabs__list');
+  var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item');
 
   if (!$tabs || !$tabList || !$tabListItems) {
     return
   }
 
-  $tabList.setAttribute('role', 'tablist')
+  $tabList.setAttribute('role', 'tablist');
 
   nodeListForEach($tabListItems, function ($item) {
-    $item.setAttribute('role', 'presentation')
-  })
+    $item.setAttribute('role', 'presentation');
+  });
 
   nodeListForEach($tabs, function ($tab) {
     // Set HTML attributes
-    this.setAttributes($tab)
-
-    // Save bounded functions to use when removing event listeners during teardown
-    $tab.boundTabClick = this.onTabClick.bind(this)
-    $tab.boundTabKeydown = this.onTabKeydown.bind(this)
+    $component.setAttributes($tab);
 
     // Handle events
-    $tab.addEventListener('click', $tab.boundTabClick, true)
-    $tab.addEventListener('keydown', $tab.boundTabKeydown, true)
+    $tab.addEventListener('click', $component.boundTabClick, true);
+    $tab.addEventListener('keydown', $component.boundTabKeydown, true);
 
     // Remove old active panels
-    this.hideTab($tab)
-  }.bind(this))
+    $component.hideTab($tab);
+  });
 
   // Show either the active tab according to the URL's hash or the first tab
-  var $activeTab = this.getTab(window.location.hash) || this.$tabs[0]
-  this.showTab($activeTab)
+  var $activeTab = this.getTab(window.location.hash) || this.$tabs[0];
+  if (!$activeTab) {
+    return
+  }
+
+  this.showTab($activeTab);
 
   // Handle hashchange events
-  $module.boundOnHashChange = this.onHashChange.bind(this)
-  window.addEventListener('hashchange', $module.boundOnHashChange, true)
-}
+  window.addEventListener('hashchange', this.boundOnHashChange, true);
+};
 
 /**
  * Teardown tab component
+ *
+ * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.teardown = function () {
-  var $module = this.$module
-  var $tabs = this.$tabs
-  var $tabList = $module.querySelector('.govuk-tabs__list')
-  var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
+  var $component = this;
+  var $module = this.$module;
+  var $tabs = this.$tabs;
+  var $tabList = $module.querySelector('.govuk-tabs__list');
+  var $tabListItems = $module.querySelectorAll('a.govuk-tabs__list-item');
 
   if (!$tabs || !$tabList || !$tabListItems) {
     return
   }
 
-  $tabList.removeAttribute('role')
+  $tabList.removeAttribute('role');
 
   nodeListForEach($tabListItems, function ($item) {
-    $item.removeAttribute('role', 'presentation')
-  })
+    $item.removeAttribute('role');
+  });
 
   nodeListForEach($tabs, function ($tab) {
     // Remove events
-    $tab.removeEventListener('click', $tab.boundTabClick, true)
-    $tab.removeEventListener('keydown', $tab.boundTabKeydown, true)
+    $tab.removeEventListener('click', $component.boundTabClick, true);
+    $tab.removeEventListener('keydown', $component.boundTabKeydown, true);
 
     // Unset HTML attributes
-    this.unsetAttributes($tab)
-  }.bind(this))
+    $component.unsetAttributes($tab);
+  });
 
   // Remove hashchange event handler
-  window.removeEventListener('hashchange', $module.boundOnHashChange, true)
-}
+  window.removeEventListener('hashchange', this.boundOnHashChange, true);
+};
 
 /**
  * Handle hashchange event
  *
- * @param {HashChangeEvent} event - Hash change event
+ * @deprecated Will be made private in v5.0
  * @returns {void | undefined} Returns void, or undefined when prevented
  */
-Tabs.prototype.onHashChange = function (event) {
-  var hash = window.location.hash
-  var $tabWithHash = this.getTab(hash)
+Tabs.prototype.onHashChange = function () {
+  var hash = window.location.hash;
+  var $tabWithHash = this.getTab(hash);
   if (!$tabWithHash) {
     return
   }
 
   // Prevent changing the hash
   if (this.changingHash) {
-    this.changingHash = false
+    this.changingHash = false;
     return
   }
 
   // Show either the active tab according to the URL's hash or the first tab
-  var $previousTab = this.getCurrentTab()
+  var $previousTab = this.getCurrentTab();
+  if (!$previousTab) {
+    return
+  }
 
-  this.hideTab($previousTab)
-  this.showTab($tabWithHash)
-  $tabWithHash.focus()
-}
+  this.hideTab($previousTab);
+  this.showTab($tabWithHash);
+  $tabWithHash.focus();
+};
 
 /**
  * Hide panel for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.hideTab = function ($tab) {
-  this.unhighlightTab($tab)
-  this.hidePanel($tab)
-}
+  this.unhighlightTab($tab);
+  this.hidePanel($tab);
+};
 
 /**
  * Show panel for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.showTab = function ($tab) {
-  this.highlightTab($tab)
-  this.showPanel($tab)
-}
+  this.highlightTab($tab);
+  this.showPanel($tab);
+};
 
 /**
  * Get tab link by hash
  *
+ * @deprecated Will be made private in v5.0
  * @param {string} hash - Hash fragment including #
  * @returns {HTMLAnchorElement | null} Tab link
  */
 Tabs.prototype.getTab = function (hash) {
-  return this.$module.querySelector('.govuk-tabs__tab[href="' + hash + '"]')
-}
+  // @ts-expect-error `HTMLAnchorElement` type expected
+  return this.$module.querySelector('a.govuk-tabs__tab[href="' + hash + '"]')
+};
 
 /**
  * Set tab link and panel attributes
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.setAttributes = function ($tab) {
   // set tab attributes
-  var panelId = this.getHref($tab).slice(1)
-  $tab.setAttribute('id', 'tab_' + panelId)
-  $tab.setAttribute('role', 'tab')
-  $tab.setAttribute('aria-controls', panelId)
-  $tab.setAttribute('aria-selected', 'false')
-  $tab.setAttribute('tabindex', '-1')
+  var panelId = this.getHref($tab).slice(1);
+  $tab.setAttribute('id', 'tab_' + panelId);
+  $tab.setAttribute('role', 'tab');
+  $tab.setAttribute('aria-controls', panelId);
+  $tab.setAttribute('aria-selected', 'false');
+  $tab.setAttribute('tabindex', '-1');
 
   // set panel attributes
-  var $panel = this.getPanel($tab)
-  $panel.setAttribute('role', 'tabpanel')
-  $panel.setAttribute('aria-labelledby', $tab.id)
-  $panel.classList.add(this.jsHiddenClass)
-}
+  var $panel = this.getPanel($tab);
+  if (!$panel) {
+    return
+  }
+
+  $panel.setAttribute('role', 'tabpanel');
+  $panel.setAttribute('aria-labelledby', $tab.id);
+  $panel.classList.add(this.jsHiddenClass);
+};
 
 /**
  * Unset tab link and panel attributes
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.unsetAttributes = function ($tab) {
   // unset tab attributes
-  $tab.removeAttribute('id')
-  $tab.removeAttribute('role')
-  $tab.removeAttribute('aria-controls')
-  $tab.removeAttribute('aria-selected')
-  $tab.removeAttribute('tabindex')
+  $tab.removeAttribute('id');
+  $tab.removeAttribute('role');
+  $tab.removeAttribute('aria-controls');
+  $tab.removeAttribute('aria-selected');
+  $tab.removeAttribute('tabindex');
 
   // unset panel attributes
-  var $panel = this.getPanel($tab)
-  $panel.removeAttribute('role')
-  $panel.removeAttribute('aria-labelledby')
-  $panel.classList.remove(this.jsHiddenClass)
-}
+  var $panel = this.getPanel($tab);
+  if (!$panel) {
+    return
+  }
+
+  $panel.removeAttribute('role');
+  $panel.removeAttribute('aria-labelledby');
+  $panel.classList.remove(this.jsHiddenClass);
+};
 
 /**
  * Handle tab link clicks
  *
+ * @deprecated Will be made private in v5.0
  * @param {MouseEvent} event - Mouse click event
- * @returns {void | false} Returns void, or false within tab link
+ * @returns {void} Returns void
  */
 Tabs.prototype.onTabClick = function (event) {
-  if (!event.target.classList.contains('govuk-tabs__tab')) {
-    // Allow events on child DOM elements to bubble up to tab parent
-    return false
+  var $currentTab = this.getCurrentTab();
+  var $nextTab = event.currentTarget;
+
+  if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {
+    return
   }
-  event.preventDefault()
-  var $newTab = event.target
-  var $currentTab = this.getCurrentTab()
-  this.hideTab($currentTab)
-  this.showTab($newTab)
-  this.createHistoryEntry($newTab)
-}
+
+  event.preventDefault();
+
+  this.hideTab($currentTab);
+  this.showTab($nextTab);
+  this.createHistoryEntry($nextTab);
+};
 
 /**
  * Update browser URL hash fragment for tab
@@ -251,19 +315,23 @@ Tabs.prototype.onTabClick = function (event) {
  * - Allows back/forward to navigate tabs
  * - Avoids page jump when hash changes
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.createHistoryEntry = function ($tab) {
-  var $panel = this.getPanel($tab)
+  var $panel = this.getPanel($tab);
+  if (!$panel) {
+    return
+  }
 
   // Save and restore the id
   // so the page doesn't jump when a user clicks a tab (which changes the hash)
-  var panelId = $panel.id
-  $panel.id = ''
-  this.changingHash = true
-  window.location.hash = this.getHref($tab).slice(1)
-  $panel.id = panelId
-}
+  var panelId = $panel.id;
+  $panel.id = '';
+  this.changingHash = true;
+  window.location.hash = this.getHref($tab).slice(1);
+  $panel.id = panelId;
+};
 
 /**
  * Handle tab keydown event
@@ -271,130 +339,160 @@ Tabs.prototype.createHistoryEntry = function ($tab) {
  * - Press right/down arrow for next tab
  * - Press left/up arrow for previous tab
  *
+ * @deprecated Will be made private in v5.0
  * @param {KeyboardEvent} event - Keydown event
  */
 Tabs.prototype.onTabKeydown = function (event) {
   switch (event.keyCode) {
     case this.keys.left:
     case this.keys.up:
-      this.activatePreviousTab()
-      event.preventDefault()
+      this.activatePreviousTab();
+      event.preventDefault();
       break
     case this.keys.right:
     case this.keys.down:
-      this.activateNextTab()
-      event.preventDefault()
+      this.activateNextTab();
+      event.preventDefault();
       break
   }
-}
+};
 
 /**
  * Activate next tab
+ *
+ * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.activateNextTab = function () {
-  var $currentTab = this.getCurrentTab()
-  if (!$currentTab) {
+  var $currentTab = this.getCurrentTab();
+  if (!$currentTab || !$currentTab.parentElement) {
     return
   }
 
-  var $nextTabListItem = $currentTab.parentElement.nextElementSibling
+  var $nextTabListItem = $currentTab.parentElement.nextElementSibling;
   if (!$nextTabListItem) {
     return
   }
 
-  var $nextTab = $nextTabListItem.querySelector('.govuk-tabs__tab')
-  if ($nextTab) {
-    this.hideTab($currentTab)
-    this.showTab($nextTab)
-    $nextTab.focus()
-    this.createHistoryEntry($nextTab)
+  var $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab');
+  if (!$nextTab) {
+    return
   }
-}
+
+  this.hideTab($currentTab);
+  this.showTab($nextTab);
+  $nextTab.focus();
+  this.createHistoryEntry($nextTab);
+};
 
 /**
  * Activate previous tab
+ *
+ * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.activatePreviousTab = function () {
-  var $currentTab = this.getCurrentTab()
-  if (!$currentTab) {
+  var $currentTab = this.getCurrentTab();
+  if (!$currentTab || !$currentTab.parentElement) {
     return
   }
 
-  var $previousTabListItem = $currentTab.parentElement.previousElementSibling
+  var $previousTabListItem = $currentTab.parentElement.previousElementSibling;
   if (!$previousTabListItem) {
     return
   }
 
-  var $previousTab = $previousTabListItem.querySelector('.govuk-tabs__tab')
-  if ($previousTab) {
-    this.hideTab($currentTab)
-    this.showTab($previousTab)
-    $previousTab.focus()
-    this.createHistoryEntry($previousTab)
+  var $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab');
+  if (!$previousTab) {
+    return
   }
-}
+
+  this.hideTab($currentTab);
+  this.showTab($previousTab);
+  $previousTab.focus();
+  this.createHistoryEntry($previousTab);
+};
 
 /**
  * Get tab panel for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
- * @returns {HTMLDivElement} Tab panel
+ * @returns {Element | null} Tab panel
  */
 Tabs.prototype.getPanel = function ($tab) {
-  var $panel = this.$module.querySelector(this.getHref($tab))
-  return $panel
-}
+  return this.$module.querySelector(this.getHref($tab))
+};
 
 /**
  * Show tab panel for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.showPanel = function ($tab) {
-  var $panel = this.getPanel($tab)
-  $panel.classList.remove(this.jsHiddenClass)
-}
+  var $panel = this.getPanel($tab);
+  if (!$panel) {
+    return
+  }
+
+  $panel.classList.remove(this.jsHiddenClass);
+};
 
 /**
  * Hide tab panel for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.hidePanel = function ($tab) {
-  var $panel = this.getPanel($tab)
-  $panel.classList.add(this.jsHiddenClass)
-}
+  var $panel = this.getPanel($tab);
+  if (!$panel) {
+    return
+  }
+
+  $panel.classList.add(this.jsHiddenClass);
+};
 
 /**
  * Unset 'selected' state for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.unhighlightTab = function ($tab) {
-  $tab.setAttribute('aria-selected', 'false')
-  $tab.parentNode.classList.remove('govuk-tabs__list-item--selected')
-  $tab.setAttribute('tabindex', '-1')
-}
+  if (!$tab.parentElement) {
+    return
+  }
+
+  $tab.setAttribute('aria-selected', 'false');
+  $tab.parentElement.classList.remove('govuk-tabs__list-item--selected');
+  $tab.setAttribute('tabindex', '-1');
+};
 
 /**
  * Set 'selected' state for tab link
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.highlightTab = function ($tab) {
-  $tab.setAttribute('aria-selected', 'true')
-  $tab.parentNode.classList.add('govuk-tabs__list-item--selected')
-  $tab.setAttribute('tabindex', '0')
-}
+  if (!$tab.parentElement) {
+    return
+  }
+
+  $tab.setAttribute('aria-selected', 'true');
+  $tab.parentElement.classList.add('govuk-tabs__list-item--selected');
+  $tab.setAttribute('tabindex', '0');
+};
 
 /**
  * Get current tab link
  *
- * @returns {HTMLAnchorElement | undefined} Tab link
+ * @deprecated Will be made private in v5.0
+ * @returns {HTMLAnchorElement | null} Tab link
  */
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
-}
+  return this.$module.querySelector('.govuk-tabs__list-item--selected a.govuk-tabs__tab')
+};
 
 /**
  * Get link hash fragment for href attribute
@@ -403,13 +501,15 @@ Tabs.prototype.getCurrentTab = function () {
  * should be a utility function most prob
  * {@link http://labs.thesedays.com/blog/2010/01/08/getting-the-href-value-with-jquery-in-ie/}
  *
+ * @deprecated Will be made private in v5.0
  * @param {HTMLAnchorElement} $tab - Tab link
  * @returns {string} Hash fragment including #
  */
 Tabs.prototype.getHref = function ($tab) {
-  var href = $tab.getAttribute('href')
-  var hash = href.slice(href.indexOf('#'), href.length)
+  var href = $tab.getAttribute('href');
+  var hash = href.slice(href.indexOf('#'), href.length);
   return hash
-}
+};
 
-export default Tabs
+export default Tabs;
+//# sourceMappingURL=components/tabs/tabs.mjs.map