@ukho/admiralty-core 0.4.5 → 0.4.6

package/dist/admiralty/admiralty.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-27286b0d",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-76876a23",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-b8dc6756",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-869d7709",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-c027f79d",[[6,"admiralty-input-error"],[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}]]]],e)));
+import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-27286b0d",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-f43f9ff4",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-b154f85e",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-869d7709",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-c027f79d",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{disabled:[4],for:[1]}]]]],e)));
 //# sourceMappingURL=admiralty.esm.js.map

package/dist/admiralty/admiralty.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","value","label","hint","placeholder","resultsOnInitFocus","filterResult","disabled","error","errorHint","width","maxLength","invalid","invalidMessage","height","heading","colour","clickAction","actionText","filterTitle","groupTitle","pages","currentPage","active","first","type","multiple","files","headerTitle","headerTitleUrl","logoLinkUrl","logoImgUrl","logoAltText","mobileMenuOpen","displayHamburger","progression","progressionValue","expanded","checkboxRight","name","checked","labelText","imageLink","imageSrc","imageAlt","text","menuTitle","isSignedIn","signedInText","newTab","phase","link","buttonTabindex","setButtonTabindex","displayVertical","sideNavItemId","headingTitle","navActive","tabLabelId","tabContentId","selectedIndex","caption","iconName","iconPrefix","required","autocomplete","alignHeadingRight","hideBorder","variant","icon","for"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAc,0CAAuC,CAAAC,MAAA,IAAAC,MAAA,IAAAC,KAAA,IAAAC,YAAA,IAAAC,mBAAA,4BAAAC,aAAA,+CAAAC,SAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAN,KAAA,IAAAD,MAAA,IAAAQ,MAAA,IAAAT,MAAA,mDAAAC,MAAA,IAAAC,KAAA,IAAAO,MAAA,IAAAC,UAAA,iBAAAJ,SAAA,IAAAK,QAAA,IAAAC,eAAA,sBAAAZ,MAAA,uDAAAS,MAAA,IAAAI,OAAA,IAAAC,QAAA,IAAAC,OAAA,IAAAC,YAAA,KAAAC,WAAA,4DAAAC,YAAA,mEAAAC,WAAA,+DAAAC,MAAA,IAAAC,YAAA,mBAAApB,MAAA,kDAAAqB,OAAA,IAAAC,MAAA,IAAA5B,KAAA,gDAAA6B,KAAA,IAAAV,QAAA,kDAAAb,MAAA,IAAAwB,SAAA,IAAAC,MAAA,+CAAAC,YAAA,mBAAAC,eAAA,uBAAAC,YAAA,oBAAAC,WAAA,mBAAAC,YAAA,oBAAAC,eAAA,KAAAC,iBAAA,qDAAAhC,MAAA,IAAAiC,YAAA,IAAA3B,MAAA,IAAA4B,iBAAA,kDAAArB,QAAA,IAAAsB,SAAA,0FAAAtB,QAAA,gDAAAuB,cAAA,qBAAA/B,SAAA,IAAAgC,KAAA,IAAAC,QAAA,OAAAvC,MAAA,IAAAwC,UAAA,2DAAAC,UAAA,iBAAAC,SAAA,gBAAAC,SAAA,gBAAAC,KAAA,wDAAAC,UAAA,iBAAAvB,OAAA,sDAAAwB,WAAA,mBAAAC,aAAA,6EAAAF,UAAA,6FAAAlD,KAAA,IAAAqD,OAAA,8JAAAC,MAAA,IAAAC,KAAA,6CAAAZ,KAAA,IAAAtC,MAAA,OAAAM,SAAA,IAAAiC,QAAA,OAAAY,eAAA,KAAAC,kBAAA,oDAAAd,KAAA,IAAAtC,MAAA,OAAAqD,gBAAA,mEAAApD,MAAA,qDAAAqD,cAAA,uBAAAC,aAAA,oBAAAC,UAAA,mKAAAvD,MAAA,IAAAwD,WAAA,mBAAAC,aAAA,kEAAAC,cAAA,iEAAAC,QAAA,2RAAA5D,MAAA,4CAAA6D,SAAA,gBAAAC,WAAA,2DAAAxB,KAAA,IAAArC,MAAA,IAAAC,KAAA,IAAAI,SAAA,IAAAkB,KAAA,IAAArB,YAAA,IAAAM,MAAA,IAAAC,UAAA,iBAAAqD,SAAA,IAAApD,QAAA,IAAAC,eAAA,sBAAAoD,aAAA,IAAAhE,MAAA,oDAAAc,QAAA,IAAAsB,SAAA,OAAA6B,kBAAA,0BAAAC,WAAA,4DAAAC,QAAA,IAAAC,KAAA,IAAA9D,SAAA,MAAAkB,KAAA,wEAAAlB,SAAA,4BAAAA,SAAA,IAAA+D,IAAA,SAAAvE"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","value","label","hint","placeholder","resultsOnInitFocus","filterResult","disabled","error","errorHint","width","maxLength","invalid","invalidMessage","height","heading","colour","clickAction","actionText","filterTitle","groupTitle","pages","currentPage","name","displayVertical","active","first","type","multiple","files","headerTitle","headerTitleUrl","logoLinkUrl","logoImgUrl","logoAltText","mobileMenuOpen","displayHamburger","progression","progressionValue","expanded","checkboxRight","checked","labelText","imageLink","imageSrc","imageAlt","text","menuTitle","isSignedIn","signedInText","newTab","phase","link","buttonTabindex","setButtonTabindex","sideNavItemId","headingTitle","navActive","tabLabelId","tabContentId","selectedIndex","caption","iconName","iconPrefix","required","autocomplete","alignHeadingRight","hideBorder","variant","icon","for"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAc,0CAAuC,CAAAC,MAAA,IAAAC,MAAA,IAAAC,KAAA,IAAAC,YAAA,IAAAC,mBAAA,4BAAAC,aAAA,+CAAAC,SAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAN,KAAA,IAAAD,MAAA,IAAAQ,MAAA,IAAAT,MAAA,mDAAAC,MAAA,IAAAC,KAAA,IAAAO,MAAA,IAAAC,UAAA,iBAAAJ,SAAA,IAAAK,QAAA,IAAAC,eAAA,sBAAAZ,MAAA,uDAAAS,MAAA,IAAAI,OAAA,IAAAC,QAAA,IAAAC,OAAA,IAAAC,YAAA,KAAAC,WAAA,4DAAAC,YAAA,mEAAAC,WAAA,+DAAAC,MAAA,IAAAC,YAAA,mBAAApB,MAAA,mDAAAqB,KAAA,IAAAtB,MAAA,OAAAuB,gBAAA,uBAAAZ,QAAA,IAAAC,eAAA,oEAAAY,OAAA,IAAAC,MAAA,IAAA9B,KAAA,gDAAA+B,KAAA,IAAAZ,QAAA,kDAAAb,MAAA,IAAA0B,SAAA,IAAAC,MAAA,+CAAAC,YAAA,mBAAAC,eAAA,uBAAAC,YAAA,oBAAAC,WAAA,mBAAAC,YAAA,oBAAAC,eAAA,KAAAC,iBAAA,qDAAAlC,MAAA,IAAAmC,YAAA,IAAA7B,MAAA,IAAA8B,iBAAA,kDAAAvB,QAAA,IAAAwB,SAAA,0FAAAxB,QAAA,gDAAAyB,cAAA,qBAAAjC,SAAA,IAAAgB,KAAA,IAAAkB,QAAA,OAAAxC,MAAA,IAAAyC,UAAA,2DAAAC,UAAA,iBAAAC,SAAA,gBAAAC,SAAA,gBAAAC,KAAA,wDAAAC,UAAA,iBAAAtB,OAAA,sDAAAuB,WAAA,mBAAAC,aAAA,6EAAAF,UAAA,6FAAAnD,KAAA,IAAAsD,OAAA,8JAAAC,MAAA,IAAAC,KAAA,6CAAA7B,KAAA,IAAAtB,MAAA,OAAAM,SAAA,IAAAkC,QAAA,OAAA7B,QAAA,IAAAyC,eAAA,KAAAC,kBAAA,iDAAApD,MAAA,qDAAAqD,cAAA,uBAAAC,aAAA,oBAAAC,UAAA,mKAAAvD,MAAA,IAAAwD,WAAA,mBAAAC,aAAA,kEAAAC,cAAA,iEAAAC,QAAA,2RAAA5D,MAAA,4CAAA6D,SAAA,gBAAAC,WAAA,2DAAAxC,KAAA,IAAArB,MAAA,IAAAC,KAAA,IAAAI,SAAA,IAAAoB,KAAA,IAAAvB,YAAA,IAAAM,MAAA,IAAAC,UAAA,iBAAAqD,SAAA,IAAApD,QAAA,IAAAC,eAAA,sBAAAoD,aAAA,IAAAhE,MAAA,oDAAAc,QAAA,IAAAwB,SAAA,OAAA2B,kBAAA,0BAAAC,WAAA,4DAAAC,QAAA,IAAAC,KAAA,IAAA9D,SAAA,MAAAoB,KAAA,4CAAApB,SAAA,wDAAAA,SAAA,IAAA+D,IAAA,SAAAvE"}

