@nationalarchives/frontend 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nationalarchives/all+analytics.js +1 -1
- package/nationalarchives/all+analytics.js.map +1 -1
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/all.js +1 -1
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/analytics.mjs +1 -1
- package/nationalarchives/components/accordion/accordion.js.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/button/button.scss +10 -1
- package/nationalarchives/components/code-block/code-block.js.map +1 -1
- package/nationalarchives/components/code-block/fixtures.json +1 -1
- package/nationalarchives/components/code-block/template.njk +1 -0
- package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
- package/nationalarchives/components/date-input/date-input.js.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
- package/nationalarchives/components/file-input/file-input.js.map +1 -1
- package/nationalarchives/components/footer/footer.js.map +1 -1
- package/nationalarchives/components/gallery/gallery.js.map +1 -1
- package/nationalarchives/components/global-header/global-header.js.map +1 -1
- package/nationalarchives/components/header/header.js.map +1 -1
- package/nationalarchives/components/picture/picture.js.map +1 -1
- package/nationalarchives/components/sidebar/sidebar.js.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.css +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
- package/nationalarchives/components/tabs/fixtures.json +149 -0
- package/nationalarchives/components/tabs/macro-options.json +18 -0
- package/nationalarchives/components/tabs/tabs.css +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.js +1 -1
- package/nationalarchives/components/tabs/tabs.js.map +1 -1
- package/nationalarchives/components/tabs/tabs.mjs +6 -4
- package/nationalarchives/components/tabs/tabs.scss +3 -1
- package/nationalarchives/components/tabs/template.njk +1 -1
- package/nationalarchives/components/text-input/text-input.js.map +1 -1
- package/nationalarchives/components/textarea/textarea.js.map +1 -1
- package/nationalarchives/error-page.css +1 -1
- package/nationalarchives/error-page.css.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/breadcrumbs/breadcrumbs.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,
|
|
1
|
+
{"version":3,"file":"components/breadcrumbs/breadcrumbs.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,kDCPc,KACZ,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAYC,IAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAO,GAC/DI,SAAS,M,GCNf,MAAAC,EAAA,GAGA,SAAAC,EAAAC,GAEA,MAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAAd,QAGA,MAAAC,EAAAU,EAAAE,GAAA,CAGAb,QAAA,IAOA,OAHAgB,EAAAH,GAAAZ,EAAAA,EAAAD,QAAAY,GAGAX,EAAAD,OACA,CCrBAY,EAAAK,EAAA,CAAAjB,EAAAkB,KACA,GAAAC,MAAAC,QAAAF,GAEA,IADA,IAAAG,EAAA,EACAA,EAAAH,EAAAI,QAAA,CACA,IAAAC,EAAAL,EAAAG,KACAG,EAAAN,EAAAG,KACAI,EAAA,IAAAD,EAAA,CAAsCE,YAAA,EAAAC,MAAAT,EAAAG,MAA2C,CAAIK,YAAA,EAAAE,IAAAJ,GACrFZ,EAAAiB,EAAA7B,EAAAuB,IAAAO,OAAAC,eAAA/B,EAAAuB,EAAAE,EACA,MAEA,QAAAF,KAAAL,EACAN,EAAAiB,EAAAX,EAAAK,KAAAX,EAAAiB,EAAA7B,EAAAuB,IACAO,OAAAC,eAAA/B,EAAAuB,EAAA,CAA0CG,YAAA,EAAAE,IAAAV,EAAAK,MCb1CX,EAAAiB,EAAA,CAAAG,EAAAC,IAAAH,OAAAI,UAAAC,eAAAC,KAAAJ,EAAAC,GCCArB,EAAAyB,EAAArC,IACA8B,OAAAC,eAAA/B,EAAAsC,OAAAC,YAAA,CAAsDZ,MAAA,WACtDG,OAAAC,eAAA/B,EAAA,cAAgD2B,OAAA,K,wDCDzC,MAAMa,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,iBACHF,GAAWA,EAAQG,cAAc,0BACnCF,KAAKG,aACHJ,GACAC,KAAKC,kBACLF,EAAQK,iBAAiB,0BAEtBJ,KAAKD,SAAYC,KAAKC,kBAAqBD,KAAKG,cAMnDH,KAAKG,aAAaxB,OAAS,IAC1BqB,KAAKD,QAAQM,UAAUC,SAAS,iCAEjCN,KAAKO,MAET,CAEA,IAAAA,GACE,MAAMC,EAAW,oBAAmB,EAAAC,EAAAC,OAC9BC,EAAcC,SAASC,cAAc,MAC3CF,EAAYN,UAAUS,IACpB,wBACA,qCAEFH,EAAYI,MAAMC,QAAU,OAE5B,MAAMC,EAAgBL,SAASC,cAAc,UAC7CI,EAAcZ,UAAUS,IAAI,yBAC5BG,EAAcC,UACZ,yEACFD,EAAcE,aAAa,OAAQ,UACnCF,EAAcE,aAAa,gBAAiB,SAC5CF,EAAcE,aAAa,gBAAiBX,GAC5CS,EAAcG,iBAAiB,QAAS,KACtCpB,KAAKD,QAAQM,UAAUgB,OAAO,8BAC9BV,EAAYU,SACZrB,KAAKD,QAAQoB,aAAa,WAAY,KACtCnB,KAAKD,QAAQuB,QACbtB,KAAKD,QAAQqB,iBACX,OACA,KACEpB,KAAKD,QAAQwB,gBAAgB,aAE/B,CAAEC,MAAM,MAGZb,EAAYc,YAAYR,GAExBjB,KAAKC,iBAAiBkB,aAAa,KAAMX,GACzCR,KAAKC,iBAAiByB,aACpBf,EAEAX,KAAKG,aAAaH,KAAKG,aAAaxB,OAAS,GAAGgD,aAGlD3B,KAAKD,QAAQM,UAAUS,IAAI,6BAC7B,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","/* eslint-disable no-magic-numbers */\n/* eslint-disable no-bitwise */\nconst uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, (char) =>\n (\n char ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (char / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nconst __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tconst cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tconst module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tif(Array.isArray(definition)) {\n\t\tvar i = 0;\n\t\twhile(i < definition.length) {\n\t\t\tvar key = definition[i++];\n\t\t\tvar binding = definition[i++];\n\t\t\tvar descriptor = binding === 0 ? { enumerable: true, value: definition[i++] } : { enumerable: true, get: binding };\n\t\t\tif(!__webpack_require__.o(exports, key)) Object.defineProperty(exports, key, descriptor);\n\t\t}\n\t} else {\n\t\tfor(var key in definition) {\n\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t\t}\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Breadcrumbs {\n constructor($module) {\n this.$module = $module;\n this.$breadcrumbsList =\n $module && $module.querySelector(\".tna-breadcrumbs__list\");\n this.$breadcrumbs =\n $module &&\n this.$breadcrumbsList &&\n $module.querySelectorAll(\".tna-breadcrumbs__item\");\n\n if (!this.$module || !this.$breadcrumbsList || !this.$breadcrumbs) {\n return;\n }\n\n if (\n /* eslint-disable-next-line no-magic-numbers */\n this.$breadcrumbs.length > 2 &&\n !this.$module.classList.contains(\"tna-breadcrumbs--no-collapse\")\n ) {\n this.init();\n }\n }\n\n init() {\n const uniqueId = `tna-breadcrumbs-${uuidv4()}`;\n const $expandable = document.createElement(\"li\");\n $expandable.classList.add(\n \"tna-breadcrumbs__item\",\n \"tna-breadcrumbs__item--expandable\",\n );\n $expandable.style.display = \"none\";\n\n const $expandButton = document.createElement(\"button\");\n $expandButton.classList.add(\"tna-breadcrumbs__link\");\n $expandButton.innerHTML =\n \"<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>…\";\n $expandButton.setAttribute(\"type\", \"button\");\n $expandButton.setAttribute(\"aria-expanded\", \"false\");\n $expandButton.setAttribute(\"aria-controls\", uniqueId);\n $expandButton.addEventListener(\"click\", () => {\n this.$module.classList.remove(\"tna-breadcrumbs--collapsed\");\n $expandable.remove();\n this.$module.setAttribute(\"tabindex\", \"0\");\n this.$module.focus();\n this.$module.addEventListener(\n \"blur\",\n () => {\n this.$module.removeAttribute(\"tabindex\");\n },\n { once: true },\n );\n });\n $expandable.appendChild($expandButton);\n\n this.$breadcrumbsList.setAttribute(\"id\", uniqueId);\n this.$breadcrumbsList.insertBefore(\n $expandable,\n /* eslint-disable-next-line no-magic-numbers */\n this.$breadcrumbs[this.$breadcrumbs.length - 2].nextSibling,\n );\n\n this.$module.classList.add(\"tna-breadcrumbs--collapsed\");\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","char","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","Array","isArray","i","length","key","binding","descriptor","enumerable","value","get","o","Object","defineProperty","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","Breadcrumbs","constructor","$module","this","$breadcrumbsList","querySelector","$breadcrumbs","querySelectorAll","classList","contains","init","uniqueId","_lib_uuid_mjs__WEBPACK_IMPORTED_MODULE_0__","A","$expandable","document","createElement","add","style","display","$expandButton","innerHTML","setAttribute","addEventListener","remove","focus","removeAttribute","once","appendChild","insertBefore","nextSibling"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-button-group{margin-top:2rem}.tna-button-group:first-child{margin-top:0}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:0.5rem}.tna-button-group--centred{justify-content:center}.tna-button-group--full{justify-content:stretch}@media(max-width: 48em){.tna-button-group--full{flex-direction:column;align-items:stretch}}.tna-button-group--full .tna-button{margin:0;flex:1}.tna-button{padding:0.25rem 1rem;display:inline-flex;align-items:baseline;justify-content:center;gap:0.75rem;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;border-radius:2px}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block}.tna-button svg{height:1.1em;align-self:center;flex-shrink:0;fill:currentColor}.tna-button--plain{font-weight:400;text-decoration:underline;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-radius:.1px}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:
|
|
1
|
+
.tna-button-group{margin-top:2rem}.tna-button-group:first-child{margin-top:0}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:0.5rem}.tna-button-group--centred{justify-content:center}.tna-button-group--full{justify-content:stretch}@media(max-width: 48em){.tna-button-group--full{flex-direction:column;align-items:stretch}}.tna-button-group--full .tna-button{margin:0;flex:1}.tna-button{padding:0.25rem 1rem;display:inline-flex;align-items:baseline;justify-content:center;gap:0.75rem;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;border-radius:2px}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block}.tna-button svg{height:1.1em;align-self:center;flex-shrink:0;fill:currentColor}.tna-button--plain{font-weight:400;text-decoration:underline;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-radius:.1px}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:hover{color:var(--link, #005fa3)}.tna-button--plain:visited{color:var(--link-visited, #634abb)}.tna-button--plain:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-button--plain.tna-button--no-visited-state:visited{color:var(--link, #005fa3)}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--icon-right:has(.fa-solid){align-items:center}.tna-button--small,.tna-button-group--small .tna-button{padding:0 0.5rem;gap:0.375rem;line-height:1.5rem;font-size:0.875rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;line-height:2rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:1.5rem;line-height:1.5rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1.2rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;line-height:2rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:1.5rem;line-height:1.5rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1.2rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}}@media(forced-colors: active){.tna-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}}/*# sourceMappingURL=button.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/button/_button-group.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss"],"names":[],"mappings":"AA0BA,kBACE,gBAUA,8BACE,aCnCJ,kBACE,aACA,eACA,mBACA,SCmDA,wBDvDF,kBASI,sBACA,qBAGF,yBACE,WAGF,2BACE,uBAGF,wBACE,wBCyDF,wBD1DA,wBAII,sBAEA,qBAGF,oCACE,SAEA,OE1BN,YACE,qBAEA,oBACA,qBACA,uBACA,YAEA,iBACA,kBACA,qBACA,kBAEA,eAEA,iCACA,yBCpBA,mBAiBA,YCiBsB,IC0CtB,wDA4BI,wDC3GJ,cCDsB,ILkCtB,iDG0CA,6CHpCA,kBGoCA,6CHlCE,qBAEA,yBAGF,sBACE,cAGF,gBACE,aAEA,kBAEA,cAEA,kBAGF,mBChDA,YCuBiB,IF2Bf,0BAEA,+BAEA,2BACA,mBAEA,+FGMF,2BHCE,yBCZF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFsDpC,oBGFA,uEAiCI,mEH1BF,yEGXF,gDHiBE,0BGjBF,qCHsBA,wBACE,2BAEA,uCACE,mBAIJ,wDAEE,iBAEA,aAEA,mBC5GF,mBDuJA,uBAtCE,gBACA,eAEA,MAEA,uBACA,yBAEA,iCACE,aAEA,iBC5HJ,mBDiIE,2BACE,cACA,aAwBJ,yFAnBE,gBACA,eAEA,6GACE,aAEA,mBAGF,iGACE,cACA,aDvEJ,wBCqFE,8BAhDA,gBACA,eAEA,MAEA,uBACA,yBAEA,wCACE,aAEA,iBC5HJ,mBDiIE,kCACE,cACA,aAkCF,uGA7BA,gBACA,eAEA,2HACE,aAEA,mBAGF,+GACE,cACA,cAyBF,uDGpGF,qCAIA,4CHyGE,kHG7GF,qCHkHA,sHG9GA,uEAiCI,mEHmFF,4XGxHF,gDH8HE,kIG9HF,oDAIA,qDHiIA,mCAEI,2EGvIJ,qCH4IE,6EGxIF,uEAiCI,mEH4GA,oPGjJJ,gDHuJI,mFGvJJ,oDAIA,sDAybA,8BH7RE,kBC3KF,0BACA,0BCpCsC,QDqCtC,sBCvCoC","file":"button.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n // @return #{$size * spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(1);\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: spacing.space(0.5);\n }\n\n &--centred {\n justify-content: center;\n }\n\n &--full {\n justify-content: stretch;\n\n @include media.on-mobile {\n flex-direction: column;\n\n align-items: stretch;\n }\n\n .tna-button {\n margin: 0;\n\n flex: 1;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"button-group\";\n\n$button-border-width: 4px !default;\n\n.tna-button {\n padding: spacing.space(0.25) spacing.space(1);\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: spacing.space(0.75);\n\n line-height: 2rem;\n text-align: center;\n text-decoration: none;\n text-wrap: balance;\n\n cursor: pointer;\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", $button-border-width);\n @include borders.rounded-border;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid {\n display: block;\n }\n\n svg {\n height: 1.1em;\n\n align-self: center;\n\n flex-shrink: 0;\n\n fill: currentColor;\n }\n\n &--plain {\n @include typography.main-font-weight;\n text-decoration: underline;\n\n background-color: transparent;\n\n border-color: transparent;\n border-radius: 0.1px;\n\n &,\n &:link,\n &:visited,\n &:hover {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accented-background\");\n\n @include colour.colour-border(\"button-accented-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accented-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n\n &:has(.fa-solid) {\n align-items: center;\n }\n }\n\n &--small,\n &-group--small & {\n padding: 0 spacing.space(0.5);\n\n gap: spacing.space(0.375);\n\n line-height: 1.5rem;\n @include typography.font-size(14);\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0 !important;\n line-height: 0 !important;\n\n .fa-solid {\n width: 2.5rem;\n\n line-height: 2rem;\n\n @include typography.font-size(18);\n }\n\n svg {\n height: 1.5rem;\n margin: 0.5rem;\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid {\n width: 1.5rem;\n\n line-height: 1.5rem;\n }\n\n svg {\n height: 1.2rem;\n margin: 0.5rem;\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"background\");\n }\n }\n\n .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent,\n .tna-template--dark-theme .tna-background-accent-light &--accent {\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .tna-template--system-theme .tna-background-accent-light & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-template--system-theme .tna-background-accent-light &--accent {\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n }\n\n @include colour.on-forced-colours {\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n &:hover {\n outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n }\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/button/_button-group.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss"],"names":[],"mappings":"AA0BA,kBACE,gBAUA,8BACE,aCnCJ,kBACE,aACA,eACA,mBACA,SCmDA,wBDvDF,kBASI,sBACA,qBAGF,yBACE,WAGF,2BACE,uBAGF,wBACE,wBCyDF,wBD1DA,wBAII,sBAEA,qBAGF,oCACE,SAEA,OE1BN,YACE,qBAEA,oBACA,qBACA,uBACA,YAEA,iBACA,kBACA,qBACA,kBAEA,eAEA,iCACA,yBCpBA,mBAiBA,YCiBsB,IC0CtB,wDA4BI,wDC3GJ,cCDsB,ILkCtB,iDG0CA,6CHpCA,kBGoCA,6CHlCE,qBAEA,yBAGF,sBACE,cAGF,gBACE,aAEA,kBAEA,cAEA,kBAGF,mBChDA,YCuBiB,IF2Bf,0BAEA,+BAEA,2BACA,mBAEA,oEGMF,yFHIE,yBCfF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF0DlC,wDGVF,2BHeA,oBGXA,uEAiCI,mEHjBF,yEGpBF,gDH0BE,0BG1BF,qCH+BA,wBACE,2BAEA,uCACE,mBAIJ,wDAEE,iBAEA,aAEA,mBCrHF,mBDgKA,uBAtCE,gBACA,eAEA,MAEA,uBACA,yBAEA,iCACE,aAEA,iBCrIJ,mBD0IE,2BACE,cACA,aAwBJ,yFAnBE,gBACA,eAEA,6GACE,aAEA,mBAGF,iGACE,cACA,aDhFJ,wBC8FE,8BAhDA,gBACA,eAEA,MAEA,uBACA,yBAEA,wCACE,aAEA,iBCrIJ,mBD0IE,kCACE,cACA,aAkCF,uGA7BA,gBACA,eAEA,2HACE,aAEA,mBAGF,+GACE,cACA,cAyBF,uDG7GF,qCAIA,4CHkHE,kHGtHF,qCH2HA,sHGvHA,uEAiCI,mEH4FF,4XGjIF,gDHuIE,kIGvIF,oDAIA,qDH0IA,mCAEI,2EGhJJ,qCHqJE,6EGjJF,uEAiCI,mEHqHA,oPG1JJ,gDHgKI,mFGhKJ,oDAIA,sDAybA,8BHpRE,kBCpLF,0BACA,0BCpCsC,QDqCtC,sBCvCoC","file":"button.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n // @return #{$size * spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(1);\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: spacing.space(0.5);\n }\n\n &--centred {\n justify-content: center;\n }\n\n &--full {\n justify-content: stretch;\n\n @include media.on-mobile {\n flex-direction: column;\n\n align-items: stretch;\n }\n\n .tna-button {\n margin: 0;\n\n flex: 1;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"button-group\";\n\n$button-border-width: 4px !default;\n\n.tna-button {\n padding: spacing.space(0.25) spacing.space(1);\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: spacing.space(0.75);\n\n line-height: 2rem;\n text-align: center;\n text-decoration: none;\n text-wrap: balance;\n\n cursor: pointer;\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", $button-border-width);\n @include borders.rounded-border;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid {\n display: block;\n }\n\n svg {\n height: 1.1em;\n\n align-self: center;\n\n flex-shrink: 0;\n\n fill: currentColor;\n }\n\n &--plain {\n @include typography.main-font-weight;\n text-decoration: underline;\n\n background-color: transparent;\n\n border-color: transparent;\n border-radius: 0.1px;\n\n &,\n &:link,\n &:hover {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--plain#{&}--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accented-background\");\n\n @include colour.colour-border(\"button-accented-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accented-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n\n &:has(.fa-solid) {\n align-items: center;\n }\n }\n\n &--small,\n &-group--small & {\n padding: 0 spacing.space(0.5);\n\n gap: spacing.space(0.375);\n\n line-height: 1.5rem;\n @include typography.font-size(14);\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0 !important;\n line-height: 0 !important;\n\n .fa-solid {\n width: 2.5rem;\n\n line-height: 2rem;\n\n @include typography.font-size(18);\n }\n\n svg {\n height: 1.5rem;\n margin: 0.5rem;\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid {\n width: 1.5rem;\n\n line-height: 1.5rem;\n }\n\n svg {\n height: 1.2rem;\n margin: 0.5rem;\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"background\");\n }\n }\n\n .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent,\n .tna-template--dark-theme .tna-background-accent-light &--accent {\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .tna-template--system-theme .tna-background-accent-light & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-template--system-theme .tna-background-accent-light &--accent {\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n }\n\n @include colour.on-forced-colours {\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n &:hover {\n outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n }\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n"]}
|
|
@@ -72,16 +72,25 @@ $button-border-width: 4px !default;
|
|
|
72
72
|
|
|
73
73
|
&,
|
|
74
74
|
&:link,
|
|
75
|
-
&:visited,
|
|
76
75
|
&:hover {
|
|
77
76
|
@include colour.colour-font("link");
|
|
78
77
|
}
|
|
79
78
|
|
|
79
|
+
&:visited {
|
|
80
|
+
@include colour.colour-font("link-visited");
|
|
81
|
+
}
|
|
82
|
+
|
|
80
83
|
&:hover {
|
|
81
84
|
@include typography.interacted-text-decoration;
|
|
82
85
|
}
|
|
83
86
|
}
|
|
84
87
|
|
|
88
|
+
&--plain#{&}--no-visited-state {
|
|
89
|
+
&:visited {
|
|
90
|
+
@include colour.colour-font("link");
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
85
94
|
&--accent {
|
|
86
95
|
@include colour.colour-background("button-accented-background");
|
|
87
96
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/code-block/code-block.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,
|
|
1
|
+
{"version":3,"file":"components/code-block/code-block.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,mBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,M,yCCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,MAAQD,KAAKD,QAAQG,cAAc,YACxCF,KAAKG,YAAcH,KAAKD,QAAQG,cAAc,yBAG3CF,KAAKD,SACLC,KAAKC,OACLD,KAAKG,aACLC,UAAUC,YAKbL,KAAKG,YAAYG,gBAAgB,UACjCN,KAAKD,QAAQQ,UAAUC,IAAI,4BAE3BR,KAAKG,YAAYM,iBAAiB,QAASC,UACzC,UACQN,UAAUC,UAAUM,UAAUX,KAAKC,MAAMW,WAC/CZ,KAAKG,YAAYS,UAAY,aAC/B,CAAE,MACA,IAIJZ,KAAKG,YAAYM,iBAAiB,OAAQ,KACxCT,KAAKG,YAAYS,UAAY,cAEjC,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/code-block/code-block.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class CodeBlock {\n constructor($module) {\n this.$module = $module;\n this.$code = this.$module.querySelector(\"pre code\");\n this.$copyButton = this.$module.querySelector(\".tna-code-block__copy\");\n\n if (\n !this.$module ||\n !this.$code ||\n !this.$copyButton ||\n !navigator.clipboard\n ) {\n return;\n }\n\n this.$copyButton.removeAttribute(\"hidden\");\n this.$module.classList.add(\"tna-code-block__copyable\");\n\n this.$copyButton.addEventListener(\"click\", async () => {\n try {\n await navigator.clipboard.writeText(this.$code.innerText);\n this.$copyButton.innerText = \"Code copied\";\n } catch {\n // Continue regardless of error\n }\n });\n\n this.$copyButton.addEventListener(\"blur\", () => {\n this.$copyButton.innerText = \"Copy code\";\n });\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","CodeBlock","constructor","$module","this","$code","querySelector","$copyButton","navigator","clipboard","removeAttribute","classList","add","addEventListener","async","writeText","innerText"],"sourceRoot":""}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"filename": "example.txt",
|
|
15
15
|
"code": "Plaintext code block"
|
|
16
16
|
},
|
|
17
|
-
"html": "<div class=\"tna-code-block\" title=\"example.txt\"><button class=\"tna-button tna-code-block__copy tna-button--small tna-button--plain\" type=\"button\" hidden aria-live=\"assertive\">Copy code</button><pre class=\"tna-code-block__pre\" tabindex=\"0\" role=\"region\" aria-label=\"Code block: example.txt\"><code class=\"language-plain\">Plaintext code block</code></pre></div>"
|
|
17
|
+
"html": "<div class=\"tna-code-block\" title=\"example.txt\"><button class=\"tna-button tna-code-block__copy tna-button--small tna-button--plain\" type=\"button\" aria-label=\"Copy code for example.txt\" title=\"Copy code for example.txt\" hidden aria-live=\"assertive\">Copy code</button><pre class=\"tna-code-block__pre\" tabindex=\"0\" role=\"region\" aria-label=\"Code block: example.txt\"><code class=\"language-plain\">Plaintext code block</code></pre></div>"
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
"name": "with language",
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<div class="tna-code-block{% if classes %} {{ classes }}{% endif %}"{% if params.filename %} title="{{ params.filename }}"{% endif %}{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}{% if params.copy %} data-module="tna-code-block"{% endif %}>
|
|
6
6
|
{{ tnaButton({
|
|
7
7
|
text: "Copy code",
|
|
8
|
+
title: ("Copy code for " ~ params.filename) if params.filename else "",
|
|
8
9
|
plain: true,
|
|
9
10
|
small: true,
|
|
10
11
|
buttonElement: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/cookie-banner/cookie-banner.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./node_modules/@nationalarchives/cookies/src/events.js","webpack://TNAFrontend/./node_modules/@nationalarchives/cookies/src/index.js","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/cookie-banner/cookie-banner.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","/**\n * Class to handle cookie events.\n * @class CookieEventHandler\n * @constructor\n * @public\n */\nexport default class CookieEventHandler {\n /** @protected */\n events = {};\n /** @protected */\n oneTimeEvents = {};\n\n constructor() {\n if (\n window.TNAFrontendCookieEvents &&\n window.TNAFrontendCookieEvents instanceof CookieEventHandler\n ) {\n /* eslint-disable-next-line no-constructor-return */\n return window.TNAFrontendCookieEvents;\n }\n window.TNAFrontendCookieEvents = this;\n }\n\n /**\n * Clear all event listeners.\n */\n clearAll() {\n this.events = {};\n this.oneTimeEvents = {};\n }\n\n /**\n * Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n on(event, callback) {\n this.events[event] = [...(this.events[event] || []), callback];\n }\n\n /**\n * Add a one-time event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n once(event, callback) {\n this.oneTimeEvents[event] = [\n ...(this.oneTimeEvents[event] || []),\n callback,\n ];\n }\n\n /** @protected */\n trigger(event, data = {}) {\n if (Object.hasOwn(this.events, event)) {\n this.events[event].forEach((eventToTrigger) =>\n eventToTrigger.call(this, data),\n );\n }\n if (Object.hasOwn(this.oneTimeEvents, event)) {\n this.oneTimeEvents[event].forEach((eachEvent) =>\n eachEvent.call(this, data),\n );\n this.oneTimeEvents[event] = [];\n }\n }\n}\n","/* eslint-disable max-lines, no-ternary */\n\nimport CookieEventHandler from \"./events\";\n\n/**\n * Class to handle cookies.\n * @class Cookies\n * @constructor\n * @public\n */\nexport default class Cookies {\n /** @protected */\n defaultDomain = \"\";\n /** @protected */\n defaultPath = \"\";\n /** @protected */\n secure = true;\n /** @protected */\n preferencesKey = \"\";\n /** @protected */\n events = null;\n /** @protected */\n defaultAge = null;\n /** @protected */\n preferencesCorrectOnInit = false;\n\n /** @protected */\n tnaCookiePreferences = [\"usage\", \"settings\", \"marketing\", \"essential\"];\n\n /**\n * Create a cookie handler.\n * @param {String} [options.defaultDomain] - The domain to register the cookie with.\n * @param {String} [options.path] - The domain to register the cookie with.\n * @param {Boolean} [options.secure] - Only set cookie in HTTPS environments.\n * @param {String} [options.preferencesKey] - The name of the cookie that stores the user's preferences.\n * @param {String} [options.preferencesSetKey] - The name of the cookie that dictates whether the user's preferences have been set.\n * @param {Number} [options.defaultAge] - The default age of non-session cookies.\n * @param {Boolean} [options.noInit=false] - Don't initialise a blank cookie preference.\n */\n /* eslint-disable-next-line max-statements, */\n constructor(options = {}) {\n const {\n defaultDomain,\n defaultPath,\n secure,\n preferencesKey,\n preferencesSetKey,\n defaultAge,\n noInit = false,\n } = options;\n const docDataset = document.documentElement.dataset;\n this.defaultDomain = defaultDomain\n ? defaultDomain\n : docDataset.tnaCookiesDomain || window.location.hostname;\n this.defaultPath = defaultPath\n ? defaultPath\n : docDataset.tnaCookiesPath || \"/\";\n this.secure = secure ? secure : docDataset.tnaCookiesInsecure !== \"true\";\n this.preferencesKey = preferencesKey\n ? preferencesKey\n : docDataset.tnaCookiesPreferencesKey || \"cookie_preferences\";\n this.preferencesSetKey = preferencesSetKey\n ? preferencesSetKey\n : docDataset.tnaCookiesPreferencesSetKey || \"cookie_preferences_set\";\n this.defaultAge = defaultAge\n ? defaultAge\n : parseInt(docDataset.tnaCookiesDefaultAge, 10) ||\n /* eslint-disable-next-line no-magic-numbers */\n 365 * 24 * 60 * 60;\n this.events = new CookieEventHandler();\n this.preferencesCorrectOnInit = this.validatePreferences(this.preferences);\n if (!this.preferencesCorrectOnInit) {\n this.preferencesSet = false;\n if (!noInit) {\n this.init();\n }\n }\n }\n\n /** @protected */\n init() {\n const existingPreferences = this.preferences;\n const filteredExistingPreferences = Object.fromEntries(\n Object.keys(existingPreferences)\n .filter((preference) => this.tnaCookiePreferences.includes(preference))\n .map((preference) => [preference, existingPreferences[preference]]),\n );\n this.savePreferences({\n usage: false,\n settings: false,\n marketing: false,\n ...filteredExistingPreferences,\n essential: true,\n });\n }\n\n validatePreferences(preferences) {\n return (\n Object.keys(preferences).length === this.tnaCookiePreferences.length &&\n this.tnaCookiePreferences.every(\n (preference) =>\n Object.keys(preferences).includes(preference) &&\n typeof preferences[preference] === \"boolean\",\n )\n );\n }\n\n /** @protected */\n /* eslint-disable-next-line class-methods-use-this */\n get all() {\n const deserialised = {};\n document.cookie\n .split(\"; \")\n .filter((cookie) => cookie.trim() !== \"\")\n .filter((cookie) => cookie.includes(\"=\"))\n .forEach((cookie) => {\n const parts = cookie.trim().split(\"=\");\n const [key, value = \"\"] = parts;\n deserialised[key] = decodeURIComponent(value);\n });\n return deserialised;\n }\n\n /** @protected */\n get preferences() {\n try {\n return JSON.parse(this.get(this.preferencesKey) || \"{}\");\n // eslint-disable-next-line no-unused-vars\n } catch (error) {\n return {};\n }\n }\n\n /**\n * Check to see whether a cookie exists or not.\n * @param {String} key - The cookie name.\n * @returns {Boolean}\n */\n exists(key) {\n return Object.hasOwn(this.all, key);\n }\n\n /**\n * Check to see whether a cookie has a particular value.\n * @param {String} key - The cookie name.\n * @param {String|Number|Boolean} value - The value to check against.\n * @returns\n */\n hasValue(key, value) {\n return this.get(key) === value;\n }\n\n /**\n * Get a cookie.\n * @param {String} key - The cookie name.\n * @returns {String|Number|Boolean|null}\n */\n get(key) {\n if (this.exists(key)) {\n return decodeURIComponent(this.all[key]);\n }\n /* eslint-disable-next-line no-undefined */\n return undefined;\n }\n\n /**\n * Set a cookie.\n * @param {String} key - The cookie name.\n * @param {String|Number|Boolean} value - The cookie value.\n * @param {Object} options\n * @param {Number} [options.maxAge=this.defaultAge] - The maximum age of the cookie in seconds.\n * @param {String} [options.path=/] - The path to register the cookie for.\n * @param {String} [options.sameSite=Lax] - The sameSite attribute.\n * @param {String} [options.domain=this.defaultDomain] - The domain to register the cookie with.\n * @param {String} [options.path=this.defaultPath] - The path to register the cookie with.\n * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.\n * @param {String} [options.session=false] - Set a session cookie.\n */\n set(key, value, options = {}) {\n const {\n maxAge = this.defaultAge,\n sameSite = \"Lax\",\n domain = this.defaultDomain,\n path = this.defaultPath,\n secure = this.secure,\n session = false,\n } = options;\n if (!key) {\n return;\n }\n const secureString = secure ? \"; secure\" : \"\";\n const sessionString = session ? \"\" : `; max-age=${maxAge}`;\n const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; domain=${domain}; samesite=${sameSite}; path=${path}${sessionString}${secureString}`;\n document.cookie = cookie;\n const cookieDetails = {\n key,\n value,\n maxAge,\n path,\n sameSite,\n domain,\n secure,\n session,\n cookie,\n };\n this.events.trigger(\"setCookie\", cookieDetails);\n }\n\n /**\n * Delete a cookie.\n * @param {String} key - The cookie name.\n * @param {String} [path=/] - The path to the cookie is registered on.\n */\n delete(key, path = \"/\", domain = this.defaultDomain) {\n const options = { maxAge: -1, path, domain };\n this.set(key, \"\", options);\n this.events.trigger(\"deleteCookie\", { key, ...options });\n }\n\n /**\n * Delete all cookies.\n */\n deleteAll(path = \"/\", domain = this.defaultDomain) {\n Object.keys(this.all).forEach((cookie) => {\n this.delete(cookie, path, domain);\n });\n const details = { path, domain };\n this.events.trigger(\"deleteAllCookies\", details);\n }\n\n /**\n * Accept a preference.\n * @param {String} preference - The name of the preference.\n */\n enablePreference(preference) {\n if (!Object.hasOwn(this.preferences, preference)) {\n throw new Error(`Preference '${preference}' does not exist`);\n }\n this.setPreference(preference, true);\n this.events.trigger(\"enablePreference\", preference);\n this.events.trigger(\"changePreference\", { [preference]: true });\n }\n\n /**\n * Reject a preference.\n * @param {String} preference - The name of the preference.\n */\n disablePreference(preference) {\n if (!Object.hasOwn(this.preferences, preference)) {\n throw new Error(`Preference '${preference}' does not exist`);\n }\n this.setPreference(preference, false);\n this.events.trigger(\"disablePreference\", preference);\n this.events.trigger(\"changePreference\", { [preference]: false });\n }\n\n /**\n * Set a preference.\n * @param {String} preference - The name of the preference.\n * @param {Boolean} accepted - Whether the preference is accepted or not.\n */\n setPreference(preference, accepted) {\n if (!Object.hasOwn(this.preferences, preference)) {\n throw new Error(`Preference '${preference}' does not exist`);\n }\n if (preference === \"essential\") {\n return;\n }\n this.savePreferences({\n ...this.preferences,\n [preference]: accepted,\n essential: true,\n });\n this.events.trigger(\"changePreference\", { [preference]: accepted });\n }\n\n /**\n * Accept all the cookie preferences.\n */\n enableAllPreferences() {\n const allPreferences = Object.fromEntries(\n Object.keys(this.preferences).map((key) => [key.toLowerCase(), true]),\n );\n this.savePreferences(allPreferences);\n this.preferencesSet = true;\n this.events.trigger(\"enableAllPreferences\");\n this.events.trigger(\"changePreference\", allPreferences);\n }\n\n /**\n * Reject all the cookie preferences.\n */\n disableAllPreferences() {\n const allPreferences = {\n ...Object.fromEntries(\n Object.keys(this.preferences).map((key) => [key.toLowerCase(), false]),\n ),\n essential: true,\n };\n this.savePreferences(allPreferences);\n this.preferencesSet = true;\n this.events.trigger(\"disableAllPreferences\");\n this.events.trigger(\"changePreference\", allPreferences);\n }\n\n /** @protected */\n savePreferences(preferences) {\n this.set(this.preferencesKey, JSON.stringify(preferences));\n }\n\n /**\n * Get the status of whether the preferences have been set.\n * @returns {Boolean}\n */\n get preferencesSet() {\n return this.hasValue(this.preferencesSetKey, \"true\");\n }\n\n /**\n * Set the status of whether the preferences have been set.\n * @param {Boolean} value\n */\n set preferencesSet(value) {\n if (\n value === true &&\n this.validatePreferences(JSON.parse(this.get(this.preferencesKey)))\n ) {\n this.set(this.preferencesSetKey, \"true\");\n } else {\n this.delete(this.preferencesSetKey);\n }\n this.events.trigger(\"preferencesSet\");\n }\n\n /**\n * Get the acceptance status of a preference.\n * @param {String} preference - The name of the preference.\n * @returns {Boolean}\n */\n preference(preference) {\n if (Object.hasOwn(this.preferences, preference)) {\n return this.preferences[preference] === true;\n }\n throw new Error(`Preference '${preference}' does not exist`);\n }\n\n /**\n * Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n on(event, callback) {\n this.events.on(event, callback);\n }\n\n /**\n * Add a one-time event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n once(event, callback) {\n this.events.once(event, callback);\n }\n}\n","// The module cache\nconst __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tconst cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tconst module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Cookies from \"@nationalarchives/cookies/src/index.js\";\n\nexport { Cookies };\n\nexport class CookieBanner {\n constructor($module) {\n this.$module = $module;\n this.$acceptButton = $module && $module.querySelector('[value=\"accept\"]');\n this.$rejectButton = $module && $module.querySelector('[value=\"reject\"]');\n this.$prompt =\n $module && $module.querySelector(\".tna-cookie-banner__message--prompt\");\n this.$acceptedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--accepted\");\n this.$rejectedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--rejected\");\n this.$closeButtons = $module && $module.querySelectorAll('[value=\"close\"]');\n\n if (\n !this.$module ||\n !this.$acceptButton ||\n !this.$rejectButton ||\n !this.$prompt ||\n !this.$acceptedMessage ||\n !this.$rejectedMessage ||\n !this.$closeButtons\n ) {\n return;\n }\n\n this.cookies = new Cookies();\n\n if (!this.cookies.preferencesSet) {\n this.$module.removeAttribute(\"hidden\");\n\n this.$acceptButton.addEventListener(\"click\", () => this.accept());\n this.$rejectButton.addEventListener(\"click\", () => this.reject());\n\n this.$closeButtons.forEach(($closeButton) => {\n $closeButton.addEventListener(\"click\", () => this.close());\n });\n }\n }\n\n accept() {\n this.cookies.enableAllPreferences();\n this.showPanel(this.$acceptedMessage);\n }\n\n reject() {\n this.cookies.disableAllPreferences();\n this.showPanel(this.$rejectedMessage);\n }\n\n showPanel($panel) {\n this.$prompt.setAttribute(\"hidden\", \"\");\n $panel.removeAttribute(\"hidden\");\n $panel.setAttribute(\"tabindex\", \"0\");\n $panel.focus();\n $panel.addEventListener(\"blur\", () => {\n $panel.removeAttribute(\"tabindex\");\n });\n }\n\n close() {\n this.$module.setAttribute(\"hidden\", \"\");\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","CookieEventHandler","events","oneTimeEvents","constructor","window","TNAFrontendCookieEvents","this","clearAll","on","event","callback","once","trigger","data","Object","hasOwn","forEach","eventToTrigger","call","eachEvent","Cookies","defaultDomain","defaultPath","secure","preferencesKey","defaultAge","preferencesCorrectOnInit","tnaCookiePreferences","options","preferencesSetKey","noInit","docDataset","document","documentElement","dataset","tnaCookiesDomain","location","hostname","tnaCookiesPath","tnaCookiesInsecure","tnaCookiesPreferencesKey","tnaCookiesPreferencesSetKey","parseInt","tnaCookiesDefaultAge","validatePreferences","preferences","preferencesSet","init","existingPreferences","filteredExistingPreferences","fromEntries","keys","filter","preference","includes","map","savePreferences","usage","settings","marketing","essential","length","every","all","deserialised","cookie","split","trim","parts","key","value","decodeURIComponent","JSON","parse","get","error","exists","hasValue","set","maxAge","sameSite","domain","path","session","secureString","sessionString","encodeURIComponent","cookieDetails","deleteAll","delete","details","enablePreference","Error","setPreference","disablePreference","accepted","enableAllPreferences","allPreferences","toLowerCase","disableAllPreferences","stringify","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","o","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","CookieBanner","$module","$acceptButton","querySelector","$rejectButton","$prompt","$acceptedMessage","$rejectedMessage","$closeButtons","querySelectorAll","cookies","_nationalarchives_cookies_src_index_js__WEBPACK_IMPORTED_MODULE_0__","A","removeAttribute","addEventListener","accept","reject","$closeButton","close","showPanel","$panel","setAttribute","focus"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/cookie-banner/cookie-banner.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./node_modules/@nationalarchives/cookies/src/events.js","webpack://TNAFrontend/./node_modules/@nationalarchives/cookies/src/index.js","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/cookie-banner/cookie-banner.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","/**\n * Class to handle cookie events.\n * @class CookieEventHandler\n * @constructor\n * @public\n */\nexport default class CookieEventHandler {\n /** @protected */\n events = {};\n /** @protected */\n oneTimeEvents = {};\n\n constructor() {\n if (\n window.TNAFrontendCookieEvents &&\n window.TNAFrontendCookieEvents instanceof CookieEventHandler\n ) {\n /* eslint-disable-next-line no-constructor-return */\n return window.TNAFrontendCookieEvents;\n }\n window.TNAFrontendCookieEvents = this;\n }\n\n /**\n * Clear all event listeners.\n */\n clearAll() {\n this.events = {};\n this.oneTimeEvents = {};\n }\n\n /**\n * Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n on(event, callback) {\n this.events[event] = [...(this.events[event] || []), callback];\n }\n\n /**\n * Add a one-time event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n once(event, callback) {\n this.oneTimeEvents[event] = [\n ...(this.oneTimeEvents[event] || []),\n callback,\n ];\n }\n\n /** @protected */\n trigger(event, data = {}) {\n if (Object.hasOwn(this.events, event)) {\n this.events[event].forEach((eventToTrigger) =>\n eventToTrigger.call(this, data),\n );\n }\n if (Object.hasOwn(this.oneTimeEvents, event)) {\n this.oneTimeEvents[event].forEach((eachEvent) =>\n eachEvent.call(this, data),\n );\n this.oneTimeEvents[event] = [];\n }\n }\n}\n","/* eslint-disable max-lines, no-ternary */\n\nimport CookieEventHandler from \"./events\";\n\n/**\n * Class to handle cookies.\n * @class Cookies\n * @constructor\n * @public\n */\nexport default class Cookies {\n /** @protected */\n defaultDomain = \"\";\n /** @protected */\n defaultPath = \"\";\n /** @protected */\n secure = true;\n /** @protected */\n preferencesKey = \"\";\n /** @protected */\n events = null;\n /** @protected */\n defaultAge = null;\n /** @protected */\n preferencesCorrectOnInit = false;\n\n /** @protected */\n tnaCookiePreferences = [\"usage\", \"settings\", \"marketing\", \"essential\"];\n\n /**\n * Create a cookie handler.\n * @param {String} [options.defaultDomain] - The domain to register the cookie with.\n * @param {String} [options.path] - The domain to register the cookie with.\n * @param {Boolean} [options.secure] - Only set cookie in HTTPS environments.\n * @param {String} [options.preferencesKey] - The name of the cookie that stores the user's preferences.\n * @param {String} [options.preferencesSetKey] - The name of the cookie that dictates whether the user's preferences have been set.\n * @param {Number} [options.defaultAge] - The default age of non-session cookies.\n * @param {Boolean} [options.noInit=false] - Don't initialise a blank cookie preference.\n */\n /* eslint-disable-next-line max-statements, */\n constructor(options = {}) {\n const {\n defaultDomain,\n defaultPath,\n secure,\n preferencesKey,\n preferencesSetKey,\n defaultAge,\n noInit = false,\n } = options;\n const docDataset = document.documentElement.dataset;\n this.defaultDomain = defaultDomain\n ? defaultDomain\n : docDataset.tnaCookiesDomain || window.location.hostname;\n this.defaultPath = defaultPath\n ? defaultPath\n : docDataset.tnaCookiesPath || \"/\";\n this.secure = secure ? secure : docDataset.tnaCookiesInsecure !== \"true\";\n this.preferencesKey = preferencesKey\n ? preferencesKey\n : docDataset.tnaCookiesPreferencesKey || \"cookie_preferences\";\n this.preferencesSetKey = preferencesSetKey\n ? preferencesSetKey\n : docDataset.tnaCookiesPreferencesSetKey || \"cookie_preferences_set\";\n this.defaultAge = defaultAge\n ? defaultAge\n : parseInt(docDataset.tnaCookiesDefaultAge, 10) ||\n /* eslint-disable-next-line no-magic-numbers */\n 365 * 24 * 60 * 60;\n this.events = new CookieEventHandler();\n this.preferencesCorrectOnInit = this.validatePreferences(this.preferences);\n if (!this.preferencesCorrectOnInit) {\n this.preferencesSet = false;\n if (!noInit) {\n this.init();\n }\n }\n }\n\n /** @protected */\n init() {\n const existingPreferences = this.preferences;\n const filteredExistingPreferences = Object.fromEntries(\n Object.keys(existingPreferences)\n .filter((preference) => this.tnaCookiePreferences.includes(preference))\n .map((preference) => [preference, existingPreferences[preference]]),\n );\n this.savePreferences({\n usage: false,\n settings: false,\n marketing: false,\n ...filteredExistingPreferences,\n essential: true,\n });\n }\n\n validatePreferences(preferences) {\n return (\n Object.keys(preferences).length === this.tnaCookiePreferences.length &&\n this.tnaCookiePreferences.every(\n (preference) =>\n Object.keys(preferences).includes(preference) &&\n typeof preferences[preference] === \"boolean\",\n )\n );\n }\n\n /** @protected */\n /* eslint-disable-next-line class-methods-use-this */\n get all() {\n const deserialised = {};\n document.cookie\n .split(\"; \")\n .filter((cookie) => cookie.trim() !== \"\")\n .filter((cookie) => cookie.includes(\"=\"))\n .forEach((cookie) => {\n const parts = cookie.trim().split(\"=\");\n const [key, value = \"\"] = parts;\n deserialised[key] = decodeURIComponent(value);\n });\n return deserialised;\n }\n\n /** @protected */\n get preferences() {\n try {\n return JSON.parse(this.get(this.preferencesKey) || \"{}\");\n // eslint-disable-next-line no-unused-vars\n } catch (error) {\n return {};\n }\n }\n\n /**\n * Check to see whether a cookie exists or not.\n * @param {String} key - The cookie name.\n * @returns {Boolean}\n */\n exists(key) {\n return Object.hasOwn(this.all, key);\n }\n\n /**\n * Check to see whether a cookie has a particular value.\n * @param {String} key - The cookie name.\n * @param {String|Number|Boolean} value - The value to check against.\n * @returns\n */\n hasValue(key, value) {\n return this.get(key) === value;\n }\n\n /**\n * Get a cookie.\n * @param {String} key - The cookie name.\n * @returns {String|Number|Boolean|null}\n */\n get(key) {\n if (this.exists(key)) {\n return decodeURIComponent(this.all[key]);\n }\n /* eslint-disable-next-line no-undefined */\n return undefined;\n }\n\n /**\n * Set a cookie.\n * @param {String} key - The cookie name.\n * @param {String|Number|Boolean} value - The cookie value.\n * @param {Object} options\n * @param {Number} [options.maxAge=this.defaultAge] - The maximum age of the cookie in seconds.\n * @param {String} [options.path=/] - The path to register the cookie for.\n * @param {String} [options.sameSite=Lax] - The sameSite attribute.\n * @param {String} [options.domain=this.defaultDomain] - The domain to register the cookie with.\n * @param {String} [options.path=this.defaultPath] - The path to register the cookie with.\n * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.\n * @param {String} [options.session=false] - Set a session cookie.\n */\n set(key, value, options = {}) {\n const {\n maxAge = this.defaultAge,\n sameSite = \"Lax\",\n domain = this.defaultDomain,\n path = this.defaultPath,\n secure = this.secure,\n session = false,\n } = options;\n if (!key) {\n return;\n }\n const secureString = secure ? \"; secure\" : \"\";\n const sessionString = session ? \"\" : `; max-age=${maxAge}`;\n const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; domain=${domain}; samesite=${sameSite}; path=${path}${sessionString}${secureString}`;\n document.cookie = cookie;\n const cookieDetails = {\n key,\n value,\n maxAge,\n path,\n sameSite,\n domain,\n secure,\n session,\n cookie,\n };\n this.events.trigger(\"setCookie\", cookieDetails);\n }\n\n /**\n * Delete a cookie.\n * @param {String} key - The cookie name.\n * @param {String} [path=/] - The path to the cookie is registered on.\n */\n delete(key, path = \"/\", domain = this.defaultDomain) {\n const options = { maxAge: -1, path, domain };\n this.set(key, \"\", options);\n this.events.trigger(\"deleteCookie\", { key, ...options });\n }\n\n /**\n * Delete all cookies.\n */\n deleteAll(path = \"/\", domain = this.defaultDomain) {\n Object.keys(this.all).forEach((cookie) => {\n this.delete(cookie, path, domain);\n });\n const details = { path, domain };\n this.events.trigger(\"deleteAllCookies\", details);\n }\n\n /**\n * Accept a preference.\n * @param {String} preference - The name of the preference.\n */\n enablePreference(preference) {\n if (!Object.hasOwn(this.preferences, preference)) {\n throw new Error(`Preference '${preference}' does not exist`);\n }\n this.setPreference(preference, true);\n this.events.trigger(\"enablePreference\", preference);\n this.events.trigger(\"changePreference\", { [preference]: true });\n }\n\n /**\n * Reject a preference.\n * @param {String} preference - The name of the preference.\n */\n disablePreference(preference) {\n if (!Object.hasOwn(this.preferences, preference)) {\n throw new Error(`Preference '${preference}' does not exist`);\n }\n this.setPreference(preference, false);\n this.events.trigger(\"disablePreference\", preference);\n this.events.trigger(\"changePreference\", { [preference]: false });\n }\n\n /**\n * Set a preference.\n * @param {String} preference - The name of the preference.\n * @param {Boolean} accepted - Whether the preference is accepted or not.\n */\n setPreference(preference, accepted) {\n if (!Object.hasOwn(this.preferences, preference)) {\n throw new Error(`Preference '${preference}' does not exist`);\n }\n if (preference === \"essential\") {\n return;\n }\n this.savePreferences({\n ...this.preferences,\n [preference]: accepted,\n essential: true,\n });\n this.events.trigger(\"changePreference\", { [preference]: accepted });\n }\n\n /**\n * Accept all the cookie preferences.\n */\n enableAllPreferences() {\n const allPreferences = Object.fromEntries(\n Object.keys(this.preferences).map((key) => [key.toLowerCase(), true]),\n );\n this.savePreferences(allPreferences);\n this.preferencesSet = true;\n this.events.trigger(\"enableAllPreferences\");\n this.events.trigger(\"changePreference\", allPreferences);\n }\n\n /**\n * Reject all the cookie preferences.\n */\n disableAllPreferences() {\n const allPreferences = {\n ...Object.fromEntries(\n Object.keys(this.preferences).map((key) => [key.toLowerCase(), false]),\n ),\n essential: true,\n };\n this.savePreferences(allPreferences);\n this.preferencesSet = true;\n this.events.trigger(\"disableAllPreferences\");\n this.events.trigger(\"changePreference\", allPreferences);\n }\n\n /** @protected */\n savePreferences(preferences) {\n this.set(this.preferencesKey, JSON.stringify(preferences));\n }\n\n /**\n * Get the status of whether the preferences have been set.\n * @returns {Boolean}\n */\n get preferencesSet() {\n return this.hasValue(this.preferencesSetKey, \"true\");\n }\n\n /**\n * Set the status of whether the preferences have been set.\n * @param {Boolean} value\n */\n set preferencesSet(value) {\n if (\n value === true &&\n this.validatePreferences(JSON.parse(this.get(this.preferencesKey)))\n ) {\n this.set(this.preferencesSetKey, \"true\");\n } else {\n this.delete(this.preferencesSetKey);\n }\n this.events.trigger(\"preferencesSet\");\n }\n\n /**\n * Get the acceptance status of a preference.\n * @param {String} preference - The name of the preference.\n * @returns {Boolean}\n */\n preference(preference) {\n if (Object.hasOwn(this.preferences, preference)) {\n return this.preferences[preference] === true;\n }\n throw new Error(`Preference '${preference}' does not exist`);\n }\n\n /**\n * Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n on(event, callback) {\n this.events.on(event, callback);\n }\n\n /**\n * Add a one-time event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n once(event, callback) {\n this.events.once(event, callback);\n }\n}\n","// The module cache\nconst __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tconst cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tconst module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Cookies from \"@nationalarchives/cookies/src/index.js\";\n\nexport { Cookies };\n\nexport class CookieBanner {\n constructor($module) {\n this.$module = $module;\n this.$acceptButton = $module && $module.querySelector('[value=\"accept\"]');\n this.$rejectButton = $module && $module.querySelector('[value=\"reject\"]');\n this.$prompt =\n $module && $module.querySelector(\".tna-cookie-banner__message--prompt\");\n this.$acceptedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--accepted\");\n this.$rejectedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--rejected\");\n this.$closeButtons = $module && $module.querySelectorAll('[value=\"close\"]');\n\n if (\n !this.$module ||\n !this.$acceptButton ||\n !this.$rejectButton ||\n !this.$prompt ||\n !this.$acceptedMessage ||\n !this.$rejectedMessage ||\n !this.$closeButtons\n ) {\n return;\n }\n\n this.cookies = new Cookies();\n\n if (!this.cookies.preferencesSet) {\n this.$module.removeAttribute(\"hidden\");\n\n this.$acceptButton.addEventListener(\"click\", () => this.accept());\n this.$rejectButton.addEventListener(\"click\", () => this.reject());\n\n this.$closeButtons.forEach(($closeButton) => {\n $closeButton.addEventListener(\"click\", () => this.close());\n });\n }\n }\n\n accept() {\n this.cookies.enableAllPreferences();\n this.showPanel(this.$acceptedMessage);\n }\n\n reject() {\n this.cookies.disableAllPreferences();\n this.showPanel(this.$rejectedMessage);\n }\n\n showPanel($panel) {\n this.$prompt.setAttribute(\"hidden\", \"\");\n $panel.removeAttribute(\"hidden\");\n $panel.setAttribute(\"tabindex\", \"0\");\n $panel.focus();\n $panel.addEventListener(\"blur\", () => {\n $panel.removeAttribute(\"tabindex\");\n });\n }\n\n close() {\n this.$module.setAttribute(\"hidden\", \"\");\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","CookieEventHandler","events","oneTimeEvents","constructor","window","TNAFrontendCookieEvents","this","clearAll","on","event","callback","once","trigger","data","Object","hasOwn","forEach","eventToTrigger","call","eachEvent","Cookies","defaultDomain","defaultPath","secure","preferencesKey","defaultAge","preferencesCorrectOnInit","tnaCookiePreferences","options","preferencesSetKey","noInit","docDataset","document","documentElement","dataset","tnaCookiesDomain","location","hostname","tnaCookiesPath","tnaCookiesInsecure","tnaCookiesPreferencesKey","tnaCookiesPreferencesSetKey","parseInt","tnaCookiesDefaultAge","validatePreferences","preferences","preferencesSet","init","existingPreferences","filteredExistingPreferences","fromEntries","keys","filter","preference","includes","map","savePreferences","usage","settings","marketing","essential","length","every","all","deserialised","cookie","split","trim","parts","key","value","decodeURIComponent","JSON","parse","get","error","exists","hasValue","set","maxAge","sameSite","domain","path","session","secureString","sessionString","encodeURIComponent","cookieDetails","deleteAll","delete","details","enablePreference","Error","setPreference","disablePreference","accepted","enableAllPreferences","allPreferences","toLowerCase","disableAllPreferences","stringify","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","o","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","CookieBanner","$module","$acceptButton","querySelector","$rejectButton","$prompt","$acceptedMessage","$rejectedMessage","$closeButtons","querySelectorAll","cookies","_nationalarchives_cookies_src_index_js__WEBPACK_IMPORTED_MODULE_0__","A","removeAttribute","addEventListener","accept","reject","$closeButton","close","showPanel","$panel","setAttribute","focus"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/date-input/date-input.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,
|
|
1
|
+
{"version":3,"file":"components/date-input/date-input.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,mBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,M,oDCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,aACHF,GAAWA,EAAQG,cAAc,+BACnCF,KAAKG,WACHH,KAAKC,cAAgBD,KAAKC,aAAaC,cAAc,SACvDF,KAAKI,cACHL,GAAWA,EAAQG,cAAc,gCACnCF,KAAKK,YACHL,KAAKI,eAAiBJ,KAAKI,cAAcF,cAAc,SACzDF,KAAKM,YACHP,GAAWA,EAAQG,cAAc,8BACnCF,KAAKO,UACHP,KAAKM,aAAeN,KAAKM,YAAYJ,cAAc,SAEhDF,KAAKD,UAIVC,KAAKQ,SACLC,OAAOC,iBAAiB,WAAY,IAAMV,KAAKQ,UAE3CR,KAAKG,aACPH,KAAKG,WAAWO,iBAAiB,QAAS,IAAMV,KAAKQ,UACrDR,KAAKG,WAAWO,iBAAiB,SAAU,IAAMV,KAAKQ,WAEpDR,KAAKK,cACPL,KAAKK,YAAYK,iBAAiB,QAAS,IAAMV,KAAKQ,UACtDR,KAAKK,YAAYK,iBAAiB,SAAU,IAAMV,KAAKQ,WAErDR,KAAKO,YACPP,KAAKO,UAAUG,iBAAiB,QAAS,IAAMV,KAAKQ,UACpDR,KAAKO,UAAUG,iBAAiB,SAAU,IAAMV,KAAKQ,WAEzD,CAEA,MAAAA,GACMR,KAAKW,eACPX,KAAKY,YACDZ,KAAKa,eACPb,KAAKc,UAELd,KAAKe,YAGPf,KAAKgB,YACLhB,KAAKe,UAET,CAEA,WAAAJ,GACE,IAAKX,KAAKG,WACR,OAAO,EAET,MAAMc,EAAYC,SAASlB,KAAKG,WAAWP,MAAMuB,OAAQ,IAEzD,OAAQC,MAAMpB,KAAKG,WAAWP,SAAWwB,MAAMH,IAAcA,EAAY,CAC3E,CAEA,YAAAJ,GACE,IAAKb,KAAKK,YACR,OAAO,EAET,MAAMgB,EAAgBrB,KAAKK,YAAYT,MAAMuB,OACvCG,EAAgBJ,SAASG,EAAe,IA0B9C,OACID,MAAMpB,KAAKK,YAAYT,SACtBwB,MAAME,IAEPA,EAAgB,GAEhBA,GAAiB,IA/BK,CACxB,UACA,WACA,QACA,QACA,MACA,OACA,OACA,SACA,YACA,UACA,WACA,WACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,OASkBC,SAASF,EAAcG,cAE7C,CAEA,SAAAZ,GACMZ,KAAKI,eACPJ,KAAKI,cAAcqB,gBAAgB,SAEvC,CAEA,SAAAT,GACMhB,KAAKI,eACPJ,KAAKI,cAAcsB,aAAa,SAAU,GAE9C,CAEA,OAAAZ,GACMd,KAAKM,aACPN,KAAKM,YAAYmB,gBAAgB,SAErC,CAEA,OAAAV,GACMf,KAAKM,aACPN,KAAKM,YAAYoB,aAAa,SAAU,GAE5C,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/date-input/date-input.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class DateInputProgressive {\n constructor($module) {\n this.$module = $module;\n this.$yearWrapper =\n $module && $module.querySelector(\".tna-date-input__item--year\");\n this.$yearInput =\n this.$yearWrapper && this.$yearWrapper.querySelector(\"input\");\n this.$monthWrapper =\n $module && $module.querySelector(\".tna-date-input__item--month\");\n this.$monthInput =\n this.$monthWrapper && this.$monthWrapper.querySelector(\"input\");\n this.$dayWrapper =\n $module && $module.querySelector(\".tna-date-input__item--day\");\n this.$dayInput =\n this.$dayWrapper && this.$dayWrapper.querySelector(\"input\");\n\n if (!this.$module) {\n return;\n }\n\n this.update();\n window.addEventListener(\"pageshow\", () => this.update());\n\n if (this.$yearInput) {\n this.$yearInput.addEventListener(\"keyup\", () => this.update());\n this.$yearInput.addEventListener(\"change\", () => this.update());\n }\n if (this.$monthInput) {\n this.$monthInput.addEventListener(\"keyup\", () => this.update());\n this.$monthInput.addEventListener(\"change\", () => this.update());\n }\n if (this.$dayInput) {\n this.$dayInput.addEventListener(\"keyup\", () => this.update());\n this.$dayInput.addEventListener(\"change\", () => this.update());\n }\n }\n\n update() {\n if (this.isValidYear()) {\n this.showMonth();\n if (this.isValidMonth()) {\n this.showDay();\n } else {\n this.hideDay();\n }\n } else {\n this.hideMonth();\n this.hideDay();\n }\n }\n\n isValidYear() {\n if (!this.$yearInput) {\n return true;\n }\n const yearValue = parseInt(this.$yearInput.value.trim(), 10);\n /* eslint-disable-next-line no-magic-numbers */\n return !isNaN(this.$yearInput.value) && !isNaN(yearValue) && yearValue > 0;\n }\n\n isValidMonth() {\n if (!this.$monthInput) {\n return true;\n }\n const monthRawValue = this.$monthInput.value.trim();\n const monthIntValue = parseInt(monthRawValue, 10);\n const validMonthStrings = [\n \"january\",\n \"february\",\n \"march\",\n \"april\",\n \"may\",\n \"june\",\n \"july\",\n \"august\",\n \"september\",\n \"october\",\n \"november\",\n \"december\",\n \"jan\",\n \"feb\",\n \"mar\",\n \"apr\",\n \"jun\",\n \"jul\",\n \"aug\",\n \"sep\",\n \"oct\",\n \"nov\",\n \"dec\",\n ];\n return (\n (!isNaN(this.$monthInput.value) &&\n !isNaN(monthIntValue) &&\n /* eslint-disable-next-line no-magic-numbers */\n monthIntValue > 0 &&\n /* eslint-disable-next-line no-magic-numbers */\n monthIntValue <= 12) ||\n validMonthStrings.includes(monthRawValue.toLowerCase())\n );\n }\n\n showMonth() {\n if (this.$monthWrapper) {\n this.$monthWrapper.removeAttribute(\"hidden\");\n }\n }\n\n hideMonth() {\n if (this.$monthWrapper) {\n this.$monthWrapper.setAttribute(\"hidden\", \"\");\n }\n }\n\n showDay() {\n if (this.$dayWrapper) {\n this.$dayWrapper.removeAttribute(\"hidden\");\n }\n }\n\n hideDay() {\n if (this.$dayWrapper) {\n this.$dayWrapper.setAttribute(\"hidden\", \"\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","DateInputProgressive","constructor","$module","this","$yearWrapper","querySelector","$yearInput","$monthWrapper","$monthInput","$dayWrapper","$dayInput","update","window","addEventListener","isValidYear","showMonth","isValidMonth","showDay","hideDay","hideMonth","yearValue","parseInt","trim","isNaN","monthRawValue","monthIntValue","includes","toLowerCase","removeAttribute","setAttribute"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/error-summary/error-summary.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,
|
|
1
|
+
{"version":3,"file":"components/error-summary/error-summary.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,mBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,M,4CCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,CACjB,CAEA,IAAAE,GACOD,KAAKD,UAKkC,SAA1CC,KAAKD,QAAQG,QAAQC,kBAGrBH,KAAKI,SAASJ,KAAKD,SAGrBC,KAAKD,QAAQM,iBAAiB,QAAUC,GAAUN,KAAKO,YAAYD,IACrE,CAGA,QAAAF,CAASI,EAAUC,EAAU,CAAC,GAC5B,MAAMC,EAAcF,EAASG,aAAa,YAS1C,SAASC,IACPH,EAAQG,QAAQnB,KAAKe,GAEhBE,GACHF,EAASK,gBAAgB,WAE7B,CAbKH,GACHF,EAASM,aAAa,WAAY,MAsBpCN,EAASH,iBAAiB,QAL1B,WACEG,EAASH,iBAAiB,OAAQO,EAAQ,CAAEG,MAAM,GACpD,EAG4C,CAAEA,MAAM,IAGpDN,EAAQO,eAAevB,KAAKe,GAC5BA,EAASS,OACX,CAEA,WAAAV,CAAYD,GACV,MAAMY,EAAUZ,EAAMa,OAClBD,GAAWlB,KAAKoB,YAAYF,IAC9BZ,EAAMe,gBAEV,CAGA,kBAAAC,CAAmBC,GACjB,OAAKA,EAAIC,SAAS,KAIXD,EAAIE,MAAM,KAAKC,MAHb,IAIX,CAEA,WAAAN,CAAYF,GAEV,KAAMA,aAAmBS,mBACvB,OAAO,EAGT,MAAMC,EAAU5B,KAAKsB,mBAAmBJ,EAAQW,MAChD,IAAKD,EACH,OAAO,EAGT,MAAME,EAASC,SAASC,eAAeJ,GACvC,IAAKE,EACH,OAAO,EAGT,MAAMG,EAAiBjC,KAAKkC,2BAA2BJ,GACvD,QAAKG,IAOLA,EAAeE,iBACfL,EAAOb,MAAM,CAAEmB,eAAe,KAEvB,EACT,CAmBA,0BAAAF,CAA2BJ,GACzB,MAAMO,EAAYP,EAAOQ,QAAQ,YAEjC,GAAID,EAAW,CACb,MAAME,EAAWF,EAAUG,qBAAqB,UAEhD,GAAID,EAASE,OAAQ,CACnB,MAAOC,GAAoBH,EAI3B,GACET,aAAkBa,mBACD,aAAhBb,EAAOc,MAAuC,UAAhBd,EAAOc,MAEtC,OAAOF,EAST,MAAMG,EAAYH,EAAiBI,wBAAwBC,IACrDC,EAAYlB,EAAOgB,wBAIzB,GAAIE,EAAUC,QAAUC,OAAOC,aACTH,EAAUD,IAAMC,EAAUC,OAG5BJ,EAAYK,OAAOC,YAAc,EACjD,OAAOT,CAGb,CACF,CAEA,OACEX,SAASqB,cAAc,cAActB,EAAOnB,aAAa,YACzDmB,EAAOQ,QAAQ,QAEnB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/error-summary/error-summary.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class ErrorSummary {\n constructor($module) {\n this.$module = $module;\n }\n\n init() {\n if (!this.$module) {\n return;\n }\n\n const disableAutoFocus =\n this.$module.dataset.disableAutofocus === \"true\" || false;\n\n if (!disableAutoFocus) {\n this.setFocus(this.$module);\n }\n\n this.$module.addEventListener(\"click\", (event) => this.handleClick(event));\n }\n\n /* eslint-disable-next-line class-methods-use-this */\n setFocus($element, options = {}) {\n const isFocusable = $element.getAttribute(\"tabindex\");\n\n if (!isFocusable) {\n $element.setAttribute(\"tabindex\", \"-1\");\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 /**\n * Handle element focus\n */\n function onFocus() {\n $element.addEventListener(\"blur\", onBlur, { once: true });\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 handleClick(event) {\n const $target = event.target;\n if ($target && this.focusTarget($target)) {\n event.preventDefault();\n }\n }\n\n /* eslint-disable-next-line class-methods-use-this */\n getFragmentFromUrl(url) {\n if (!url.includes(\"#\")) {\n return null;\n }\n\n return url.split(\"#\").pop();\n }\n\n focusTarget($target) {\n // If the element that was clicked was not a link, return early\n if (!($target instanceof HTMLAnchorElement)) {\n return false;\n }\n\n const inputId = this.getFragmentFromUrl($target.href);\n if (!inputId) {\n return false;\n }\n\n const $input = document.getElementById(inputId);\n if (!$input) {\n return false;\n }\n\n const $legendOrLabel = this.getAssociatedLegendOrLabel($input);\n if (!$legendOrLabel) {\n return false;\n }\n\n // Scroll the legend or label into view *before* calling focus on the input\n // To avoid extra scrolling in browsers that don't support `preventScroll`\n // (which at time of writing is most of them...)\n $legendOrLabel.scrollIntoView();\n $input.focus({ preventScroll: true });\n\n return true;\n }\n\n /**\n * Get associated legend or label\n *\n * Returns the first element that exists from this list:\n *\n * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long\n * as the top of it is no more than half a viewport height away from the\n * bottom of the input\n * - The first `<label>` that is associated with the input using for=\"inputId\"\n * - The closest parent `<label>`\n *\n * @private\n * @param {Element} $input - The input\n * @returns {Element | null} Associated legend or label, or null if no\n * associated legend or label can be found\n */\n /* eslint-disable-next-line class-methods-use-this */\n getAssociatedLegendOrLabel($input) {\n const $fieldset = $input.closest(\"fieldset\");\n\n if ($fieldset) {\n const $legends = $fieldset.getElementsByTagName(\"legend\");\n\n if ($legends.length) {\n const [$candidateLegend] = $legends;\n\n // If the input type is radio or checkbox, always use the legend if\n // There is one.\n if (\n $input instanceof HTMLInputElement &&\n ($input.type === \"checkbox\" || $input.type === \"radio\")\n ) {\n return $candidateLegend;\n }\n\n // For other input types, only scroll to the fieldset’s legend (instead\n // Of the label associated with the input) if the input would end up in\n // The top half of the screen.\n //\n // This should avoid situations where the input either ends up off the\n // Screen, or obscured by a software keyboard.\n const legendTop = $candidateLegend.getBoundingClientRect().top;\n const inputRect = $input.getBoundingClientRect();\n\n // If the browser doesn't support Element.getBoundingClientRect().height\n // Or window.innerHeight (like IE8), bail and just link to the label.\n if (inputRect.height && window.innerHeight) {\n const inputBottom = inputRect.top + inputRect.height;\n\n /* eslint-disable no-magic-numbers */\n if (inputBottom - legendTop < window.innerHeight / 2) {\n return $candidateLegend;\n }\n }\n }\n }\n\n return (\n document.querySelector(`label[for='${$input.getAttribute(\"id\")}']`) ??\n $input.closest(\"label\")\n );\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","ErrorSummary","constructor","$module","this","init","dataset","disableAutofocus","setFocus","addEventListener","event","handleClick","$element","options","isFocusable","getAttribute","onBlur","removeAttribute","setAttribute","once","onBeforeFocus","focus","$target","target","focusTarget","preventDefault","getFragmentFromUrl","url","includes","split","pop","HTMLAnchorElement","inputId","href","$input","document","getElementById","$legendOrLabel","getAssociatedLegendOrLabel","scrollIntoView","preventScroll","$fieldset","closest","$legends","getElementsByTagName","length","$candidateLegend","HTMLInputElement","type","legendTop","getBoundingClientRect","top","inputRect","height","window","innerHeight","querySelector"],"sourceRoot":""}
|