govuk-frontend
govuk-frontend copied to clipboard
alphagov
Add a button role to summary element
Potential solution to address https://github.com/alphagov/govuk-frontend/issues/5308
Being tested against other AT now to make sure it doesn't break anything. Results recorded in this testing spreadsheet.
:clipboard: Stats
File sizes
| File | Size |
|---|---|
| dist/govuk-frontend-development.min.css | 118.62 KiB |
| dist/govuk-frontend-development.min.js | 44.47 KiB |
| packages/govuk-frontend/dist/govuk/all.bundle.js | 91.6 KiB |
| packages/govuk-frontend/dist/govuk/all.bundle.mjs | 86 KiB |
| packages/govuk-frontend/dist/govuk/all.mjs | 1.11 KiB |
| packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs | 359 B |
| packages/govuk-frontend/dist/govuk/govuk-frontend.min.css | 118.6 KiB |
| packages/govuk-frontend/dist/govuk/govuk-frontend.min.js | 44.46 KiB |
| packages/govuk-frontend/dist/govuk/i18n.mjs | 5.55 KiB |
| packages/govuk-frontend/dist/govuk/init.mjs | 5.04 KiB |
Modules
| File | Size (bundled) | Size (minified) |
|---|---|---|
| all.mjs | 83.1 KiB | 42.26 KiB |
| accordion.mjs | 23.5 KiB | 12.39 KiB |
| button.mjs | 5.98 KiB | 2.69 KiB |
| character-count.mjs | 22.4 KiB | 9.92 KiB |
| checkboxes.mjs | 5.83 KiB | 2.83 KiB |
| details.mjs | 2.9 KiB | 1.63 KiB |
| error-summary.mjs | 7.89 KiB | 3.46 KiB |
| exit-this-page.mjs | 17.1 KiB | 9.26 KiB |
| header.mjs | 4.46 KiB | 2.6 KiB |
| notification-banner.mjs | 6.26 KiB | 2.62 KiB |
| password-input.mjs | 15.15 KiB | 7.25 KiB |
| radios.mjs | 4.83 KiB | 2.38 KiB |
| service-navigation.mjs | 4.46 KiB | 2.69 KiB |
| skip-link.mjs | 4.39 KiB | 2.18 KiB |
| tabs.mjs | 10.05 KiB | 6.06 KiB |
View stats and visualisations on the review app
Action run for afa39c2adc4a27874dec392e626e1675ab64093f
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Rendered HTML changes to npm package
diff --git a/packages/govuk-frontend/dist/govuk/components/details/template-default.html b/packages/govuk-frontend/dist/govuk/components/details/template-default.html
index c267b0ba1..5badbd4dd 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/details/template-default.html
@@ -1,4 +1,4 @@
-<details class="govuk-details">
+<details data-module="govuk-details" class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help with nationality
diff --git a/packages/govuk-frontend/dist/govuk/components/details/template-expanded.html b/packages/govuk-frontend/dist/govuk/components/details/template-expanded.html
index fbd18a71a..826c3a65f 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/template-expanded.html
+++ b/packages/govuk-frontend/dist/govuk/components/details/template-expanded.html
@@ -1,4 +1,4 @@
-<details id="help-with-nationality" class="govuk-details" open>
+<details id="help-with-nationality" data-module="govuk-details" class="govuk-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help with nationality
diff --git a/packages/govuk-frontend/dist/govuk/components/details/template-with-html.html b/packages/govuk-frontend/dist/govuk/components/details/template-with-html.html
index bd5dd1fd4..3dcdb32e9 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/template-with-html.html
+++ b/packages/govuk-frontend/dist/govuk/components/details/template-with-html.html
@@ -1,4 +1,4 @@
-<details class="govuk-details">
+<details data-module="govuk-details" class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Where to find your National Insurance Number
Action run for afa39c2adc4a27874dec392e626e1675ab64093f
Other changes to npm package
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index ac0dcb3a3..2db217271 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1270,6 +1270,47 @@
}
Checkboxes.moduleName = 'govuk-checkboxes';
+ /**
+ * Details component
+ *
+ * @preserve
+ */
+ class Details extends GOVUKFrontendComponent {
+ /**
+ * @param {Element | null} $module - HTML element to use for skip link
+ * @throws {ElementError} when $module is not set or the wrong type
+ * @throws {ElementError} when no summary element is present
+ */
+ constructor($module) {
+ super();
+ this.$module = void 0;
+ if (!($module instanceof HTMLDetailsElement)) {
+ throw new ElementError({
+ componentName: 'Details',
+ element: $module,
+ expectedType: 'HTMLAnchorElement',
+ identifier: 'Root element (`$module`)'
+ });
+ }
+ this.$module = $module;
+ this.$summary = this.$module.querySelector('.govuk-details__summary');
+ if (!this.$summary) {
+ throw new ElementError({
+ componentName: 'Details',
+ identifier: 'Summary element (`<summary class="govuk-details__summary">`)'
+ });
+ }
+ this.expandedState = this.$module.open;
+ this.$summary.setAttribute('role', 'button');
+ this.$summary.setAttribute('aria-expanded', this.expandedState.toString());
+ this.$module.addEventListener('click', () => {
+ this.$summary.setAttribute('aria-expanded', (!this.expandedState).toString());
+ this.expandedState = !this.expandedState;
+ });
+ }
+ }
+ Details.moduleName = 'govuk-details';
+
/**
* Error summary component
*
@@ -2443,7 +2484,7 @@
console.log(new SupportError());
return;
}
- const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+ const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [Details], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
const $scope = (_config$scope = config.scope) != null ? _config$scope : document;
components.forEach(([Component, config]) => {
createAll(Component, config, $scope);
@@ -2515,6 +2556,7 @@
exports.Button = Button;
exports.CharacterCount = CharacterCount;
exports.Checkboxes = Checkboxes;
+ exports.Details = Details;
exports.ErrorSummary = ErrorSummary;
exports.ExitThisPage = ExitThisPage;
exports.Header = Header;
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 3137f499e..80ca2530a 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1264,6 +1264,47 @@ class Checkboxes extends GOVUKFrontendComponent {
}
Checkboxes.moduleName = 'govuk-checkboxes';
+/**
+ * Details component
+ *
+ * @preserve
+ */
+class Details extends GOVUKFrontendComponent {
+ /**
+ * @param {Element | null} $module - HTML element to use for skip link
+ * @throws {ElementError} when $module is not set or the wrong type
+ * @throws {ElementError} when no summary element is present
+ */
+ constructor($module) {
+ super();
+ this.$module = void 0;
+ if (!($module instanceof HTMLDetailsElement)) {
+ throw new ElementError({
+ componentName: 'Details',
+ element: $module,
+ expectedType: 'HTMLAnchorElement',
+ identifier: 'Root element (`$module`)'
+ });
+ }
+ this.$module = $module;
+ this.$summary = this.$module.querySelector('.govuk-details__summary');
+ if (!this.$summary) {
+ throw new ElementError({
+ componentName: 'Details',
+ identifier: 'Summary element (`<summary class="govuk-details__summary">`)'
+ });
+ }
+ this.expandedState = this.$module.open;
+ this.$summary.setAttribute('role', 'button');
+ this.$summary.setAttribute('aria-expanded', this.expandedState.toString());
+ this.$module.addEventListener('click', () => {
+ this.$summary.setAttribute('aria-expanded', (!this.expandedState).toString());
+ this.expandedState = !this.expandedState;
+ });
+ }
+}
+Details.moduleName = 'govuk-details';
+
/**
* Error summary component
*
@@ -2437,7 +2478,7 @@ function initAll(config) {
console.log(new SupportError());
return;
}
- const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+ const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [Details], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
const $scope = (_config$scope = config.scope) != null ? _config$scope : document;
components.forEach(([Component, config]) => {
createAll(Component, config, $scope);
@@ -2505,5 +2546,5 @@ function createAll(Component, config, $scope = document) {
* @typedef {keyof Config} ConfigKey
*/
-export { Accordion, Button, CharacterCount, Checkboxes, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, version };
+export { Accordion, Button, CharacterCount, Checkboxes, Details, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, version };
//# sourceMappingURL=all.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/all.mjs b/packages/govuk-frontend/dist/govuk/all.mjs
index 8634e964f..ed92d99a0 100644
--- a/packages/govuk-frontend/dist/govuk/all.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.mjs
@@ -3,6 +3,7 @@ export { Accordion } from './components/accordion/accordion.mjs';
export { Button } from './components/button/button.mjs';
export { CharacterCount } from './components/character-count/character-count.mjs';
export { Checkboxes } from './components/checkboxes/checkboxes.mjs';
+export { Details } from './components/details/details.mjs';
export { ErrorSummary } from './components/error-summary/error-summary.mjs';
export { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs';
export { Header } from './components/header/header.mjs';
diff --git a/packages/govuk-frontend/dist/govuk/components/details/details.bundle.js b/packages/govuk-frontend/dist/govuk/components/details/details.bundle.js
new file mode 100644
index 000000000..24481d053
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/details/details.bundle.js
@@ -0,0 +1,128 @@
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = {}));
+})(this, (function (exports) { 'use strict';
+
+ class GOVUKFrontendError extends Error {
+ constructor(...args) {
+ super(...args);
+ this.name = 'GOVUKFrontendError';
+ }
+ }
+ class SupportError extends GOVUKFrontendError {
+ /**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+ */
+ constructor($scope = document.body) {
+ const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+ super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+ this.name = 'SupportError';
+ }
+ }
+ class ElementError extends GOVUKFrontendError {
+ constructor(messageOrOptions) {
+ let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+ if (typeof messageOrOptions === 'object') {
+ const {
+ componentName,
+ identifier,
+ element,
+ expectedType
+ } = messageOrOptions;
+ message = `${componentName}: ${identifier}`;
+ message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+ }
+ super(message);
+ this.name = 'ElementError';
+ }
+ }
+
+ function isSupported($scope = document.body) {
+ if (!$scope) {
+ return false;
+ }
+ return $scope.classList.contains('govuk-frontend-supported');
+ }
+
+ /**
+ * Schema for component config
+ *
+ * @typedef {object} Schema
+ * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+ * @property {SchemaCondition[]} [anyOf] - List of schema conditions
+ */
+
+ /**
+ * Schema property for component config
+ *
+ * @typedef {object} SchemaProperty
+ * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ */
+
+ /**
+ * Schema condition for component config
+ *
+ * @typedef {object} SchemaCondition
+ * @property {string[]} required - List of required config fields
+ * @property {string} errorMessage - Error message when required config fields not provided
+ */
+
+ class GOVUKFrontendComponent {
+ constructor() {
+ this.checkSupport();
+ }
+ checkSupport() {
+ if (!isSupported()) {
+ throw new SupportError();
+ }
+ }
+ }
+
+ /**
+ * Details component
+ *
+ * @preserve
+ */
+ class Details extends GOVUKFrontendComponent {
+ /**
+ * @param {Element | null} $module - HTML element to use for skip link
+ * @throws {ElementError} when $module is not set or the wrong type
+ * @throws {ElementError} when no summary element is present
+ */
+ constructor($module) {
+ super();
+ this.$module = void 0;
+ if (!($module instanceof HTMLDetailsElement)) {
+ throw new ElementError({
+ componentName: 'Details',
+ element: $module,
+ expectedType: 'HTMLAnchorElement',
+ identifier: 'Root element (`$module`)'
+ });
+ }
+ this.$module = $module;
+ this.$summary = this.$module.querySelector('.govuk-details__summary');
+ if (!this.$summary) {
+ throw new ElementError({
+ componentName: 'Details',
+ identifier: 'Summary element (`<summary class="govuk-details__summary">`)'
+ });
+ }
+ this.expandedState = this.$module.open;
+ this.$summary.setAttribute('role', 'button');
+ this.$summary.setAttribute('aria-expanded', this.expandedState.toString());
+ this.$module.addEventListener('click', () => {
+ this.$summary.setAttribute('aria-expanded', (!this.expandedState).toString());
+ this.expandedState = !this.expandedState;
+ });
+ }
+ }
+ Details.moduleName = 'govuk-details';
+
+ exports.Details = Details;
+
+}));
+//# sourceMappingURL=details.bundle.js.map
diff --git a/packages/govuk-frontend/dist/govuk/components/details/details.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/details/details.bundle.mjs
new file mode 100644
index 000000000..b0765fd73
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/details/details.bundle.mjs
@@ -0,0 +1,120 @@
+class GOVUKFrontendError extends Error {
+ constructor(...args) {
+ super(...args);
+ this.name = 'GOVUKFrontendError';
+ }
+}
+class SupportError extends GOVUKFrontendError {
+ /**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+ */
+ constructor($scope = document.body) {
+ const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+ super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+ this.name = 'SupportError';
+ }
+}
+class ElementError extends GOVUKFrontendError {
+ constructor(messageOrOptions) {
+ let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+ if (typeof messageOrOptions === 'object') {
+ const {
+ componentName,
+ identifier,
+ element,
+ expectedType
+ } = messageOrOptions;
+ message = `${componentName}: ${identifier}`;
+ message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+ }
+ super(message);
+ this.name = 'ElementError';
+ }
+}
+
+function isSupported($scope = document.body) {
+ if (!$scope) {
+ return false;
+ }
+ return $scope.classList.contains('govuk-frontend-supported');
+}
+
+/**
+ * Schema for component config
+ *
+ * @typedef {object} Schema
+ * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+ * @property {SchemaCondition[]} [anyOf] - List of schema conditions
+ */
+
+/**
+ * Schema property for component config
+ *
+ * @typedef {object} SchemaProperty
+ * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ */
+
+/**
+ * Schema condition for component config
+ *
+ * @typedef {object} SchemaCondition
+ * @property {string[]} required - List of required config fields
+ * @property {string} errorMessage - Error message when required config fields not provided
+ */
+
+class GOVUKFrontendComponent {
+ constructor() {
+ this.checkSupport();
+ }
+ checkSupport() {
+ if (!isSupported()) {
+ throw new SupportError();
+ }
+ }
+}
+
+/**
+ * Details component
+ *
+ * @preserve
+ */
+class Details extends GOVUKFrontendComponent {
+ /**
+ * @param {Element | null} $module - HTML element to use for skip link
+ * @throws {ElementError} when $module is not set or the wrong type
+ * @throws {ElementError} when no summary element is present
+ */
+ constructor($module) {
+ super();
+ this.$module = void 0;
+ if (!($module instanceof HTMLDetailsElement)) {
+ throw new ElementError({
+ componentName: 'Details',
+ element: $module,
+ expectedType: 'HTMLAnchorElement',
+ identifier: 'Root element (`$module`)'
+ });
+ }
+ this.$module = $module;
+ this.$summary = this.$module.querySelector('.govuk-details__summary');
+ if (!this.$summary) {
+ throw new ElementError({
+ componentName: 'Details',
+ identifier: 'Summary element (`<summary class="govuk-details__summary">`)'
+ });
+ }
+ this.expandedState = this.$module.open;
+ this.$summary.setAttribute('role', 'button');
+ this.$summary.setAttribute('aria-expanded', this.expandedState.toString());
+ this.$module.addEventListener('click', () => {
+ this.$summary.setAttribute('aria-expanded', (!this.expandedState).toString());
+ this.expandedState = !this.expandedState;
+ });
+ }
+}
+Details.moduleName = 'govuk-details';
+
+export { Details };
+//# sourceMappingURL=details.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/details/details.mjs b/packages/govuk-frontend/dist/govuk/components/details/details.mjs
new file mode 100644
index 000000000..7ec55d0be
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/details/details.mjs
@@ -0,0 +1,46 @@
+import { ElementError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+
+/**
+ * Details component
+ *
+ * @preserve
+ */
+class Details extends GOVUKFrontendComponent {
+ /**
+ * @param {Element | null} $module - HTML element to use for skip link
+ * @throws {ElementError} when $module is not set or the wrong type
+ * @throws {ElementError} when no summary element is present
+ */
+ constructor($module) {
+ super();
+ this.$module = void 0;
+ if (!($module instanceof HTMLDetailsElement)) {
+ throw new ElementError({
+ componentName: 'Details',
+ element: $module,
+ expectedType: 'HTMLAnchorElement',
+ identifier: 'Root element (`$module`)'
+ });
+ }
+ this.$module = $module;
+ this.$summary = this.$module.querySelector('.govuk-details__summary');
+ if (!this.$summary) {
+ throw new ElementError({
+ componentName: 'Details',
+ identifier: 'Summary element (`<summary class="govuk-details__summary">`)'
+ });
+ }
+ this.expandedState = this.$module.open;
+ this.$summary.setAttribute('role', 'button');
+ this.$summary.setAttribute('aria-expanded', this.expandedState.toString());
+ this.$module.addEventListener('click', () => {
+ this.$summary.setAttribute('aria-expanded', (!this.expandedState).toString());
+ this.expandedState = !this.expandedState;
+ });
+ }
+}
+Details.moduleName = 'govuk-details';
+
+export { Details };
+//# sourceMappingURL=details.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/details/fixtures.json b/packages/govuk-frontend/dist/govuk/components/details/fixtures.json
index eaac97378..f99839616 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/details/fixtures.json
@@ -11,7 +11,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Help with nationality\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Help with nationality\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n </div>\n</details>"
},
{
"name": "expanded",
@@ -25,7 +25,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": true,
- "html": "<details id=\"help-with-nationality\" class=\"govuk-details\" open>\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Help with nationality\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n </div>\n</details>"
+ "html": "<details id=\"help-with-nationality\" data-module=\"govuk-details\" class=\"govuk-details\" open>\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Help with nationality\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n </div>\n</details>"
},
{
"name": "with html",
@@ -37,7 +37,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Where to find your National Insurance Number\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Your National Insurance number can be found on\n<ul>\n <li>your National Insurance card</li>\n <li>your payslip</li>\n <li>P60</li>\n <li>benefits information</li>\n <li>tax return</li>\n</ul>\n\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Where to find your National Insurance Number\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Your National Insurance number can be found on\n<ul>\n <li>your National Insurance card</li>\n <li>your payslip</li>\n <li>P60</li>\n <li>benefits information</li>\n <li>tax return</li>\n</ul>\n\n </div>\n</details>"
},
{
"name": "id",
@@ -50,7 +50,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details id=\"my-details-element\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand this section\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
+ "html": "<details id=\"my-details-element\" data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand this section\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
},
{
"name": "html as text",
@@ -62,7 +62,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand this section\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n More about the greater than symbol (>)\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand this section\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n More about the greater than symbol (>)\n </div>\n</details>"
},
{
"name": "html",
@@ -74,7 +74,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand this section\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n More about <b>bold text</b>\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand this section\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n More about <b>bold text</b>\n </div>\n</details>"
},
{
"name": "summary html as text",
@@ -86,7 +86,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n The greater than symbol (>) is the best\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n The greater than symbol (>) is the best\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
},
{
"name": "summary html",
@@ -98,7 +98,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Use <b>bold text</b> sparingly\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Use <b>bold text</b> sparingly\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
},
{
"name": "classes",
@@ -111,7 +111,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details some-additional-class\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand me\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details some-additional-class\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand me\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
},
{
"name": "attributes",
@@ -127,7 +127,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<details class=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"foo\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand me\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
+ "html": "<details data-module=\"govuk-details\" class=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"foo\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n Expand me\n </span>\n </summary>\n <div class=\"govuk-details__text\">\n Here are some more details\n </div>\n</details>"
}
]
}
diff --git a/packages/govuk-frontend/dist/govuk/init.mjs b/packages/govuk-frontend/dist/govuk/init.mjs
index 2b98947c3..6caf1098f 100644
--- a/packages/govuk-frontend/dist/govuk/init.mjs
+++ b/packages/govuk-frontend/dist/govuk/init.mjs
@@ -3,6 +3,7 @@ import { Accordion } from './components/accordion/accordion.mjs';
import { Button } from './components/button/button.mjs';
import { CharacterCount } from './components/character-count/character-count.mjs';
import { Checkboxes } from './components/checkboxes/checkboxes.mjs';
+import { Details } from './components/details/details.mjs';
import { ErrorSummary } from './components/error-summary/error-summary.mjs';
import { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs';
import { Header } from './components/header/header.mjs';
@@ -29,7 +30,7 @@ function initAll(config) {
console.log(new SupportError());
return;
}
- const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+ const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [Details], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
const $scope = (_config$scope = config.scope) != null ? _config$scope : document;
components.forEach(([Component, config]) => {
createAll(Component, config, $scope);
Action run for afa39c2adc4a27874dec392e626e1675ab64093f
JavaScript changes to npm package
diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 33b78bfdd..a9557f6c1 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -1,44 +1,44 @@
const version = "development";
function normaliseString(e, t) {
- const n = e ? e.trim() : "";
- let i, s = null == t ? void 0 : t.type;
- switch (s || (["true", "false"].includes(n) && (s = "boolean"), n.length > 0 && isFinite(Number(n)) && (s = "number")), s) {
+ const i = e ? e.trim() : "";
+ let n, s = null == t ? void 0 : t.type;
+ switch (s || (["true", "false"].includes(i) && (s = "boolean"), i.length > 0 && isFinite(Number(i)) && (s = "number")), s) {
case "boolean":
- i = "true" === n;
+ n = "true" === i;
break;
case "number":
- i = Number(n);
+ n = Number(i);
break;
default:
- i = e
+ n = e
}
- return i
+ return n
}
function mergeConfigs(...e) {
const t = {};
- for (const n of e)
- for (const e of Object.keys(n)) {
- const i = t[e],
- s = n[e];
- isObject(i) && isObject(s) ? t[e] = mergeConfigs(i, s) : t[e] = s
+ for (const i of e)
+ for (const e of Object.keys(i)) {
+ const n = t[e],
+ s = i[e];
+ isObject(n) && isObject(s) ? t[e] = mergeConfigs(n, s) : t[e] = s
}
return t
}
-function extractConfigByNamespace(e, t, n) {
- const i = e.schema.properties[n];
- if ("object" !== (null == i ? void 0 : i.type)) return;
+function extractConfigByNamespace(e, t, i) {
+ const n = e.schema.properties[i];
+ if ("object" !== (null == n ? void 0 : n.type)) return;
const s = {
- [n]: {}
+ [i]: {}
};
for (const [o, r] of Object.entries(t)) {
let e = s;
const t = o.split(".");
- for (const [i, s] of t.entries()) "object" == typeof e && (i < t.length - 1 ? (isObject(e[s]) || (e[s] = {}), e = e[s]) : o !== n && (e[s] = normaliseString(r)))
+ for (const [n, s] of t.entries()) "object" == typeof e && (n < t.length - 1 ? (isObject(e[s]) || (e[s] = {}), e = e[s]) : o !== i && (e[s] = normaliseString(r)))
}
- return s[n]
+ return s[i]
}
function getFragmentFromUrl(e) {
@@ -54,20 +54,20 @@ function getBreakpoint(e) {
}
function setFocus(e, t = {}) {
- var n;
- const i = e.getAttribute("tabindex");
+ var i;
+ const n = e.getAttribute("tabindex");
function onBlur() {
- var n;
- null == (n = t.onBlur) || n.call(e), i || e.removeAttribute("tabindex")
+ var i;
+ null == (i = t.onBlur) || i.call(e), n || e.removeAttribute("tabindex")
}
- i || e.setAttribute("tabindex", "-1"), e.addEventListener("focus", (function() {
+ n || e.setAttribute("tabindex", "-1"), e.addEventListener("focus", (function() {
e.addEventListener("blur", onBlur, {
once: !0
})
}), {
once: !0
- }), null == (n = t.onBeforeFocus) || n.call(e), e.focus()
+ }), null == (i = t.onBeforeFocus) || i.call(e), e.focus()
}
function isSupported(e = document.body) {
@@ -81,9 +81,9 @@ function isObject(e) {
}
function normaliseDataset(e, t) {
- const n = {};
- for (const [i, s] of Object.entries(e.schema.properties)) i in t && (n[i] = normaliseString(t[i], s)), "object" === (null == s ? void 0 : s.type) && (n[i] = extractConfigByNamespace(e, t, i));
- return n
+ const i = {};
+ for (const [n, s] of Object.entries(e.schema.properties)) n in t && (i[n] = normaliseString(t[n], s)), "object" === (null == s ? void 0 : s.type) && (i[n] = extractConfigByNamespace(e, t, n));
+ return i
}
class GOVUKFrontendError extends Error {
constructor(...e) {
@@ -106,12 +106,12 @@ class ElementError extends GOVUKFrontendError {
let t = "string" == typeof e ? e : "";
if ("object" == typeof e) {
const {
- componentName: n,
- identifier: i,
+ componentName: i,
+ identifier: n,
element: s,
expectedType: o
} = e;
- t = `${n}: ${i}`, t += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
+ t = `${i}: ${n}`, t += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
}
super(t), this.name = "ElementError"
}
@@ -126,31 +126,31 @@ class GOVUKFrontendComponent {
}
class I18n {
constructor(e = {}, t = {}) {
- var n;
- this.translations = void 0, this.locale = void 0, this.translations = e, this.locale = null != (n = t.locale) ? n : document.documentElement.lang || "en"
+ var i;
+ this.translations = void 0, this.locale = void 0, this.translations = e, this.locale = null != (i = t.locale) ? i : document.documentElement.lang || "en"
}
t(e, t) {
if (!e) throw new Error("i18n: lookup key missing");
- let n = this.translations[e];
- if ("number" == typeof(null == t ? void 0 : t.count) && "object" == typeof n) {
- const i = n[this.getPluralSuffix(e, t.count)];
- i && (n = i)
+ let i = this.translations[e];
+ if ("number" == typeof(null == t ? void 0 : t.count) && "object" == typeof i) {
+ const n = i[this.getPluralSuffix(e, t.count)];
+ n && (i = n)
}
- if ("string" == typeof n) {
- if (n.match(/%{(.\S+)}/)) {
+ if ("string" == typeof i) {
+ if (i.match(/%{(.\S+)}/)) {
if (!t) throw new Error("i18n: cannot replace placeholders in string if no option data provided");
- return this.replacePlaceholders(n, t)
+ return this.replacePlaceholders(i, t)
}
- return n
+ return i
}
return e
}
replacePlaceholders(e, t) {
- const n = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
- return e.replace(/%{(.\S+)}/g, (function(e, i) {
- if (Object.prototype.hasOwnProperty.call(t, i)) {
- const e = t[i];
- return !1 === e || "number" != typeof e && "string" != typeof e ? "" : "number" == typeof e ? n ? n.format(e) : `${e}` : e
+ const i = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
+ return e.replace(/%{(.\S+)}/g, (function(e, n) {
+ if (Object.prototype.hasOwnProperty.call(t, n)) {
+ const e = t[n];
+ return !1 === e || "number" != typeof e && "string" != typeof e ? "" : "number" == typeof e ? i ? i.format(e) : `${e}` : e
}
throw new Error(`i18n: no data found to replace ${e} placeholder in string`)
}))
@@ -160,11 +160,11 @@ class I18n {
}
getPluralSuffix(e, t) {
if (t = Number(t), !isFinite(t)) return "other";
- const n = this.translations[e],
- i = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(t) : this.selectPluralFormUsingFallbackRules(t);
- if ("object" == typeof n) {
- if (i in n) return i;
- if ("other" in n) return console.warn(`i18n: Missing plural form ".${i}" for "${this.locale}" locale. Falling back to ".other".`), "other"
+ const i = this.translations[e],
+ n = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(t) : this.selectPluralFormUsingFallbackRules(t);
+ if ("object" == typeof i) {
+ if (n in i) return n;
+ if ("other" in i) return console.warn(`i18n: Missing plural form ".${n}" for "${this.locale}" locale. Falling back to ".other".`), "other"
}
throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)
}
@@ -176,8 +176,8 @@ class I18n {
getPluralRulesForLocale() {
const e = this.locale.split("-")[0];
for (const t in I18n.pluralRulesMap) {
- const n = I18n.pluralRulesMap[t];
- if (n.includes(this.locale) || n.includes(e)) return t
+ const i = I18n.pluralRulesMap[t];
+ if (i.includes(this.locale) || i.includes(e)) return t
}
}
}
@@ -199,8 +199,8 @@ I18n.pluralRulesMap = {
irish: e => 1 === e ? "one" : 2 === e ? "two" : e >= 3 && e <= 6 ? "few" : e >= 7 && e <= 10 ? "many" : "other",
russian(e) {
const t = e % 100,
- n = t % 10;
- return 1 === n && 11 !== t ? "one" : n >= 2 && n <= 4 && !(t >= 12 && t <= 14) ? "few" : 0 === n || n >= 5 && n <= 9 || t >= 11 && t <= 14 ? "many" : "other"
+ i = t % 10;
+ return 1 === i && 11 !== t ? "one" : i >= 2 && i <= 4 && !(t >= 12 && t <= 14) ? "few" : 0 === i || i >= 5 && i <= 9 || t >= 11 && t <= 14 ? "many" : "other"
},
scottish: e => 1 === e || 11 === e ? "one" : 2 === e || 12 === e ? "two" : e >= 3 && e <= 10 || e >= 13 && e <= 19 ? "few" : "other",
spanish: e => 1 === e ? "one" : e % 1e6 == 0 && 0 !== e ? "many" : "other",
@@ -214,12 +214,12 @@ class Accordion extends GOVUKFrontendComponent {
identifier: "Root element (`$module`)"
});
this.$module = e, this.config = mergeConfigs(Accordion.defaults, t, normaliseDataset(Accordion, e.dataset)), this.i18n = new I18n(this.config.i18n);
- const n = this.$module.querySelectorAll(`.${this.sectionClass}`);
- if (!n.length) throw new ElementError({
+ const i = this.$module.querySelectorAll(`.${this.sectionClass}`);
+ if (!i.length) throw new ElementError({
componentName: "Accordion",
identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
});
- this.$sections = n, this.initControls(), this.initSectionHeaders(), this.updateShowAllButton(this.areAllSectionsOpen())
+ this.$sections = i, this.initControls(), this.initSectionHeaders(), this.updateShowAllButton(this.areAllSectionsOpen())
}
initControls() {
this.$showAllButton = document.createElement("button"), this.$showAllButton.setAttribute("type", "button"), this.$showAllButton.setAttribute("class", this.showAllClass), this.$showAllButton.setAttribute("aria-expanded", "false"), this.$showAllIcon = document.createElement("span"), this.$showAllIcon.classList.add(this.upChevronIconClass), this.$showAllButton.appendChild(this.$showAllIcon);
@@ -228,33 +228,33 @@ class Accordion extends GOVUKFrontendComponent {
}
initSectionHeaders() {
this.$sections.forEach(((e, t) => {
- const n = e.querySelector(`.${this.sectionHeaderClass}`);
- if (!n) throw new ElementError({
+ const i = e.querySelector(`.${this.sectionHeaderClass}`);
+ if (!i) throw new ElementError({
componentName: "Accordion",
identifier: `Section headers (\`<div class="${this.sectionHeaderClass}">\`)`
});
- this.constructHeaderMarkup(n, t), this.setExpanded(this.isExpanded(e), e), n.addEventListener("click", (() => this.onSectionToggle(e))), this.setInitialState(e)
+ this.constructHeaderMarkup(i, t), this.setExpanded(this.isExpanded(e), e), i.addEventListener("click", (() => this.onSectionToggle(e))), this.setInitialState(e)
}))
}
constructHeaderMarkup(e, t) {
- const n = e.querySelector(`.${this.sectionButtonClass}`),
- i = e.querySelector(`.${this.sectionHeadingClass}`),
+ const i = e.querySelector(`.${this.sectionButtonClass}`),
+ n = e.querySelector(`.${this.sectionHeadingClass}`),
s = e.querySelector(`.${this.sectionSummaryClass}`);
- if (!i) throw new ElementError({
+ if (!n) throw new ElementError({
componentName: "Accordion",
identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
});
- if (!n) throw new ElementError({
+ if (!i) throw new ElementError({
componentName: "Accordion",
identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
});
const o = document.createElement("button");
o.setAttribute("type", "button"), o.setAttribute("aria-controls", `${this.$module.id}-content-${t+1}`);
- for (const d of Array.from(n.attributes)) "id" !== d.name && o.setAttribute(d.name, d.value);
+ for (const d of Array.from(i.attributes)) "id" !== d.name && o.setAttribute(d.name, d.value);
const r = document.createElement("span");
- r.classList.add(this.sectionHeadingTextClass), r.id = n.id;
+ r.classList.add(this.sectionHeadingTextClass), r.id = i.id;
const a = document.createElement("span");
- a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), Array.from(n.childNodes).forEach((e => a.appendChild(e)));
+ a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), Array.from(i.childNodes).forEach((e => a.appendChild(e)));
const l = document.createElement("span");
l.classList.add(this.sectionShowHideToggleClass), l.setAttribute("data-nosnippet", "");
const c = document.createElement("span");
@@ -265,16 +265,16 @@ class Accordion extends GOVUKFrontendComponent {
const e = document.createElement("span"),
t = document.createElement("span");
t.classList.add(this.sectionSummaryFocusClass), e.appendChild(t);
- for (const n of Array.from(s.attributes)) e.setAttribute(n.name, n.value);
+ for (const i of Array.from(s.attributes)) e.setAttribute(i.name, i.value);
Array.from(s.childNodes).forEach((e => t.appendChild(e))), s.remove(), o.appendChild(e), o.appendChild(this.getButtonPunctuationEl())
}
- o.appendChild(l), i.removeChild(n), i.appendChild(o)
+ o.appendChild(l), n.removeChild(i), n.appendChild(o)
}
onBeforeMatch(e) {
const t = e.target;
if (!(t instanceof Element)) return;
- const n = t.closest(`.${this.sectionClass}`);
- n && this.setExpanded(!0, n)
+ const i = t.closest(`.${this.sectionClass}`);
+ i && this.setExpanded(!0, i)
}
onSectionToggle(e) {
const t = !this.isExpanded(e);
@@ -287,24 +287,24 @@ class Accordion extends GOVUKFrontendComponent {
})), this.updateShowAllButton(e)
}
setExpanded(e, t) {
- const n = t.querySelector(`.${this.upChevronIconClass}`),
- i = t.querySelector(`.${this.sectionShowHideTextClass}`),
+ const i = t.querySelector(`.${this.upChevronIconClass}`),
+ n = t.querySelector(`.${this.sectionShowHideTextClass}`),
s = t.querySelector(`.${this.sectionButtonClass}`),
o = t.querySelector(`.${this.sectionContentClass}`);
if (!o) throw new ElementError({
componentName: "Accordion",
identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
});
- if (!n || !i || !s) return;
+ if (!i || !n || !s) return;
const r = e ? this.i18n.t("hideSection") : this.i18n.t("showSection");
- i.textContent = r, s.setAttribute("aria-expanded", `${e}`);
+ n.textContent = r, s.setAttribute("aria-expanded", `${e}`);
const a = [],
l = t.querySelector(`.${this.sectionHeadingTextClass}`);
l && a.push(`${l.textContent}`.trim());
const c = t.querySelector(`.${this.sectionSummaryClass}`);
c && a.push(`${c.textContent}`.trim());
const h = e ? this.i18n.t("hideSectionAriaLabel") : this.i18n.t("showSectionAriaLabel");
- a.push(h), s.setAttribute("aria-label", a.join(" , ")), e ? (o.removeAttribute("hidden"), t.classList.add(this.sectionExpandedClass), n.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), t.classList.remove(this.sectionExpandedClass), n.classList.add(this.downChevronIconClass)), this.updateShowAllButton(this.areAllSectionsOpen())
+ a.push(h), s.setAttribute("aria-label", a.join(" , ")), e ? (o.removeAttribute("hidden"), t.classList.add(this.sectionExpandedClass), i.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), t.classList.remove(this.sectionExpandedClass), i.classList.add(this.downChevronIconClass)), this.updateShowAllButton(this.areAllSectionsOpen())
}
isExpanded(e) {
return e.classList.contains(this.sectionExpandedClass)
@@ -321,18 +321,18 @@ class Accordion extends GOVUKFrontendComponent {
}
storeState(e, t) {
if (!this.config.rememberExpanded) return;
- const n = this.getIdentifier(e);
- if (n) try {
- window.sessionStorage.setItem(n, t.toString())
- } catch (i) {}
+ const i = this.getIdentifier(e);
+ if (i) try {
+ window.sessionStorage.setItem(i, t.toString())
+ } catch (n) {}
}
setInitialState(e) {
if (!this.config.rememberExpanded) return;
const t = this.getIdentifier(e);
if (t) try {
- const n = window.sessionStorage.getItem(t);
- null !== n && this.setExpanded("true" === n, e)
- } catch (n) {}
+ const i = window.sessionStorage.getItem(t);
+ null !== i && this.setExpanded("true" === i, e)
+ } catch (i) {}
}
getButtonPunctuationEl() {
const e = document.createElement("span");
@@ -380,8 +380,8 @@ class Button extends GOVUKFrontendComponent {
}
function closestAttributeValue(e, t) {
- const n = e.closest(`[${t}]`);
- return n ? n.getAttribute(t) : null
+ const i = e.closest(`[${t}]`);
+ return i ? i.getAttribute(t) : null
}
Button.moduleName = "govuk-button", Button.defaults = Object.freeze({
preventDoubleClick: !1
@@ -394,7 +394,7 @@ Button.moduleName = "govuk-button", Button.defaults = Object.freeze({
});
class CharacterCount extends GOVUKFrontendComponent {
constructor(e, t = {}) {
- var n, i;
+ var i, n;
if (super(), this.$module = void 0, this.$textarea = void 0, this.$visibleCountMessage = void 0, this.$screenReaderCountMessage = void 0, this.lastInputTimestamp = null, this.lastInputValue = "", this.valueChecker = null, this.config = void 0, this.i18n = void 0, this.maxLength = void 0, !(e instanceof HTMLElement)) throw new ElementError({
componentName: "Character count",
element: e,
@@ -414,24 +414,24 @@ class CharacterCount extends GOVUKFrontendComponent {
maxwords: void 0
}), this.config = mergeConfigs(CharacterCount.defaults, t, r, o);
const a = function(e, t) {
- const n = [];
- for (const [i, s] of Object.entries(e)) {
+ const i = [];
+ for (const [n, s] of Object.entries(e)) {
const e = [];
if (Array.isArray(s)) {
for (const {
- required: n,
- errorMessage: i
+ required: i,
+ errorMessage: n
}
- of s) n.every((e => !!t[e])) || e.push(i);
- "anyOf" !== i || s.length - e.length >= 1 || n.push(...e)
+ of s) i.every((e => !!t[e])) || e.push(n);
+ "anyOf" !== n || s.length - e.length >= 1 || i.push(...e)
}
}
- return n
+ return i
}(CharacterCount.schema, this.config);
if (a[0]) throw new ConfigError(`Character count: ${a[0]}`);
this.i18n = new I18n(this.config.i18n, {
locale: closestAttributeValue(e, "lang")
- }), this.maxLength = null != (n = null != (i = this.config.maxwords) ? i : this.config.maxlength) ? n : 1 / 0, this.$module = e, this.$textarea = s;
+ }), this.maxLength = null != (i = null != (n = this.config.maxwords) ? n : this.config.maxlength) ? i : 1 / 0, this.$module = e, this.$textarea = s;
const l = `${this.$textarea.id}-info`,
c = document.getElementById(l);
if (!c) throw new ElementError({
@@ -488,8 +488,8 @@ class CharacterCount extends GOVUKFrontendComponent {
}
formatCountMessage(e, t) {
if (0 === e) return this.i18n.t(`${t}AtLimit`);
- const n = e < 0 ? "OverLimit" : "UnderLimit";
- return this.i18n.t(`${t}${n}`, {
+ const i = e < 0 ? "OverLimit" : "UnderLimit";
+ return this.i18n.t(`${t}${i}`, {
count: Math.abs(e)
})
}
@@ -576,10 +576,10 @@ class Checkboxes extends GOVUKFrontendComponent {
syncConditionalRevealWithInputState(e) {
const t = e.getAttribute("aria-controls");
if (!t) return;
- const n = document.getElementById(t);
- if (null != n && n.classList.contains("govuk-checkboxes__conditional")) {
+ const i = document.getElementById(t);
+ if (null != i && i.classList.contains("govuk-checkboxes__conditional")) {
const t = e.checked;
- e.setAttribute("aria-expanded", t.toString()), n.classList.toggle("govuk-checkboxes__conditional--hidden", !t)
+ e.setAttribute("aria-expanded", t.toString()), i.classList.toggle("govuk-checkboxes__conditional--hidden", !t)
}
}
unCheckAllInputsExcept(e) {
@@ -600,6 +600,24 @@ class Checkboxes extends GOVUKFrontendComponent {
}
}
Checkboxes.moduleName = "govuk-checkboxes";
+class Details extends GOVUKFrontendComponent {
+ constructor(e) {
+ if (super(), this.$module = void 0, !(e instanceof HTMLDetailsElement)) throw new ElementError({
+ componentName: "Details",
+ element: e,
+ expectedType: "HTMLAnchorElement",
+ identifier: "Root element (`$module`)"
+ });
+ if (this.$module = e, this.$summary = this.$module.querySelector(".govuk-details__summary"), !this.$summary) throw new ElementError({
+ componentName: "Details",
+ identifier: 'Summary element (`<summary class="govuk-details__summary">`)'
+ });
+ this.expandedState = this.$module.open, this.$summary.setAttribute("role", "button"), this.$summary.setAttribute("aria-expanded", this.expandedState.toString()), this.$module.addEventListener("click", (() => {
+ this.$summary.setAttribute("aria-expanded", (!this.expandedState).toString()), this.expandedState = !this.expandedState
+ }))
+ }
+}
+Details.moduleName = "govuk-details";
class ErrorSummary extends GOVUKFrontendComponent {
constructor(e, t = {}) {
if (super(), this.$module = void 0, this.config = void 0, !(e instanceof HTMLElement)) throw new ElementError({
@@ -617,25 +635,25 @@ class ErrorSummary extends GOVUKFrontendComponent {
if (!(e instanceof HTMLAnchorElement)) return !1;
const t = getFragmentFromUrl(e.href);
if (!t) return !1;
- const n = document.getElementById(t);
- if (!n) return !1;
- const i = this.getAssociatedLegendOrLabel(n);
- return !!i && (i.scrollIntoView(), n.focus({
+ const i = document.getElementById(t);
+ if (!i) return !1;
+ const n = this.getAssociatedLegendOrLabel(i);
+ return !!n && (n.scrollIntoView(), i.focus({
preventScroll: !0
}), !0)
}
getAssociatedLegendOrLabel(e) {
var t;
- const n = e.closest("fieldset");
- if (n) {
- const t = n.getElementsByTagName("legend");
+ const i = e.closest("fieldset");
+ if (i) {
+ const t = i.getElementsByTagName("legend");
if (t.length) {
- const n = t[0];
- if (e instanceof HTMLInputElement && ("checkbox" === e.type || "radio" === e.type)) return n;
- const i = n.getBoundingClientRect().top,
+ const i = t[0];
+ if (e instanceof HTMLInputElement && ("checkbox" === e.type || "radio" === e.type)) return i;
+ const n = i.getBoundingClientRect().top,
s = e.getBoundingClientRect();
if (s.height && window.innerHeight) {
- if (s.top + s.height - i < window.innerHeight / 2) return n
+ if (s.top + s.height - n < window.innerHeight / 2) return i
}
}
}
@@ -658,16 +676,16 @@ class ExitThisPage extends GOVUKFrontendComponent {
element: e,
identifier: "Root element (`$module`)"
});
- const n = e.querySelector(".govuk-exit-this-page__button");
- if (!(n instanceof HTMLAnchorElement)) throw new ElementError({
+ const i = e.querySelector(".govuk-exit-this-page__button");
+ if (!(i instanceof HTMLAnchorElement)) throw new ElementError({
componentName: "Exit this page",
- element: n,
+ element: i,
expectedType: "HTMLAnchorElement",
identifier: "Button (`.govuk-exit-this-page__button`)"
});
- this.config = mergeConfigs(ExitThisPage.defaults, t, normaliseDataset(ExitThisPage, e.dataset)), this.i18n = new I18n(this.config.i18n), this.$module = e, this.$button = n;
- const i = document.querySelector(".govuk-js-exit-this-page-skiplink");
- i instanceof HTMLAnchorElement && (this.$skiplinkButton = i), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
+ this.config = mergeConfigs(ExitThisPage.defaults, t, normaliseDataset(ExitThisPage, e.dataset)), this.i18n = new I18n(this.config.i18n), this.$module = e, this.$button = i;
+ const n = document.querySelector(".govuk-js-exit-this-page-skiplink");
+ n instanceof HTMLAnchorElement && (this.$skiplinkButton = n), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
}
initUpdateSpan() {
this.$updateSpan = document.createElement("span"), this.$updateSpan.setAttribute("role", "status"), this.$updateSpan.className = "govuk-visually-hidden", this.$module.appendChild(this.$updateSpan)
@@ -738,18 +756,18 @@ class Header extends GOVUKFrontendComponent {
this.$module = e;
const t = e.querySelector(".govuk-js-header-toggle");
if (!t) return this;
- const n = t.getAttribute("aria-controls");
- if (!n) throw new ElementError({
+ const i = t.getAttribute("aria-controls");
+ if (!i) throw new ElementError({
componentName: "Header",
identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
});
- const i = document.getElementById(n);
- if (!i) throw new ElementError({
+ const n = document.getElementById(i);
+ if (!n) throw new ElementError({
componentName: "Header",
- element: i,
- identifier: `Navigation (\`<ul id="${n}">\`)`
+ element: n,
+ identifier: `Navigation (\`<ul id="${i}">\`)`
});
- this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+ this.$menu = n, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
}
setupResponsiveChecks() {
const e = getBreakpoint("desktop");
@@ -793,23 +811,23 @@ class PasswordInput extends GOVUKFrontendComponent {
element: e,
identifier: "Root element (`$module`)"
});
- const n = e.querySelector(".govuk-js-password-input-input");
- if (!(n instanceof HTMLInputElement)) throw new ElementError({
+ const i = e.querySelector(".govuk-js-password-input-input");
+ if (!(i instanceof HTMLInputElement)) throw new ElementError({
componentName: "Password input",
- element: n,
+ element: i,
expectedType: "HTMLInputElement",
identifier: "Form field (`.govuk-js-password-input-input`)"
});
- if ("password" !== n.type) throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
- const i = e.querySelector(".govuk-js-password-input-toggle");
- if (!(i instanceof HTMLButtonElement)) throw new ElementError({
+ if ("password" !== i.type) throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
+ const n = e.querySelector(".govuk-js-password-input-toggle");
+ if (!(n instanceof HTMLButtonElement)) throw new ElementError({
componentName: "Password input",
- element: i,
+ element: n,
expectedType: "HTMLButtonElement",
identifier: "Button (`.govuk-js-password-input-toggle`)"
});
- if ("button" !== i.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
- this.$module = e, this.$input = n, this.$showHideButton = i, this.config = mergeConfigs(PasswordInput.defaults, t, normaliseDataset(PasswordInput, e.dataset)), this.i18n = new I18n(this.config.i18n, {
+ if ("button" !== n.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
+ this.$module = e, this.$input = i, this.$showHideButton = n, this.config = mergeConfigs(PasswordInput.defaults, t, normaliseDataset(PasswordInput, e.dataset)), this.i18n = new I18n(this.config.i18n, {
locale: closestAttributeValue(e, "lang")
}), this.$showHideButton.removeAttribute("hidden");
const s = document.createElement("div");
@@ -830,9 +848,9 @@ class PasswordInput extends GOVUKFrontendComponent {
if (e === this.$input.type) return;
this.$input.setAttribute("type", e);
const t = "password" === e,
- n = t ? "show" : "hide",
- i = t ? "passwordHidden" : "passwordShown";
- this.$showHideButton.innerText = this.i18n.t(`${n}Password`), this.$showHideButton.setAttribute("aria-label", this.i18n.t(`${n}PasswordAriaLabel`)), this.$screenReaderStatusMessage.innerText = this.i18n.t(`${i}Announcement`)
+ i = t ? "show" : "hide",
+ n = t ? "passwordHidden" : "passwordShown";
+ this.$showHideButton.innerText = this.i18n.t(`${i}Password`), this.$showHideButton.setAttribute("aria-label", this.i18n.t(`${i}PasswordAriaLabel`)), this.$screenReaderStatusMessage.innerText = this.i18n.t(`${n}Announcement`)
}
}
PasswordInput.moduleName = "govuk-password-input", PasswordInput.defaults = Object.freeze({
@@ -880,20 +898,20 @@ class Radios extends GOVUKFrontendComponent {
syncConditionalRevealWithInputState(e) {
const t = e.getAttribute("aria-controls");
if (!t) return;
- const n = document.getElementById(t);
- if (null != n && n.classList.contains("govuk-radios__conditional")) {
+ const i = document.getElementById(t);
+ if (null != i && i.classList.contains("govuk-radios__conditional")) {
const t = e.checked;
- e.setAttribute("aria-expanded", t.toString()), n.classList.toggle("govuk-radios__conditional--hidden", !t)
+ e.setAttribute("aria-expanded", t.toString()), i.classList.toggle("govuk-radios__conditional--hidden", !t)
}
}
handleClick(e) {
const t = e.target;
if (!(t instanceof HTMLInputElement) || "radio" !== t.type) return;
- const n = document.querySelectorAll('input[type="radio"][aria-controls]'),
- i = t.form,
+ const i = document.querySelectorAll('input[type="radio"][aria-controls]'),
+ n = t.form,
s = t.name;
- n.forEach((e => {
- const t = e.form === i;
+ i.forEach((e => {
+ const t = e.form === n;
e.name === s && t && this.syncConditionalRevealWithInputState(e)
}))
}
@@ -909,18 +927,18 @@ class ServiceNavigation extends GOVUKFrontendComponent {
this.$module = e;
const t = e.querySelector(".govuk-js-service-navigation-toggle");
if (!t) return this;
- const n = t.getAttribute("aria-controls");
- if (!n) throw new ElementError({
+ const i = t.getAttribute("aria-controls");
+ if (!i) throw new ElementError({
componentName: "Service Navigation",
identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
});
- const i = document.getElementById(n);
- if (!i) throw new ElementError({
+ const n = document.getElementById(i);
+ if (!n) throw new ElementError({
componentName: "Service Navigation",
- element: i,
- identifier: `Navigation (\`<ul id="${n}">\`)`
+ element: n,
+ identifier: `Navigation (\`<ul id="${i}">\`)`
});
- this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+ this.$menu = n, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
}
setupResponsiveChecks() {
const e = getBreakpoint("tablet");
@@ -948,17 +966,17 @@ class SkipLink extends GOVUKFrontendComponent {
identifier: "Root element (`$module`)"
});
this.$module = e;
- const n = this.$module.hash,
- i = null != (t = this.$module.getAttribute("href")) ? t : "";
+ const i = this.$module.hash,
+ n = null != (t = this.$module.getAttribute("href")) ? t : "";
let s;
try {
s = new window.URL(this.$module.href)
} catch (a) {
- throw new ElementError(`Skip link: Target link (\`href="${i}"\`) is invalid`)
+ throw new ElementError(`Skip link: Target link (\`href="${n}"\`) is invalid`)
}
if (s.origin !== window.location.origin || s.pathname !== window.location.pathname) return;
- const o = getFragmentFromUrl(n);
- if (!o) throw new ElementError(`Skip link: Target link (\`href="${i}"\`) has no hash fragment`);
+ const o = getFragmentFromUrl(i);
+ if (!o) throw new ElementError(`Skip link: Target link (\`href="${n}"\`) has no hash fragment`);
const r = document.getElementById(o);
if (!r) throw new ElementError({
componentName: "Skip link",
@@ -989,17 +1007,17 @@ class Tabs extends GOVUKFrontendComponent {
identifier: 'Links (`<a class="govuk-tabs__tab">`)'
});
this.$module = e, this.$tabs = t, this.boundTabClick = this.onTabClick.bind(this), this.boundTabKeydown = this.onTabKeydown.bind(this), this.boundOnHashChange = this.onHashChange.bind(this);
- const n = this.$module.querySelector(".govuk-tabs__list"),
- i = this.$module.querySelectorAll("li.govuk-tabs__list-item");
- if (!n) throw new ElementError({
+ const i = this.$module.querySelector(".govuk-tabs__list"),
+ n = this.$module.querySelectorAll("li.govuk-tabs__list-item");
+ if (!i) throw new ElementError({
componentName: "Tabs",
identifier: 'List (`<ul class="govuk-tabs__list">`)'
});
- if (!i.length) throw new ElementError({
+ if (!n.length) throw new ElementError({
componentName: "Tabs",
identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
});
- this.$tabList = n, this.$tabListItems = i, this.setupResponsiveChecks()
+ this.$tabList = i, this.$tabListItems = n, this.setupResponsiveChecks()
}
setupResponsiveChecks() {
const e = getBreakpoint("tablet");
@@ -1035,8 +1053,8 @@ class Tabs extends GOVUKFrontendComponent {
t = this.getTab(e);
if (!t) return;
if (this.changingHash) return void(this.changingHash = !1);
- const n = this.getCurrentTab();
- n && (this.hideTab(n), this.showTab(t), t.focus())
+ const i = this.getCurrentTab();
+ i && (this.hideTab(i), this.showTab(t), t.focus())
}
hideTab(e) {
this.unhighlightTab(e), this.hidePanel(e)
@@ -1051,8 +1069,8 @@ class Tabs extends GOVUKFrontendComponent {
const t = getFragmentFromUrl(e.href);
if (!t) return;
e.setAttribute("id", `tab_${t}`), e.setAttribute("role", "tab"), e.setAttribute("aria-controls", t), e.setAttribute("aria-selected", "false"), e.setAttribute("tabindex", "-1");
- const n = this.getPanel(e);
- n && (n.setAttribute("role", "tabpanel"), n.setAttribute("aria-labelledby", e.id), n.classList.add(this.jsHiddenClass))
+ const i = this.getPanel(e);
+ i && (i.setAttribute("role", "tabpanel"), i.setAttribute("aria-labelledby", e.id), i.classList.add(this.jsHiddenClass))
}
unsetAttributes(e) {
e.removeAttribute("id"), e.removeAttribute("role"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-selected"), e.removeAttribute("tabindex");
@@ -1061,14 +1079,14 @@ class Tabs extends GOVUKFrontendComponent {
}
onTabClick(e) {
const t = this.getCurrentTab(),
- n = e.currentTarget;
- t && n instanceof HTMLAnchorElement && (e.preventDefault(), this.hideTab(t), this.showTab(n), this.createHistoryEntry(n))
+ i = e.currentTarget;
+ t && i instanceof HTMLAnchorElement && (e.preventDefault(), this.hideTab(t), this.showTab(i), this.createHistoryEntry(i))
}
createHistoryEntry(e) {
const t = this.getPanel(e);
if (!t) return;
- const n = t.id;
- t.id = "", this.changingHash = !0, window.location.hash = n, t.id = n
+ const i = t.id;
+ t.id = "", this.changingHash = !0, window.location.hash = i, t.id = i
}
onTabKeydown(e) {
switch (e.key) {
@@ -1086,16 +1104,16 @@ class Tabs extends GOVUKFrontendComponent {
if (null == e || !e.parentElement) return;
const t = e.parentElement.nextElementSibling;
if (!t) return;
- const n = t.querySelector("a.govuk-tabs__tab");
- n && (this.hideTab(e), this.showTab(n), n.focus(), this.createHistoryEntry(n))
+ const i = t.querySelector("a.govuk-tabs__tab");
+ i && (this.hideTab(e), this.showTab(i), i.focus(), this.createHistoryEntry(i))
}
activatePreviousTab() {
const e = this.getCurrentTab();
if (null == e || !e.parentElement) return;
const t = e.parentElement.previousElementSibling;
if (!t) return;
- const n = t.querySelector("a.govuk-tabs__tab");
- n && (this.hideTab(e), this.showTab(n), n.focus(), this.createHistoryEntry(n))
+ const i = t.querySelector("a.govuk-tabs__tab");
+ i && (this.hideTab(e), this.showTab(i), i.focus(), this.createHistoryEntry(i))
}
getPanel(e) {
const t = getFragmentFromUrl(e.href);
@@ -1123,11 +1141,12 @@ class Tabs extends GOVUKFrontendComponent {
function initAll(e) {
var t;
if (e = void 0 !== e ? e : {}, !isSupported()) return void console.log(new SupportError);
- const n = [
+ const i = [
[Accordion, e.accordion],
[Button, e.button],
[CharacterCount, e.characterCount],
[Checkboxes],
+ [Details],
[ErrorSummary, e.errorSummary],
[ExitThisPage, e.exitThisPage],
[Header],
@@ -1138,19 +1157,19 @@ function initAll(e) {
[SkipLink],
[Tabs]
],
- i = null != (t = e.scope) ? t : document;
- n.forEach((([e, t]) => {
- createAll(e, t, i)
+ n = null != (t = e.scope) ? t : document;
+ i.forEach((([e, t]) => {
+ createAll(e, t, n)
}))
}
-function createAll(e, t, n = document) {
- const i = n.querySelectorAll(`[data-module="${e.moduleName}"]`);
- return Array.from(i).map((n => {
+function createAll(e, t, i = document) {
+ const n = i.querySelectorAll(`[data-module="${e.moduleName}"]`);
+ return Array.from(n).map((i => {
try {
- return "defaults" in e && void 0 !== t ? new e(n, t) : new e(n)
- } catch (i) {
- return console.log(i), null
+ return "defaults" in e && void 0 !== t ? new e(i, t) : new e(i)
+ } catch (n) {
+ return console.log(n), null
}
})).filter(Boolean)
}
@@ -1160,6 +1179,7 @@ export {
Button,
CharacterCount,
Checkboxes,
+ Details,
ErrorSummary,
ExitThisPage,
Header,
Action run for afa39c2adc4a27874dec392e626e1675ab64093f