package/dist/admiralty/p-b154f85e.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as a,h as t,H as d,g as r}from"./p-a2b7bb90.js";const s='.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:#e20d0d}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid #ffdd00}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:" "}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:"JohnstonITC", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}';const e=class{constructor(t){i(this,t);this.admiraltyFocus=a(this,"admiraltyFocus",7);this.admiraltyBlur=a(this,"admiraltyBlur",7);this.admiraltyChange=a(this,"admiraltyChange",7);this.inputId=`admiralty-radio-${l++}`;this.radioGroup=null;this.updateState=()=>{if(this.radioGroup){this.checked=this.radioGroup.value===this.value;if(this.nativeInput&&this.checked){this.nativeInput.focus()}}};this.onClick=()=>{this.checked=this.nativeInput.checked};this.onFocus=()=>{this.admiraltyFocus.emit()};this.onBlur=()=>{this.admiraltyBlur.emit()};this.buttonTabindex=-1;this.name=this.inputId;this.value=undefined;this.disabled=false;this.checked=false;this.invalid=false}valueChanged(){this.updateState()}connectedCallback(){if(this.value===undefined){this.value=this.inputId}const i=this.radioGroup=this.el.closest("admiralty-radio-group");if(i){this.updateState();i.addEventListener("admiraltyChange",this.updateState)}}disconnectedCallback(){const i=this.radioGroup;if(i){i.removeEventListener("admiraltyChange",this.updateState);this.radioGroup=null}}async setButtonTabindex(i){this.buttonTabindex=i}render(){const{buttonTabindex:i,checked:a,disabled:r,inputId:s,name:e,value:l}=this;return t(d,null,t("div",{class:"admiralty-radio"},t("input",{class:{invalid:this.invalid,"admiralty-radio":true},"aria-checked":`${a}`,"aria-hidden":r?"true":null,"aria-labelledby":s,id:s,name:e,tabindex:i,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,type:"radio",value:l,checked:a,disabled:r?true:null,ref:i=>this.nativeInput=i}),t("label",{htmlFor:s},t("slot",null))))}get el(){return r(this)}static get watchers(){return{value:["valueChanged"],checked:["render"],disabled:["render"]}}};let l=0;e.style=s;export{e as admiralty_radio};
+//# sourceMappingURL=p-b154f85e.entry.js.map

