govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
1 lines • 247 kB
Source Map (JSON)
{"version":3,"file":"all.bundle.mjs","sources":["../../src/govuk/common/govuk-frontend-version.mjs","../../src/govuk/common/index.mjs","../../src/govuk/errors/index.mjs","../../src/govuk/govuk-frontend-component.mjs","../../src/govuk/common/configuration.mjs","../../src/govuk/i18n.mjs","../../src/govuk/components/accordion/accordion.mjs","../../src/govuk/components/button/button.mjs","../../src/govuk/common/closest-attribute-value.mjs","../../src/govuk/components/character-count/character-count.mjs","../../src/govuk/components/checkboxes/checkboxes.mjs","../../src/govuk/components/error-summary/error-summary.mjs","../../src/govuk/components/exit-this-page/exit-this-page.mjs","../../src/govuk/components/header/header.mjs","../../src/govuk/components/notification-banner/notification-banner.mjs","../../src/govuk/components/password-input/password-input.mjs","../../src/govuk/components/radios/radios.mjs","../../src/govuk/components/service-navigation/service-navigation.mjs","../../src/govuk/components/skip-link/skip-link.mjs","../../src/govuk/components/tabs/tabs.mjs","../../src/govuk/init.mjs"],"sourcesContent":["/*\n * This variable is automatically overwritten during builds and releases.\n * It doesn't need to be updated manually.\n */\n\n/**\n * GOV.UK Frontend release version\n *\n * {@link https://github.com/alphagov/govuk-frontend/releases}\n */\nexport const version = 'development'\n","/**\n * Common helpers which do not require polyfill.\n *\n * IMPORTANT: If a helper require a polyfill, please isolate it in its own module\n * so that the polyfill can be properly tree-shaken and does not burden\n * the components that do not need that helper\n */\n\n/**\n * Get hash fragment from URL\n *\n * Extract the hash fragment (everything after the hash) from a URL,\n * but not including the hash symbol\n *\n * @private\n * @param {string} url - URL\n * @returns {string | undefined} Fragment from URL, without the hash\n */\nexport function getFragmentFromUrl(url) {\n if (!url.includes('#')) {\n return undefined\n }\n\n return url.split('#').pop()\n}\n\n/**\n * Get GOV.UK Frontend breakpoint value from CSS custom property\n *\n * @private\n * @param {string} name - Breakpoint name\n * @returns {{ property: string, value?: string }} Breakpoint object\n */\nexport function getBreakpoint(name) {\n const property = `--govuk-frontend-breakpoint-${name}`\n\n // Get value from `<html>` with breakpoints on CSS :root\n const value = window\n .getComputedStyle(document.documentElement)\n .getPropertyValue(property)\n\n return {\n property,\n value: value || undefined\n }\n}\n\n/**\n * Move focus to element\n *\n * Sets tabindex to -1 to make the element programmatically focusable,\n * but removes it on blur as the element doesn't need to be focused again.\n *\n * @private\n * @template {HTMLElement} FocusElement\n * @param {FocusElement} $element - HTML element\n * @param {object} [options] - Handler options\n * @param {function(this: FocusElement): void} [options.onBeforeFocus] - Callback before focus\n * @param {function(this: FocusElement): void} [options.onBlur] - Callback on blur\n */\nexport function setFocus($element, options = {}) {\n const isFocusable = $element.getAttribute('tabindex')\n\n if (!isFocusable) {\n $element.setAttribute('tabindex', '-1')\n }\n\n /**\n * Handle element focus\n */\n function onFocus() {\n $element.addEventListener('blur', onBlur, { once: true })\n }\n\n /**\n * Handle element blur\n */\n function onBlur() {\n options.onBlur?.call($element)\n\n if (!isFocusable) {\n $element.removeAttribute('tabindex')\n }\n }\n\n // Add listener to reset element on blur, after focus\n $element.addEventListener('focus', onFocus, { once: true })\n\n // Focus element\n options.onBeforeFocus?.call($element)\n $element.focus()\n}\n\n/**\n * Checks if component is already initialised\n *\n * @internal\n * @param {Element} $root - HTML element to be checked\n * @param {string} moduleName - name of component module\n * @returns {boolean} Whether component is already initialised\n */\nexport function isInitialised($root, moduleName) {\n return (\n $root instanceof HTMLElement &&\n $root.hasAttribute(`data-${moduleName}-init`)\n )\n}\n\n/**\n * Checks if GOV.UK Frontend is supported on this page\n *\n * Some browsers will load and run our JavaScript but GOV.UK Frontend\n * won't be supported.\n *\n * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support\n * @returns {boolean} Whether GOV.UK Frontend is supported on this page\n */\nexport function isSupported($scope = document.body) {\n if (!$scope) {\n return false\n }\n\n return $scope.classList.contains('govuk-frontend-supported')\n}\n\n/**\n * Check for an array\n *\n * @internal\n * @param {unknown} option - Option to check\n * @returns {boolean} Whether the option is an array\n */\nfunction isArray(option) {\n return Array.isArray(option)\n}\n\n/**\n * Check for an object\n *\n * @internal\n * @param {unknown} option - Option to check\n * @returns {boolean} Whether the option is an object\n */\nexport function isObject(option) {\n return !!option && typeof option === 'object' && !isArray(option)\n}\n\n/**\n * Format error message\n *\n * @internal\n * @param {ComponentWithModuleName} Component - Component that threw the error\n * @param {string} message - Error message\n * @returns {string} - Formatted error message\n */\nexport function formatErrorMessage(Component, message) {\n return `${Component.moduleName}: ${message}`\n}\n\n/* eslint-disable jsdoc/valid-types --\n * `{new(...args: any[] ): object}` is not recognised as valid\n * https://github.com/gajus/eslint-plugin-jsdoc/issues/145#issuecomment-1308722878\n * https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/131\n **/\n\n/**\n * @typedef ComponentWithModuleName\n * @property {string} moduleName - Name of the component\n */\n\n/* eslint-enable jsdoc/valid-types */\n","import { formatErrorMessage } from '../common/index.mjs'\n\n/**\n * GOV.UK Frontend error\n *\n * A base class for `Error`s thrown by GOV.UK Frontend.\n *\n * It is meant to be extended into specific types of errors\n * to be thrown by our code.\n *\n * @example\n * ```js\n * class MissingRootError extends GOVUKFrontendError {\n * // Setting an explicit name is important as extending the class will not\n * // set a new `name` on the subclass. The `name` property is important\n * // to ensure intelligible error names even if the class name gets\n * // mangled by a minifier\n * name = \"MissingRootError\"\n * }\n * ```\n * @virtual\n */\nexport class GOVUKFrontendError extends Error {\n name = 'GOVUKFrontendError'\n}\n\n/**\n * Indicates that GOV.UK Frontend is not supported\n */\nexport class SupportError extends GOVUKFrontendError {\n name = 'SupportError'\n\n /**\n * Checks if GOV.UK Frontend is supported on this page\n *\n * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support\n */\n constructor($scope = document.body) {\n const supportMessage =\n 'noModule' in HTMLScriptElement.prototype\n ? 'GOV.UK Frontend initialised without `<body class=\"govuk-frontend-supported\">` from template `<script>` snippet'\n : 'GOV.UK Frontend is not supported in this browser'\n\n super(\n $scope\n ? supportMessage\n : 'GOV.UK Frontend initialised without `<script type=\"module\">`'\n )\n }\n}\n\n/**\n * Indicates that a component has received an illegal configuration\n */\nexport class ConfigError extends GOVUKFrontendError {\n name = 'ConfigError'\n}\n\n/**\n * Indicates an issue with an element (possibly `null` or `undefined`)\n */\nexport class ElementError extends GOVUKFrontendError {\n name = 'ElementError'\n\n /**\n * @internal\n * @overload\n * @param {string} message - Element error message\n */\n\n /**\n * @internal\n * @overload\n * @param {ElementErrorOptions} options - Element error options\n */\n\n /**\n * @internal\n * @param {string | ElementErrorOptions} messageOrOptions - Element error message or options\n */\n constructor(messageOrOptions) {\n let message = typeof messageOrOptions === 'string' ? messageOrOptions : ''\n\n // Build message from options\n if (typeof messageOrOptions === 'object') {\n const { component, identifier, element, expectedType } = messageOrOptions\n\n message = identifier\n\n // Append reason\n message += element\n ? ` is not of type ${expectedType ?? 'HTMLElement'}`\n : ' not found'\n\n message = formatErrorMessage(component, message)\n }\n\n super(message)\n }\n}\n\n/**\n * Indicates that a component is already initialised\n */\nexport class InitError extends GOVUKFrontendError {\n name = 'InitError'\n\n /**\n * @internal\n * @param {ComponentWithModuleName | string} componentOrMessage - name of the component module\n */\n constructor(componentOrMessage) {\n const message =\n typeof componentOrMessage === 'string'\n ? componentOrMessage\n : formatErrorMessage(\n componentOrMessage,\n `Root element (\\`$root\\`) already initialised`\n )\n\n super(message)\n }\n}\n\n/**\n * Element error options\n *\n * @internal\n * @typedef {object} ElementErrorOptions\n * @property {string} identifier - An identifier that'll let the user understand which element has an error. This is whatever makes the most sense\n * @property {Element | null} [element] - The element in error\n * @property {string} [expectedType] - The type that was expected for the identifier\n * @property {ComponentWithModuleName} component - Component throwing the error\n */\n\n/**\n * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName\n */\n","import { isInitialised, isSupported } from './common/index.mjs'\nimport { ElementError, InitError, SupportError } from './errors/index.mjs'\n\n/**\n * Base Component class\n *\n * Centralises the behaviours shared by our components\n *\n * @virtual\n * @template {Element} [RootElementType=HTMLElement]\n */\nexport class GOVUKFrontendComponent {\n /**\n * @type {typeof Element}\n */\n static elementType = HTMLElement\n\n // allows Typescript user to work around the lack of types\n // in GOVUKFrontend package, Typescript is not aware of $root\n // in components that extend GOVUKFrontendComponent\n /**\n * Returns the root element of the component\n *\n * @protected\n * @returns {RootElementType} - the root element of component\n */\n get $root() {\n return this._$root\n }\n\n /**\n * @protected\n * @type {RootElementType}\n */\n _$root\n\n /**\n * Constructs a new component, validating that GOV.UK Frontend is supported\n *\n * @internal\n * @param {Element | null} [$root] - HTML element to use for component\n */\n constructor($root) {\n const childConstructor = /** @type {ChildClassConstructor} */ (\n this.constructor\n )\n\n // TypeScript does not enforce that inheriting classes will define a `moduleName`\n // (even if we add a `@virtual` `static moduleName` property to this class).\n // While we trust users to do this correctly, we do a little check to provide them\n // a helpful error message.\n //\n // After this, we'll be sure that `childConstructor` has a `moduleName`\n // as expected of the `ChildClassConstructor` we've cast `this.constructor` to.\n if (typeof childConstructor.moduleName !== 'string') {\n throw new InitError(`\\`moduleName\\` not defined in component`)\n }\n\n if (!($root instanceof childConstructor.elementType)) {\n throw new ElementError({\n element: $root,\n component: childConstructor,\n identifier: 'Root element (`$root`)',\n expectedType: childConstructor.elementType.name\n })\n } else {\n this._$root = /** @type {RootElementType} */ ($root)\n }\n\n childConstructor.checkSupport()\n\n this.checkInitialised()\n\n const moduleName = childConstructor.moduleName\n\n this.$root.setAttribute(`data-${moduleName}-init`, '')\n }\n\n /**\n * Validates whether component is already initialised\n *\n * @private\n * @throws {InitError} when component is already initialised\n */\n checkInitialised() {\n const constructor = /** @type {ChildClassConstructor} */ (this.constructor)\n const moduleName = constructor.moduleName\n\n if (moduleName && isInitialised(this.$root, moduleName)) {\n throw new InitError(constructor)\n }\n }\n\n /**\n * Validates whether components are supported\n *\n * @throws {SupportError} when the components are not supported\n */\n static checkSupport() {\n if (!isSupported()) {\n throw new SupportError()\n }\n }\n}\n\n/**\n * @typedef ChildClass\n * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component\n */\n\n/**\n * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor\n */\n","import { ConfigError } from '../errors/index.mjs'\nimport { GOVUKFrontendComponent } from '../govuk-frontend-component.mjs'\n\nimport { isObject, formatErrorMessage } from './index.mjs'\n\nexport const configOverride = Symbol.for('configOverride')\n\n/**\n * Base Component class\n *\n * Centralises the behaviours shared by our components\n *\n * @virtual\n * @template {ObjectNested} [ConfigurationType={}]\n * @template {Element & { dataset: DOMStringMap }} [RootElementType=HTMLElement]\n * @augments GOVUKFrontendComponent<RootElementType>\n */\nexport class ConfigurableComponent extends GOVUKFrontendComponent {\n /**\n * configOverride\n *\n * Function which defines configuration overrides to prioritize\n * properties from the root element's dataset.\n *\n * It should take a subset of configuration as input and return\n * a new configuration object with properties that should be\n * overridden based on the root element's dataset. A Symbol\n * is used for indexing to prevent conflicts.\n *\n * @internal\n * @virtual\n * @param {ObjectNested} [param] - Configuration object\n * @returns {ObjectNested} return - Configuration object\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n [configOverride](param) {\n return {}\n }\n\n /**\n * Returns the root element of the component\n *\n * @protected\n * @returns {ConfigurationType} - the root element of component\n */\n get config() {\n return this._config\n }\n\n /**\n *\n * @type {ConfigurationType}\n */\n _config\n\n /**\n * Constructs a new component, validating that GOV.UK Frontend is supported\n *\n * @internal\n * @param {Element | null} [$root] - HTML element to use for component\n * @param {ConfigurationType} [config] - HTML element to use for component\n */\n constructor($root, config) {\n super($root)\n\n const childConstructor =\n /** @type {ChildClassConstructor<ConfigurationType>} */ (this.constructor)\n\n if (typeof childConstructor.defaults === 'undefined') {\n throw new ConfigError(\n formatErrorMessage(\n childConstructor,\n 'Config passed as parameter into constructor but no defaults defined'\n )\n )\n }\n\n const datasetConfig = /** @type {ConfigurationType} */ (\n normaliseDataset(childConstructor, this._$root.dataset)\n )\n\n this._config = /** @type {ConfigurationType} */ (\n mergeConfigs(\n childConstructor.defaults,\n config ?? {},\n this[configOverride](datasetConfig),\n datasetConfig\n )\n )\n }\n}\n\n/**\n * Normalise string\n *\n * 'If it looks like a duck, and it quacks like a duck…' 🦆\n *\n * If the passed value looks like a boolean or a number, convert it to a boolean\n * or number.\n *\n * Designed to be used to convert config passed via data attributes (which are\n * always strings) into something sensible.\n *\n * @internal\n * @param {DOMStringMap[string]} value - The value to normalise\n * @param {SchemaProperty} [property] - Component schema property\n * @returns {string | boolean | number | undefined} Normalised data\n */\nexport function normaliseString(value, property) {\n const trimmedValue = value ? value.trim() : ''\n\n let output\n let outputType = property?.type\n\n // No schema type set? Determine automatically\n if (!outputType) {\n if (['true', 'false'].includes(trimmedValue)) {\n outputType = 'boolean'\n }\n\n // Empty / whitespace-only strings are considered finite so we need to check\n // the length of the trimmed string as well\n if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {\n outputType = 'number'\n }\n }\n\n switch (outputType) {\n case 'boolean':\n output = trimmedValue === 'true'\n break\n\n case 'number':\n output = Number(trimmedValue)\n break\n\n default:\n output = value\n }\n\n return output\n}\n\n/**\n * Normalise dataset\n *\n * Loop over an object and normalise each value using {@link normaliseString},\n * optionally expanding nested `i18n.field`\n *\n * @internal\n * @param {{ schema?: Schema, moduleName: string }} Component - Component class\n * @param {DOMStringMap} dataset - HTML element dataset\n * @returns {ObjectNested} Normalised dataset\n */\nexport function normaliseDataset(Component, dataset) {\n if (typeof Component.schema === 'undefined') {\n throw new ConfigError(\n formatErrorMessage(\n Component,\n 'Config passed as parameter into constructor but no schema defined'\n )\n )\n }\n\n const out = /** @type {ReturnType<typeof normaliseDataset>} */ ({})\n\n // Normalise top-level dataset ('data-*') values using schema types\n for (const [field, property] of Object.entries(Component.schema.properties)) {\n if (field in dataset) {\n out[field] = normaliseString(dataset[field], property)\n }\n\n /**\n * Extract and normalise nested object values automatically using\n * {@link normaliseString} but only schema object types are allowed\n */\n if (property?.type === 'object') {\n out[field] = extractConfigByNamespace(Component.schema, dataset, field)\n }\n }\n\n return out\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 * @internal\n * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge\n * @returns {{ [key: string]: unknown }} A merged config object\n */\nexport function mergeConfigs(...configObjects) {\n // Start with an empty object as our base\n /** @type {{ [key: string]: unknown }} */\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 (isObject(option) && isObject(override)) {\n // @ts-expect-error Index signature for type 'string' is missing\n formattedConfigObject[key] = mergeConfigs(option, override)\n } else {\n // Apply override\n formattedConfigObject[key] = override\n }\n }\n }\n\n return formattedConfigObject\n}\n\n/**\n * Validate component config by schema\n *\n * Follows limited examples in JSON schema for wider support in future\n *\n * {@link https://ajv.js.org/json-schema.html#compound-keywords}\n * {@link https://ajv.js.org/packages/ajv-errors.html#single-message}\n *\n * @internal\n * @param {Schema} schema - Config schema\n * @param {{ [key: string]: unknown }} config - Component config\n * @returns {string[]} List of validation errors\n */\nexport function validateConfig(schema, config) {\n const validationErrors = []\n\n // Check errors for each schema\n for (const [name, conditions] of Object.entries(schema)) {\n const errors = []\n\n // Check errors for each schema condition\n if (Array.isArray(conditions)) {\n for (const { required, errorMessage } of conditions) {\n if (!required.every((key) => !!config[key])) {\n errors.push(errorMessage) // Missing config key value\n }\n }\n\n // Check one condition passes or add errors\n if (name === 'anyOf' && !(conditions.length - errors.length >= 1)) {\n validationErrors.push(...errors)\n }\n }\n }\n\n return validationErrors\n}\n\n/**\n * Extracts keys starting with a particular namespace from dataset ('data-*')\n * object, removing the namespace in the process, normalising all values\n *\n * @internal\n * @param {Schema} schema - The schema of a component\n * @param {DOMStringMap} dataset - The object to extract key-value pairs from\n * @param {string} namespace - The namespace to filter keys with\n * @returns {ObjectNested | undefined} Nested object with dot-separated key namespace removed\n */\nexport function extractConfigByNamespace(schema, dataset, namespace) {\n const property = schema.properties[namespace]\n\n // Only extract configs for object schema properties\n if (property?.type !== 'object') {\n return\n }\n\n // Add default empty config\n const newObject = {\n [namespace]: /** @type {ObjectNested} */ ({})\n }\n\n for (const [key, value] of Object.entries(dataset)) {\n /** @type {ObjectNested | ObjectNested[NestedKey]} */\n let current = newObject\n\n // Split the key into parts, using . as our namespace separator\n const keyParts = key.split('.')\n\n /**\n * Create new level per part\n *\n * e.g. 'i18n.textareaDescription.other' becomes\n * `{ i18n: { textareaDescription: { other } } }`\n */\n for (const [index, name] of keyParts.entries()) {\n if (typeof current === 'object') {\n // Drop down to nested object until the last part\n if (index < keyParts.length - 1) {\n // New nested object (optionally) replaces existing value\n if (!isObject(current[name])) {\n current[name] = {}\n }\n\n // Drop down into new or existing nested object\n current = current[name]\n } else if (key !== namespace) {\n // Normalised value (optionally) replaces existing value\n current[name] = normaliseString(value)\n }\n }\n }\n }\n\n return newObject[namespace]\n}\n\n/**\n * @internal\n * @typedef {keyof ObjectNested} NestedKey\n * @typedef {{ [key: string]: string | boolean | number | ObjectNested | undefined }} ObjectNested\n */\n\n/**\n * Schema for component config\n *\n * @typedef {object} Schema\n * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties\n * @property {SchemaCondition[]} [anyOf] - List of schema conditions\n */\n\n/**\n * Schema property for component config\n *\n * @typedef {object} SchemaProperty\n * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type\n */\n\n/**\n * Schema condition for component config\n *\n * @typedef {object} SchemaCondition\n * @property {string[]} required - List of required config fields\n * @property {string} errorMessage - Error message when required config fields not provided\n */\n\n/**\n * @template {ObjectNested} [ConfigurationType={}]\n * @typedef ChildClass\n * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component\n * @property {Schema} [schema] - The schema of the component configuration\n * @property {ConfigurationType} [defaults] - The default values of the configuration of the component\n */\n\n/**\n * @template {ObjectNested} [ConfigurationType={}]\n * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>\n */\n","/**\n * Internal support for selecting messages to render, with placeholder\n * interpolation and locale-aware number formatting and pluralisation\n *\n * @internal\n */\nexport class I18n {\n translations\n locale\n\n /**\n * @internal\n * @param {{ [key: string]: string | TranslationPluralForms }} translations - Key-value pairs of the translation strings to use.\n * @param {object} [config] - Configuration options for the function.\n * @param {string | null} [config.locale] - An overriding locale for the PluralRules functionality.\n */\n constructor(translations = {}, config = {}) {\n // Make list of translations available throughout function\n this.translations = translations\n\n // The locale to use for PluralRules and NumberFormat\n this.locale = config.locale ?? (document.documentElement.lang || 'en')\n }\n\n /**\n * The most used function - takes the key for a given piece of UI text and\n * returns the appropriate string.\n *\n * @internal\n * @param {string} lookupKey - The lookup key of the string to use.\n * @param {{ [key: string]: unknown }} [options] - Any options passed with the translation string, e.g: for string interpolation.\n * @returns {string} The appropriate translation string.\n * @throws {Error} Lookup key required\n * @throws {Error} Options required for `${}` placeholders\n */\n t(lookupKey, options) {\n if (!lookupKey) {\n // Print a console error if no lookup key has been provided\n throw new Error('i18n: lookup key missing')\n }\n\n // Fetch the translation for that lookup key\n let translation = this.translations[lookupKey]\n\n // If the `count` option is set, determine which plural suffix is needed and\n // change the lookupKey to match. We check to see if it's numeric instead of\n // falsy, as this could legitimately be 0.\n if (typeof options?.count === 'number' && typeof translation === 'object') {\n const translationPluralForm =\n translation[this.getPluralSuffix(lookupKey, options.count)]\n\n // Update translation with plural suffix\n if (translationPluralForm) {\n translation = translationPluralForm\n }\n }\n\n if (typeof translation === 'string') {\n // Check for ${} placeholders in the translation string\n if (translation.match(/%{(.\\S+)}/)) {\n if (!options) {\n throw new Error(\n 'i18n: cannot replace placeholders in string if no option data provided'\n )\n }\n\n return this.replacePlaceholders(translation, options)\n }\n\n return translation\n }\n\n // If the key wasn't found in our translations object,\n // return the lookup key itself as the fallback\n return lookupKey\n }\n\n /**\n * Takes a translation string with placeholders, and replaces the placeholders\n * with the provided data\n *\n * @internal\n * @param {string} translationString - The translation string\n * @param {{ [key: string]: unknown }} options - Any options passed with the translation string, e.g: for string interpolation.\n * @returns {string} The translation string to output, with $\\{\\} placeholders replaced\n */\n replacePlaceholders(translationString, options) {\n const formatter = Intl.NumberFormat.supportedLocalesOf(this.locale).length\n ? new Intl.NumberFormat(this.locale)\n : undefined\n\n return translationString.replace(\n /%{(.\\S+)}/g,\n\n /**\n * Replace translation string placeholders\n *\n * @internal\n * @param {string} placeholderWithBraces - Placeholder with braces\n * @param {string} placeholderKey - Placeholder key\n * @returns {string} Placeholder value\n */\n function (placeholderWithBraces, placeholderKey) {\n if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {\n const placeholderValue = options[placeholderKey]\n\n // If a user has passed `false` as the value for the placeholder\n // treat it as though the value should not be displayed\n if (\n placeholderValue === false ||\n (typeof placeholderValue !== 'number' &&\n typeof placeholderValue !== 'string')\n ) {\n return ''\n }\n\n // If the placeholder's value is a number, localise the number formatting\n if (typeof placeholderValue === 'number') {\n return formatter\n ? formatter.format(placeholderValue)\n : `${placeholderValue}`\n }\n\n return placeholderValue\n }\n\n throw new Error(\n `i18n: no data found to replace ${placeholderWithBraces} placeholder in string`\n )\n }\n )\n }\n\n /**\n * Check to see if the browser supports Intl.PluralRules\n *\n * It requires all conditions to be met in order to be supported:\n * - The implementation of Intl supports PluralRules (NOT true in Safari 10–12)\n * - The browser/OS has plural rules for the current locale (browser dependent)\n *\n * {@link https://browsersl.ist/#q=supports+es6-module+and+not+supports+intl-pluralrules}\n *\n * @internal\n * @returns {boolean} Returns true if all conditions are met. Returns false otherwise.\n */\n hasIntlPluralRulesSupport() {\n return Boolean(\n 'PluralRules' in window.Intl &&\n Intl.PluralRules.supportedLocalesOf(this.locale).length\n )\n }\n\n /**\n * Get the appropriate suffix for the plural form.\n *\n * Uses Intl.PluralRules (or our own fallback implementation) to get the\n * 'preferred' form to use for the given count.\n *\n * Checks that a translation has been provided for that plural form – if it\n * hasn't, it'll fall back to the 'other' plural form (unless that doesn't exist\n * either, in which case an error will be thrown)\n *\n * @internal\n * @param {string} lookupKey - The lookup key of the string to use.\n * @param {number} count - Number used to determine which pluralisation to use.\n * @returns {PluralRule} The suffix associated with the correct pluralisation for this locale.\n * @throws {Error} Plural form `.other` required when preferred plural form is missing\n */\n getPluralSuffix(lookupKey, count) {\n // Validate that the number is actually a number.\n //\n // Number(count) will turn anything that can't be converted to a Number type\n // into 'NaN'. isFinite filters out NaN, as it isn't a finite number.\n count = Number(count)\n if (!isFinite(count)) {\n return 'other'\n }\n\n // Fetch the translation for that lookup key\n const translation = this.translations[lookupKey]\n\n // Check to verify that all the requirements for Intl.PluralRules are met.\n // If so, we can use that instead of our custom implementation. Otherwise,\n // use the hardcoded fallback.\n const preferredForm = this.hasIntlPluralRulesSupport()\n ? new Intl.PluralRules(this.locale).select(count)\n : this.selectPluralFormUsingFallbackRules(count)\n\n // Use the correct plural form if provided\n if (typeof translation === 'object') {\n if (preferredForm in translation) {\n return preferredForm\n // Fall back to `other` if the plural form is missing, but log a warning\n // to the console\n } else if ('other' in translation) {\n console.warn(\n `i18n: Missing plural form \".${preferredForm}\" for \"${this.locale}\" locale. Falling back to \".other\".`\n )\n\n return 'other'\n }\n }\n\n // If the required `other` plural form is missing, all we can do is error\n throw new Error(\n `i18n: Plural form \".other\" is required for \"${this.locale}\" locale`\n )\n }\n\n /**\n * Get the plural form using our fallback implementation\n *\n * This is split out into a separate function to make it easier to test the\n * fallback behaviour in an environment where Intl.PluralRules exists.\n *\n * @internal\n * @param {number} count - Number used to determine which pluralisation to use.\n * @returns {PluralRule} The pluralisation form for count in this locale.\n */\n selectPluralFormUsingFallbackRules(count) {\n // Currently our custom code can only handle positive integers, so let's\n // make sure our number is one of those.\n count = Math.abs(Math.floor(count))\n\n const ruleset = this.getPluralRulesForLocale()\n\n if (ruleset) {\n return I18n.pluralRules[ruleset](count)\n }\n\n return 'other'\n }\n\n /**\n * Work out which pluralisation rules to use for the current locale\n *\n * The locale may include a regional indicator (such as en-GB), but we don't\n * usually care about this part, as pluralisation rules are usually the same\n * regardless of region. There are exceptions, however, (e.g. Portuguese) so\n * this searches by both the full and shortened locale codes, just to be sure.\n *\n * @internal\n * @returns {string | undefined} The name of the pluralisation rule to use (a key for one\n * of the functions in this.pluralRules)\n */\n getPluralRulesForLocale() {\n const localeShort = this.locale.split('-')[0]\n\n // Look through the plural rules map to find which `pluralRule` is\n // appropriate for our current `locale`.\n for (const pluralRule in I18n.pluralRulesMap) {\n const languages = I18n.pluralRulesMap[pluralRule]\n if (languages.includes(this.locale) || languages.includes(localeShort)) {\n return pluralRule\n }\n }\n }\n\n /**\n * Map of plural rules to languages where those rules apply.\n *\n * Note: These groups are named for the most dominant or recognisable language\n * that uses each system. The groupings do not imply that the languages are\n * related to one another. Many languages have evolved the same systems\n * independently of one another.\n *\n * Code to support more languages can be found in the i18n spike:\n * {@link https://github.com/alphagov/govuk-frontend/blob/spike-i18n-support/src/govuk/i18n.mjs}\n *\n * Languages currently supported:\n *\n * Arabic: Arabic (ar)\n * Chinese: Burmese (my), Chinese (zh), Indonesian (id), Japanese (ja),\n * Javanese (jv), Korean (ko), Malay (ms), Thai (th), Vietnamese (vi)\n * French: Armenian (hy), Bangla (bn), French (fr), Gujarati (gu), Hindi (hi),\n * Persian Farsi (fa), Punjabi (pa), Zulu (zu)\n * German: Afrikaans (af), Albanian (sq), Azerbaijani (az), Basque (eu),\n * Bulgarian (bg), Catalan (ca), Danish (da), Dutch (nl), English (en),\n * Estonian (et), Finnish (fi), Georgian (ka), German (de), Greek (el),\n * Hungarian (hu), Luxembourgish (lb), Norwegian (no), Somali (so),\n * Swahili (sw), Swedish (sv), Tamil (ta), Telugu (te), Turkish (tr),\n * Urdu (ur)\n * Irish: Irish Gaelic (ga)\n * Russian: Russian (ru), Ukrainian (uk)\n * Scottish: Scottish Gaelic (gd)\n * Spanish: European Portuguese (pt-PT), Italian (it), Spanish (es)\n * Welsh: Welsh (cy)\n *\n * @internal\n * @type {{ [key: string]: string[] }}\n */\n static pluralRulesMap = {\n arabic: ['ar'],\n chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],\n french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],\n german: [\n 'af',\n 'sq',\n 'az',\n 'eu',\n 'bg',\n 'ca',\n 'da',\n 'nl',\n 'en',\n 'et',\n 'fi',\n 'ka',\n 'de',\n 'el',\n 'hu',\n 'lb',\n 'no',\n 'so',\n 'sw',\n 'sv',\n 'ta',\n 'te',\n 'tr',\n 'ur'\n ],\n irish: ['ga'],\n russian: ['ru', 'uk'],\n scottish: ['gd'],\n spanish: ['pt-PT', 'it', 'es'],\n welsh: ['cy']\n }\n\n /**\n * Different pluralisation rule sets\n *\n * Returns the appropriate suffix for the plural form associated with `n`.\n * Possible suffixes: 'zero', 'one', 'two', 'few', 'many', 'other' (the actual\n * meaning of each differs per locale). 'other' should always exist, even in\n * languages without plurals, such as Chinese.\n * {@link https://cldr.unicode.org/index/cldr-spec/plural-rules}\n *\n * The count must be a positive integer. Negative numbers and decimals aren't accounted for\n *\n * @internal\n * @type {{ [key: string]: (count: number) => PluralRule }}\n */\n static pluralRules = {\n arabic(n) {\n if (n === 0) {\n return 'zero'\n }\n if (n === 1) {\n return 'one'\n }\n if (n === 2) {\n return 'two'\n }\n if (n % 100 >= 3 && n % 100 <= 10) {\n return 'few'\n }\n if (n % 100 >= 11 && n % 100 <= 99) {\n return 'many'\n }\n return 'other'\n },\n chinese() {\n return 'other'\n },\n french(n) {\n return n === 0 || n === 1 ? 'one' : 'other'\n },\n german(n) {\n return n === 1 ? 'one' : 'other'\n },\n irish(n) {\n if (n === 1) {\n return 'one'\n }\n if (n === 2) {\n return 'two'\n }\n if (n >= 3 && n <= 6) {\n return 'few'\n }\n if (n >= 7 && n <= 10) {\n return 'many'\n }\n return 'other'\n },\n russian(n) {\n const lastTwo = n % 100\n const last = lastTwo % 10\n if (last === 1 && lastTwo !== 11) {\n return 'one'\n }\n if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {\n return 'few'\n }\n if (\n last === 0 ||\n (last >= 5 && last <= 9) ||\n (lastTwo >= 11 && lastTwo <= 14)\n ) {\n return 'many'\n }\n // Note: The 'other' suffix is only used by decimal numbers in Russian.\n // We don't anticipate it being used, but it's here for consistency.\n return 'other'\n },\n scottish(n) {\n if (n === 1 || n === 11) {\n return 'one'\n }\n if (n === 2 || n === 12) {\n return 'two'\n }\n if ((n >= 3 && n <= 10) || (n >= 13 && n <= 19)) {\n return 'few'\n }\n return 'other'\n },\n spanish(n) {\n if (n === 1) {\n return 'one'\n }\n if (n % 1000000 === 0 && n !== 0) {\n return 'many'\n }\n return 'other'\n },\n welsh(n) {\n if (n === 0) {\n return 'zero'\n }\n if (n === 1) {\n return 'one'\n }\n if (n === 2) {\n return 'two'\n }\n if (n === 3) {\n return 'few'\n }\n if (n === 6) {\n return 'many'\n }\n return 'other'\n }\n }\n}\n\n/**\n * Plural rule category mnemonic tags\n *\n * @internal\n * @typedef {'zero' | 'one' | 'two' | 'few' | 'many' | 'other'} PluralRule\n */\n\n/**\n * Translated message by plural rule they correspond to.\n *\n * Allows to group pluralised messages under a single key when passing\n * translations to a component's constructor\n *\n * @internal\n * @typedef {object} TranslationPluralForms\n * @property {string} [other] - General plural form\n * @property {string} [zero] - Plural form used with 0\n * @property {string} [one] - Plural form used with 1\n * @property {string} [two] - Plural form used with 2\n * @property {string} [few] - Plural form used for a few\n * @property {string} [many] - Plural form used for many\n */\n","import { ConfigurableComponent } from '../../common/configuration.mjs'\nimport { ElementError } from '../../errors/index.mjs'\nimport { I18n } from '../../i18n.mjs'\n\n/**\n * Accordion component\n *\n * This allows a collection of sections to be collapsed by default, showing only\n * their headers. Sections can be expanded or collapsed individually by clicking\n * their headers. A \"Show all sections\" button is also added to the top of the\n * accordion, which switches to \"Hide all sections\" when all the sections are\n * expanded.\n *\n * The state of each section is saved to the DOM via the `aria-expanded`\n * attribute, which also provides accessibility.\n *\n * @preserve\n * @augments ConfigurableComponent<AccordionConfig>\n */\nexport class Accordion extends ConfigurableComponent {\n /** @private */\n i18n\n\n /** @private */\n controlsClass = 'govuk-accordion__controls'\n\n /** @private */\n showAllClass = 'govuk-accordion__show-all'\n\n /** @private */\n showAllTextClass = 'govuk-accordion__show-all-text'\n\n /** @private */\n sectionClass = 'govuk-accordion__section'\n\n /** @private */\n sectionExpandedClass = 'govuk-accordion__section--expanded'\n\n /** @private */\n sectionButtonClass = 'govuk-accordion__section-button'\n\n /** @private */\n sectionHeaderClass = 'govuk-accordion__section-header'\n\n /** @private */\n sectionHeadingClass = 'govuk-accordion__section-heading'\n\n /** @private */\n sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider'\n\n /** @private */\n sectionHeadingTextClass = 'govuk-accordion__section-heading-text'\n\n /** @private */\n sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus'\n\n /** @private */\n sectionShowHideToggleClass = 'govuk-accordion__section-toggle'\n\n /** @private */\n sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus'\n\n /** @private */\n sectionShowHideTextClass = 'govuk-accordion__section-toggle-text'\n\n /** @private */\n upChevronIconClass = 'govuk-accordion-nav__chevron'\n\n /** @private */\n downChevronIconClass = 'govuk-accordion-nav__chevron--down'\n\n /** @private */\n sectionSummaryClass = 'govuk-accordion__section-summary'\n\n /** @private */\n sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus'\n\n /** @private */\n sectionContentClass = 'govuk-accordion__section-content'\n\n /** @private */\n $sections\n\n /**\n * @private\n * @type {HTMLButtonElement | null}\n */\n $showAllButton = null\n\n /**\n * @private\n * @type {HTMLElement | null}\n */\n $showAllIcon = null\n\n /**\n * @private\n * @type {HTMLElement | null}\n */\n $showAllText = null\n\n /**\n * @param {Element | null} $root - HTML element to use for accordion\n * @param {AccordionConfig} [config] - Accordion config\n */\n constructor($root, config = {}) {\n super($root, config)\n\n this.i18n = new I18n(this.config.i18n)\n\n const $sections = this.$root.querySelectorAll(`.${this.sectionClass}`)\n if (!$sections.length) {\n throw new ElementError({\n component: Accordion,\n identifier: `Sections (\\`<div class=\"${this.sectionClass}\">\\`)`\n })\n }\n\n this.$sections = $sections\n\n this.initControls()\n this.initSectionHeaders()\n\n this.updateShowAllButton(this.areAllSectionsOpen())\n }\n\n /**\n * Initialise controls and set attributes\n *\n * @private\n */\n initControls() {\n // Create \"Show all\" button and set attributes\n this.$showAllButton = document.createElement('button')\n this.$showAllButton.setAttribute('type', 'button')\n this.$showAllButton.setAttribute('class', this.showAllClass)\n this.$showAllButton.setAttribute('aria-expanded', 'false')\n\n // Create icon, add to element\n this.$showAllIcon = document.createElement('span')\n this.$showAllIcon.classList.add(this.upChevronIconClass)\n this.$showAllButton.appendChild(this.$showAllIcon)\n\n // Create control wrapper and add controls to it\n const $accordionControls = document.createElement('div')\n $accordionControls.setAttribute('class', this.controlsClass)\n $accordionControls.appendChild(this.$showAllButton)\n this.$root.insertBefore($accordionControls, this.$root.firstChild)\n\n // Build additional wrapper for Show all toggle text and place after icon\n this.$showAllText = document.createElement('span')\n this.$showAllText.classList.add(this.showAllTextClass)\n this.$showAllButton.appendChild(this.$showAllText)\n\n // Handle click events on the show/hide all button\n this.$showAllButton.addEventListener('click', () =>\n this.onShowOrHideAllToggle()\n )\n\n // Handle 'beforematch' events, if the user agent supports them\n if ('onbeforematch' in document) {\n document.addEventListener('beforematch', (event) =>\n this.onBeforeMatch(event)\n )\n }\n }\n\n /**\n * Initialise section headers\n *\n * @private\n */\n initSectionHeaders() {\n this.$sections.forEach(($section, i) => {\n const $header = $section.querySelector(`.${this.sectionHeaderClass}`)\n if (!$header) {\n throw new ElementError({\n component: Accordion,\n identifier: `Section headers (\\`<div class=\"${this.sectionHeaderClass}\">\\`)`\n })\n }\n\n // Set header attributes\n this.constructHeaderMarkup($header, i)\n this.setExpanded(this.isExpanded($section), $section)\n\n // Handle events\n $header.addEventListener('click', () => this.onSectionToggle($section))\n\n // See if there is any state stored in sessionStorage and set the sections\n // to open or closed.\n this.setInitialState($section)\n })\n }\n\n /**\n * Construct section header\n *\n * @private\n * @param {Element} $header - Section header\n * @param {number} index - Section index\n */\n constructHeaderMarkup($header, index) {\n const $span = $header.querySelector(`.${this.sectionButtonClass}`)\n const $heading = $header.querySelector(`.${this.sectionHeadingClass}`)\n const $summary = $header.querySelector(`.${this.sectionSummaryClass}`)\n\n if (!$heading) {\n throw new ElementError({\n component: Accordion,\n identifier: `Section heading (\\`.${this.sectionHeadingClass}\\`)`\n })\n }\n\n if (!$span) {\n throw new ElementError({\n component: Accordion,\n identifier: `Section button placeholder (\\`<span class=\"${this.sectionButtonClass}\">\\`)`\n })\n }\n\n // Create a button element that will replace the\n // '.govuk-accordion__section-button' span\n const $button = document.createElement('button')\n $button.setAttribute('type', 'button')\n $button.setAttribute(\n 'aria-controls',\n `${this.$root.id}-content-${index + 1}`\n )\n\n // Copy all attributes from $span to $button (except `id`, which gets added\n // to the `$headingText` element)\n for (const attr of Array.from($span.attributes)) {\n if (attr.name !== 'id') {\n $button.setAttribute(attr.name, attr.value)\n }\n }\n\n // Create container for heading text so it can be styled\n const $headingText = document.createElement('span')\n $headingText.classList.add(this.sectionHeadingTextClass)\n // Copy the span ID to the heading text to allow it to be referenced by\n // `aria-labelledby` on the hidden content area without \"Show this section\"\n $headingText.id = $span.id\n\n // Create an inner heading text container to limit the width of the focus\n // state\n const $headingTextFocus = document.createElement('span')\n $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass)\n $headingText.appendChild($headingTextFocus)\n // span could contain HTML elements\n // (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)\n Array.from($span.childNodes).forEach(($child) =>\n $headingTextFocus.appendChild($child)\n )\n\n // Create container for show / hide icons and text.\n const $showHideToggle = document.createElement('span')\n $showHideToggle.classList.add(this.sectionShowHideToggleClass)\n // Tell Google not to index the 'show' text as part of the heading. Must be\n // set on the element before it's added to the DOM.\n // See https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr\n $showHideToggle.setAttribute('data-nosnippet', '')\n // Create an inner container to limit the width of the focus state\n const $showHideToggleFocus = document.createElement('span')\n $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass)\n $showHideToggle.appendChild($showHideToggleFocus)\n // Create wrapper for the show / hide text. Append text after the show/hide icon\n const $showHideText = document.createElement('span')\n const $showHideIcon = document.createElement('span')\n $showHideIcon.classList.add(this.upChevronIconClass)\n $showHideToggleFocus.appendChild($showHideIcon)\n $showHideText.classList.add(this.sectionShowHideTextClass)\n $showHideToggleFocus.appendChild($showHideText)\n\n // Append elements to the button:\n // 1. Heading text\n // 2. Punctuation\n // 3. (Optional: Summary line followed by punctuation)\n // 4. Show / hide toggle\n $button.appendChild($headingText)\n $button.appendChild(this.getButtonPunctuationEl())\n\n // If summary content exists add to DOM in correct order\n if ($summary) {\n // Create a new `span` element and copy the summary line content from the\n // original `div` to the new `span`. This is because the summary line text\n // is now inside a button element, which can only contain phrasing\n // content.\n const $summarySpan = document.createElement('span')\n // Create an inner summary container to limit the width of the summary\n // focus state\n const $summarySpanFocus = document.createElement('span')\n $summarySpanFocus.classList.add(this.sectionSummaryFocusClass)\n $summarySpan.appendChild($summarySpanFocus)\n\n // Get original attributes, and pass them to the replacement\n for (const attr of Array.from($summary.attributes)) {\n $summarySpan.setAttribute(attr.name, attr.value)\n