govuk_publishing_components 60.0.2 → 60.2.0

data/node_modules/govuk-frontend/dist/govuk/all.bundle.mjs

@@ -1,13 +1,7 @@
-const version = '5.10.1';
+const version = '5.11.2';
 
-function getFragmentFromUrl(url) {
-  if (!url.includes('#')) {
-    return undefined;
-  }
-  return url.split('#').pop();
-}
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
@@ -63,6 +57,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function isScope($scope) {
+  return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -70,9 +67,6 @@ function formatErrorMessage(Component, message) {
  * @typedef ComponentWithModuleName
  * @property {string} moduleName - Name of the component
  */
-/**
- * @import { ObjectNested } from './configuration.mjs'
- */
 
 class GOVUKFrontendError extends Error {
   constructor(...args) {
@@ -101,7 +95,7 @@ class ConfigError extends GOVUKFrontendError {
 class ElementError extends GOVUKFrontendError {
   constructor(messageOrOptions) {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-    if (typeof messageOrOptions === 'object') {
+    if (isObject(messageOrOptions)) {
       const {
         component,
         identifier,
@@ -110,7 +104,9 @@ class ElementError extends GOVUKFrontendError {
       } = messageOrOptions;
       message = identifier;
       message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
-      message = formatErrorMessage(component, message);
+      if (component) {
+        message = formatErrorMessage(component, message);
+      }
     }
     super(message);
     this.name = 'ElementError';
@@ -250,6 +246,30 @@ function normaliseDataset(Component, dataset) {
   }
   return out;
 }
+function normaliseOptions(scopeOrOptions) {
+  let $scope = document;
+  let onError;
+  if (isObject(scopeOrOptions)) {
+    const options = scopeOrOptions;
+    if (isScope(options.scope) || options.scope === null) {
+      $scope = options.scope;
+    }
+    if (typeof options.onError === 'function') {
+      onError = options.onError;
+    }
+  }
+  if (isScope(scopeOrOptions)) {
+    $scope = scopeOrOptions;
+  } else if (scopeOrOptions === null) {
+    $scope = null;
+  } else if (typeof scopeOrOptions === 'function') {
+    onError = scopeOrOptions;
+  }
+  return {
+    scope: $scope,
+    onError
+  };
+}
 function mergeConfigs(...configObjects) {
   const formattedConfigObject = {};
   for (const configObject of configObjects) {
@@ -344,6 +364,9 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  * @template {Partial<Record<keyof ConfigurationType, unknown>>} [ConfigurationType=ObjectNested]
  * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
+/**
+ * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
+ */
 
 class I18n {
   constructor(translations = {}, config = {}) {
@@ -358,7 +381,7 @@ class I18n {
       throw new Error('i18n: lookup key missing');
     }
     let translation = this.translations[lookupKey];
-    if (typeof (options == null ? void 0 : options.count) === 'number' && typeof translation === 'object') {
+    if (typeof (options == null ? void 0 : options.count) === 'number' && isObject(translation)) {
       const translationPluralForm = translation[this.getPluralSuffix(lookupKey, options.count)];
       if (translationPluralForm) {
         translation = translationPluralForm;
@@ -401,7 +424,7 @@ class I18n {
     }
     const translation = this.translations[lookupKey];
     const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
-    if (typeof translation === 'object') {
+    if (isObject(translation)) {
       if (preferredForm in translation) {
         return preferredForm;
       } else if ('other' in translation) {
@@ -737,11 +760,11 @@ class Accordion extends ConfigurableComponent {
     const ariaLabelParts = [];
     const $headingText = $section.querySelector(`.${this.sectionHeadingTextClass}`);
     if ($headingText) {
-      ariaLabelParts.push(`${$headingText.textContent}`.trim());
+      ariaLabelParts.push($headingText.textContent.trim());
     }
     const $summary = $section.querySelector(`.${this.sectionSummaryClass}`);
     if ($summary) {
-      ariaLabelParts.push(`${$summary.textContent}`.trim());
+      ariaLabelParts.push($summary.textContent.trim());
     }
     const ariaLabelMessage = expanded ? this.i18n.t('hideSectionAriaLabel') : this.i18n.t('showSectionAriaLabel');
     ariaLabelParts.push(ariaLabelMessage);
@@ -794,7 +817,7 @@ class Accordion extends ConfigurableComponent {
     if (id) {
       try {
         window.sessionStorage.setItem(id, isExpanded.toString());
-      } catch (exception) {}
+      } catch (_unused) {}
     }
   }
   setInitialState($section) {
@@ -808,7 +831,7 @@ class Accordion extends ConfigurableComponent {
         if (state !== null) {
           this.setExpanded(state === 'true', $section);
         }
-      } catch (exception) {}
+      } catch (_unused2) {}
     }
   }
   getButtonPunctuationEl() {
@@ -1017,7 +1040,7 @@ class CharacterCount extends ConfigurableComponent {
       });
     }
     this.$errorMessage = this.$root.querySelector('.govuk-error-message');
-    if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
+    if ($textareaDescription.textContent.match(/^\s*$/)) {
       $textareaDescription.textContent = this.i18n.t('textareaDescription', {
         count: this.maxLength
       });
@@ -1377,7 +1400,7 @@ class ErrorSummary extends ConfigurableComponent {
     if (!($target instanceof HTMLAnchorElement)) {
       return false;
     }
-    const inputId = getFragmentFromUrl($target.href);
+    const inputId = $target.hash.replace('#', '');
     if (!inputId) {
       return false;
     }
@@ -1690,7 +1713,6 @@ class FileUpload extends ConfigurableComponent {
       throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
     }
     this.$input = $input;
-    this.$input.setAttribute('hidden', 'true');
     if (!this.$input.id) {
       throw new ElementError({
         component: FileUpload,
@@ -1706,6 +1728,7 @@ class FileUpload extends ConfigurableComponent {
       $label.id = `${this.id}-label`;
     }
     this.$input.id = `${this.id}-input`;
+    this.$input.setAttribute('hidden', 'true');
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';
@@ -1930,6 +1953,7 @@ class Header extends Component {
     if (!$menuButton) {
       return this;
     }
+    this.$root.classList.add('govuk-header--with-js-navigation');
     const menuId = $menuButton.getAttribute('aria-controls');
     if (!menuId) {
       throw new ElementError({
@@ -2357,16 +2381,10 @@ class SkipLink extends Component {
     super($root);
     const hash = this.$root.hash;
     const href = (_this$$root$getAttrib = this.$root.getAttribute('href')) != null ? _this$$root$getAttrib : '';
-    let url;
-    try {
-      url = new window.URL(this.$root.href);
-    } catch (error) {
-      throw new ElementError(`Skip link: Target link (\`href="${href}"\`) is invalid`);
-    }
-    if (url.origin !== window.location.origin || url.pathname !== window.location.pathname) {
+    if (this.$root.origin !== window.location.origin || this.$root.pathname !== window.location.pathname) {
       return;
     }
-    const linkedElementId = getFragmentFromUrl(hash);
+    const linkedElementId = hash.replace('#', '');
     if (!linkedElementId) {
       throw new ElementError(`Skip link: Target link (\`href="${href}"\`) has no hash fragment`);
     }
@@ -2522,7 +2540,7 @@ class Tabs extends Component {
     return this.$root.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
   }
   setAttributes($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return;
     }
@@ -2626,7 +2644,7 @@ class Tabs extends Component {
     this.createHistoryEntry($previousTab);
   }
   getPanel($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return null;
     }
@@ -2674,28 +2692,34 @@ Tabs.moduleName = 'govuk-tabs';
  * Use the `data-module` attributes to find, instantiate and init all of the
  * components provided as part of GOV.UK Frontend.
  *
- * @param {Config & { scope?: Element, onError?: OnErrorCallback<CompatibleClass> }} [config] - Config for all components (with optional scope)
+ * @param {Config | Element | Document | null} [scopeOrConfig] - Scope of the document to search within or config for all components (with optional scope)
  */
-function initAll(config) {
-  var _config$scope;
-  config = typeof config !== 'undefined' ? config : {};
-  if (!isSupported()) {
-    if (config.onError) {
-      config.onError(new SupportError(), {
+function initAll(scopeOrConfig = {}) {
+  const config = isObject(scopeOrConfig) ? scopeOrConfig : {};
+  const options = normaliseOptions(scopeOrConfig);
+  try {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        identifier: 'GOV.UK Frontend scope element (`$scope`)'
+      });
+    }
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return;
   }
   const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
-  const options = {
-    scope: (_config$scope = config.scope) != null ? _config$scope : document,
-    onError: config.onError
-  };
-  components.forEach(([Component, config]) => {
-    createAll(Component, config, options);
+  components.forEach(([Component, componentConfig]) => {
+    createAll(Component, componentConfig, options);
   });
 }
 
@@ -2711,42 +2735,42 @@ function initAll(config) {
  * @template {CompatibleClass} ComponentClass
  * @param {ComponentClass} Component - class of the component to create
  * @param {ComponentConfig<ComponentClass>} [config] - Config supplied to component
- * @param {OnErrorCallback<ComponentClass> | Element | Document | CreateAllOptions<ComponentClass> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
+ * @param {OnErrorCallback<ComponentClass> | Element | Document | null | CreateAllOptions<ComponentClass>} [scopeOrOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
  * @returns {Array<InstanceType<ComponentClass>>} - array of instantiated components
  */
-function createAll(Component, config, createAllOptions) {
-  let $scope = document;
-  let onError;
-  if (typeof createAllOptions === 'object') {
-    var _createAllOptions$sco;
-    createAllOptions = createAllOptions;
-    $scope = (_createAllOptions$sco = createAllOptions.scope) != null ? _createAllOptions$sco : $scope;
-    onError = createAllOptions.onError;
-  }
-  if (typeof createAllOptions === 'function') {
-    onError = createAllOptions;
-  }
-  if (createAllOptions instanceof HTMLElement) {
-    $scope = createAllOptions;
-  }
-  const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
-  if (!isSupported()) {
-    if (onError) {
-      onError(new SupportError(), {
+function createAll(Component, config, scopeOrOptions) {
+  let $elements;
+  const options = normaliseOptions(scopeOrOptions);
+  try {
+    var _options$scope;
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        component: Component,
+        identifier: 'Scope element (`$scope`)'
+      });
+    }
+    $elements = (_options$scope = options.scope) == null ? void 0 : _options$scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         component: Component,
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return [];
   }
-  return Array.from($elements).map($element => {
+  return Array.from($elements != null ? $elements : []).map($element => {
     try {
       return typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
     } catch (error) {
-      if (onError) {
-        onError(error, {
+      if (options.onError) {
+        options.onError(error, {
           element: $element,
           component: Component,
           config
@@ -2765,6 +2789,8 @@ function createAll(Component, config, createAllOptions) {
  * Config for all components via `initAll()`
  *
  * @typedef {object} Config
+ * @property {Element | Document | null} [scope] - Scope of the document to search within
+ * @property {OnErrorCallback<CompatibleClass>} [onError] - Initialisation error callback
  * @property {AccordionConfig} [accordion] - Accordion config
  * @property {ButtonConfig} [button] - Button config
  * @property {CharacterCountConfig} [characterCount] - Character Count config
@@ -2789,7 +2815,7 @@ function createAll(Component, config, createAllOptions) {
 /**
  * Component config keys, e.g. `accordion` and `characterCount`
  *
- * @typedef {keyof Config} ConfigKey
+ * @typedef {keyof Omit<Config, 'scope' | 'onError'>} ConfigKey
  */
 /**
  * @template {CompatibleClass} ComponentClass
@@ -2800,7 +2826,7 @@ function createAll(Component, config, createAllOptions) {
  * @typedef {object} ErrorContext
  * @property {Element} [element] - Element used for component module initialisation
  * @property {ComponentClass} [component] - Class of component
- * @property {ComponentConfig<ComponentClass>} config - Config supplied to component
+ * @property {Config | ComponentConfig<ComponentClass>} [config] - Config supplied to components
  */
 /**
  * @template {CompatibleClass} ComponentClass
@@ -2811,7 +2837,7 @@ function createAll(Component, config, createAllOptions) {
 /**
  * @template {CompatibleClass} ComponentClass
  * @typedef {object} CreateAllOptions
- * @property {Element | Document} [scope] - scope of the document to search within
+ * @property {Element | Document | null} [scope] - scope of the document to search within
  * @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
  */