package/dist/admiralty/p-b154f85e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioCss","RadioComponent","this","inputId","radioButtonIds","radioGroup","updateState","checked","value","nativeInput","focus","onClick","onFocus","admiraltyFocus","emit","onBlur","admiraltyBlur","valueChanged","connectedCallback","undefined","el","closest","addEventListener","disconnectedCallback","removeEventListener","async","buttonTabindex","render","disabled","name","h","Host","class","invalid","id","tabindex","type","ref","nativeEl","htmlFor"],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n  input {\n    appearance: none;\n    border: 2px solid colours.$colour-admiralty-blue;\n    border-radius: 1rem;\n    height: 1.5rem;\n    width: 1.5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    margin-right: 18px;\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &:checked:after {\n      border-radius: 100%;\n      background-color: colours.$colour-admiralty-blue;\n      width: .8rem;\n      height: .8rem;\n      content: \" \";\n    }\n\n    &:disabled {\n      border: 2px solid colours.$colour-textinput-text-disabled;\n    }\n\n    &:focus {\n      outline: 3px solid colours.$colour-utility-focus;\n      outline-offset: 0;\n    }\n  }\n  label {\n    font-family: typography.$font-family;\n    font-weight: typography.$font-weight-light;\n    position: relative;\n    top: 2px;\n  }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Determines whether to add the invalid stying to the radio button\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio is selected\n   */\n  @Event() admiraltyChange!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    /**\n     * The new value of the radio may\n     * match the radio group's value,\n     * so we see if it should be checked.\n     */\n    this.updateState();\n  }\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n      radioGroup.addEventListener('admiraltyChange', this.updateState);\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      radioGroup.removeEventListener('admiraltyChange', this.updateState);\n      this.radioGroup = null;\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n      if (this.nativeInput && this.checked) {\n        this.nativeInput.focus();\n      }\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"gEAAA,MAAMA,EAAW,09B,MCOJC,EAAc,M,sKACjBC,KAAAC,QAAU,mBAAmBC,MAE7BF,KAAAG,WAAoD,KAoFpDH,KAAAI,YAAc,KACpB,GAAIJ,KAAKG,WAAY,CACnBH,KAAKK,QAAUL,KAAKG,WAAWG,QAAUN,KAAKM,MAC9C,GAAIN,KAAKO,aAAeP,KAAKK,QAAS,CACpCL,KAAKO,YAAYC,O,IAKfR,KAAAS,QAAU,KAChBT,KAAKK,QAAUL,KAAKO,YAAYF,OAAO,EAGjCL,KAAAU,QAAU,KAChBV,KAAKW,eAAeC,MAAM,EAGpBZ,KAAAa,OAAS,KACfb,KAAKc,cAAcF,MAAM,E,qBA9FA,E,UAKJZ,KAAKC,Q,mCAQC,M,aAKgB,M,aAKlB,K,CAkB3Bc,eAMEf,KAAKI,a,CAGPY,oBACE,GAAIhB,KAAKM,QAAUW,UAAW,CAC5BjB,KAAKM,MAAQN,KAAKC,O,CAEpB,MAAME,EAAcH,KAAKG,WAAaH,KAAKkB,GAAGC,QAAQ,yBAEtD,GAAIhB,EAAY,CACdH,KAAKI,cACLD,EAAWiB,iBAAiB,kBAAmBpB,KAAKI,Y,EAIxDiB,uBACE,MAAMlB,EAAaH,KAAKG,WACxB,GAAIA,EAAY,CACdA,EAAWmB,oBAAoB,kBAAmBtB,KAAKI,aACvDJ,KAAKG,WAAa,I,EAMtBoB,wBAAwBjB,GACtBN,KAAKwB,eAAiBlB,C,CA0BxBmB,SACE,MAAMD,eAAEA,EAAcnB,QAAEA,EAAOqB,SAAEA,EAAQzB,QAAEA,EAAO0B,KAAEA,EAAIrB,MAAEA,GAAUN,KAEpE,OACE4B,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,mBACTF,EAAA,SACEE,MAAO,CAAEC,QAAW/B,KAAK+B,QAAS,kBAAmB,MAAM,eAC7C,GAAG1B,IAAS,cACbqB,EAAW,OAAS,KAAI,kBACpBzB,EACjB+B,GAAI/B,EACJ0B,KAAMA,EACNM,SAAUT,EACVd,QAASV,KAAKU,QACdG,OAAQb,KAAKa,OACbJ,QAAST,KAAKS,QACdyB,KAAK,QACL5B,MAAOA,EACPD,QAASA,EACTqB,SAAUA,EAAW,KAAO,KAC5BS,IAAKC,GAAapC,KAAKO,YAAc6B,IAEvCR,EAAA,SAAOS,QAASpC,GACd2B,EAAA,e,uHAQZ,IAAI1B,EAAiB,E"}

package/dist/admiralty/p-f43f9ff4.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as a,H as s,g as r}from"./p-a2b7bb90.js";const o=".radio-group.sc-admiralty-radio-group{display:flex;flex-direction:row}.radio-group.sc-admiralty-radio-group-s>*,.radio-group .sc-admiralty-radio-group-s>*{margin-right:2em !important}.stack.sc-admiralty-radio-group{flex-direction:column}.stack.sc-admiralty-radio-group-s>*,.stack .sc-admiralty-radio-group-s>*{margin-bottom:10px !important}";const d=class{constructor(a){i(this,a);this.admiraltyChange=t(this,"admiraltyChange",7);this.inputId=`admiralty-rg-${n++}`;this.setRadioTabindex=i=>{const t=this.getRadios();const a=t.find((i=>!i.disabled));const s=t.find((t=>t.value===i&&!t.disabled));if(!a&&!s){return}const r=s||a;for(const i of t){const t=i===r?0:-1;i.setButtonTabindex(t)}};this.onClick=i=>{const t=i.target&&i.target.closest("admiralty-radio");if(t){const i=this.value;const a=t.value;if(a!==i){this.value=a}}};this.name=this.inputId;this.value=undefined;this.displayVertical=false;this.invalid=false;this.invalidMessage=undefined}valueChanged(i){this.setRadioTabindex(i);this.admiraltyChange.emit({value:i})}invalidChanged(i){this.getRadios().forEach((t=>{if(i){t.setAttribute("invalid","true")}else{t.removeAttribute("invalid")}}))}componentDidLoad(){this.setRadioTabindex(this.value);this.invalidChanged(this.invalid)}getRadios(){return Array.from(this.el.querySelectorAll("admiralty-radio"))}render(){const{displayVertical:i}=this;return a(s,null,a("div",{class:{"radio-group":true,stack:i},role:"radiogroup",onClick:this.onClick},a("slot",null),a("admiralty-input-error",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage)))}get el(){return r(this)}static get watchers(){return{value:["valueChanged"],invalid:["invalidChanged"]}}};let n=0;d.style=o;export{d as admiralty_radio_group};
+//# sourceMappingURL=p-f43f9ff4.entry.js.map

package/dist/admiralty/p-f43f9ff4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioGroupCss","RadioGroupComponent","this","inputId","radioGroupIds","setRadioTabindex","value","radios","getRadios","first","find","radio","disabled","checked","focusable","tabindex","setButtonTabindex","onClick","e","selectedRadio","target","closest","currentValue","newValue","valueChanged","admiraltyChange","emit","invalidChanged","forEach","setAttribute","removeAttribute","componentDidLoad","invalid","Array","from","el","querySelectorAll","render","displayVertical","h","Host","class","stack","role","style","visibility","invalidMessage"],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n  display: flex;\n  flex-direction: row;\n\n  ::slotted(*) {\n    margin-right: 2em !important;\n  }\n}\n\n.stack {\n  flex-direction: column;\n\n  ::slotted(*) {\n    margin-bottom: 10px !important;\n  }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('invalid')\n  invalidChanged(value: boolean) {\n    this.getRadios().forEach(radio => {\n      if (value) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n    this.invalidChanged(this.invalid);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): HTMLAdmiraltyRadioElement[] {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n          <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"mappings":"gEAAA,MAAMA,EAAgB,uV,MCQTC,EAAmB,M,0EACtBC,KAAAC,QAAU,gBAAgBC,MAwD1BF,KAAAG,iBAAoBC,IAC1B,MAAMC,EAASL,KAAKM,YAGpB,MAAMC,EAAQF,EAAOG,MAAKC,IAAUA,EAAMC,WAC1C,MAAMC,EAAUN,EAAOG,MAAKC,GAASA,EAAML,QAAUA,IAAUK,EAAMC,WAErE,IAAKH,IAAUI,EAAS,CACtB,M,CAKF,MAAMC,EAAYD,GAAWJ,EAE7B,IAAK,MAAME,KAASJ,EAAQ,CAC1B,MAAMQ,EAAWJ,IAAUG,EAAY,GAAK,EAC5CH,EAAMK,kBAAkBD,E,GAOpBb,KAAAe,QAAWC,IACjB,MAAMC,EAAgBD,EAAEE,QAAWF,EAAEE,OAAuBC,QAAQ,mBAEpE,GAAIF,EAAe,CACjB,MAAMG,EAAepB,KAAKI,MAC1B,MAAMiB,EAAWJ,EAAcb,MAE/B,GAAIiB,IAAaD,EAAc,CAC7BpB,KAAKI,MAAQiB,C,cAjFIrB,KAAKC,Q,0CAUO,M,aAKR,M,8BAQ3BqB,aAAalB,GACXJ,KAAKG,iBAAiBC,GACtBJ,KAAKuB,gBAAgBC,KAAK,CAAEpB,S,CAS9BqB,eAAerB,GACbJ,KAAKM,YAAYoB,SAAQjB,IACvB,GAAIL,EAAO,CACTK,EAAMkB,aAAa,UAAW,O,KACzB,CACLlB,EAAMmB,gBAAgB,U,KAK5BC,mBACE7B,KAAKG,iBAAiBH,KAAKI,OAC3BJ,KAAKyB,eAAezB,KAAK8B,Q,CAwBnBxB,YACN,OAAOyB,MAAMC,KAAKhC,KAAKiC,GAAGC,iBAAiB,mB,CAe7CC,SACE,MAAMC,gBAAEA,GAAoBpC,KAE5B,OACEqC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,CAAE,cAAe,KAAMC,MAASJ,GAAmBK,KAAK,aAAa1B,QAASf,KAAKe,SAC7FsB,EAAA,aACAA,EAAA,yBAAuBK,MAAO,CAAEC,WAAY3C,KAAK8B,SAAW9B,KAAK4C,eAAiB,UAAY,WAAa5C,KAAK4C,iB,2GAO1H,IAAI1C,EAAwB,E"}

package/dist/cjs/admiralty-radio-group.cjs.entry.js

@@ -40,24 +40,38 @@ const RadioGroupComponent = class {
     this.name = this.inputId;
     this.value = undefined;
     this.displayVertical = false;
+    this.invalid = false;
+    this.invalidMessage = undefined;
   }
   valueChanged(value) {
     this.setRadioTabindex(value);
     this.admiraltyChange.emit({ value });
   }
+  invalidChanged(value) {
+    this.getRadios().forEach(radio => {
+      if (value) {
+        radio.setAttribute('invalid', 'true');
+      }
+      else {
+        radio.removeAttribute('invalid');
+      }
+    });
+  }
   componentDidLoad() {
     this.setRadioTabindex(this.value);
+    this.invalidChanged(this.invalid);
   }
   getRadios() {
     return Array.from(this.el.querySelectorAll('admiralty-radio'));
   }
   render() {
     const { displayVertical } = this;
-    return (index.h(index.Host, null, index.h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, index.h("slot", null), index.h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["valueChanged"]
+    "value": ["valueChanged"],
+    "invalid": ["invalidChanged"]
   }; }
 };
 let radioGroupIds = 0;

package/dist/cjs/admiralty-radio-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAkC5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;KACF,CAAC;gBA9DqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpGA,qBAAa,CACT,CACD,EACP;GACH;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n  display: flex;\n  flex-direction: row;\n\n  ::slotted(*) {\n    margin-right: 2em !important;\n  }\n}\n\n.stack {\n  flex-direction: column;\n\n  ::slotted(*) {\n    margin-bottom: 10px !important;\n  }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): any {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
+{"file":"admiralty-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;KACF,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpGA,qBAAa,EACbA,mCAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,CACD,EACP;GACH;;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n  display: flex;\n  flex-direction: row;\n\n  ::slotted(*) {\n    margin-right: 2em !important;\n  }\n}\n\n.stack {\n  flex-direction: column;\n\n  ::slotted(*) {\n    margin-bottom: 10px !important;\n  }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('invalid')\n  invalidChanged(value: boolean) {\n    this.getRadios().forEach(radio => {\n      if (value) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n    this.invalidChanged(this.invalid);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): HTMLAdmiraltyRadioElement[] {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n          <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}

package/dist/cjs/admiralty-radio.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b824133.js');
 
-const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
+const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:#e20d0d}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid #ffdd00}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
 
 const RadioComponent = class {
   constructor(hostRef) {
@@ -36,6 +36,7 @@ const RadioComponent = class {
     this.value = undefined;
     this.disabled = false;
     this.checked = false;
+    this.invalid = false;
   }
   valueChanged() {
     /**
@@ -68,7 +69,7 @@ const RadioComponent = class {
   }
   render() {
     const { buttonTabindex, checked, disabled, inputId, name, value } = this;
-    return (index.h(index.Host, null, index.h("div", { class: "admiralty-radio" }, index.h("input", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: "admiralty-radio", type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), index.h("label", { htmlFor: inputId }, index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("div", { class: "admiralty-radio" }, index.h("input", { class: { 'invalid': this.invalid, 'admiralty-radio': true }, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), index.h("label", { htmlFor: inputId }, index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/admiralty-radio.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-radio.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IA+EzD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QACpD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE;UACpC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;SAC1B;OACF;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;KACzC,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;0BA1FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAkBlD,YAAY;;;;;;IAMV,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEhF,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAClE;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACpE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;;EAID,MAAM,iBAAiB,CAAC,KAAa;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAyBD,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEzE,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mCACgB,GAAG,OAAO,EAAE,iBACb,QAAQ,GAAG,MAAM,GAAG,IAAI,qBACpB,OAAO,EACxB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAChC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,WAAW,GAAG,QAA4B,CAAC,GAClE,EACFA,mBAAO,OAAO,EAAE,OAAO,IACrBA,qBAAQ,CACF,CACJ,CACD,EACP;GACH;;;;;;;;AAGH,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n  input {\n    appearance: none;\n    border: 2px solid colours.$colour-admiralty-blue;\n    border-radius: 1rem;\n    height: 1.5rem;\n    width: 1.5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    margin-right: 18px;\n\n    &:checked:after {\n        border-radius: 100%;\n        background-color: colours.$colour-admiralty-blue;\n        width: .8rem;\n        height: .8rem;\n        content: \" \";\n      }\n\n      &:disabled {\n        border: 2px solid colours.$colour-textinput-text-disabled;\n      }\n\n      &:focus {\n        outline: 3px solid colours.$colour-utility-focus;\n        outline-offset: 0;\n      }\n  }\n\n  label {\n    font-family: typography.$font-family;\n    font-weight: typography.$font-weight-light;\n    position: relative;\n    top: 2px;\n  }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio is selected\n   */\n  @Event() admiraltyChange!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    /**\n     * The new value of the radio may\n     * match the radio group's value,\n     * so we see if it should be checked.\n     */\n    this.updateState();\n  }\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n      radioGroup.addEventListener('admiraltyChange', this.updateState);\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      radioGroup.removeEventListener('admiraltyChange', this.updateState);\n      this.radioGroup = null;\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n      if (this.nativeInput && this.checked) {\n        this.nativeInput.focus();\n      }\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            class=\"admiralty-radio\"\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
+{"file":"admiralty-radio.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n  input {\n    appearance: none;\n    border: 2px solid colours.$colour-admiralty-blue;\n    border-radius: 1rem;\n    height: 1.5rem;\n    width: 1.5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    margin-right: 18px;\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &:checked:after {\n      border-radius: 100%;\n      background-color: colours.$colour-admiralty-blue;\n      width: .8rem;\n      height: .8rem;\n      content: \" \";\n    }\n\n    &:disabled {\n      border: 2px solid colours.$colour-textinput-text-disabled;\n    }\n\n    &:focus {\n      outline: 3px solid colours.$colour-utility-focus;\n      outline-offset: 0;\n    }\n  }\n  label {\n    font-family: typography.$font-family;\n    font-weight: typography.$font-weight-light;\n    position: relative;\n    top: 2px;\n  }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Determines whether to add the invalid stying to the radio button\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio is selected\n   */\n  @Event() admiraltyChange!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    /**\n     * The new value of the radio may\n     * match the radio group's value,\n     * so we see if it should be checked.\n     */\n    this.updateState();\n  }\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n      radioGroup.addEventListener('admiraltyChange', this.updateState);\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      radioGroup.removeEventListener('admiraltyChange', this.updateState);\n      this.radioGroup = null;\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n      if (this.nativeInput && this.checked) {\n        this.nativeInput.focus();\n      }\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}

package/dist/cjs/admiralty.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-input-error"],[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-input-error"],[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
   });
 };
 

package/dist/collection/components/radio/radio.css

@@ -27,6 +27,13 @@
   vertical-align: middle;
   margin-right: 18px;
 }
+.admiralty-radio input.invalid {
+  border-color: #e20d0d;
+}
+.admiralty-radio input.invalid:focus-visible {
+  border-color: unset;
+  outline: 3px solid #ffdd00;
+}
 .admiralty-radio input:checked:after {
   border-radius: 100%;
   background-color: #09315b;

package/dist/collection/components/radio/radio.js

@@ -25,6 +25,7 @@ export class RadioComponent {
     this.value = undefined;
     this.disabled = false;
     this.checked = false;
+    this.invalid = false;
   }
   valueChanged() {
     /**
@@ -57,7 +58,7 @@ export class RadioComponent {
   }
   render() {
     const { buttonTabindex, checked, disabled, inputId, name, value } = this;
-    return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: "admiralty-radio", type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), h("label", { htmlFor: inputId }, h("slot", null)))));
+    return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { class: { 'invalid': this.invalid, 'admiralty-radio': true }, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), h("label", { htmlFor: inputId }, h("slot", null)))));
   }
   static get is() { return "admiralty-radio"; }
   static get encapsulation() { return "scoped"; }
@@ -143,6 +144,24 @@ export class RadioComponent {
         "attribute": "checked",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether to add the invalid stying to the radio button"
+        },
+        "attribute": "invalid",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio is selected\n   */\n  @Event() admiraltyChange!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    /**\n     * The new value of the radio may\n     * match the radio group's value,\n     * so we see if it should be checked.\n     */\n    this.updateState();\n  }\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n      radioGroup.addEventListener('admiraltyChange', this.updateState);\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      radioGroup.removeEventListener('admiraltyChange', this.updateState);\n      this.radioGroup = null;\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n      if (this.nativeInput && this.checked) {\n        this.nativeInput.focus();\n      }\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            class=\"admiralty-radio\"\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Determines whether to add the invalid stying to the radio button\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio is selected\n   */\n  @Event() admiraltyChange!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    /**\n     * The new value of the radio may\n     * match the radio group's value,\n     * so we see if it should be checked.\n     */\n    this.updateState();\n  }\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n      radioGroup.addEventListener('admiraltyChange', this.updateState);\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      radioGroup.removeEventListener('admiraltyChange', this.updateState);\n      this.radioGroup = null;\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n      if (this.nativeInput && this.checked) {\n        this.nativeInput.focus();\n      }\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"]}

package/dist/collection/components/radio-group/radio-group.js

@@ -31,20 +31,33 @@ export class RadioGroupComponent {
     this.name = this.inputId;
     this.value = undefined;
     this.displayVertical = false;
+    this.invalid = false;
+    this.invalidMessage = undefined;
   }
   valueChanged(value) {
     this.setRadioTabindex(value);
     this.admiraltyChange.emit({ value });
   }
+  invalidChanged(value) {
+    this.getRadios().forEach(radio => {
+      if (value) {
+        radio.setAttribute('invalid', 'true');
+      }
+      else {
+        radio.removeAttribute('invalid');
+      }
+    });
+  }
   componentDidLoad() {
     this.setRadioTabindex(this.value);
+    this.invalidChanged(this.invalid);
   }
   getRadios() {
     return Array.from(this.el.querySelectorAll('admiralty-radio'));
   }
   render() {
     const { displayVertical } = this;
-    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null))));
+    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   static get is() { return "admiralty-radio-group"; }
   static get encapsulation() { return "scoped"; }
@@ -112,6 +125,41 @@ export class RadioGroupComponent {
         "attribute": "display-vertical",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show the input in an invalid state"
+        },
+        "attribute": "invalid",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "invalidMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The message to show when the input is invalid"
+        },
+        "attribute": "invalid-message",
+        "reflect": false
       }
     };
   }
@@ -143,6 +191,9 @@ export class RadioGroupComponent {
     return [{
         "propName": "value",
         "methodName": "valueChanged"
+      }, {
+        "propName": "invalid",
+        "methodName": "invalidChanged"
       }];
   }
 }

package/dist/collection/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,KAAK,EAAE,MAAM,eAAe,CAAC;AAQlH,MAAM,OAAO,mBAAmB;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAkC5C,qBAAgB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACpD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;MAEhC,+DAA+D;MAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;MAED,uEAAuE;MACvE,gDAAgD;MAChD,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;IACH,CAAC,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;MAC7B,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;IACH,CAAC,CAAC;gBA9DqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;EACvC,CAAC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;EACjE,CAAC;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACpG,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,aAAa,GAAW,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): any {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('invalid')\n  invalidChanged(value: boolean) {\n    this.getRadios().forEach(radio => {\n      if (value) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n    this.invalidChanged(this.invalid);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): HTMLAdmiraltyRadioElement[] {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n          <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"]}